二、CSS 基本介绍

2021-10-07 02:24:12

[ 显示目录 ]

前言

本教程针对熟悉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组成部分

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代码是 Eric Meyer 写的“CSS Reset 2.0”，代码如下：

 1 /**
 2  * Eric Meyer‘s Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 3  * http://cssreset.com
 4  */
 5 html, body, div, span, applet, object, iframe,
 6 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 7 a, abbr, acronym, address, big, cite, code,
 8 del, dfn, em, img, ins, kbd, q, s, samp,
 9 small, strike, strong, sub, sup, tt, var,
10 b, u, i, center,
11 dl, dt, dd, ol, ul, li,
12 fieldset, form, label, legend,
13 table, caption, tbody, tfoot, thead, tr, th, td,
14 article, aside, canvas, details, embed, 
15 figure, figcaption, footer, header, hgroup, 
16 menu, nav, output, ruby, section, summary,
17 time, mark, audio, video {
18     margin: 0;
19     padding: 0;
20     border: 0;
21     font-size: 100%;
22     font: inherit;
23     vertical-align: baseline;
24 }
25 /* HTML5 display-role reset for older browsers */
26 article, aside, details, figcaption, figure, 
27 footer, header, hgroup, menu, nav, section {
28     display: block;
29 }
30 body {
31     line-height: 1;
32 }
33 ol, ul {
34     list-style: none;
35 }
36 blockquote, q {
37     quotes: none;
38 }
39 blockquote:before, blockquote:after,
40 q:before, q:after {
41     content: ‘‘;
42     content: none;
43 }
44 table {
45     border-collapse: collapse;
46     border-spacing: 0;
47 }

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>上时应用样式。
- 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)可能会新增很多其他选择器，但是以上的几个选择器是最基本的。

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

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

效果：

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <style type="text/css">
 5             #container{
 6                 margin:0 auto;
 7                 max-width:980px;
 8                 background:gray;
 9             }
10             #header{
11                 background:red;
12                 height:100px;
13             }
14             #nav{
15                 background:orange;
16                 height:50px;
17             }
18             #banner{
19                 background:blue;
20                 height:300px;
21             }
22             #news{
23                 background:green;
24                 width:30%;
25                 height:100px;
26                 float:left;
27             }
28             #focus{
29                 background:yellow;
30                 width:30%;
31                 height:100px;
32                 float:left;
33             }
34             #resources{
35                 background:gray;
36                 width:40%;
37                 height:100px;
38                 float:right;
39             }
40             #footer{
41                 background:purple;
42                 height:100px;
43                 clear:left;
44             }
45         </style>
46     </head>
47     <body>
48         <div id="container">
49             <div id="header">header</div>
50             <div id="nav">nav</div>
51             <div id="banner">banner</div>
52             <div id="main">
53                 <div id="news">news</div>
54                 <div id="focus">focus</div>
55                 <div id="resources">resources</div>
56             </div>
57             <div id="footer">footer</div>
58         </div>
59     </body>
60 </html>

float(浮动)

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

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style type="text/css">
 7     #child1{
 8         float:left;
 9         width:300px;
10         height:300px;
11         background:yellow;
12     }
13     #child2{
14         float:left;
15         width:300px;
16         height:300px;
17         background:blue;
18     } 
19 </style>
20 </head>
21 <body>
22     <div id="father"> 
23         <div id="child1"></div>
24         <div id="child2"></div>
25     </div>
26 </body>
27 </html>

盒子模型

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

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

效果：

说明：

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

代码：

 1 <!--实现了田字格布局-->
 2 <!DOCTYPE html>
 3 <html>
 4     <head>
 5         <style type="text/css">
 6             div{
 7                 border-style: solid;    
 8                 border-color: #000000; 
 9                 border-width:5px;    
10                 margin:10px;        
11                 width:100px;        
12                 height:100px;        
13             }
14             #c1,#c2,#c3,#c4{
15                 float:left;
16             }
17             #c3{
18                 clear:left;
19             }
20         </style>
21     </head>
22     <body>
23         <div id="c1"></div>
24         <div id="c2"></div>
25         <div id="c3"></div>
26         <div id="c4"></div>
27     </body>
28 </html>

实例：实现metro风格布局

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

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

效果：

