基本概念
CSS组成部分
CSS的规则
引入CSS样式的方法
颜色的表示
CSS Reset
选择器分类
浮动
盒子模型
box-sizing属性
实例：实现“田字格”布局
实例：实现metro风格布局
实例：画三角形
实例：画一棵树
设置字体属性
设置段落属性
设置背景及背景图片的属性
自定义列表标志
display常用属性
inline-block去除间距
例子：垂直居中对齐
position属性
案例：实现顶部导航
案例：实现登录界面
IE 6 双倍margin的bug
overflow属性
单页面设计
响应式设计
常用工具
参考文献

前言

本教程针对熟悉HTML4、初步使用过CSS的人。

基本概念

CSS(Cascade Style Sheet)，即层级样式表。
HTML可以说只是给网页填充了内容，CSS则是对网页进行化妆、修饰，比如给文字设置字体、颜色、大小等。
我们实现网页的第一步是使用DIV将页面划分成多个块，参见下面的"华东师范大学网页布局例子"。
以前在HTML标签中能够通过设置属性的方式(比如<div width="80px">)为标签定义样式（类似CSS的功能），但是现在推荐使用CSS设置(div{width:80px;})，即"HTML与CSS分离"，在web中还有“页面展示与逻辑处理分离”等概念。
一般来说目前实现网页时不需要从零做起，网上有很多好的CSS代码可以使用（或者CSS框架，如：Yahoo Pure 等），但是为了能看懂那些代码（或更好地学习CSS框架），我们需要学习CSS的基本知识。
CSS参考手册：http://css.doyoe.com/

CSS组成部分

CSS的基本结构如下：

<selector>{
　　<attr1>:<value1>;
　　<attr2>:<value2>;
　　<attr3>:<value3>;
　　......
　　<attrN>:<valueN>;
}

解释：

<selector>的中文名叫“选择器”，表示对哪个元素设置样式。<selector>大括号内部设置具体的样式，如字体等。
设置样式的方法是通过多对<attr>:<value>组合而成，中间用分号( ; )分隔。

这里举个简单的例子：

body{ //对<body>内的元素进行设置
　　font-size:12px; //设置字体大小为12px,px是pixel的缩写，表示像素
　　font-family:sans-serif,Georgia; //设置首选字体为sans-serif,如果本机内没安装此字体，则使用Georgia
}

CSS的规则

继承原则：如果父标签定义了某样式，则默认对应的子标签也应用该样式。
就近原则：离修饰标签越近的CSS样式优先级越高。

引入CSS样式的方法

这里只介绍两种最常用的：

内部样式表：在<head></head>内部添加：<style type="text/css">......</style>
外部样式表：将CSS放在文件(如home.css)中，并在<head></head>内部添加：<link rel="stylesheet" type="text/css" href="home.css"/>

颜色的表示

在CSS中不可避免会遇到颜色设置，因此这里我们需要学习怎么表示颜色。
共有4种颜色表示法：

1. 预定义颜色：例如“color:black”中的black就是预定义的颜色。
2. 十六进制表示法：#ABCDEF，其中AB、CD、EF分别对应R、G、B。例子：#FFFFFF 表示白色。
3. 短十六进制表示法：这是对第二种表示法的特例，当A=B时A和B只写一个(同样地，C=D、E=F 时也类似)。例子：#FF00CC 可简写为 #F0C.
4. rgb表示法：rgb(255,255,255) 表示白色。

CSS Reset

