当前位置:天才代写 > tutorial > 其他教程 > 网页div css语言的使用技巧_课课家

网页div css语言的使用技巧_课课家

2018-05-23 08:00 星期三 所属: 其他教程 浏览:599

大家好,课课家小编今天教程是编程语言,愿意飞到教学文本教你一个很实用的,重要的网页设计技巧div css语言之一:“CSS Sprite”的应用程序。

在“CSS Sprite的技能,不仅可以帮助我们减少绘制的虚拟主机端的数量(并因此减少读取主机数),加快页面的打开速度,你还可以做进一步的网页,以提高搜索引擎排名,所以我们要学习这种一动,它会在发布的时候被应用,这样你可以很容易到达的页面优化的效果哦!

这一次,我们开始与流行的图标说明开始练了,其实原理很简单,就是需要使用的页面图标以图解合并进去,然后图标div css语法指定个人的位置,而不是HTML架构插入图片一个接一个,浪费宝贵的时间与空间哦。在完成说明之后,下面的副作用:

网页div css语言

CSS-图标雪碧

然后打开你使用的网页编辑器,按照我们的步骤教学实践起来!

[步骤一]新的HTML页面

首先,我们创建一个新的HTML页面,结构非常简单,如图示:

网页div css语言

步骤一:创建一个新的HTML页面

 

编写的代码:(课程名称将是更重要的,使用的第3题。)

网页div css语言

第一步:创建一个新的HTML页面(代码)

【第二步】额外的CSS样式表,并使用ID和类选择器。

添加空白div CSS文件(“flycan.css”),并附加只是HTML页。 (如图所示第7行)

然后,先用做单独性,设置版本的整体结构,但有重复

标签是用来做“AA”个人类选择器组命名〜“DD” 。

以此方式,代码HTML部分就完成了。

网页div css语言

第二步:额外的CSS样式表,使用ID和类

[步骤三]div css语法

开“flycan.css”文件,开始#BOX开始应用预先准备的背景图像上,输入宽度和高度(以像素为单位等于背景图像大小),并在屏幕设置为水平设置的。

网页div css语言

第三步:CSS语法 – #BOX

接下来,准备图标图像文件的组合说明,在这个例子中,我们已建立了每个图标大小是40PX * 40PX,这个图表4家公司合并后是40PX * 160px的宽度和高度。

网页div css语言

第三步:div css语法 – 图标标识合并成一个

然后,我们写了常见的div css语法

标记:(主要是图标的图片作为“背景图片”,而行的高度,设置共同边界,文本)

网页div css语言

上面案例所示,我们做单独的设置图标旁边的位置(即类=“AA”〜“DD”这部分),这是主要使用的“CSS雪碧”这种教学文章的,请见下表:

网页div css语言

步骤三:div css-分别设置图标位置

输入“背景位置”每个图标的价值,我记得第一级,后纵;

需要注意的是y轴部分中,如果顺序地从顶部至底部,然后负增量:0,-40px,-80px,-160px。

网页div css语言

第三步:div css-背景位置书写

所有上述语法输入,大功告成啰!

最后,我们再证明,以帮助您快速查看这篇文章的主要结构:

网页div css语言

这样的教学实践“CSS Sprite”后,从现在开始,课课家在线学习平台希望每个人都可以学习和使用,然后向更先进的div css语言前方道路哦! ^ _ ^

 

    关键字:

天才代写-代写联系方式