HTML CSS精灵图练习

于 2024-04-10 21:30:47 发布
阅读量245 收藏
点赞数 1
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65353494/article/details/137611655
版权

作业一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .box1 {
        width: 500px;
        height: 50px;
        margin: 100px auto;
    }

    .box2 {
        width: 100%;
        height: 42px;
        top: 4px;
        position: relative;
    }

    .box2>input:first-of-type {
        /*输入框高度设置为40px, border占据2px，总高度为42px*/
        width: 380px;
        height: 40px;
        border: 1px solid #ccc;
        font-size: 16px;
        outline: none;
    }

    .box2>input:first-of-type:focus {
        border: 1px solid #317ef3;
        padding-left: 10px;
    }

    .box2>input:last-of-type {
        /*button按钮border并不占据外围大小，设置高度42px*/
        width: 100px;
        height: 44px;
        position: absolute;
        background: #317ef3;
        border: 1px solid #317ef3;
        color: #fff;
        font-size: 16px;
        outline: none;
    }
</style>
<body class="box1">
    <div class="box2">
        <input type="text">
        <input type="button" value="百度一下">
	</div>
</body>
</html>

作业二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{
			padding: 0;
			margin: 0;
			}
		.box{
			width: 800px;
			height: 250px;
			border: 1px dashed #CCCCCC;
			border-radius: 10px;
			margin: auto;
		}
		.box1 {
    	border: 1px dashed #D7D9E0;
    	border-radius: 2px;
    	background: #fff;
    	height: 150px;
    	padding: 0;
    	line-height: 59px;
	    text-align: center;
	    margin-bottom: 16px;
		}
		.box2 {
   	 	display: block;
    	font-size: 13px;
    	color: #9195A3;
		}
		.box3 {
    	background: #4E71F2;
    	border-radius: 6px;
    	width: 80px;
    	height: 30px;
    	line-height: 28px;
    	
    	margin: auto;
    	color: #fff;
    	font-size: 13px;
    	border: 0;
		}
		.box4 {
    	position: absolute;
    	font-size: 0;
    	width: 100%;
    	height: 100%;
    	outline: 0;
    	opacity: 0;
    	/*filter: alpha(opacity = 0);*/
    	/*margin-left: 18px;*/
    	z-index: 1;
    	cursor: pointer;
    	text-align: center;
		}
		
	</style>
	<body>
		<div class="box">
		<div class="box1">
		<span class="box2">拖拽图片到这里</span>
		</div>
		<div class="box3">
			<input type="file"class="box4" value="上传图片"/>&nbsp;&nbsp;&nbsp;选择文件
		</div>
		</div>
		
	</body>
</html>

作业三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.box{
			width: 850px; 
			height: 30px;
			border: 1px solid #fe7739;
			margin: auto;
			border-radius: 5px;
		}
		.box>input:first-of-type{
			border: 1px solid white;
        	padding-left: 20px;
        	width: 700px;
        	height: 25px;
        	border-radius: 5px;
        	
		}
		
		.box>input:last-of-type{
			background: #FE7739;
			border-radius: 2px;
			width: 60px;
			height: 28px;
			margin-right:auto ;		
			border-radius: 5px;	
		}
	</style>
	<body>
		<div class="box">
			<select name="宝贝">
				<option value="宝贝">宝贝</option>
				<option value="球鞋">球鞋</option>
			</select>
			<input type="text" />
			<input type="button" value="搜索" class="box3" />
			
			
			
			
		</div>
		
	</body>
</html>

