无序列表排列导航-横排排列-颜色变化

CSS样式菜单栏设计

最新推荐文章于 2022-08-08 14:14:11 发布

原创最新推荐文章于 2022-08-08 14:14:11 发布 · 2.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#无序列表排列导航-横排排列-颜色变化

CSS 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
.a2{
	list-style-type:none;/*设置<ul>属性列表前面没点*/
}
.a3{
	width:100px;
	height:30px;
	border:thin dotted #6F9;/*设置<li>的边框*/
	text-align:center;
	background-image:url(images/pink.png);/*设置<li>的背景*/
	float:left;/*设置<li>横排排列*/
}
.a3 a{
	
	background-image:url(images/pink.png);
	width:100px;
	height:30px;
	line-height:30px;
	text-decoration:none;
}
.a3 a:hover{
	background-image: url(images/blue.png);
	color:#ffffff;
	text-decoration:underline;
	tex
}

}
</style>
</head>

<body>
	<div class="a1">
    	<ul class="a2">
        	<li class="a3"><a href="#">首页</a></li>
            <li class="a3"><a href="#">公司新闻</a></li>
            <li class="a3"><a href="#">产品展示</a></li>
            <li class="a3"><a href="#">关于我们</a></li>
            <li class="a3"><a href="#">联系我们</a></li>
        </ul>
	</div>
</body>
</html>