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
查看全文
相关阅读:
Flask学习笔记1:基础知识
Git学习笔记3:下载指定项目的单个文件或文件夹
Tensorflow学习笔记6:解决tensorflow训练过程中GPU未调用问题
Python学习笔记32:UDP协议链接
Python学习笔记31:图片URL批量转存到本地
软件安装笔记3:tesseract-ocr for mac和homebrew
软件安装笔记2:Aria2百度云加速下载器
软件安装笔记1:破解安装SecureCRT for mac及解决中文乱码问题
forward(转发)与redirect(重定向)的区别
剑指Offer_编程题_丑数
原文地址:https://www.cnblogs.com/geniuszhd/p/13057530.html
最新文章
判断exe程序是否在运行
单例模式
使用二维数组打印一个10行杨辉三角
java编程规范
jdk下载与安装及配置环境变量
Java的历史
常用的DOS命令
求质数的两种方法1-100
Maven项目创建
使用VMware安装Linux系统
热门文章
ObjectUtils 类的方法
[转]FactoryBean用法
[转]sleep和wait有什么区别
BeanFactory 接口描述
C#创建类型
C#泛型简介
NSIS打包环境搭建及入门
C#中的char、string和StringBuilder的使用
Python学习笔记33:用struct模块解决tcp协议传输过程中的黏包问题
Flask学习笔记2:Web表单
Copyright © 2011-2022 走看看