作业四

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.max{
			width: 1000px;
			height:1000px;
			border: 1px solid #FE7739;
			display: block;
			margin: auto;
		}
		.gotop {
            width: 80px;
            height: 500px;
            border-radius: 10px;
            background-color:#f6f8f9;
            color: black;
            font-size: 18px;
            cursor: pointer;
            line-height: 80px;
            position: fixed;
            right: 60px;
            bottom: 20px;
            margin: auto;
            display: block;
        }
        .box{
        	width: 45px;
        	height: 45px;
        	border: 1px solid #F6F8F9;
        	position:relative;
        	padding-top: 10px;
        	margin: auto;
        	display: block;
        }
        .box>input:{
        	width: 45px;
        	height: 45px;
        	border: 1px solid #F6F8F9;
        	display: block;
        	cursor: pointer;
        }
        .box1{
        	font-size: 12px;
    		color: #333;
    		line-height: 17px;
    		margin-top: 6px;
    		position:relative;
    		text-align: center;
    		display: block;
    		background-repeat:no-repeat ;
        }
        a{
        	text-decoration: none;
        	color: black;
        }
	</style>
	<body class="max" id="top">顶部
		<div class="gotop">
		<div class="box"><input type="image" src="../img/11.png" value="联系客服" width="40px" height="40px"></div>
		<div class="box1"><a href="#">联系客服</a></div>
		<div class="box"><input type="image" src="../img/22.png" width="40px" height="40px" /></div>	
       	<div class="box1"><a href="#">购物车</a></div>
       	<div class="box"><input type="image" src="../img/33.png" width="40px" height="40px" /></div>
       	<div class="box1"><a href="#">官方客服</a></div>
       	<div class="box"><input type="image" src="../img/44.png" width="40px" height="40px" /></div>
       	<div class="box1"><a href="#">反馈</a></div> 
       	<div class="box"><input type="image" src="../img/55.png" width="40px" height="40px" /></div>
       	<div class="box1"><a href="#">举报</a></div> 
       	<div class="box"><input type="image" src="../img/66.png" width="40px" height="40px" /></div>
    	<div class="box1"><a href="#top">回到顶部</a></div>
		</div>
		
	</body>
</html>

 

作业五

<!DOCTYPE html>
<html lang="en">

<head>
	<style>
		* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.box {
    /* 大盒子相对定位，占据原来的位置 */
    position: relative;
    width: 520px;
    height: 280px;
    background-color: blue;
    overflow: hidden;
    margin: 100px auto;
}

img {
    width: 520px;
    height: 280px;
}

.taobao {
    /* 包图片的盒子宽度等于6张图片加起来的宽度*/
    /* 高度等于图片的高度 */
    width: 3120px;
    height: 280px;
    /* animation 一整个动画的时间 是10秒 */
    /* infinite代表动画无限的执行（动画的执行次数） */
    animation: 10s RBT infinite;
    /* 相邻的行内块在一行上，之间会有空白缝隙 
    所以是用来清除行内块间距 的*/
    font-size: 0;
}

@keyframes RBT {
    /* 初始状态为0 时 不移动 */
    0% {
        transform: translateX(0px);
    }
    /* 动画时间过去10%时 就得移动一张图片的距离 */
    /* 10*10%=1 表示一秒钟 移动了一张图片的距离 */
    10% {
        transform: translateX(-520px);
    }
    /* 10*20%=2 表示到第二秒的时候图片不移动 停留了一秒钟 */
    20% {
        transform: translateX(-520px);
    }
    30% {
        transform: translateX(-1040px);
    }
    40% {
        transform: translateX(-1040px);
    }
    50% {
        transform: translateX(-1560px);
    }
    60% {
        transform: translateX(-1560px);
    }
    70% {
        transform: translateX(-2080px);
    }
    80% {
        transform: translateX(-2080px);
    }
    90% {
        transform: translateX(-2600px);
    }
    100% {
        transform: translateX(-2600px);
    }
}


/* 并集选择器集体声明 让代码更简洁 */

.arrow-l,
.arrow-r {
    /* 只能用定位做，才能压住盒子 */
    /* 不要占有位置，随便移动定位，必须用绝对定位 */
    position: absolute;
    /* 绝对定位的盒子无须转换，直接给大小 */
    width: 20px;
    height: 30px;
    /* 垂直居中公式 */
    /* 先走父级高度的50% */
    top: 50%;
    /* 往上走自己高度的一半 */
    margin-top: -15px;
    background: rgba(0, 0, 0, .2);
    text-decoration: none;
    color: #fff;
    line-height: 30px;
}

.arrow-l {
    left: 0;
    border-radius: 0 15px 15px 0;
}

.arrow-r {
    right: 0;
    text-align: right;
    /* 圆角矩形 */
    border-radius: 15px 0 0 15px;
}


/* 鼠标经过，箭头颜色改变 */

.arrow-l:hover,
.arrow-r:hover {
    background: rgba(0, 0, 0, .4);
}

.circle {
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: 15px;
    width: 70px;
    height: 13px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 7px;
}

.circle li {
    /* position: fixed; */
    float: left;
    width: 8px;
    height: 8px;
    background-color: #fff;
    margin: 3px;
    border-radius: 50%;
    /* 设定鼠标的形状为一只伸出食指的手 */
    cursor: pointer;
}


/* current 当前的意思   此处一定要注意优先级的问题 */

.circle .current {
    background-color: #ff5000;
}

	</style>
    <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>淘宝轮播图</title>
    <link rel="stylesheet" href="style.css">
    

</head>