起因：在不同浏览器中的默认CSS样式可能是不同的，比如按钮，在IE中可能是样式A，在Chrome中是样式B，在Firefox中是样式C，这种不一致性会让开发者不爽。因此就需要CSS Reset来统一不同浏览器的默认样式。
CSS reset 通俗地说就是“一段CSS代码，这段代码能够初始化基本的标签，使得在不同浏览器中，各标签的显示样式是一样的。”
可以在 http://www.cssreset.com/ 中寻找最近最流行的CSS Reset代码。
还有一个更加应用广泛的替代CSS Reset的代码：Normalize.css，他被很多框架使用。
最常用的CSS Reset代码是 Eric Meyer 写的“CSS Reset 2.0”，代码如下：

 /**

  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)

  * http://cssreset.com

  */

 html, body, div, span, applet, object, iframe,

 h1, h2, h3, h4, h5, h6, p, blockquote, pre,

 a, abbr, acronym, address, big, cite, code,

 del, dfn, em, img, ins, kbd, q, s, samp,

 small, strike, strong, sub, sup, tt, var,

 b, u, i, center,

 dl, dt, dd, ol, ul, li,

 fieldset, form, label, legend,

 table, caption, tbody, tfoot, thead, tr, th, td,

 article, aside, canvas, details, embed,

 figure, figcaption, footer, header, hgroup,

 menu, nav, output, ruby, section, summary,

 time, mark, audio, video {

     margin: 0;

     padding: 0;

     border: 0;

     font-size: 100%;

     font: inherit;

     vertical-align: baseline;

 }

 /* HTML5 display-role reset for older browsers */

 article, aside, details, figcaption, figure,

 footer, header, hgroup, menu, nav, section {

     display: block;

 }

 body {

     line-height: 1;

 }

 ol, ul {

     list-style: none;

 }

 blockquote, q {

     quotes: none;

 }

 blockquote:before, blockquote:after,

 q:before, q:after {

     content: '';

     content: none;

 }

 table {

     border-collapse: collapse;

     border-spacing: 0;

 }

CSS Reset

选择器分类

* : 选择任何元素。格式为：*{...}
标签选择器：选择指定标签。格式为：<tag>{...}
id选择器：选择指定 id 的元素。某个 id 在一个页面中是唯一的。格式为：#<id>{...}
class选择器：选择指定class的元素。格式为：.<class>{...}。值得一提的是，class选择器的变型：

与标签选择器一起使用，格式为：<tag>.<class>。表示只选择具有class=<class>的<tag>标签。
多个class一起使用，格式为：.<class1>.<class2>。表示class同时属于<class1>和<class2>的元素。

后代选择器：选择指定元素的指定后代元素（后代和子元素是不同的，并不一定要紧跟在父元素里面）。格式为：<father> <空格><descendent> ，例如 div h3 解释为“div元素的所有<h3>标签”。
子元素选择器：选择指定元素的子元素（子元素指的是孩子，并不包含孙子...）。格式为：<father> > <child>。
属性选择器: 选择具有指定属性或指定属性具有特定值的元素。格式为：<selector>[<attribute1>][<attribute2>]或<selector>[<attribute1>="<value1>"][<attribute2>="<value2>"]。
- 部分匹配属性值：<selector>[<attribute>*="<value>"] 表示只要<attribute>属性中包含<value>值即可。
相邻兄弟选择器：选择(紧挨着的)相邻的兄弟的元素。格式为：<selector1> + <selector2>。表示选择紧跟在selector1后面的selector2。
伪类选择器：
- <selector>:first-child{...} . 当<selector>为某个元素的第一个子元素时应用样式。
- <selector>:focus{...} . 当<selector>拥有键盘输入焦点时应用样式。
- a:link{...} . 当<a>未被访问过时应用样式。
- a:visited{...}. 当<a>已被访问时应用样式。
- a:hover{...} . 当鼠标悬浮在<a>上时应用样式。（随着移动设备的越来越流行，我们发现移动设备是没有鼠标的，因此没有hover这个概念，hover变得不那么重要了。 --《2014年七个最明显的web设计趋势及其生存技巧》）
- a:active{...}. 当<a>被激活(激活指的是鼠标按下且未松开的这段时间)时应用样式。
- 注意：在css中一定要以：link -> visited -> hover -> active 的顺序进行声明！！！！
伪元素选择器：
- <selector>:first-line{...}. 选择<selector>的第一行。注意：<selector>必须是块级元素。
- <selector>:first-letter{...}. 选择<selector>的第一个字母。注意：<selector>必须是块级元素。
- <selector>:before{content:"..."}. 在<selector>的前面插入内容。例如：h1:before{content:url(1.jpg)}表示在<h1>前面插入一张图片。
- <selector>:after{content:"..."}. 在<selector>的后面插入内容。
选择器分组：多个选择器可以用逗号（,）隔开，表示同时对多个选择器设置样式。格式为：<selector1>,<selector2>,<selector3>{...}

