Web前端之网页导航----手把手教你做导航（图，代码）

之前的文章写了很多关于导航的，感觉每个导航总有一些差别，不全面，现在就系统点，基本上每个导航都是这样写的。

试验要求：做成横排的导航，用CSS，手写代码，禁止用垃圾dreamweaver（你懂得）

①

说明：用无序列表写出导航的几个选项，浏览器显示如左图，代码为右。下同

②

说明： list-style: none;是将左边的小圆点去除；float: left; 是将竖排的编程横排，但是，请仔细观察，background: #FFCB2D; 为什么没背景了呢？

③

因为浮动的

是通过文档流布局自然生成的，无法撑开外围那个定义了背景色的

；换句话说，就是因为

的内部对象是浮动的，所以无法确定自身外围高度。修正方法，让

也浮动起来，这样，空间便被各个
• 元素

  填满了。为了避免浮动元素将自己的内容折行，将ul设这了宽度。

  ④

  
  

  display: block;是将整个选项卡都可以被点击。块级是独占一行的，所以float: left;

  ⑤

  
  

  鼠标悬浮在选项卡的状态，搞定。
  搞定了，欢迎批评。有什么意见也欢迎提出来。
  参考资料：《无懈可击的Web设计》，其实自己看多了都会写的，只是人家的语言组织的好。