利用CSS制作简易导航栏

作者: 矮萌杰 | 来源:发表于2018-04-15 19:17 被阅读0次

利用CSS制作简易导航栏
CSS的学习记录(二)
简易的iOS导航栏颜色渐变方案
利用css3制作简易的电子相册封面
2020-06-06
一些标准的做法
2018-07-28
2019-04-06
阻止页面元素被选中
C++Qt分享计划——制作有道词典主界面（二）

很多网站都会有类似于

导航栏.png

这样子的导航栏。
用css修饰即可实现。
首先是html代码部分：

<body>
  <div class="daohang">
  <ul>
    <li><a href="#">栏目1</a></li>
    <li><a href="#">栏目2</a></li>
    <li><a href="#">栏目3</a></li>
    <li><a href="#">栏目4</a></li>
    ......
  </ul>
  </div>

为你所需要导航的地方对栏目n进行一个修改，对需要导航到的网站在替换掉链接代码中的"#"。
接下来是css代码：
1.对于整个导航栏的代码

.daohang{
  width:xxpx;
  height:xxpx;
  font-size:xxpx;
  font-family:xx;
  background-color:xx;
  padding:0 0 1em 0;         /*用于美化边框结构，可以不用*/
 }

2.针对导航栏的排序代码进行美化

 .daohang ul{
 list-style:none;      /*去掉前面的排序标记*/
padding:0;      /*内容靠近大框*/
}

3.对于链接的美化

 .daohang li{
  display:block;     /*使得链接体放入框中*/
  padding:xpx xpx xpx xem;  
  text-decoration:none;     
  background-color:xx;
  border-right-style:xx;
  border-left-style:xx;
  border-right-color:xx;
  border-left-color:xx;
  border-right-width:xx;
  border-left-width:xx;
  /*分成几行来写，可有可无，根据直接想写的美观程度*/
}

image.png

4.对于链接处理：

 .daohang li a:hover{
  background-color:xx;     /*当鼠标移过去时背景显示的颜色*/
  color:xx;      /*当鼠标移过去时字显示的颜色*/
  border-right-style:xx;
  border-left-style:xx;
  border-right-color:xx;
  border-left-color:xx;
  border-right-width:xx;
  border-left-width:xx;     /*对于width,如果前面对Li设置有的话，应该与Li中的同步*/
  /*鼠标已过去时边框所显示的效果*/
}

之前.png

鼠标放上去以后.png

另外横线导航与纵向导航类似。html的代码保持不变；
而css：

    .q ul{
    list-style:none;
    }
    .q li{
    float:left; 
    }
    .q li a{
    color:#ffffff;
    text-decoration:none;
    padding-top:4px;
    display:block;
    width:65px;
    height:20px;
    text-align:center;
    background-color:#6600cc;
    margin-left:2px;
    }
    .q li a:hover{
    background:#9999ff;
    color:#ffffff;
    }

大体上一支，不过增加了对Li属性的"float:left"浮点型，使之能对齐左边。