HTML精灵图

最新推荐文章于 2024-04-30 21:44:36 发布

网络喷子在线厮杀

最新推荐文章于 2024-04-30 21:44:36 发布

阅读量669

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_65480869/article/details/125926579

版权

HTML CSS 精灵图布局导航

关键词由CSDN通过智能技术生成

<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	}

	.clearfix::after {
	content: '';
	display: block;
	clear: both;
	}

	.wrap {
	width: 289px;
	height: 231px;
	background-color: aquamarine;
	margin: 50px auto;
	}

	.wrap .top li {
	float: left;
	border-top: 1px solid #f3f3f3;
	border-right: 1px solid #f3f3f3;

	text-align: center;
	}

	/* 第四个li和第八个li没有右边框 */
	.wrap .top .br0 {
	border-right: 0;
	}

	.wrap .top li a {
	display: block;
	width: 71px;
	height: 76px;

	padding-top: 13px;
	box-sizing: border-box;
	}

	/* 放精灵图 */
	.wrap .top li a span {
	display: block;
	width: 24px;
	height: 24px;
	/* border: 1px solid tomato; */
	margin: 0 auto;
	background: url(./images/精灵图2.png) no-repeat -7px -97px;
	}

	.wrap .top li a p {
	font-size: 12px;
	color: black;
	margin-top: 11px;
	}

	/* 直接改背景定位属性即可 */
	.wrap .top li a .span2 {
	background-position: -10px -10px;
	}

	.wrap .top li a .span3 {
	background-position: -55px -10px;
	}

	.wrap .bot {
	border-top: 1px solid #f3f3f3;
	}

	.wrap .bot .title {
	height: 31px;
	line-height: 31px;
	/* background-color: pink; */

	padding: 0 18px 0 15px;
	}

	.wrap .bot .title a {
	float: right;
	font-size: 12px;
	color: #3e3e3e;
	}

	.wrap .bot .title span {
	font-size: 14px;
	color: #324144;
	}

	.wrap .bot ul {
	padding-left: 23px;
	}

	.wrap .bot ul li {
	float: left;
	margin-right: 21px;

	}

	.wrap .bot ul li a {
	display: block;
	width: 32px;
	height: 32px;


	background: url(./images/精灵图1.png) no-repeat -62px -62px;
	}

	.wrap .bot ul li .a2 {
	background-position: -114px -10px;
	}
	</style>
	</head>

	<body>
	<div class="wrap">
	<!-- 上 -->
	<ul class="top clearfix">
	<li>
	<a href="#">
	<!-- 精灵图 -->
	<span></span>
	<p>充话费</p>
	</a>
	</li>
	<li>
	<a href="#">
	<span class="span2"></span>
	<p>旅行</p>
	</a>
	</li>
	<li>
	<a href="#">
	<span class="span3"></span>
	<p>车险</p>
	</a>
	</li>
	<li class="br0">
	<a href="#">
	<span></span>
	<p>游戏</p>
	</a>
	</li>
	<li>
	<a href="#">
	<span></span>
	<p>彩票</p>
	</a>
	</li>
	<li>
	<a href="#">
	<span></span>
	<p>电影</p>
	</a>
	</li>
	<li>
	<a href="#">
	<span></span>
	<p>酒店</p>
	</a>
	</li>
	<li class="br0">
	<a href="#">
	<span></span>
	<p>理财</p>
	</a>
	</li>
	</ul>
	<!-- 下 -->
	<div class="bot">
	<div class="title">
	<span>阿里APP</span>
	<a href="#">更多 ></a>
	</div>
	<ul class="clearfix">
	<li><a href="#"></a></li>
	<li><a href="#" class="a2"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	</ul>
	</div>
	</div>

	</body>

	</html>