runxinzhi.com
首页
百度搜索
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
相关阅读:
计算机操作系统实验之_进程观测_实验报告
KVO(NSKeyValueObserving 键 值编码)与KVC(NSKeyValueCoding 键值观察机制)详解
用arrayWithObject:初始化,参数为空数组NSArray时出现的异常
用QtCreator实现可扩展对话框实验
xcode4 设置调试错误信息小结
从“Qt信号槽机制”到”iOS(MVC)中的Target——Action机制”
Qt源码分析之信号和槽机制
objectivec 学习之NSMutableDictionary介绍
iOS面试题汇总 (1)
报告论文:关于一个小型学生信息管理系统研究
原文地址:https://www.cnblogs.com/justdoitba/p/7582111.html
最新文章
[泉州4月月赛]
[国家集训队]数颜色 / 维护队列
[IOI2011]Race
树上游戏
Java Excel API
HashMap usage
faceconfig.xml
How to make a mask on a image
How to download a file
现在就开始使用AngularJS的三个重要原因 java程序员
热门文章
jQuery的图片放大镜效果插件 elevateZoom java程序员
android之文件读写实例测试 java程序员
来源:跨浏览器的HTML5 Audio解决方案 Audio5js java程序员
android:ProgressDialog实现 java程序员
android:ListView实现 java程序员
android用Intent实现Activity跳转 java程序员
免费的简单化图标集 296个12x12的PNG格式图标 java程序员
android:音频播放 java程序员
android之SQLite java程序员
iOS面试题汇总 (2)
Copyright © 2020-2023
润新知