标签:
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{ line-height: 100%">
所有代码
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}
标签:
原文地址:http://www.cnblogs.com/jmlovepython/p/4866682.html