整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
雄：又到了技术大黍讲技术的时刻，技术虽然干，但持续就会有收获。
话不多说有请技术大黍！
技术大黍：今天用对话场景给大家学CSS分割图片的方法。
学生：老师，在吗？能不能给我讲讲CSS分割图片的方法呀？有点懵。
老师：是通过i标签，把一个很多图标的图片，分割出来的那个吗？
学生：不是，是background:url("") X,Y坐标，我看很多网页设计都是这样写，但XY坐标毕竟只是一个点，怎么知道是那一张图片？应该说图片中的那一个部分
老师：那就是这个啥
老师：background-image以及background-position 它们分别的作用知道是什么意思吗？
学生：不太熟
老师：backgroun-image是设置背景图片、background-position是设置背景图片的位置，你可以先看看这两个样式的作用
学生：明白，但background-position是否也需要子绝对，父相对?
老师：不需要哦 ，那个是相对定位，这里是设置背景图片位置，跟相对和绝对没任何关系
老师：分割图片就是用这两个样式来实现的
学生：刚才的两个样式搞清楚了，能细讲一下如何分割的吗？
老师：我们就拿这张图来举例
老师：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>使用background分割图标</title>
</head>
<body>
<i></i>
</body>
</html>现在网页中 我只放了一个i标签，打开之后 肯定是什么都没有的
一片空白
学生：嗯，明白
老师：接下来，我们先打开PS，拿到对应图标的宽高以及位置
老师：你说说，那张图片，你想要展示那个图标吧，你选一个
学生：就apple吧
老师：这个么？
学生：对
老师：在PS里面，我们可以看到，苹果的宽高是30*36，单位是像素
老师：再看位置，苹果在x轴的位置是62，y轴的位置是310，单位依然是像素
老师：注意，这个位置是以苹果的左上角为参考的
学生：OK
老师：嗯，有了这两个数据，那么我们就可以开始写代码了
老师：嗯，有了这两个数据，那么我们就可以开始写代码了
老师：先把i标签设定为，行块布局方式，这样才能设置宽高，接着设置背景图片以及宽高
<style type="text/css">
i {
display: inline-block;
background-image: url("./imgs/main_icons.png");
width: 30px;
height: 36px;
}
</style>老师：运行之后，我们看到，这里有一点点头
老师：从新回到PS，我们可以看到，这个头，其实就是放大镜的那点点
老师：也就是说，我们设置宽高之后，多余的被裁切了，这个没问题吧？
学生：没问题
老师：好，现在关键的来了
学生：用代码移动裁剪框？
老师：对对对， 这张背景图片，我们只能看到，我们设定的宽高的区域，接下来，我们就通过background-position，移动背景图片
老师：把我们想要的那个图标，移动到这个现实区域就行了
老师：那移动多少呢？当然就是刚才我们测量的距离，也就是63*310
老师：那么背景图片，x轴是不是应该往左边移动63像素？
老师：往左边，是不是应该是-62px，同理，y轴是不是应该为-310px
<style type="text/css">
i {
display: inline-block;
background-image: url("./imgs/main_icons.png");
width: 30px;
height: 36px;
background-position: -62px -310px;
}
</style>老师：现在我们看到，是不是苹果图标 出来了？
学生：也就是说移动的是图片，X和Y轴是不动的？所以才是-的？
老师：我们移动的其实是那张背景图片，那个显示窗口其实是没变的，根据网页标准文档流原理，元素向左移动，就是负的
学生：懂了
技术大黍：今天的分享到这就结束了，谢谢小伙伴们。
大雄：好的，谢谢技术大黍。学会的小伙伴们记得‘点赞+订阅+关注+评论+转发’，没学会的小伙伴们，那就多看几遍，哈哈哈~~
这些标记用于将页面分成多个部分。熟练地掌握这些标记将意味着构建出具有良好的结构和布局的页面，使其更加友好和易于阅读。
div标记定义了HTML文件中的一个部分或分区。它通常包含需要组合在一起的标题、段落、表格或其他元素。通过设置<div class="">与css一起使用来设置网页某个部分的显示。
p标记用来定义文本的段落，就像你在书中看到的那样，一旦文本达到屏幕边缘就会自动折到下一行。当另一个<p>标记用于开始下一个段落时，浏览器将在段落之间添加一些空白。p标记具有以下属性：
span标记用于将内联元素组合在一起，例如句子中的几个单词，以便仅对这些单词应用css样式。span标记可以在div和p标记中使用，因为它不会创建新的块。
br标记相当于一个回车符，用于在新行开始文本。一行中的多个<br>标记将在网页上创建一个很大的垂直空间。
hr标记通常被称为HTML行分隔符标记，创建一条通常用于视觉上分隔页面的水平线。它具有以下属性：
出于某种原因，你希望文本在一条直线上继续，而不是在屏幕的边缘换行，可以使用nobr。注意：这将迫使用户向右滚动以查看行的其余部分，这是一种糟糕的设计。
下面是以上标记的示例：
浏览器显示内容如下所示：
一、基本线条：
1、<HR>
2、align线条位置（可选left、right、center）；width线条长度；color颜色；size厚度
<HRalign=center width=300 color=#987cb9SIZE=1>二、特效（效果并不是孤立的，可相互组合）
1、两头渐变透明：
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=2)" width="80%"color=#987cb9 SIZE=10>2、纺锤形：
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=1)" width="80%"color=#987cb9 SIZE=3>3、右边渐变透明：
<HR style="FILTER:alpha(opacity=0,finishopacity=100,style=1)" width="80%"color=#987cb9 SIZE=3>4、左边渐变透明：
<HR style="border:1 dashed #987cb9" width="80%"color=#987cb9 SIZE=1>5、虚线：
<HR style="border:3 double #987cb9" width="80%"color=#987cb9 SIZE=3>6、双线：
<HR style="FILTER:progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)"width="80%" color=#987cb9 SIZE=1>7、立体效果：
<HR style="FILTER:progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"width="80%" color=#987cb9 SIZE=1>8、钢针效果：
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">９．垂直分割线
<table border="1px" cellpadding="0" cellspacing="0"style="height:265px;border-left-style:solid;border-bottom-style:none;border-right-style:none;border-top-style:none">
HTML代码：
<hr style="border: 1px dotted #FF0000; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px">[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
*请认真填写需求信息，我们会在24小时内与您取得联系。
