CSS精灵图(sprite)
一、什么是精灵图？当用户访问一个网站时，浏览器会向服务器发送一系列请求，比如说网页上的每张图像都需要经过一次请求才能最终展示给用户。然而，一个网页中往往包含大量的图像资源（例如在页面中展示的图片、网页的背景图像以及一些装饰性的图像等），这就会导致浏览器频繁的请求服务器，大大降低网页的加载速度。
CSS
CSS圆角属性（border-radius）
在制作网页的过程中，有时我们可能需要实现圆角的效果，以前的做法是通过切图（将设计稿切成便于制作成页面的图片），使用多个背景图像来实现圆角。在CSS3出现之后就不需要这么麻烦了，CSS3中提供了一系列属性来设置元素的圆角效果，如下所示：border-top-left-radius为元素左上角设置圆角效果
CSS响应式布局（自适应布局）
什么是响应式布局？响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。
CSS元素堆叠（z-index）
因为我们直观的以为HTML网页是二维平面，因为文本、图像或其他元素都是按照顺序排列，但，实际的网页是三维立体的，元素之间可能会发生堆叠（重叠），可以通过CSS中的z-index属性来设置元素的堆叠顺序。1.z-index属性的含义一个元素在文档中的层叠顺序，用于确认元素在当前层叠上下文中的层叠级别。
CSS过渡效果（transition）
通常当CSS的属性值更改后，浏览器会立即更新相应的样式，例如当鼠标悬停在元素上时，通过:hover选择器定义的样式会立即应用在元素上。在CSS3中加入了一项过渡功能，通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画，但无需借助flash或JavaScript。
CSS列表（list-style）
本篇将主要介绍列表的CSS样式编写，在学习之前，我们回忆一下HTML中的有序列表和无序列表。举例：<span>无序列表-我的爱好：</span><ul><li>咖啡</li><li>牛奶</li><li>果汁</li></ul><span>有序列表-成绩排行：</span><ol><li>张三</li