<body>
    <div class="box">
        <div class="taobao">

            <!-- 图片 -->
            <img src="../img/11.png" alt="">
            <img src="../img/22.png" alt="">
            <img src="../img/33.png" alt="">
            <!-- 末尾添加与第一张图一样的图片， -->
            <!-- 阻止动画播放完时图片闪动 达到无缝滚动的功能 -->
            <img src="../img/11.png" alt="">
            <img src="../img/22.png" alt="">
            <img src="../img/33.png" alt="">
        </div>
        <!-- 左按钮 -->
        <a href="#" class="arrow-l"> &lt;</a>
        <!-- 右按钮 -->
        <a href="#" class="arrow-r"> &gt;</a>
        <!-- 小圆点  -->
        <ul class="circle">
            <li></li>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
</body>

</html>

 

作业六

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 1200px;
			height: 600px;
			border: 1px solid whitesmoke;
			margin: auto;
			/*background: #fef6f1;*/
		}
		.box1{
			width: 790px;
			height: 280px;
			border: 1px solid transparent;
			float: left;
			border-radius: 10px;
			margin: 5px;
			background: #fef6f1;
		}
		.box1-a{
			text-decoration: none;
			color: orange;
			text-align: center;
		}
		.box1-a:hover{
			text-decoration: none;
		}
		.h3{
			color: black;
			height: 32px;
			text-align: left;
		
		}
		.box1 > img {
			width: 180px;
			height: 200px;
			float: left;
		}
		.box1.title{
			width: 180px;
			height: 200px;
			font-size: 13px;
			float: left;
			color: black;
		}
		.part{
			width: 380px;
			height: 280px;
			float: left;
		}
		.box2{
			width: 390px;
			height: 280px;
			border: 1px solid transparent;
			float: left;
			border-radius: 10px;
			/*margin: 5px;*/
			background: #fef6f1;
		}
		.box2-a{
			text-decoration: none;
			color: orange;
			text-align: center;
		}
		/*.box2.title{
			width: 180px;
			height: 200px;
			font-size: 13px;
			float: left;
			color: black;*/
		.part2{
			width: 180px;
			height: 280px;
			float: left;
		}
			
		.box3{
			width: 395px;
			height: 300px;
			border: 1px solid transparent;
			border-radius: 10px;
			float: left;
			margin: 3px;
			background: #fef6f1;
		}
		.box3-a{
			text-decoration: none;
			color: orange;
			text-align: center;
			}
		.part3{
			width: 180px;
			height: 280px;
			float: left;
		}
		.box4{
			width: 395px;
			height: 300px;
			border: 1px solid transparent;
			border-radius: 10px;
			float: left;
			/*margin: 5px;*/
			background: #fef6f1;
		}
		.box4-a{
			text-decoration: none;
			color: orange;
			text-align: center;
			}
		.part4{
			width: 170px;
			height: 250px;
			float: left;
		}
		.box5{
			width: 395px;
			height: 300px;
			border: 1px solid transparent;
			border-radius: 10px;
			float: left;
			/*margin: 5px;*/
			background: #fef6f1;
		}
		.box5-a{
			text-decoration: none;
			color: orange;
			text-align: center;
			}
		.part5{
			width: 170px;
			height: 250px;
			float: left;
		}
	</style>
	<body>
		<div class="box">
			<a href="#" class="box1-a">
				<div class="box1">
					<div class="part">
						<h3 class="h3">淘工厂&nbsp;良心工厂货</h3>
						<img src="../img/90.png" alt=""/>
						<p class="title">纳米魔力双面胶1卷</p>
						<p >￥6.05</p>
					</div>
			</a>
			<a href="#" class="box1-a">
					<div class="part">
						<h3 class="h3"></h3>
						<img src="../img/98.png" alt="" />
						<p class="title">75pvc排风口防风罩不……</p>
						<p >￥13.05</p>
					</div>	
				</div>
			</a>
			<a href="#" class="box2-a">
				<div class="box2">
					<div class="part2">
						<h3 class="h3">拍卖捡漏</h3>
						<img src="../img/90.png" />
						<p >￥1起</p>
					</div>
			</a>
			<a href="#" class="box2-a">
					<div class="part2">
						<h3 class="h3"></h3>
						<img src="../img/90.png" />
						<p >￥1起</p>
					</div>

				</div>
			</a>
			<a href="#" class="box3-a">
				<div class="box3"> 
					<div class="part3">
						<h3 class="h3">潮店数码</h3>
						<img src="../img/90.png" />
						<p >￥1起</p>
					</div>
					
				
			</a>
			<a href="#" class="box3-a">
					<div class="part3">
						<h3 class="h3"></h3>
						<img src="../img/90.png" />
						<p >￥1起</p>
					</div>
				</div>
			</a>
			<a href="#" class="box4-a">
				<div class="box4">
					<div class="part4">
						<h3 class="h3">春夏出行</h3>
						<img src="../img/90.png" />
						<p >￥1起</p>
					</div>
			</a>
			<a href="#" class="box4-a">
					<div class="part4">
						<h3 class="h3"></h3>
						<img src="../img/90.png" />
						<p >￥1起</p>
					</div>
				</div>
			</a>
			<a href="#" class="box5-a">
				<div class="box5"> 
					<div class="part5">
						<h3 class="h3">零食秒杀</h3>
						<img src="../img/90.png" />
						<p >￥1起</p>
					</div>
			</a>
			<a href="#" class="box5-a">
					<div class="part5">
						<h3 class="h3"></h3>
						<img src="../img/90.png" />
						<p >￥1起</p>
					</div>
				</div>
			</a>
		</div>
		
	</body>
