css精灵图的案例

最新推荐文章于 2022-07-16 15:51:58 发布

曹莓养乐多多

最新推荐文章于 2022-07-16 15:51:58 发布

阅读量368

点赞数 3

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_52474888/article/details/123354318

版权

说到精灵图，大家可能听说过这个新鲜的词，在学习过精灵图之后，做了一个小案例和大家分享一下

下面是我们需要用到的图片，它是由四个小图片合成一张大图，网页中只需要引入一张大图，这样减少了网页对服务器的请求次数，加快了网页的加载速度。原理就是通过背景图片的显示位置，从而显示所需要显示出哪一部分的小图。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
			}

			ul {
			/* 	list-style: none; */
			}
			.list{
				display: inline-block;
				padding: 0 80px;
			}
			/* 把list转换为行内块元素，使其在一行显示 */
			.list .list1 a{
				font-size: 25px;
				color: #000000;
			}
			/* 设置字体的大小和颜色 */
			.list .content li{
				width: 250px;
				line-height: 32px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			/* 设置列表的宽高，里面的文字不换行，溢出部分隐藏，文本溢出部分显示胜率标记 */
			.list .content li a{
				color: #000;
				font-size: 16px;
			}
			/* 设置标题字体颜色和大小 */
			.tu2,
			.tu5,
			.tu3,
			.tu4 {
				display: inline-block;
				background: url('inde.png') no-repeat;
				background-size: 26px;
				vertical-align: middle;
			}
			/* 转换为行内块元素，引入背景图片，并设置图片的大小，图片不平铺显示 */
			.list .list1 .tu2 {
				background-position: -0px -0px;
				width: 26px;
				height: 30px;
			}
			/* 设置需要显示背景图片的位置 */
			.list .list1 .tu5 {
				background-position: -0px -30px;
				width: 26px;
				height: 30px;
			}

			.list .list1 .tu3 {
				background-position: -0px -59px;
				width: 25px;
				height: 26px;
			}

			.list .list1 .tu4 {
				background-position: -0px -85px;
				width: 25px;
				height: 29px;
			}
			.list .content{
				list-style-position: inside;
			}
			/* 引入列表前的小圆点 设置到内容区域 */
		</style>
	</head>
	<body>
		<div class="list">
			<div class="list1">
				<a href="#">
					<i class="tu4"></i>
					常见问题
				</a>
			</div>
			<ul class="content">
				<li><a href="#">这里有你想知道的关于文献互助的一切</a></li>
				<li><a href="#">一篇文章解决你的所有查重问题</a></li>
				<li><a href="#">手把手教你由初级到高级的文献检索</a></li>
				<li><a href="#">开题分析神器使用白皮书</a></li>
				<li><a href="#">如何对个人账号进行管理</a></li>
			</ul>
		</div>
		<div class="list">
			<div class="list1">
				<a href="#">
					<i class="tu5"></i>
					常见问题
				</a>
			</div>
			<ul class="content">
				<li><a href="#">这里有你想知道的关于文献互助的一切</a></li>
				<li><a href="#">一篇文章解决你的所有查重问题</a></li>
				<li><a href="#">手把手教你由初级到高级的文献检索</a></li>
				<li><a href="#">开题分析神器使用白皮书</a></li>
				<li><a href="#">如何对个人账号进行管理</a></li>
			</ul>
		</div>
		<div class="list">
			<div class="list1">
				<a href="#">
					<i class="tu2"></i>
					常见问题
				</a>
			</div>
			<ul class="content">
				<li><a href="#">这里有你想知道的关于文献互助的一切</a></li>
				<li><a href="#">一篇文章解决你的所有查重问题</a></li>
				<li><a href="#">手把手教你由初级到高级的文献检索</a></li>
				<li><a href="#">开题分析神器使用白皮书</a></li>
				<li><a href="#">如何对个人账号进行管理</a></li>
			</ul>
		</div>
		<div class="list">
			<div class="list1">
				<a href="#">
					<i class="tu3"></i>
					常见问题
				</a>
			</div>
			<ul class="content">
				<li><a href="#">这里有你想知道的关于文献互助的一切</a></li>
				<li><a href="#">一篇文章解决你的所有查重问题</a></li>
				<li><a href="#">手把手教你由初级到高级的文献检索</a></li>
				<li><a href="#">开题分析神器使用白皮书</a></li>
				<li><a href="#">如何对个人账号进行管理</a></li>
			</ul>
		</div>
	</body>
</html>

效果就是下面这个样子，大家可以尝试一下