zoukankan
html css js c++ java
HTML&CSS精选笔记_CSS高级技巧
CSS高级技巧
CSS精灵技术
需求分析
CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。
通常情况下,这个由很多小的背景图像合成的大图被称为精灵图,
工作原理
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)。然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。
CSS滑动门技术
需求分析
为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。
工作原理
滑动门技术的关键在于图片拼接,它将一个不规则的大图切为几个小图,每一个小图都需要一个单独的HTML标记来定义。
完成切图工作之后,就需要用HTML标记来拼接这些图像,方法为定义3个盒子,将所得的3张小图分别作为盒子的背景。
其中左右两个盒子的大小固定,用于定义左右侧的小圆角背景。
中间的盒子不指定宽度和高度,靠文本内容撑开盒子,同时,将中间的小图平铺作为盒子的背景。
Margin负值的应用
同级元素应用负margin
对子元素应用负margin
查看全文
相关阅读:
【HDU1233】还是畅通工程(MST基础题)
【HDU2122】Ice_cream’s world III(MST基础题)
【HDU2120】Ice_cream's world I(并查集基础题)
【HDU1232】畅通工程(并查集基础题)
【HDU1102】Constructing Roads(MST基础题)
【HDU1856】More is better(并查集基础题)
【HDU1325】Is It A Tree?(并查集基础题)
ural 1907 Coffee and Buns
插头DP学习
hdu 5072 Coprime
原文地址:https://www.cnblogs.com/justdoitba/p/7582111.html
最新文章
$P5018 对称二叉树$
$P4305 [JLOI2011]不重复数字$
$P1195 口袋的天空$
$超级树状数组$
$义乌普及组2018预赛 聚会$
$P1596 [USACO10OCT]湖计数Lake Counting$
$P5269 欧稳欧再次学车$
D
C
CF488 B.Candy Boxes
热门文章
CF510 D
CF C. Fox And Names(拓扑排序)
CF B. Fox And Two Dots
血虐
SWJTU 2212 简单的GCD (莫比乌斯反演)
SWJTU 2208 最大覆盖
hdu 3461 Code Lock
【HDU1879】继续畅通工程(MST基础题)
【HDU1875】畅通工程再续(MST基础题)
UVa10653.Prince and Princess
Copyright © 2011-2022 走看看