103.尚硅谷_HTML&CSS基础_图片整合.avi原创

刚才呢，我们这里边简单的对我们这些CSS文件进行了一个压缩，那我们说了，其实呢，你不用非得说整用这工具，其实我们这个HB的自带是不是就有压缩呀，诶直接点它也可以去完成这个压缩的工作啊，那这个方式有很多啊，很多，所以你采用一种你习惯用就行了，然后呢，接下来我们来说一下啊，那接下来我们再下来进一步优化，就是我们这个，哎，我们这个图片的一个整合是吧，哎，我们可以来把我们这些图片给尝试做一下这个雪碧图啊，雪碧图当然这个图片呢，我就不都做了啊，咱们挑一些做啊，挑一个做，但是你要注意啊，我们要想用这个雪碧图，前提是我们来说啊，我要想用这个雪碧图，那我问你，我这个图片我能不能用雪碧图来做。能不能做成雪碧图，这个图片能不能？哎，你注意啊，我们用雪碧图它是有一个限制的，什么限怎么说呢？我那个雪碧图我设置的都是什么呀？是不是都是背景图片啊，因为只有背景图片，我是不是才能设置那些background那个position呀，哎，才能设置background position，但是这个图片我用的是什么呀？我是不是用的这个img，然后外边放了一个这个超链接呀，哎，我们来看一眼，那像这种东西我们能不能用小碧图了，这个东西你想想，如果你要包括这个，包括我们上边这个超链接，我们来看看啊，这个能不能用雪碧图不能用，为什么？因为你用的是什么呀？Img标签MG，你引入一个图片，你能不能说只引入图片的一部分啊，你一引入，是不是引入了整个图片啊，哎，那所以你想你整于把这东西做雪碧图里，这是不是，是不是叫。

就没法看了呀，那就没法看了啊，所以注意雪碧图只适用于背景图片啊，只适用于这个背景图片，而且还是什么呀，还得是那种宽高都固定的背景啊，还得是那种宽高度固定的背景啊，那好，那现在我们来看谁可以做呀，这个这个行不行。哎，然后什么呀，这个banner，这个banner BG啊，这个线呀，这个按钮啊，这个什么TRA啊，什么这个MGBG啊，什么这个音into的是不是都行啊，诶都可以去做啊，那咱们现在尝试去拼两个，我们就不全拼了啊，不全拼了我们尝试去拼两个，那这里边呢，我们现来打开一个图片，就拿一个这个喷子是吧？来咱们来打开，打开方式呢，用我们这个打开，那还是这个问题，我们要去做这个雪碧图，我们是不是这个画布是不是太小了呀，我们先需要去调整一下我们这个画布啊，调整一下画布，直接我们来点击我们这个，呃，图像来一什么呀，画布大小先，这大小呢，我也不确定调多少，调的稍微的大一点，比如说我就来一个这个100乘以这个100，当然可能是用不了这么大的是吧，咱们现在就拼几个不全拼，然后呢，让它往什么呀，往这个右下扩充吧，哎，往右下扩充啊，然后一确定我这画布呢。

挑半天也没挑到20个是吧，这画布还有点小，咱们再大点，画布大小来一个这个300吧，还是啊，往右下扩充，诶是不是变了这么大个啊，诶画布调完了，那接下来的工作我们是不是把那个图片往里拖呀？哎往里拖那怎么拖呢？直接其实比较简单的方式，直接直接干嘛呀，直接拖住图片，比如说我想把它整合进来干嘛呢？把它往这个里拖，到这儿你一撒手是不是跑这儿来了，诶你可以去调整一下它这个位置，诶调整一下它这个位置，然后到这儿呢，一点这勾是不是就过来了，哎，然后呢，这里边也可以干嘛呀，通过这块是不是也可以去拖动啊，哎，可以放到我们这个任意的一个位置，但是这个注意啊，注意这个图片我是不是可以紧贴着放啊，但注意啊，不建议紧贴着放，建议什么呢？他们之间你给他留一点什么呀，留点距离啊，不要离太近了，比如说我这里边给他留一个什么呢。