应用：

选择一个有序列表中的第三行：ol > li:first-child + li + li
选择class="c1"的div：div.c1

选择器定义准则：

最常用的选择器：id选择器、class选择器。
尽量少使用复杂层级关系。
使用class代替层级关系。

在不同的框架中(如 JQuery)可能会新增很多其他选择器，但是以上的几个选择器是最基本的。

实例：实现“华东师范大学主页”布局

此处只是实现布局，而不是实现全部效果。

效果：

二、CSS 基本介绍

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <style type="text/css">

             #container{

                 margin:0 auto;

                 max-width:980px;

                 background:gray;

             }

             #header{

                 background:red;

                 height:100px;

             }

             #nav{

                 background:orange;

                 height:50px;

             }

             #banner{

                 background:blue;

                 height:300px;

             }

             #news{

                 background:green;

                 width:30%;

                 height:100px;

                 float:left;

             }

             #focus{

                 background:yellow;

                 width:30%;

                 height:100px;

                 float:left;

             }

             #resources{

                 background:gray;

                 width:40%;

                 height:100px;

                 float:right;

             }

             #footer{

                 background:purple;

                 height:100px;

                 clear:left;

             }

         </style>

     </head>

     <body>

         <div id="container">

             <div id="header">header</div>

             <div id="nav">nav</div>

             <div id="banner">banner</div>

             <div id="main">

                 <div id="news">news</div>

                 <div id="focus">focus</div>

                 <div id="resources">resources</div>

             </div>

             <div id="footer">footer</div>

         </div>

     </body>

 </html>

float(浮动)

定义：我们可以把一个HTML页面看成有两层，高层是浮动层(存放浮动元素)，低层是一般层(存放一般元素)。而浮动元素会放在浮动层中（官方解释为“脱离文档流”）。如果浮动层元素和一般层元素重叠，则浮动层覆盖一般层。
将DIV设置为浮动后会使得DIV不再独占一行。
如果父DIV是非浮动的，而其子DIV是浮动的，则父DIV的高度是0，即父DIV的高度并没有被子DIV撑起来。下面的例子中就体现了这一点：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style type="text/css">

     #child1{

         float:left;

         width:300px;

         height:300px;

         background:yellow;

     }

     #child2{

         float:left;

         width:300px;

         height:300px;

         background:blue;

     }

 </style>

 </head>

 <body>

     <div id="father">

         <div id="child1"></div>

         <div id="child2"></div>

     </div>

 </body>

 </html>

那么怎么将父元素撑开呢？解决方法就是在父元素中加入"overflow:auto;zoom:1;"

盒子模型

为什么要叫盒子模型？前面已经说过一个网页的设计布局其实就是怎么嵌套DIV标签（参见："华东师范大学网页布局例子"），每个DIV就是一个块(这个块就是盒子)，因此盒子模型就是对DIV标签的介绍。
注意：盒子模型仅适用于块级元素。
盒子模型的核心元素有 DIV标签、对应的CSS属性： width(存放内容的宽度)、height(存放内容的高度)、padding(内边距)、border(边框)、margin(外边距)。图示如下所示：

二、CSS 基本介绍

box-sizing属性

在盒子模型中，我们可以看到一个盒子的真实宽度是：border-left+padding-left+width+padding-right+border-right，如果设置了两个DIV的width属性是一样的，但是padding值不一样会导致盒子宽度不一样，这样会很麻烦。
通常我们会设置："*{box-sizing:border-box}" 。这样边框和内边距不会改变盒子的宽度，如果我们设置了width=200px，则盒子宽度永远是200px。

实例：实现“田字格”布局

效果：

二、CSS 基本介绍

说明：