代码：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>实现metro布局</title>
  6 <style>
  7     html{
  8         font-family:"Microsoft YaHei UI";
  9         color:white;
 10     }
 11     #container{
 12         width:655px;
 13         height:90px;
 14     }
 15     #d1,#d2,#d3,#d4,#d5,#d6,#d7,#d8,#d9,#d10{
 16         float:left;
 17         text-align:center;    /*文字水平居中*/
 18         margin:1px;        
 19     }
 20     #d1{
 21         background-color:#CC3333;
 22         width:106px;
 23         height:58px;
 24         line-height:58px;    /*将height和line-height设置为一样可以使文字垂直居中*/
 25         font-size:20px;
 26     }
 27     #d2{
 28         background-color:#0048BE;
 29         font-size:25px;
 30         width:215px;
 31         height:58px;
 32         line-height:58px;
 33     }
 34     #d3{
 35         background-color:#FF9900;
 36         font-size:12px;
 37         width:107px;
 38         height:28px;
 39         line-height:28px;
 40     }
 41     #d4{
 42         background-color:#FF9900;
 43         font-size:12px;
 44         width:107px;
 45         height:28px;
 46         line-height:28px;
 47         margin-left:0px;
 48     }
 49     #d5{
 50         background-color:#91009E;
 51         font-size:20px;
 52         width:106px;
 53         height:58px;
 54         line-height:58px;
 55     }
 56     #d6{
 57         background-color:#00839A;
 58         font-size:12px;
 59         width:106px;
 60         height:30px;
 61         line-height:30px;
 62     }
 63     #d7{
 64         background-color:#542FB0;
 65         font-size:12px;
 66         width:107px;
 67         height:30px;
 68         line-height:30px;
 69     }
 70     #d8{
 71         background-color:#FF9900;
 72         font-size:12px;
 73         width:107px;
 74         height:30px;
 75         line-height:30px;
 76         margin-left:0px;
 77     }
 78     #d9{
 79         background-color:#0048BE;
 80         font-size:25px;
 81         width:215px;
 82         height:60px;
 83         line-height:60px;
 84         margin-top:-29px;
 85     }
 86     #d10{
 87         background-color:#542FB0;
 88         font-size:12px;
 89         width:106px;
 90         height:30px;
 91         line-height:30px;
 92     }
 93 </style>
 94 </head>
 95 
 96 <body>
 97     <div id="container">
 98         <div id="d1">燕麦食品</div>
 99         <div id="d2">自学电脑</div>
100         <div id="d3">51我要自学网</div>
101         <div id="d4">机械设计与制造</div>
102         <div id="d5">汽车年审</div>
103         <div id="d6">自学计算机</div>
104         <div id="d7">入门吉他</div>
105         <div id="d8">图标设计</div>
106         <div id="d9">Javascript框架</div>
107         <div id="d10">木吉他入门教学</div>
108     </div>
109 </body>
110 </html>

metro风格布局

实例：画三角形

效果如下：

分析：

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

HTML4代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>使用CSS画一个三角形</title>
 6 <style type="text/css">
 7     #child{
 8         width:0px;
 9         height:0px;
10         border:100px solid red;
11         border-top-color:transparent;
12         border-left-color:transparent;
13         border-right-color:transparent;
14     }
15 </style>
16 </head>
17 <body>
18     <div id="child"></div>
19 </body>
20 </html>

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

HTML5代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>使用HTML5 Canvas 画一个三角形</title>
 6 </head>
 7 <body>
 8     <canvas id="canvas" width="300" height="300">
 9         该浏览器不支持 canvas api
10     </canvas>
11 </body>
12 <script type="text/javascript">
13     var canvas = document.getElementById("canvas");
14     var context = canvas.getContext("2d");
15     context.fillStyle="red";    //填充颜色为红色
16     context.beginPath();        //开始路径
17     context.moveTo(100,100);    //起始点为(100,100)
18     context.lineTo(75,125);        //从(100,100)到(75,125)有一条线
19     context.lineTo(125,125);    //从(75,125)到(125,125)有一条线
20     context.closePath();        //从(125,125)到(100,100)有一条线
21     context.fill();                //填充
22 </script>
23 </html>

实例：画一棵树

效果如下：

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

代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>CSS画一棵树</title>
 6 <style type="text/css">
 7     #child1{
 8         width:0px;
 9         height:0px;
