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
查看全文
相关阅读:
手机网页中 唤醒拨打电话和发送短信,浏览器和微信浏览器都可以用
用于滚动 焦点图的MSClass
oracle使用connect by进行级联查询 树型菜单
Jstl标签汇总
EL表达式报错: According to TLD or attribute directive in tag file, attribute value does not accept any expressions
EL表达式简介
SSM整合(四)-整合后配置文件汇总
Maven的pom报maven-surefire-plugin:pom:2.12.4
SSM整合(三):Spring4与Mybatis3与SpringMVC整合
SSM整合(二):Spring4与Mybatis3整合
原文地址:https://www.cnblogs.com/justdoitba/p/7582111.html
最新文章
AtCoder ExaWizards 2019 简要题解
[Codeforces1137D]Cooperative Game
边分治学习小记
题解
sphinx在c#.net平台下使用(一)
note.js之 Mongodb在Nodejs上的配置及session会话机制的实现
note.js之 Nodejs+Express4在windows下的配置
FastDFS在.Net平台上的使用
FastDFS在centos上的安装配置与使用
Mysql主从配置,实现读写分离
热门文章
Nginx简单实现网站的负载均衡
使用ssis完成excel的数据导入
nodejs结合apiblue实现MockServer
let'encript 解决证书问题
DTCMS会员中心添加新页面
微信服务号一些记录,与DTCMS微信功能二次开发
省市城市联动的多种特效表现
MG7780打印机喷嘴堵塞
.net视频截图功能,没测试
css半透明
Copyright © 2011-2022 走看看