此实例主要使用“浮动”(float)、“清除浮动”(clear)两个知识点。对四个div使用左浮动，对第三个div使用清除左浮动，使得第三个div的左侧不允许有浮动元素。

代码：

 <!--实现了田字格布局-->

 <!DOCTYPE html>

 <html>

     <head>

         <style type="text/css">

             div{

                 border-style: solid;

                 border-color: #000000;

                 border-width:5px;

                 margin:10px;

                 width:100px;

                 height:100px;

             }

             #c1,#c2,#c3,#c4{

                 float:left;

             }

             #c3{

                 clear:left;

             }

         </style>

     </head>

     <body>

         <div id="c1"></div>

         <div id="c2"></div>

         <div id="c3"></div>

         <div id="c4"></div>

     </body>

 </html>

实例：实现metro风格布局

如何文字在div中垂直居中？

将 line-height 属性和 height 属性的值设置成一样即可。

效果：

二、CSS 基本介绍

代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>实现metro布局</title>

 <style>

     html{

         font-family:"Microsoft YaHei UI";

         color:white;

     }

     #container{

         width:655px;

         height:90px;

     }

     #d1,#d2,#d3,#d4,#d5,#d6,#d7,#d8,#d9,#d10{

         float:left;

         text-align:center;    /*文字水平居中*/

         margin:1px;

     }

     #d1{

         background-color:#CC3333;

         width:106px;

         height:58px;

         line-height:58px;    /*将height和line-height设置为一样可以使文字垂直居中*/

         font-size:20px;

     }

     #d2{

         background-color:#0048BE;

         font-size:25px;

         width:215px;

         height:58px;

         line-height:58px;

     }

     #d3{

         background-color:#FF9900;

         font-size:12px;

         width:107px;

         height:28px;

         line-height:28px;

     }

     #d4{

         background-color:#FF9900;

         font-size:12px;

         width:107px;

         height:28px;

         line-height:28px;

         margin-left:0px;

     }

     #d5{

         background-color:#91009E;

         font-size:20px;

         width:106px;

         height:58px;

         line-height:58px;

     }

     #d6{

         background-color:#00839A;

         font-size:12px;

         width:106px;

         height:30px;

         line-height:30px;

     }

     #d7{

         background-color:#542FB0;

         font-size:12px;

         width:107px;

         height:30px;

         line-height:30px;

     }

     #d8{

         background-color:#FF9900;

         font-size:12px;

         width:107px;

         height:30px;

         line-height:30px;

         margin-left:0px;

     }

     #d9{

         background-color:#0048BE;

         font-size:25px;

         width:215px;

         height:60px;

         line-height:60px;

         margin-top:-29px;

     }

     #d10{

         background-color:#542FB0;

         font-size:12px;

         width:106px;

         height:30px;

         line-height:30px;

     }

 </style>

 </head>

 <body>

     <div id="container">

         <div id="d1">燕麦食品</div>

         <div id="d2">自学电脑</div>

         <div id="d3">51我要自学网</div>

         <div id="d4">机械设计与制造</div>

         <div id="d5">汽车年审</div>

         <div id="d6">自学计算机</div>

         <div id="d7">入门吉他</div>

         <div id="d8">图标设计</div>

         <div id="d9">Javascript框架</div>

         <div id="d10">木吉他入门教学</div>

     </div>

 </body>

 </html>

metro风格布局

实例：画三角形

效果如下：

二、CSS 基本介绍

分析：

这里最重要的是要了解相邻边框（比如左边框与下边框）的衔接处的效果。
在HTML5中，我们可以使用canvas技术画图，并且实现效果更加美观，这里只是为了熟悉CSS的知识而已。

HTML4代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>使用CSS画一个三角形</title>

 <style type="text/css">

     #child{

         width:0px;

         height:0px;

         border:100px solid red;

         border-top-color:transparent;

         border-left-color:transparent;

         border-right-color:transparent;

     }

 </style>

 </head>

 <body>

     <div id="child"></div>

 </body>

 </html>

这里补充使用HTML5 Canvas 画一个三角形，canvas技术可以理解为“把页面当作一个画布，你可以在画布上画任何的图形”。canvas的使用请查阅额外资料。

