导航栏一般使用无序列表实现,并且每一个项目就是一个超链接。
每个导航项目通常使用浮动方式(display:inline-block;
也可以),排列到一行中。(所以在ul
上加上了清除浮动)
- HTML
<div class="nav">
<div class="container">
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">通知公告</a></li>
<li><a href="#">工作动态</a></li>
<li><a href="#">院系评建</a></li>
<li><a href="#">组织机构</a></li>
<li><a href="#">政策文献</a></li>
<li><a href="#">资料下载</a></li>
<li><a href="#">状态数据</a></li>
<li><a href="#">整改提高</a></li>
</ul>
</div>
</div>
- CSS
.nav li {
float:left;
}
分析
分析及处理
- 每个导航项目之间的距离都是
50px
,所以,可以使每个导航项目的左右内边距各位50px
。 - 文字【首页】距离
.container
的为158px
,加上外边距后,距离缩短了25px
,所以更改为133px
。
导航栏的高度为43px
宽度为100%
,背景颜色为#b0252a
。
导航字体颜色为#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;
}