如何制作网站的导航栏

莫愁
其他
2019-03-14

简介我们知道前端页面是由html页面及css样式构成！下面就给大家写的是html代码和css代码实现的导航栏。
字数 808.5

首先敲击无css代码的导航条。

原始导航栏即不加任何样式的导航栏是这样的！

无效果导航条

下面为了得到我们想要的页面我们加上css代码！看看加了css以后的页面是什么样的?

<!DOCTYPE html>
<html>
<head>
<title>导航条</title>
<style type="text/css">
  /*设置元素上下左右无间距*/
      * {
          padding: 0px;
          margin: 0px;
      }
      /*设置整体字体大小及颜色*/
      body {
          font-size: 16px;
          color: #817c7c;
      }
      a {
          text-decoration: none; /*a标签去除下划线*/
          color: #ffffff; /*设置导航栏文字颜色*/
      }
      header {
          width: 100%; /* 头部的宽度*/
          height: 65px; /*头部的高度*/
          background-color: #2ca6cb; /*背景色*/
      }
      #nav {
          width: 90%; /*设置ul宽度*/
          margin: 0 auto; /* ul居中*/
      }
      ul > li {
          float: left; /* 设置导航栏中每一个栏目向左浮动,即 li 不换行 */
          line-height: 65px; /* 设置li的行高 即上下居中 */
          list-style: none; /*去掉 li标签前面的点*/
      }
      #nav>li{
          padding: 0 20px;
      }
      /*鼠标焦点事件*/
      ul > li:hover > a {
          color: #808080; /*字体变化*/
      }
</style>
</head>
<body>
<header>
 <ul id="nav">
     <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>
</header>
</body>
</html>

效果如图所示:

修改后的导航条