HTML5代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>使用HTML5 Canvas 画一个三角形</title>

 </head>

 <body>

     <canvas id="canvas" width="300" height="300">

         该浏览器不支持 canvas api

     </canvas>

 </body>

 <script type="text/javascript">

     var canvas = document.getElementById("canvas");

     var context = canvas.getContext("2d");

     context.fillStyle="red";    //填充颜色为红色

     context.beginPath();        //开始路径

     context.moveTo(100,100);    //起始点为(100,100)

     context.lineTo(75,125);        //从(100,100)到(75,125)有一条线

     context.lineTo(125,125);    //从(75,125)到(125,125)有一条线

     context.closePath();        //从(125,125)到(100,100)有一条线

     context.fill();                //填充

 </script>

 </html>

实例：画一棵树

效果如下：

二、CSS 基本介绍

分析：利用CSS中的border属性画两个三角形和一个矩形。

代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>CSS画一棵树</title>

 <style type="text/css">

     #child1{

         width:0px;

         height:0px;

         border:100px solid green;

         border-top-color:transparent;

         border-left-color:transparent;

         border-right-color:transparent;

     }

     #child2{

         width:0px;

         height:0px;

         border:100px solid green;

         border-top-style:none;

         border-top-color:transparent;

         border-left-color:transparent;

         border-right-color:transparent;

     }

     #child3{

         width:80px;

         height:50px;

         float:left;

     }

     #child4{

         float:left;

         width:0px;

         height:50px;

         border:20px solid brown;

     }

 </style>

 </head>

 <body>

     <div id="child1"></div>    <!--第一片叶子 -->

     <div id="child2"></div> <!--第二片叶子 -->

     <div id="child3"></div> <!--透明支撑物，为了将树干放到叶子中间-->

     <div id="child4"></div> <!--树干-->

 </body>

 </html>

设置字体属性

font-style: 设置斜体。可选值有：normal(正常), italic(斜体).
font-weight: 设置粗体。可选值有：normal(正常), bold(粗体).
font-size: 设置字号。
line-height: 设置行高，即一行的高度。
font-family: 设置字体。这里值得一提的是可以同时写多个字体，如："font-family:'雅黑','宋体','黑体';"，因为不同机器上拥有的字体可能不一样，如果有的机器没有雅黑字体，则使用宋体，如果没有宋体，最后使用黑体。
color: 设置字的颜色。

设置段落属性

text-indent: 设置缩进大小。可选值为数字即可。
text-align: 文字对齐方式。可选值有：left(左对齐，默认), right(右对齐), center(居中), justify(两端对齐).
text-decoration: 设置段落的额外装饰。可选值有：underline(下划线), overline(上划线), line-through(删除线), none（无，默认）.
letter-spacing: 设置字符间距。

设置背景及背景图片的属性

background-color: 设置背景颜色。
background-image: 设置背景图片。值类似：url(1.jpg)
background-repeat: 设置背景图片是否重复。可选值有：repeat(不断重复), no-repeat(不重复), repeat-x(在x轴方向重复), repeat-y(在y轴方向重复).
background-attachment: 设置背景图像是否固定还是随内容滚动。可选值有：fixed(固定),scroll(滚动).
background-position: 设置背景图片的位置。可选值有

<position><空格><position>: <position>可填：top, center, bottom; left, center, right.
<x-length><空格><y-length>: <length>可填像素值，表示将背景图片移动多少像素。

自定义列表标志

列表标志就是（最简单的例子是本行最前面那个黑点，那是无序列表的默认标志）。本例想要实现将自定义图片变成列表标志。
下面的例子是从腾讯官网上摘录下来的，那个图片也是腾讯的。

效果：

二、CSS 基本介绍

分析：

很显然那个标志是图片，但是值得一提的是标志的源图片如下所示：

二、CSS 基本介绍

这就需要我们使用background-image把这个作为列表项的背景图片，然后利用background-position将指定的图片移到适当的位置。

