我忽略的text-indent/文本缩进；text-align：center；
适用于某些特定文本，改变位置
垂直导航栏重点
设置display ：block;
才可以设置对应元素的宽，针对行内元素变块级元素。
Example：<stype> a{ display:block; width:XXpx;}
行内元素设置display block.jpg
水平导航栏重点
float属性想了好久，尽然没想到还在想其它的东东。
好对不起我自学一个月的成果啊!
水平导航栏float.jpg
圆角菜单的制作(圆角贴图法)
这里是用图片的方法，image的图层要在color之上。
你也可以用border-radius，此属性基于css3.0
** background-position:XXpx XXpx; 这个是收获，以前不知道！**
http://www.w3school.com.cn/cssref/pr_background-position.asp
圆角菜单制作.jpg
---问题---？---
1.你可知道那道黄杠杠如何制出？（提示border！！！）
2.如何实现贴图位置改变的？
附代码：<pre>
<style type="text/css">
{ margin: 0px; padding:0px;
}
ul{
list-style: none;
border-bottom: 5px solid darkorange;
height: 50px;
padding-left: 30px;
上面是答案
--
}
a{
display: block;
/display: block;
此项设置，直接影响a标签，
块级元素才能设置宽度，
不然就是自适应/
color: #333;
text-decoration: none;
/text-indent: 15px;/text-align: center;
/margin-top: 1px;/ margin-left: 1px;
height: 30px;
line-height: 30px;
width: 120px;
margin-top: 20px;
/background-color: darkcyan;*
/ background-image: url("../Nav/btnBg.png");
}
li .on , a:hover {
/background-color: darkorange;/
background-image: url("../Nav/btnBg.png");
background-position: 0px -30px;
/!border-radius: 15px;! 注意这个使用css3.0/
color: white;
}
.nav li {
float: left;
}
</style></head><body>
<ul class="nav">
<li><a class="on" href="#">首 页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</pre>
网友评论