zoukankan
html css js c++ java
八、CSS高级技巧
CSS精灵技术
需求分析
CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。
通常情况下,这个由很多小的背景图像合成的大图被称为精灵图,
工作原理
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)。然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。
CSS滑动门技术
需求分析
为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。
工作原理
滑动门技术的关键在于图片拼接,它将一个不规则的大图切为几个小图,每一个小图都需要一个单独的HTML标记来定义。
完成切图工作之后,就需要用HTML标记来拼接这些图像,方法为定义3个盒子,将所得的3张小图分别作为盒子的背景。
其中左右两个盒子的大小固定,用于定义左右侧的小圆角背景。
中间的盒子不指定宽度和高度,靠文本内容撑开盒子,同时,将中间的小图平铺作为盒子的背景。
Margin负值的应用
同级元素应用负margin
对子元素应用负margin
查看全文
相关阅读:
HashMap和Hashtable的区别
java倒计时三种简单实现方式
AngularJS---基本操作
AngularJS---认识AngularJS
Java线程面试题
JAVA中高访问量高并发的问题怎么解决?
Java高并发,如何解决,什么方式解决
Map总结
Github
反射
原文地址:https://www.cnblogs.com/geniuszhd/p/13057530.html
最新文章
001_项目开源之_STM32激光雕刻机
python爬虫学习第一章
python打包
phthon生成器的使用
python迭代器
python装饰器终极奥义
python集合的体会
python字典的一些深入体会
python列表与元组
python字符串与字节序列
热门文章
python延时加载
分布式系统事务一致性解决方案
如何用消息系统避免分布式事务?
保证分布式系统数据一致性的6种方案
redis.conf 配置文件介绍
2018年最新Java面试题及答案整理(持续完善中…)
从Java future 到 Guava ListenableFuture实现异步调用
深入分析synchronized的实现原理
java高并发解决思路
面试2
Copyright © 2011-2022 走看看