您的位置：首页 > 其它

横向导航按钮制作

2014-08-18 14:10 211 查看

源代码：

<!--用css制作横向按钮，用作导航菜单-->
<body>
<ul>
<li><a href="#">遨游世界</a><li>
<li><a href="#">动感之旅</a></li>
<li><a href="#">互动天地</a><li>

</ul>
</body>

样式：

a {
background-image: url(nav.jpg); /*给链接加背景图片*/
color: #000000; /*给链接文字设颜色*/
text-decoration: none; /*去掉链接文字的下划线*/
text-align:center; /*将链接文字设为居中*/
padding-top:10px; /*链接文字距离a块顶部的距离*/
background-repeat: no-repeat; /*是背景图片不重复显示*/
display:block; /*将a转换为块级元素*/
width: 108px; /*box的宽和高都设置为背景图片的宽和高*/
height: 38px;
}
a:hover{
/*设置鼠标划过文字的颜色，因为a设置为块级元素，所有划过的是一块区域，而这块区域用的背景图片，所以最后显示的是背景图*/
background-image:url(nav2.jpg);
color:#FF0000; /*设置鼠标划过的文字颜色*/
}

/* CSS Document */
li{
list-style:none; /*去掉li前的点*/
float:left;/*设置li浮动，它们就会在一行显示了*/
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航