微信导航栏

最新推荐文章于 2023-10-11 21:30:49 发布

A 神

最新推荐文章于 2023-10-11 21:30:49 发布

阅读量87

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42378409/article/details/103687670

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
		margin: 0;
		padding: 0;
		}
		body{
			background: url(images/wx.jpg) repeat-x;
		}
		li{
			list-style: none;
			
		}
		.nav{
			margin-top: 20px;
		}
		.nav li{
			float: left;
			margin: 0 15px;
		}
		.nav a{
			display: inline-block; 
			height: 33px;
			background: url(images/to.png) no-repeat ;
			padding-left: 15px;
			color: #fff;
			line-height: 33px;
			font-size: 14px;
			
		}
		.nav a span{
			display: inline-block; 
			height: 33px;
			background: url(images/to.png) no-repeat right;
			padding-right: 20px;
			color: #fff;
		}
		.nav a:hover,
		.nav a:hover span {
			background-image: url(images/ao.png);
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li>
				<a href="#">  
					<span>首页</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>首页</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>首页</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>首页</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>首页</span>
				</a>
			</li>

</ul>
</div>
	
</body>
</html>

在这里插入图片描述

A 神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ background: u...
复制链接

扫一扫