03-西电审核--导航

导航栏一般使用无序列表实现,并且每一个项目就是一个超链接。
每个导航项目通常使用浮动方式(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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容