哎，我就留一个这个什么呀，十个像素的一个距离啊，在这儿是一个十个像素距离，诶这样让他们保持一点距离，待会我们设置的时候更好更好设置一点啊，更好设计点好，那这个按钮我是不是给它给它放进去了，给它放进去了啊，然后再来看，再来看吧，还有谁呢？比如说我还想把谁整进来，我这是不是还有这两个按钮啊，哎，一个绿的，一个不是一绿的，一个蓝的，一个这个白的对吧？诶来，我把这个按钮也给整进来。

这个按钮拖进来以后呢，我们想想这就放哪了，横着放呢也行是吧，但是我们可以干嘛呀，是不放这啊，哎放这啊，放在这个位置，然后也是给他点一个勾给他确定还是呢，给他留一个这个。距离咱们往下呢来的。留一点儿这个。距离大概是这个位置啊这个位置，然后把这哥们呢往上一挪，诶是不是这个按钮也就过来了，哎，这个按钮也过来了，然后我们下边还有一个按钮，把那个按钮一块给他干嘛呀，一块给它整过来也是啊，咱们给它也这来放十个像素的距离，就是说你别给它放的太太近了，把别的放的太近了，然后把那个按钮也给它整过来，按钮呢，我们这个白色的在这呢啊B天一也是给它拖过来往这一放。

诶，这个按钮注意啊，它有一个这个阴影啊，它有个阴影，你可能这块可能感觉看不太清楚是吧，有一个阴影。哎，在这个位置啊，它的大小是实际上是这么大的啊，实际上这么大啊，不要忘了这个阴影，现在这四个图片是不是拼到一起了呀，你要还想拼，还能不能拼啊，是不是接着来啊，哎，其实都一样了，比如说你想把这个input的还有这个T是不是都能放进来啊，哎，都可以放进来啊，那现在咱们就给它，哎咱们就给它拼成这三个吧，诶这四个吧，然后剩下其实都是大同小异了啊，自己去设计一下，当然最好呢，诶可以有一些，诶可以用一些其他工具，它可以有一些什么呀，自动生成一些工具啊，我们就暂时呢先用这种方式，那现在这个拼完了，实际上拼完了以后，发现我们这画布是不是有点有点大了呀，哎，有点大了，那你说我就这么大个也行，我不调整白的地方是不是就不用啊也行，那你说需要小一点干嘛呢？你是不是把这花布量一下到概到哪啊。是不是现在我这么大就够用了，哎，这是一个这个164109吧，164109来我们来调整一下我们这个画布的一个大小，164，宽度是一个164，然后高度是一个109啊109，然后看着往哪调啊，我们来我们要往往哪调啊，是往这个角缩呀，哎往这个角缩，然后一确定继续是是正好从这块了，诶正好从这块了，然后文件存储为我们这个web所用的一个格式啊注意我就处理两个，一个是我们这个pointer，还有一个是我们这个两个按钮啊两个按钮直接这没得选了，存储一个我们这个诶PD啊存储存储直接存做我们这个位置吧，叫做一个SC，不是写啥去了，这是SP写script啊，我们这个script啊好，那这个图片整合完了，接下来我们是不是可以在我们这个项目里去应用了呀，哎，应用的时候我们来改，那这块要用我就得改我的这个什么了。

DSS文件了吧，要注意了，这回你要改谁呀，你会不会说改他的呀，改这玩意有点麻烦是吧？哎，所以我们不动它，我们还是改我们这个源码啊，改我们这源码，但是你改它的同时，你要记住把你这个引入在干嘛呀。