10         border:100px solid green;
11         border-top-color:transparent;
12         border-left-color:transparent;
13         border-right-color:transparent;
14     }
15     #child2{
16         width:0px;
17         height:0px;
18         border:100px solid green;
19         border-top-style:none;
20         border-top-color:transparent;
21         border-left-color:transparent;
22         border-right-color:transparent;
23     }
24     #child3{
25         width:80px;
26         height:50px;
27         float:left;
28     }
29     #child4{
30         float:left;
31         width:0px;
32         height:50px;
33         border:20px solid brown;
34     }
35 </style>
36 </head>
37 <body>
38     <div id="child1"></div>    <!--第一片叶子 -->
39     <div id="child2"></div> <!--第二片叶子 -->
40     <div id="child3"></div> <!--透明支撑物，为了将树干放到叶子中间-->
41     <div id="child4"></div> <!--树干-->
42 </body>
43 </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>可填像素值，表示将背景图片移动多少像素。

自定义列表标志

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

效果：

分析：

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

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

代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     li{
 8         list-style-type:none;
 9         background-image:url(icon.png);
10         background-repeat:no-repeat;
11         background-position:0px -272px;
12         padding-left:26px;
13     }
14 </style>
15 </head>
16 
17 <body>
18     <ul>
19         <li>国信办将严打网络淫秽色情及低俗信息</li>
20         <li>*领导看望XXXXXX等老同志</li>
21         <li>春节期间我国将遇强冷空气 局地降温14℃</li>
22     </ul>
23 </body>
24 </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 之间会有间隔。

效果：

代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>inline-block间隔</title>
 6 <style>
 7     #nav a{
 8         display:inline-block;     //设置inline-block后，相邻会有间隔
 9         padding:4px;
10         width: 120px;
11         text-align:center;
12         background:#BEBEBE;
13         text-decoration:none;
14         font-family:‘Microsoft YaHei‘, 微软雅黑;
15         font-weight:bold;
16         font-size:20px;
17         color:white;
18     }
19     
20 </style>
21 </head>
22 <body>
23     <div id="nav">
24         <a href="#">HOME</a>
25         <a href="#">ARTICLES</a>
26         <a href="#">ABOUT</a>
27     </div>
28 </body>
29 </html>

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

效果：

例子：垂直居中对齐

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

效果：

分析：

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

原理图：

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <style>
 5             html,body{
 6                 height:100%;    /*高度撑满*/
 7                 margin:0px;        /*页边不留空白*/
 8                 background:gray;
 9             }
10             #container{
11                 margin:0 auto;  /*水平居中*/
12                 height:100%;    /*高度撑满*/
13                 width:500px;
14 
15             }
16             #image1{
17                 width:490px;
18                 margin:0 auto;
19                 vertical-align:middle;
20                 display:inline-block;
21             }
22             #dummyspan{
23                 width:0px;
24                 height:100%;
25                 display:inline-block;
26                 vertical-align:middle;
27             }
28         </style>
29     </head>
30     <body>
31         <div id="container">
32             <span id="dummyspan"></span>    <!--插入一个高度撑满，宽度为0的虚拟元素-->
33             <a href="#"><img src="404错误.jpg" id="image1"></a>
34         </div>
35     </body>
36 </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

效果：

代码：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5 <title>顶部导航</title>
  6 <style>
  7     html{
  8         height:2000px;        /*为了体现导航是固定在顶端的，这里将页面故意设的高一点*/
  9     }
 10     *{
 11         font-family: ‘Microsoft YaHei‘, 微软雅黑;
 12         font-size:12px;
 13         color:#666;
 14     }
 15     a{
 16         text-decoration:none;
 17         color:#666;
 18     }
 19     #nav{
 20         background-color:#fdfdfd;
 21         width: 100%;
 22         height: 28px;
 23         position:fixed;        /*固定布局*/
 24         top:0px;            /*固定的具体位置*/
 25         border-bottom: 1px solid #ebebeb;
 26     }
 27     #navInner{
 28         margin:0 auto;
 29         width:960px;
 30         height:100%;
 31         
 32     }
 33     #left{
 34         float:left;
 35         margin-top: 8px;
 36     }
 37     #mobileIcon{
 38         background-image:url(icon.png);
 39         background-repeat:no-repeat;
 40         padding-left:12px;
 41         margin-right: 11px;
 42     }
 43     #wap{
 44         margin-right: 10px;
 45     }
 46     #forIndex{
 47         margin:0px 12px 0px 10px;
 48     }
 49     #webmap{
 50         margin:0 10px 0 0;
 51         
 52     }
 53     #qqHelpLink{
 54         padding-right: 11px;
 55         background-image:url(icon.png);
 56         background-repeat:no-repeat;
 57         background-position:right -115px;
 58     }
 59     #right{
 60         float:right;
 61     }
 62     #onekey,#weibo,#qzone,#qmail,#dingyue,#ilike{
 63         background-image:url(loginall_1.5.1.png);
 64         background-repeat:no-repeat;
 65         height:28px;
 66         display:block;
 67         float:right;
 68     }
 69     #onekey{
 70         background-position: left -450px;
 71         width:70px;
 72     }
 73     #weibo{
 74         background-position: right -50px;
 75         width:30px;    
 76     }
 77     #qzone{
 78         background-position: right -100px;
 79         width:30px;
 80     }
 81     #qmail{
 82         background-position: right -150px;
 83         width:30px;
 84     }
 85     #dingyue{
 86         background-position: right -549px;
 87         width:30px;
 88     }
 89     #ilike{
 90         background-position: -76px -645px;
 91         width:30px;
 92     }
 93 </style>
 94 </head>
 95 
 96 <body>
 97     <div id="nav">
 98         <div id="navInner">
 99             <div id="left">
