本篇教程需要事先掌握如何使用DIV元素和基本的CSS。
现在我们要真正来做一个像样的网页了。首先看一下这个布局：
这种布局很常见吧，邮箱、管理系统、个人博客……到处都有它的身影。今天就拿它来练手吧！
首先先建立test.html和test.css，然后在test.html中输入基本的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
<title>这是一个网页</title>
</head>
<body>
</body>
</html>先用div搭个框架吧。大体上扫一遍，网页主要分为三大块——头部、左边的导航栏、右边的正文。于是我们可以先在body中写三个div：
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="article"></div>
</body>然后再来填充细节。#header中应该有一个标题，可能的话会有一段说明性文字（多用于个人博客）。
<div id="header">
<h1>这里是标题！</h1>
<span class="subtitle">我才不会说这里不是副标题呢~</span>
</div>至于#sidebar，里面会有一个导航栏，这个可以用ul和li来实现：
<div id="sidebar">
<ul>
<a href="xxx.html"><li>高大上的主页</li></a>
<a href="xxx.html"><li>博客里没东西</li></a>
<a href="xxx.html"><li>我的一些信息</li></a>
<a href="xxx.html"><li>这个是凑数的</li></a>
</ul>
</div>至于#article，你们自己看着办……写完之后可以用浏览器打开看一看，不保证你不崩溃。
——这效果坑爹呢！
——是啊，我们还没开始写CSS呢。
为了定位方便，我打算对三个最大的div使用绝对定位。
对于#header，它与顶端、左端和右端的距离为0，高度看个人感觉，背景颜色嘛，随你怎么写好了。#header里面的文字，配色一定要和#header有反差，不然正常人会觉得很奇怪的。
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 130px;
background-color: #111;
/* 用color来控制文字颜色 */
color: white;
}注意#header里面的内容，与#header左边框要有个空隙，这个看个人感觉吧。
#header * {
margin-left: 5%;
}然后是#sidebar，首先要把它的position设成absolute，然后left设为0，top设为#header的高度，宽度和背景色看感觉，但是因为浏览器窗口大小可能不同，所以高度没法直接计算。没关系，我们可以把bottom设为0来解决这个问题。
#sidebar {
position: absolute;
top: 130px;
bottom: 0;
left: 0;
width: 20%;
background-color: #DDD;
}其实#sidebar里面的ul本来宽度应该为100%，但因为ul默认会在左边加一个40px的padding，所以不能直接设置width，可行的办法有两种：一种是设置padding:none（我用的这种方法），另一种先absolute之后再把left和right都搞成0。高度不太好说，不过可以用line-height:32px来把里面li每一行的高度定为48px。同时我们用list-style-type:none来去除li左边默认的小圆点，然后给li加一个30px的padding-left。a标签会给文字带来超链接的样式，我们可以用color和text-decoration配合起来把它去掉……最神奇的一点来了：用li:hover（这个明天要讲）来设置鼠标滑过li时li的样式，可以是换一个突出一点的背景颜色。
#sidebar ul {
padding: 0;
width: 100%;
}
#sidebar li {
padding-left: 30px;
line-height: 48px;
/* 去掉小圆点 */
list-style-type: none;
}
#sidebar a {
/* 设置超链接文字样式 */
color: #333;
font-weight: bold;
text-decoration: none;
}
#sidebar li:hover {
/* 背景高亮 */
background-color: #EEE;
}至于#article，依照惯例先设position为absolute，然后top为#header的高度，left为#sidebar的宽度，bottom和right都设为0，最好再设个20px的padding不然会不好看。其余的还是大家自己看着办……然后可以输入非常非常多的内容，然后你会发现被坑了……
整个网页出现了滚动条，而不是我们想要的#article出现滚动条。没关系，设置#article的overflow为auto就可以解决这个问题了。
作业：
①尝试使用border属性给li定义外边框、li:active选择器让li在被点击时再切换一次背景色。
②实现另一种网页布局，其中黑色部分仅有一行，蓝色部分为页面标题。
今天就先到这里吧。