诶，你也改成你的源码，不然你这个效就看不出来了啊，保存，然后我们就来改一下，我们来看看哪可以改啊，哪可以改，呃，这里边呢，我们先给它跑起来吧，运行起来哪可以改啊，这个点的是不是可以改啊，然后还有什么呀，这个六个按钮是不是都可以变啊，哎，都可以变啊来我们找一下，找到我们这个CSS，找到这个点点叫做一个pointer pointer我们来看看哪用了。在这呢吧，哎，在这呢，那这回我就不用它了，来什么呢？我们那个点PD这里边也改成这个sp.PD啊，我们先这么改啊，先这么改，但这么改肯定差点事啊，哎，来往下找，还有我们这个。Button button button是不是跟这呢呀，也改成我们这个SP，还有再往下走，我们最后那个button，最后那个button在这呢，是不是也改成我们这个睡姐，哎，现在改完了以后，这个效果肯定是。

特别的帅的是吧？哎，这块都改完了，但是你发现所有点是不是都白了呀，再下看呢，挺可爱的是吧？哎，挺可爱的，往下看呢，是不是这样啊，为啥出这个问题来，哎，我们是不是没有调整它那个偏移量啊，默认是不是都从那个左上开始显示啊，哎，从这个左上开始显示，所以这里边注意改完了图片我们还得去修改它这个偏移量啊，偏移量我们一个一个来回到我们最上边，我们找到我们那个pointer pointer我们先来说我这个普通的A我还用不用改了，不用改了吧，普通的A我是不是正好默认是不是显示我这个第一个呀，诶，所以说不用改了，然后我们来看这个active用不用改，Active是不是得用改啊，诶，Active我们来看我怎么改，先来看我先说垂直方向用不用动，垂直方向是不用动啊，哎，我要用这个雪比图，我是不是相当于把这个图给移动到这个位置啊，哎，那我其实水平方向垂直方向是不用动的，我只用干嘛呀，是不是水平方向往往左移是不是行了呀，左移多少啊。

哎，是不是一个27个像素啊，诶27个像素，那我水平方向应该写多少，是27还是什么？哎是不负27啊，水平方向负27个像速垂直方向零是不是就OK了呀，来这一刷新，现在看走你这点是不是过来了，哎这点过来了啊，然后再往下看下边我们这个button这个B天一第一个button呢，实际上这一块应该是我这个白色按钮吧，白色按钮还是这块我们写的比较规整，它实际上干嘛呀，它际上我是不是需要把这个按钮从这个位置移动到移动到这个左上角来呀？哎，那还是这个问题，我这个水平方向用不动不用动，我是不是需要只需要动这个垂直啊，诶垂直我们来看动多少。这是一个70，诶垂直方向向上移动70，也就说是一个零，然后是负70吧，诶0PS，然后一个负70PS，往下找到我们这个图片啊，找到图片这个SP在这来一个什么呢？水平方向0PX，然后垂直方向是一个负70个像素一保存，这一刷新走，你是不是就过来了啊，就过来了啊，然后再来看我最后这个按钮，最后这个按钮呢，其实也是水平方向不用动，是不是只用垂直方向啊垂垂直方向我们来看看这是一个二七，所以这是一个零干嘛呀，负二七啊零负二七找到它。

在这来一个0PX，然后来一个负27个像素，这一保存，咱们再来看一刷新走NY是不是就过来了，那就过来了啊，所以有了这个雪比图以后，你在改的时候，你要想着给它去设置这个什么呀，偏移量啊，偏移量一定要给它设置，对你要知道它是怎么去测量的啊，怎么去测量的，好，那咱们这个整合就完事了啊，那咱们现在这个图片整合呢，我就整合这么一个四个，那其他的包括我们这些音input的呀，还有这个泰瑞啊，实际上都可以干嘛呀，整合到一起啊，整合到一起，还有一点你就是一定要注意，我们这个图片整合仅仅适用于什么背景图片啊，你要是说那种通过IG引入的图片，我们是不适用于我们什么呀，图片整合的啊，不是用图片整合的，好，这个是我们说的这个整合图片。