100                 <a href="#" id="mobileIcon">手机新闻客户端</a>
101                 <a href="#" id="wap">WAP版</a>
102                 |
103                 <a href="#" id="forIndex">设为首页</a>
104                 <a href="#" id="webmap">网站地图</a>
105                 <a href="#" id="qqHelpLink">帮助</a>
106             </div>
107             <div id="right">
108                 <a href="#" id="ilike"></a>
109                 <a href="#" id="dingyue"></a>
110                 <a href="#" id="qmail"></a>
111                 <a href="#" id="qzone"></a>
112                 <a href="#" id="weibo"></a>
113                 <a href="#" id="onekey"></a>                
114             </div>
115         </div>
116     </div>
117 </body>
118 </html>

顶部导航

案例：实现登录界面

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

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

效果：

分析：

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

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

代码：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7     html,body{
 8         height:100%;
 9         width:100%;
10         background-image:url(login_bg.PNG);    /*背景*/
11         font-family:"Microsoft YaHei UI";    /*默认字体是微软雅黑*/
12     }
13     
14     #container{
15         width:480px;
16         height:100%;;
17         margin:0 auto;
18         vertical-align:middle;
19     }
20     #dummy{
21         width:0px;
22         height:100%;
23         vertical-align:middle;
24         display:inline-block;
25     }
26     #loginbox{
27         width:470px;
28         height:230px;
29         display:inline-block;
30         border-radius: 8px;        /*    实现圆角边框 */
31         background:#F5F5F5;
32     }
33     #left{
34         width:55%;
35         height:230px;
36         float:left;
37     }
38     #right{
39         border-left: 1px solid #ccc;
40         width:43%;
41         height:230px;
42         float:left;
43     }
44     .nametxt{
45         width:220px;
46         height:30px;
47         margin-left:20px;
48         margin-bottom:15px;
49         border-radius:5px;
50         border: 1px solid #ccc;
51     }
52     #loginbtn{
53         width:62px;
54         height:30px;
55         color:white;
56         float:right;
57         margin-right:20px;
58         font-size: 14px;
59         padding: 4px 12px;
60         background-image: linear-gradient(to bottom,#08c,#04c);
61         border-radius: 4px;
62         border: 1px solid #bbb;
63     }
64     #registerbtn{
65         background-image: linear-gradient(to bottom,#fff,#e6e6e6);
66         padding: 4px 12px;
67         margin-bottom: 0;
68         width:62px;
69         height:30px;
70         font-size: 14px;
71         line-height: 20px;
72         border-radius: 4px;
73         border: 1px solid #bbb;
74         margin-left:8px;
75     }
76 </style>
77 </head>
78 <body>
79     <div id="container">
80         <span id="dummy"></span>
81         <div id="loginbox">
82             <form>
83                 <div id="left">
84                     <h2 style="font-size:20px;font-weight:normal;padding:10px 10px 10px 20px;">商户登录</h2>
85                     <input type="text" class="nametxt"/><br/>
86                     <input type="text" class="nametxt"/><br/>
87                     <input type="checkbox" style="margin-left:20px"> 下次自动登录 <button id="loginbtn">登录</button>
88                 </div>
89                 <div id="right">
90                     <h2 style="font-size:20px;font-weight:normal;padding:8px;">没有账户 ？</h2>
91                     <div style="font-size:11px;padding:8px;line-height:18px">这里有一段文字啊，很多的文字啊，太多太多的文字了，主要可以介绍介绍注册的好处和公司或者项目概况。。。</div>
92                     <button id="registerbtn">注册</button>
93                 </div>
94             </form>
95         </div>
96     </div>
97 </body>
98 </html>