横向导航按钮制作

最新推荐文章于 2024-01-16 14:06:19 发布

空之晴

最新推荐文章于 2024-01-16 14:06:19 发布

阅读量588

点赞数

分类专栏： html 文章标签： css html 源代码导航

本文链接：https://blog.csdn.net/u012294350/article/details/38659821

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

源代码：

<!--用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浮动，它们就会在一行显示了*/
	}