CSS高级技巧

CSS精灵技术


需求分析


CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，

工作原理


CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

CSS滑动门技术


需求分析


为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。

工作原理


滑动门技术的关键在于图片拼接，它将一个不规则的大图切为几个小图，每一个小图都需要一个单独的HTML标记来定义。





完成切图工作之后，就需要用HTML标记来拼接这些图像，方法为定义3个盒子，将所得的3张小图分别作为盒子的背景。

其中左右两个盒子的大小固定，用于定义左右侧的小圆角背景。

中间的盒子不指定宽度和高度，靠文本内容撑开盒子，同时，将中间的小图平铺作为盒子的背景。

Margin负值的应用


同级元素应用负margin

对子元素应用负margin

HTML&CSS精选笔记_CSS高级技巧的更多相关文章

  1. HTML&CSS精选笔记_CSS入门

    CSS入门 CSS核心基础 CSS样式规则 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} CSS代码结构中的特点 CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照 ...

  2. HTML&CSS精选笔记_布局与兼容性

    布局与兼容性 CSS布局 版心和布局流程 为什么要应用布局? 阅读报纸时容易发现,虽然报纸中的内容很多,但是经过合理地排版,版面依然清晰.易读.同样,在制作网页时,要想使页面结构清晰.有条理,也需要对 ...

  3. HTML&CSS精选笔记_浮动与定位

    浮动与定位 元素的浮动 元素的浮动属性float 什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,移动到其父元素中指定位置的过程. 如何定义浮动? 在CSS中,通过float属 ...

  4. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

  5. HTML&CSS精选笔记_列表与超链接

    列表与超链接 列表标记 无序列表ul 无序列表的各个列表项之间没有顺序级别之分,是并列的 <ul> <li>列表项1</li> <li>列表项2< ...

  6. HTML&CSS精选笔记_盒子模型

    盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margi ...

  7. HTML&CSS精选笔记_HTML入门

    HTML入门 什么是HTML HTML基本文档格式 HTML文档的基本格式,其中主要包括<!DOCTYPE>文档类型声明.<html>根标记.<head>头部标记. ...

  8. HTML&CSS精选笔记_HTML与CSS网页设计概述

    HTML与CSS网页设计概述 Web基本概念 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 名词解释 Internet网络 就是通 ...

  9. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

随机推荐

  1. QT 4.8 静态库编译方法

    最最初踏上QT之路是受到了XiaomaGee的指点,相比于常规的窗口程序开发,QT有着以下特点: 1. 优良的跨平台特性(支持Win.Linux.Mac 不同的平台下只需重新编译即可使用) 2. 面向 ...

  2. Qt入门－layout布局

    开发一个图形界面应用程序,界面的布局影响到界面的美观.在设计一个界面之前,应该考虑到开发的界面可能给不用的用户使用,而用户的屏幕大小.纵横比例.分辨率可能不同,界面还可能是可缩放的,程序应该可以适应这 ...

  3. HttpClient-4.3.X 中get和post方法使用

    转自:http://linhongyu.blog.51cto.com/6373370/1538672 一.简介 HttpClient是Apache Jakarta Common下的子项目,用来提供高效 ...

  4. JVM Client Server启动设置

    看看你下面的这两个文件,是不是尺寸差别很大?%JAVA_HOME%/jre/bin/client/jvm.dll%JAVA_HOME%/jre/bin/server/jvm.dll   Jvm动态库有 ...

  5. HDFS入门

    HDFS入门 欢迎关注我的个人博客:http://www.cnblogs.com/yjd_hycf_space 更多大数据以及编程相关的精彩文章 为什么我们需要HDFS 文件系统由三部分组成:与文件管 ...

  6. iOS边练边学--view的封装

    一.view封装的思路: *如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部的子控件的创建屏蔽起来,不让外界关心 *外界可以传入对应的模型数据给view,view拿到模型数据 ...

  7. ggplot饼图

    目录: 原始图样 如何去除饼图中心的杂点 如何去除饼图旁边的标签 如何去掉左上角多出来的一横线 如何去掉图例的标题,并将图例放到上面 如何对图例的标签加上百分比 如何让饼图的小块按顺时针从大到小的顺序 ...

  8. NoSQL and Redis

    转自:http://www.cnblogs.com/fxjwind/archive/2011/12/10/2283344.html 首先谈谈为什么需要NoSQL? 这儿看到一篇blog说的不错http ...

  9. CSS格式化 CSS代码压缩工具

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. tensorflow 单机多GPU mnist实例

    http://blog.csdn.net/guotong1988/article/details/74748806 如何使用多GPU http://wiki.jikexueyuan.com/proje ...