css制作最简单导航栏

css制作最简单导航栏

 

 

（1）先建一个列表：

<ol>

<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>

　　　　　　　　　　    </ol>

（2）去掉前面的数字                                    

ol{list-style-type:none}                                                                     

(3)使列表水平排列

 li{float: left;}

 

 

（4）设置列表项的长 宽 边框

 

 

 

li{ border:1px solid gray;

width: 60px;

height: 30px; }

（5）设置背颜色

li{background-color: #ffbbc0;}

 

（6）文字居中

li{ text-align: center;

padding-top: 5px; }

 

（7）去掉下划线

a{text-decoration:none;}

 

（8）当鼠标移到文字上背景颜色变

 

li:hover{background-color: gray;}

 

所有代码

ol{list-style-type: none;}

li{  
     float: left;
     border:1px solid gray;
      width: 60px;
      height: 30px; 
      background-color: #ffbbc0;
      text-align: center;
      padding-top: 5px;
      }
      
a{text-decoration:none;}

li:hover{background-color: gray}