代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

     li{

         list-style-type:none;

         background-image:url(icon.png);

         background-repeat:no-repeat;

         background-position:0px -272px;

         padding-left:26px;

     }

 </style>

 </head>

 <body>

     <ul>

         <li>国信办将严打网络淫秽色情及低俗信息</li>

         <li>*领导看望XXXXXX等老同志</li>

         <li>春节期间我国将遇强冷空气 局地降温14℃</li>

     </ul>

 </body>

 </html>

display常用属性

block: 块级元素。该元素前后都要换行（即独占一行）。默认的块级元素有<div>、<p>、<ul>、<ol>、<h1>~<h6>、<form>、<table>、<pre>、<dl>、<dt>、<dd>、<blockquote>等。
inline: 内联元素（也称行内元素）。默认的行内元素有<span>、<a>、<b>、<br>、<code>、<img>、<input>、<label>、<sub>、<sup>、<textarea>等。
none: 隐藏元素。即如果设置为此值，则该元素将不会被显示，且不占空间。
inline-block: 该属性兼备了内联元素和块元素的特点，在外面看来他像是内联元素，因为他并不会另起一行，但是在内看来，他又像是块元素，因为它能设置盒子模型的属性。

关于块级元素、内联元素的区别：

块级元素能够设置盒子模型中的属性，而内联元素只能设置margin-left, margin-right, padding-left, padding-right.

inline-block去除间距

场景：我们需要实现一个导航栏。

问题：相邻 inline-block 之间会有间隔。

效果：

二、CSS 基本介绍

代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>inline-block间隔</title>

 <style>

     #nav a{

         display:inline-block;     //设置inline-block后，相邻会有间隔

         padding:4px;

         width: 120px;

         text-align:center;

         background:#BEBEBE;

         text-decoration:none;

         font-family:'Microsoft YaHei', 微软雅黑;

         font-weight:bold;

         font-size:20px;

         color:white;

     }

 </style>

 </head>

 <body>

     <div id="nav">

         <a href="#">HOME</a>

         <a href="#">ARTICLES</a>

         <a href="#">ABOUT</a>

     </div>

 </body>

 </html>

那么怎么去除间隔呢？解决方法是在<style>标签中加入：html{font-size:0px} 即可。

效果：

二、CSS 基本介绍

例子：垂直居中对齐

场景：这里我们实现一个404页面。

效果：

二、CSS 基本介绍

分析：

页面中其实只有一张用DIV包裹的404的图片。
主要使用vertical-align实现页面垂直居中。

原理图：

二、CSS 基本介绍

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <style>

             html,body{

                 height:100%;    /*高度撑满*/

                 margin:0px;        /*页边不留空白*/

                 background:gray;

             }

             #container{

                 margin:0 auto;  /*水平居中*/

                 height:100%;    /*高度撑满*/

                 width:500px;

             }

             #image1{

                 width:490px;

                 margin:0 auto;

                 vertical-align:middle;

                 display:inline-block;

             }

             #dummyspan{

                 width:0px;

                 height:100%;

                 display:inline-block;

                 vertical-align:middle;

             }

         </style>

     </head>

     <body>

         <div id="container">

             <span id="dummyspan"></span>    <!--插入一个高度撑满，宽度为0的虚拟元素-->

             <a href="#"><img src="404错误.jpg" id="image1"></a>

         </div>

     </body>

 </html>

position属性

CSS 的 position 属性值有static(默认值), relative, absolute, fixed。分为两大类：positioned(relative,absolute,fixed)和unpositioned(static).
static: 默认值。表示该元素没有被定位。
relative: 相对定位。如果将元素设置为相对定位，则可以通过设置 top, bottom, left, right 属性使得该元素相对于正常位置偏离多少。
fixed: 固定定位。固定在视窗（即显示屏）的某个位置，即不管你怎么滚动页面，该元素总是在那个位置固定不动(像广告，导航都使用了fixed)，可以通过设置 top, bottom, left, right 属性设置相对视窗的位置。
absolute: 绝对定位。相对于最近的positioned祖先元素偏移(当该元素的父元素都不是positioned，则相对于body元素偏移)。通过设置 top, bottom, left, right 属性设置偏移。
- 绝对定位可以这样理解：HTML页面是地面，绝对定位的元素则把它从文档流中脱离出来，并且默认盖在HTML页面上面。本文章的右下角的目录功能就是通过绝对定位实现。
- 当有多个absolute元素重叠时，怎么决定他们的上下关系，这就需要一个特殊的属性：z-index，可以把他理解成这个绝对定位元素在第几层。默认z-index=0，即该元素就盖在地面上，z-index=-1则表示该元素在地面下面，z-index越高，则表示该元素在越高层。

