前端学习日记

最新推荐文章于 2023-01-04 17:07:08 发布

weixin_45090266

最新推荐文章于 2023-01-04 17:07:08 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/weixin_45090266/article/details/90414159

版权

1.精灵技术运用：

拼写出i love you
工具：sublime、ps
ps运用切片工具最左端工具栏，选择切片工具，框选想要选择的字母，然后点击右键选择编辑切片选项… (我们测量前锁定背景，防止测量的数据有误差，这里有我们下面所需数据)

这是我们所需的大图
在这里插入图片描述
基本格式

<style> 
	{   三部分内容（都可以从第一张图里得到）
	图片的宽；（第一张图片中的W H）
	图片的高；
	图片相对背景的位置；（第一张图片中 x,y 注意浏览器的X轴Y轴和我们数学中的不一样     是负数）
}
 </style>

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第一次</title>
	<style>
		span,div{
			display: inline-block;
			background:url(images/abcd.jpg) no-repeat;
		}
		.ii{
			width: 61px;
			height: 109px;
			background-position: -327px -143px;
		}
		.ll{
			width: 96px;
			height: 109px;
			background-position: -6px -277px；
		}
		.oo{
			width: 112px;
			height: 108px;
			background-position: -371px -277px;
		}
		.vv{
			width: 110px;
			height: 119px;
			background-position: -2px -548px;
		}
		.ee{
			width: 94px;
			height: 108px;
			background-position: -487px -6px;
		}
		.yy{
			width: 109px;
			height: 108px;
			background-position: -369px -557px;
		}
		.uu{
			width: 110px;
			height: 107px;
			background-position: -477px -422px;
		}
		.kong{
			width: 50px;
		}
	</style>
</head>
<body>  <!--精灵技术-->
	<div class="ii"></div>

	<div class="kong"></div>
	<span class="ll"></span>
	<span class="oo"></span>
	<span class="vv"></span>
	<span class="ee"></span>

	<div class="kong"></div>
	<div class="yy"></div>
	<span class="oo"></span>
	<div class="uu"></div>
</body>
</html>

最终效果
在这里插入图片描述

2.四部分拼成一幅完整的图

注意：子绝父相绝对定位不占位置，相对定位占位置将一张大图切成想要的小图我用的PS 选择切片工具
下边是图片
在这里插入图片描述

简单说就是拼成一个田字格，然后将图片导进去

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>田字格</title>
	<style>
		.nav{
			width: 250px;
			height: 157px;
			position: absolute;
		}
		.na{
			width: 250px;
			height: 157px;
			position: absolute;
			left: 250px;
		}
		.third{

			width: 250px;
			height: 157px;
			position: absolute;

		}
		.forth{
			width: 250px;
			height: 157px;
			position: absolute;
			left: 250px	;
			
		}
		.big{
			width: 500px;
			height: 157px;	
			position: relative;	
		}
		.small{
			width: 500px;
			height: 157px;
			position: relative;
		}
	</style>
</head>
<body>
	<div class="big">
		<div class="nav"><img src="images/images/美景_01.gif" alt=""></div>
		<div class="na"><img src="images/images/美景_02.gif" alt=""></div> 
	</div>
	<div class="small">
	<div class="third"><img src="images/images/美景_03.gif" alt=""></div>
		<div class="forth"><img src="images/images/美景_04.gif" alt=""></div>   
	</div>
	
</body>
</html>

最后效果
在这里插入图片描述

weixin_45090266

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习日记

1.精灵技术运用：拼写出i love you工具：sublime、psps运用切片工具最左端工具栏，选择切片工具，框选想要选择的字母，然后点击右键选择编辑切片选项… (这是我们所需数据)这是我们所需的大图基本格式<style> { 三部分内容（都可以从第一张图里得到）图片的宽；（第一张图片中的W H）图片的高；图片相对背景的位置；（第一张图片中 ...
复制链接

扫一扫