</html>

 

 作业七

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		 *{
		 	margin: 0;
		 	padding: 0;
		 }
		 .box{
		 	width: 500px;
		 	height: 700px;
		 	border: 1px solid whitesmoke;
		 	margin: auto;
		 	background: #CCCCCC;
		 }
		.box1{
			width: 480px;
			height: 680px;
			border: 1px solid black;
			margin: auto;
				}
		.box2{
			width: 200px;
			height: 50px;
			border-radius: 25px;
			background: #FF0000;
			border: 1px solid;
			margin: auto;
			margin-top: 30px;		
		}
		.title{
			font-size: 32px;
			text-align: center;
		}
		.box3{
			width: 185px;
			height: 70px;
			background: whitesmoke;
			border: 1px solid black;
			text-align: center;
			float: left;
			margin: 10px;
			border-radius: 5px;
			
		}
		
		
		.box4{
			width: 420px;
			height: 500px;
			margin: auto;
			margin: 20px;
			
		}
	</style>
	<body>
		<div class="box">
			<div class="box1">
				 <div class="box2">
				 	<p class="title">精选热点</p>
				 </div>
				 <div class="box4">
				 	<div class="box3"><a class="title">电视柜</a></div>
				 	<div class="box3"><a class="title">电视柜</a></div>
				 	<div class="box3"><a class="title">电视柜</a></div>
				 	<div class="box3"><a class="title">电视柜</a></div>
				 	<div class="box3"><a class="title">电视柜</a></div>
				 	<div class="box3"><a class="title">电视柜</a></div>
				 	<div class="box3"><a class="title">电视柜</a></div>
				 	<div class="box3"><a class="title">电视柜</a></div>
				 </div>
				 
				 
			</div>
		</div>
		
	</body>
</html>

旋转太极 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>练习九，太极</title>
		<link rel="stylesheet" type="text/css" href="css/index9.css"/>A
	</head>
	<style>
		body{
	background-color:#8B0000;
}
.box{
	border-left: 100px solid black;
	border-right: 100px solid white;
	width: 0;
	height: 200px;
	border-radius: 100%;
	position: relative;
	animation: myRote 4s linear infinite;
	box-shadow: 2px 0px 6px ,
				-2px 0px 6px ,
				0px 2px 6px ,
				0px -2px 6px ;
}
div::before{
	display: block;
	border: 30px solid black;
	background-color: white;
	content:'' ;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	position: absolute;
	left: -50px;
}
div::after{
	display: block;
	border: 30px solid white;
	background-color: black;
	content: '';
	width: 40px;
	height: 40px;
	border-radius: 100%;
	position: absolute;
	top: 100px;
	left: -50px;
}
 @keyframes myRote {
            from {
                transform: rotate(0deg);
            } to {
                transform: rotate(360deg);
            }
        }
	</style>
	<body>
		<div class="box"></div>
	</body>
</html>