案例：实现顶部导航

这个导航就是腾讯主页的顶部导航：www.qq.com

效果：

二、CSS 基本介绍

代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>顶部导航</title>

 <style>

     html{

         height:2000px;        /*为了体现导航是固定在顶端的，这里将页面故意设的高一点*/

     }

     *{

         font-family: 'Microsoft YaHei', 微软雅黑;

         font-size:12px;

         color:#666;

     }

     a{

         text-decoration:none;

         color:#666;

     }

     #nav{

         background-color:#fdfdfd;

         width: 100%;

         height: 28px;

         position:fixed;        /*固定布局*/

         top:0px;            /*固定的具体位置*/

         border-bottom: 1px solid #ebebeb;

     }

     #navInner{

         margin:0 auto;

         width:960px;

         height:100%;

     }

     #left{

         float:left;

         margin-top: 8px;

     }

     #mobileIcon{

         background-image:url(icon.png);

         background-repeat:no-repeat;

         padding-left:12px;

         margin-right: 11px;

     }

     #wap{

         margin-right: 10px;

     }

     #forIndex{

         margin:0px 12px 0px 10px;

     }

     #webmap{

         margin:0 10px 0 0;

     }

     #qqHelpLink{

         padding-right: 11px;

         background-image:url(icon.png);

         background-repeat:no-repeat;

         background-position:right -115px;

     }

     #right{

         float:right;

     }

     #onekey,#weibo,#qzone,#qmail,#dingyue,#ilike{

         background-image:url(loginall_1.5.1.png);

         background-repeat:no-repeat;

         height:28px;

         display:block;

         float:right;

     }

     #onekey{

         background-position: left -450px;

         width:70px;

     }

     #weibo{

         background-position: right -50px;

         width:30px;

     }

     #qzone{

         background-position: right -100px;

         width:30px;

     }

     #qmail{

         background-position: right -150px;

         width:30px;

     }

     #dingyue{

         background-position: right -549px;

         width:30px;

     }

     #ilike{

         background-position: -76px -645px;

         width:30px;

     }

 </style>

 </head>

 <body>

     <div id="nav">

         <div id="navInner">

             <div id="left">

                 <a href="#" id="mobileIcon">手机新闻客户端</a>

                 <a href="#" id="wap">WAP版</a>

                 |

                 <a href="#" id="forIndex">设为首页</a>

                 <a href="#" id="webmap">网站地图</a>

                 <a href="#" id="qqHelpLink">帮助</a>

             </div>

             <div id="right">

                 <a href="#" id="ilike"></a>

                 <a href="#" id="dingyue"></a>

                 <a href="#" id="qmail"></a>

                 <a href="#" id="qzone"></a>

                 <a href="#" id="weibo"></a>

                 <a href="#" id="onekey"></a>

             </div>

         </div>

     </div>

 </body>

 </html>

顶部导航

案例：实现登录界面

下面的例子本来使用Bootstrap来实现的，现在我们从零开始实现，这样能够充分回顾我们CSS学习的知识。

原地址：http://runjs.cn/detail/8z2mwcfa

效果：

二、CSS 基本介绍

分析：

第一步当然是用DIV布局。如图：

二、CSS 基本介绍

布局完后，就是将内容填进去，并且设置好样式即可。

