新浪导航栏(一)最近在学习CSS布局和HTML，我觉得这部分内容很多。 代码很简单，不需要算法，但很难把箱子模型放在需要的位置。 另外，还有行高、边距、继承，感觉像在天上。
在学习网页的过程中，我们也要采用模块学习的方法，每个模块都要模块学习，一步一步来。
不能因为代码简单就小看这个语言。 其实很有讲究。
打开分析新浪导航栏，可以分析如下：
一个大箱子与浏览器宽度相同的一个路径框(可视区域)大箱子w可视区域大箱子中包含左右两个部分) fl fr )左右两个部分的选项用ul li a分析完毕后，接下来开始编写代码
HTML结构bodydivclass=' header ' divclass=' w ' divclass=' fl ' ulliahref=' # '是首页/a/li lia href='# '手机新浪网/a 新用户/a/li lia href='# '微博/a/li lia href='# '博客/a/li lia href='# '邮箱/a/li lia href='# '网络浏览器
style * { /*元素的内外边界*/margin: 0； padding: 0； } .在第} .w { /*页的可视区域中添加一个路径栏大箱子*/margin : 0自动； 背景色： pink； }.header { border-top :2 px solid # ff 8400； 边框- bottom 33601 px实体# ede ef 0； 背景色： RGB 65255、255、255； (} /style验证以下：
继续清除沥的样式和a的下划线：
按照网页布局的第一原则：标准流设置上下排列，浮动设置左右排列；
我们知道标准流已经布局，并且必须向其中添加浮动。 另外，在左侧的框中添加左浮动，在右侧的框中添加右浮动
这是很正常的事情。 因为只对可见区域中的箱子打开浮动，而ul中的元素没有打开浮动。
q )是给a加浮子，还是给沥加浮子？
(a )沥加浮动。 li是块级元素，逐行显示。 只有加入浮动后才能在一行中显示。 a原本是行内的元素。
li {float:left； }
我们注意到
字体、字体之间的距离和居中对齐需要装饰。
注意1:修饰字体的顶级父元素修饰。
因此，指定字体大小和颜色
ul li a { font-size: 12px； color : RGB (76、76、76 )； (} 注意2)字体之间的距离是用padding限定的，padding给谁？
情况1 :填充为
li
鼠标点击的时候，只有小小的一块区域显示被选中，用户体验很差。
情况2：padding给 a
由此可见li 给 a 最合适
还有几个小技巧:
由于行高可以继承，因此在header盒子中便添加行高等于盒子高度，使盒子中的文字居中对齐。需要把a行内元素转化为行内块元素。此时a有了高度，父元素的行高继承给了他。总结：
导航栏的写法
ul+ li + a ，文字放在a中
padding给a，这样使用户体验最好
注意的问题
a是行内元素，需要转换为行内块元素，使其有行高
行高会继承，在一个盒子中，text-align 使得盒子中的所有行内元素居中对齐。
后记：CSS作为一门标记语言，不难也不简单。我们在学习过程中一定要善于总结。
附代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>仿新浪导航栏效果</title> <style> * { /* 清除元素的内外边距 */ margin: 0; padding: 0; } .w { /* 给页面可视区一个通栏的大盒子 */ width: 1200px; margin: 0 auto; } .header { border-top: 2px solid #ff8400; background-color: rgb(255, 255, 255); border-bottom: 1px solid #edeef0; height: 40px; line-height: 40px; } .fl { float: left; } .fr { float: right; } li { float: left; list-style: none; } a { text-decoration: none; } ul li a { display: inline-block; font-size: 12px; color: rgb(76, 76, 76); padding-left: 20px; padding-right: 15px; } ul li a:hover { background-color: #edeef0; color: #ff8400; } </style></head><body> <div class=" header "> <div class="w"> <div class="fl"> <ul> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">设为首页</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">手机新浪网</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">移动客户端</a></li> </ul> </div> <div class="fr"> <ul> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">您好，新用户</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">微博</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">博客</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">邮箱</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">网站导航</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">关闭</a></li> </ul> </div> </div> </div></body></html>个人整理总结，如有疏漏，尽情指正！