云起兮
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html-精灵图
a451319296的博客
12-07 763
我们制作网页的时候，可以将一些较小的图片制作成一张图集，以便于优化我们的性能。
58 精灵图技术
hello_sunny123的博客
08-09 357
1.为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。 因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加速度,出现了CSS精灵技术(也称CSs Sprites. CSS 雪碧)。 核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。 精灵技术目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度 2.精灵图的使用 使用精灵
前端Web开发HTML5+CSS3——定位、精灵图、字体图标和修饰属性
weixin_45594736的博客
11-26 179
之前有在断断续续地学习前端和后端的知识，现在想系统地学习并进行记录，作为自己一个后续查阅的电子笔记本。今天的内容包括四个基础知识（定位、精灵图、字体图标和修饰属性）和两个综合案例（京东精灵图和淘宝轮播图）CSS精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。
【HTML+CSS】CSS高级技巧：精灵图+字体图标+CSS三角应用
qq_30148319的博客
03-29 2277
学习视频及笔记参考来源： 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一、精灵图 1、精灵图的理解 （1）核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。 （2）目的：有效的减少服务器接收和请求的次数，提高页面的加载速度。 2、精灵图的语法 /* 1、先导入精灵图作为背景图。 */ /* 2、定位到想要的图标的位置 */ /* 注意：x轴向右边走为正值，左边走为负值；
css 精灵图动画制作(html)
DHLSP15的博客
12-25 761
【代码】css 精灵图动画制作(html)
html精灵图坐标如何确定,css sprites怎么定位？
weixin_35640876的博客
05-31 3773
css sprites(精灵图)，也被称为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式：将多个图像组合成单个图像文件以在网站上使用的方法，以提高性能。css sprites(精灵图)其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。css sprite...
CSS 精灵图的使用
Vrainy的博客
05-24 378
前言 在浏览网页时，我们可能会发现，大多数的带图标的超链接，并非是如我们所想——用<a>包裹<img>来实现的，而是给<a>设置背景图。在这张背景图中，不光有当前超链接对应的图片，还有其他超链接的图片，它们共同组成了这张大的的背景图。这样的背景图我们称之为精灵图。 淘宝中带图标的超链接 图标超链接对应的精灵图 精灵图的使用 使用精灵图的原因 使用精灵图可以减少向服务器请求图片的次数以及相应产生的资源。每次请求图片资源，都会花费一定的请求时间，这和图片大小无关，减少
CSS精灵图技术
qq_43920456的博客
06-28 257
日常开局，先上案例 以及实现百度相机功能 鼠标移动上去后 这两种实现是其实是同一种技术，原理为图片偏移 下面以相机为例： 让我们先准备这样一张图片，它包含了你所有需要的素材 可以通过ps或者截图软件测得下面蓝色的相机比上面白色的相机y轴低19px(实际偏移20px效果比较好） 我们需要做的就是当鼠标移动到该图片上时，将图片向下偏移19px，以显示蓝色图片. 首先创建一个div标签 <div class="div"></div> 之后便可以在style中对div的样式进行设定
甘特图实现 HTML+CSS
07-22
左侧为任务列表，右侧是甘特图，可以修改任务列表，左右同步 是打包后的，请自行搭建静态服务器查看
HTML CSS学习练习.zip
12-30
HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML...
HTML CSS 初学的练习.zip
12-30
HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML ...
css精灵图片
10-31
css精灵图片配图
css精灵图压缩工具
08-10
css精灵图制作工具，简单方便，web开发精灵图制作工具。。必备
html+css3D轮播图片
01-29
【html+css】3D轮播图片，69行代码实现3D旋转轮播图
学习html和css的练习.zip
最新发布
01-05
学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html...
html+css实战123-综合案例-导航
geyaoisnice的博客
06-16 241
html
精灵图使用方法
m0_62181310的博客
04-16 2801
精灵图使用步骤: 第一步:先测量精灵图局部的大小,设置为盒子的宽和高 第二步:测量精灵图局部的坐标值,设置为背景定位的负值 宽 width: 20px; 高 height: 20px; 精灵图局部定位值 -34px -4px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"...
html+css学习第六天（背景图片、精灵图片、元素内容溢出、长度单位）
And_End的博客
07-19 272
闲杂知识
css精灵图坐标如何确定
06-09
CSS精灵图坐标的确定需要以下几个步骤： 1. 把所有需要合成的小图标拼在一起，形成一张大图，这个大图就是CSS精灵图。 2. 确定每个小图标在大图中的位置，也就是坐标值。可以使用Photoshop等图像处理软件来确定每个小图标的坐标值。 3. 在CSS中，通过background-position属性来设置小图标在大图中的位置。background-position属性接受两个值，第一个值是水平方向的位置，第二个值是垂直方向的位置。比如background-position: -10px -20px;表示小图标在大图中的水平偏移量为10像素，垂直偏移量为20像素。 需要注意的是，CSS精灵图坐标的确定需要保证每个小图标的尺寸、间距和对齐方式都是一致的，否则可能会出现布局错乱的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值