Web前端之网页导航----手把手教你做导航(图,代码)
2012-11-27 21:26
197 查看
之前的文章写了很多关于导航的,感觉每个导航总有一些差别,不全面,现在就系统点,基本上每个导航都是这样写的。
试验要求:做成横排的导航,用CSS,手写代码,禁止用垃圾dreamweaver(你懂得)
①
说明:用无序列表写出导航的几个选项,浏览器显示如左图,代码为右。下同
②
说明: list-style: none;是将左边的小圆点去除;float: left; 是将竖排的编程横排,但是,请仔细观察,background: #FFCB2D; 为什么没背景了呢?
③
因为浮动的<li>是通过文档流布局自然生成的,无法撑开外围那个定义了背景色的<ul>;换句话说,就是因为<ul>
的内部对象是浮动的,所以无法确定自身外围高度。修正方法,让<ul>也浮动起来,这样,空间便被各个<li>元素
填满了。为了避免浮动元素将自己的内容折行,将ul设这了宽度。
④
display: block;是将整个选项卡都可以被点击。块级是独占一行的,所以float: left;
⑤
鼠标悬浮在选项卡的状态,搞定。
搞定了,欢迎批评。有什么意见也欢迎提出来。
参考资料:《无懈可击的Web设计》,其实自己看多了都会写的,只是人家的语言组织的好。
试验要求:做成横排的导航,用CSS,手写代码,禁止用垃圾dreamweaver(你懂得)
①
说明:用无序列表写出导航的几个选项,浏览器显示如左图,代码为右。下同
②
说明: list-style: none;是将左边的小圆点去除;float: left; 是将竖排的编程横排,但是,请仔细观察,background: #FFCB2D; 为什么没背景了呢?
③
因为浮动的<li>是通过文档流布局自然生成的,无法撑开外围那个定义了背景色的<ul>;换句话说,就是因为<ul>
的内部对象是浮动的,所以无法确定自身外围高度。修正方法,让<ul>也浮动起来,这样,空间便被各个<li>元素
填满了。为了避免浮动元素将自己的内容折行,将ul设这了宽度。
④
display: block;是将整个选项卡都可以被点击。块级是独占一行的,所以float: left;
⑤
鼠标悬浮在选项卡的状态,搞定。
搞定了,欢迎批评。有什么意见也欢迎提出来。
参考资料:《无懈可击的Web设计》,其实自己看多了都会写的,只是人家的语言组织的好。
相关文章推荐
- Web前端之网页导航----搜导航狐邮箱(float)
- Web前端之网页导航----豌豆荚
- web前端基础案例-简短代码制作爱奇艺首页导航轮播特效
- Web前端之网页导航----创新工场
- Web前端之网页导航----126邮箱(关于position)
- WEB前端网页返回代码常见值
- web前端网页特效大全导航列表
- [下载]web前端网页设计必备:最新50套免费高质量icon图标集
- 【代码规范】Web前端开发规范文档!!!
- 网页前端界面代码还要写? 不用写了
- httpclient学习1---获取网页前端代码
- 编写高质量代码—Web前端开发啊修炼之道(二)
- 网页二维码生成器纯js代码带logo图纯前端合成
- Web前端开发实战5:导航菜单(二)
- 【Web前端学习笔记】Javascript_03_常用对象:String,Number,Math,Date,网页时针
- web前端基础:清除浮动代码
- Web前端代码构建优化
- 前端项目模块化的实践2:使用 Webpack 打包基础设施代码
- CSS世界:web前端开发,CSS3+HTML5网页制作
- Web前端开发学习3:SEO代码优化