{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.xiaopingtou.cn//data/attach/topic/topicKPo7gB.jpg', '推荐 y7575 的文章《03-西电审核--导航》','https://www.xiaopingtou.net/article-59631.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
导航栏一般使用无序列表实现，并且每一个项目就是一个超链接。每个导航项目通常使用浮动方式(
display:inline-block;也可以)，排列到一行中。（所以在ul上加上了清除浮动）
- HTML
- CSS
.nav li {
float:left;
}
分析
处理前
处理后
分析及处理
- 每个导航项目之间的距离都是
50px，所以，可以使每个导航项目的左右内边距各位50px。 - 文字【首页】距离
.container的为158px，加上外边距后，距离缩短了25px，所以更改为133px。
导航栏的高度为43px宽度为100%，背景颜 {MOD}为#b0252a。导航字体颜 {MOD}为
#fff，字体大小16px。
.nav {
width:100%;
height:43px;
line-height:43px;
background-color:#b0252a;
}
.nav ul {
margin-left:133px;
}
.nav ul a {
padding-right:25px;
padding-left:25px;
color:#fff;
font-size:16px;
font-weight: bold;
}