代码：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

     html,body{

         height:100%;

         width:100%;

         background-image:url(login_bg.PNG);    /*背景*/

         font-family:"Microsoft YaHei UI";    /*默认字体是微软雅黑*/

     }

     #container{

         width:480px;

         height:100%;;

         margin:0 auto;

         vertical-align:middle;

     }

     #dummy{

         width:0px;

         height:100%;

         vertical-align:middle;

         display:inline-block;

     }

     #loginbox{

         width:470px;

         height:230px;

         display:inline-block;

         border-radius: 8px;        /*    实现圆角边框 */

         background:#F5F5F5;

     }

     #left{

         width:55%;

         height:230px;

         float:left;

     }

     #right{

         border-left: 1px solid #ccc;

         width:43%;

         height:230px;

         float:left;

     }

     .nametxt{

         width:220px;

         height:30px;

         margin-left:20px;

         margin-bottom:15px;

         border-radius:5px;

         border: 1px solid #ccc;

     }

     #loginbtn{

         width:62px;

         height:30px;

         color:white;

         float:right;

         margin-right:20px;

         font-size: 14px;

         padding: 4px 12px;

         background-image: linear-gradient(to bottom,#08c,#04c);

         border-radius: 4px;

         border: 1px solid #bbb;

     }

     #registerbtn{

         background-image: linear-gradient(to bottom,#fff,#e6e6e6);

         padding: 4px 12px;

         margin-bottom: 0;

         width:62px;

         height:30px;

         font-size: 14px;

         line-height: 20px;

         border-radius: 4px;

         border: 1px solid #bbb;

         margin-left:8px;

     }

 </style>

 </head>

 <body>

     <div id="container">

         <span id="dummy"></span>

         <div id="loginbox">

             <form>

                 <div id="left">

                     <h2 style="font-size:20px;font-weight:normal;padding:10px 10px 10px 20px;">商户登录</h2>

                     <input type="text" class="nametxt"/><br/>

                     <input type="text" class="nametxt"/><br/>

                     <input type="checkbox" style="margin-left:20px"> 下次自动登录 <button id="loginbtn">登录</button>

                 </div>

                 <div id="right">

                     <h2 style="font-size:20px;font-weight:normal;padding:8px;">没有账户 ？</h2>

                     <div style="font-size:11px;padding:8px;line-height:18px">这里有一段文字啊，很多的文字啊，太多太多的文字了，主要可以介绍介绍注册的好处和公司或者项目概况。。。</div>

                     <button id="registerbtn">注册</button>

                 </div>

             </form>

         </div>

     </div>

 </body>

 </html>

登录界面

IE 6 双倍margin的bug

问题：当对div设置浮动并且设置margin-left或margin-right为x时，在IE 6 下显示的margin-left为2x.
解决方法：添加 _display:inline，因为_display只有IE才认识。

overflow属性

该属性决定内容溢出元素框时的处理方法。可选值有：
- visible: 默认值。如果溢出，则继续显示。
- auto: 如果溢出，则加入滚动条，否则正常显示。
- scroll: 不管是否溢出，都加滚动条。
- hidden: 如果溢出，则隐藏溢出的区域。

单页面设计

现在单页面设计是一个趋势，而且这种形式展现页面更具有表现力。
定义：将页面内容呈现在一个屏幕放得下的页面或通过用户像切换slides那样切换页面内容，无需用户进行鼠标滚动等其他繁琐动作。
页面要求：简洁、大方、炫、文字要少。
目的：吸引用户、让用户一目了然地知道网页的内容。
例子：http://www.adamwoodhouse.co.uk/

响应式设计

二、CSS 基本介绍

过去，我们通常会分别编写电脑网页和手机网页，比如电脑网页称为：www.xiazdong.com，手机网页称为：wap.xiazdong.com。但随着响应式设计的出现，这个格局被打破了。
定义：编写了一个网页，这个网页能够根据设备分辨率的改变自动调整。
好处：写了一个网页，在任何设备上显示都过得去（有时候显示的也不好看）。
框架：Bootstrap、Foundation等都是非常优秀的响应式页面的前端框架。
原理：用三个步骤实现响应式设计
例子：http://www.ecnu.edu.cn/