彻底弄懂CSS盒子模式之二

 

#nav a {
background: url(lanbj2.gif) no-repeat left center;
text-decoration: none;
height: 20px;
width: 155px;
display: block;
float: right;
padding: 0px 0px 0px 5px;
font-weight: bold;
font-size: 9pt;
line-height: 20px;
color: #630;
}

5．组装黄色修饰块盒子(a的左边框，假如又独立用一个盒子来做就不科学了，因为此方法最简单)，直接给a加入下面一条样式即可，样式代码如下：

#nav a {
border-left:10px solid #f90;
}

6．最后简单为鼠标移到链接上时，链接风格的改变指定一个样式：

#nav a:hover {
background-image: url(lanbj3.gif);
color: #FFFFFF;
}

至此完成样式代码编写，上面已给出内容部分的结构代码，把它们结合到网页中就算是完成本次导航栏的制作。再次感谢本专栏斑竹blankzheng指点优化。

源文件打包下载 xhtml.rar

* {
margin: 0px;
padding: 0px;
}

共3页: 上一页 [1] [2] 3 下一页

评论加载中…