纵向导航按钮制作

最新推荐文章于 2024-11-11 11:41:46 发布

原创最新推荐文章于 2024-11-11 11:41:46 发布 · 522 阅读

0 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS来美化网页中链接的方法，包括如何给链接添加背景图片、调整颜色、去除下划线、设置居中对齐等。此外，还介绍了如何通过:hover伪类来改变鼠标悬停时链接的外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源代码：

<body>
    <p>
        <a href="#">遨游世界</a>
        <a href="#">动感之旅</a>
        <a href="#">互动天地</a>
        
    </p>
</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; /*设置鼠标划过的文字颜色*/
}