DIV+CSS 实例 （使用定位方式实现横向两列布局）
制作网页的重要的就是布局，布局根据自己的需求和喜好去进行更改，制作令自己满意的静态网页，所以就必须掌握好css，如何运用到项目中去，那么学了css，就该自己动手去做，这样才能容易吸收和消化。我就用div+css做了个静态网页，布局是两列布局方式，来看看实例吧。
先给出html代码部分（index.html）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>定位横向布局</title>
<link rel="stylesheet" type="text/css" href="position.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo">前端开发教程</div>
<div class="nav">
<ul>
<li class="current"><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</div>
</div>
<div id="mainbody">
<div id="sidebar">
<dl>
<dt>CSS 基础教程</dt>
<dd class="current"><a href="#">CSS 简介</a></dd>
<dd><a href="#">CSS 基础语法</a></dd>
<dd><a href="#">CSS 高级语法</a></dd>
<dd><a href="#">CSS 派生选择器</a></dd>
<dd><a href="#">CSS id 选择器</a></dd>
<dd><a href="#">CSS 类选择器</a></dd>
<dd><a href="#">CSS 属性选择器</a></dd>
<dd><a href="#">CSS 创建</a></dd>
</dl>
<dl>
<dt>CSS 样式</dt>
<dd><a href="#">CSS 背景</a></dd>
<dd><a href="#">CSS 文本</a></dd>
<dd><a href="#">CSS 字体</a></dd>
<dd><a href="#">CSS 链接</a></dd>
<dd><a href="#">CSS 列表</a></dd>
<dd><a href="#">CSS 表格</a></dd>
<dd><a href="#">CSS 轮廓</a></dd>
</dl>
<dl>
<dt>CSS 盒子模型</dt>
<dd><a href="#">CSS 盒子模型概述</a></dd>
<dd><a href="#">CSS 内边距</a></dd>
<dd><a href="#">CSS 边框</a></dd>
<dd><a href="#">CSS 外边距</a></dd>
<dd><a href="#">CSS 外边距合并</a></dd>
</dl>
<dl>
<dt>CSS 定位</dt>
<dd><a href="#">CSS 定位概述</a></dd>
<dd><a href="#">CSS 相对定位</a></dd>
<dd><a href="#">CSS 绝对定位</a></dd>
<dd><a href="#">CSS 浮动</a></dd>
</dl>
<dl>
<dt>CSS 选择器</dt>
<dd><a href="#">CSS 元素选择器</a></dd>
<dd><a href="#">CSS 选择器分组</a></dd>
<dd><a href="#">CSS 类选择器详解</a></dd>
<dd><a href="#">CSS ID 选择器详解</a></dd>
<dd><a href="#">CSS 属性选择器详解</a></dd>
<dd><a href="#">CSS 后代选择器</a></dd>
<dd><a href="#">CSS 子元素选择器</a></dd>
<dd><a href="#">CSS 相邻兄弟选择器</a></dd>
<dd><a href="#">CSS 伪类</a></dd>
<dd><a href="#">CSS 伪元素</a></dd>
</dl>
<dl>
<dt>CSS 高级</dt>
<dd><a href="#">CSS 对齐</a></dd>
<dd><a href="#">CSS 尺寸</a></dd>
<dd><a href="#">CSS 分类</a></dd>
<dd><a href="#">CSS 导航栏</a></dd>
<dd><a href="#">CSS 图片库</a></dd>
<dd><a href="#">CSS 图片透明</a></dd>
<dd><a href="#">CSS 媒介类型</a></dd>
<dd><a href="#">CSS 注意事项</a></dd>
<dd><a href="#">CSS 总结</a></dd>
</dl>
</div>
<div id="content">
<h1>CSS 简介</h1>
<div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
<h3>你应该知道这些知识</h3>
<p>在继续之前，你应该有一个以下基本认识：</p>
<p>· HTML / XHTML</p>
<p class="learn">如果您希望首先学习这些项目，我们的<a href="#">主页</a>上可以找到教程。</p>
<div class="disline"></div>
<h3>什么是CSS？</h3>
<p>CSS即级联样式表。
它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
<div class="disline"></div>
<h3>基本信息</h3>
<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
<div class="disline"></div>
<h3>发展历史</h3>
<dl>
<dt>CSS1</dt>
<dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd>
</dl>
<dl>
<dt>CSS2</dt>
<dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd>
</dl>
<h3>CSS3</h3>
<dl>
<dt>CSS3 计划将 CSS 划分为更小的模块。</dt>
<dd class="learn"><a href="#">亲自体验一下</a>！</dd>
</dl>
<div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
<p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
</div>
</div>
<div id="footer">慕课©版权所有</div>
</div>
</body>
</html>
这是仿照css教程网页页面自己编写的代码，先看下不引入css样式的页面效果。
看下没加样式页面的布局就很乱，看着令人很不舒服，所以下面引入样式看看。
页面样式我是放在position.css文件中，页面要引用自己写的样式文件，使用<link rel="stylesheet" type="text/css" href="这里是样式地址" /> （href一般为相对路径），css样式部分（position.css)
/*设置页面的整体样式 */
* {
margin:0;
padding:0;
font-size:12px;
color:#333;
font-family:Verdana, Geneva, sans-serif, "宋体";
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:#ff0000;
}
p {
line-height:24px;
}
#wrap {
width:780px;
margin:0 auto;
padding:0 10px 10px;
border-left:1px solid #e7e7e7;
border-right:1px solid #e7e7e7;
}
#header {
width:100%;
overflow:hidden;
}
.logo {
width:100%;
height:80px;
line-height:80px;
font-size:30px;
font-family:"微软雅黑";
background:#3399cc;
color:#fff;
text-indent:30px;
}
.nav {
width:100%;
margin-top:10px;
}
.nav li {
margin:0 32px;
float:left;
}
.nav li a {
color:#7f7f7f;
font-size:16px;
display:block;
padding-bottom:2px;
}
.nav li a:hover {
border-bottom:3px solid #cc0000;
text-decoration:none;
}
.nav li.current {
border-bottom:3px solid #cc0000;
}
.nav li.current a:hover {
border-bottom:none;
}
#mainbody {
width:100%;
position:relative;
margin-top:20px;
}
#sidebar {
width:180px;
padding-bottom:10px;
}
#sidebar dl {
padding:0 0 5px;
}
#sidebar dt {
font-weight:bold;
line-height:22px;
font-family:"微软雅黑";
font-size:14px;
color:#fff;
background:#3399cc;
padding:5px 0 5px 15px;
font-weight:normal;
margin-bottom:10px;
}
#sidebar dd {
line-height:20px;
padding-left:15px;
}
#sidebar dd.current a {
color:#f00;
}
#content {
position:absolute;
top:0;
margin-left:200px;
}
#content h1 {
color:#000;
font-size:24px;
font-family:"微软雅黑";
font-weight:normal;
}
#content h3 {
margin-top:10px;
line-height:26px;
}
#content dl {
margin-bottom:10px;
}
#content dt {
font-weight:bold;
line-height:26px;
}
#content dd {
line-height:22px;
}
.learn a {
color:#900b09;
text-decoration:underline;
padding-bottom:2px;
}
.learn a:hover {
text-decoration:none;
}
.tips {
color:#999;
margin-top:20px;
}
.pageto {
border-top:1px solid #aaa;
border-bottom:3px solid #aaa;
margin-top:5px;
padding:15px 0;
}
.pageto a {
margin:0 10px;
background:#f3f3f3;
padding:5px 20px;
border:1px solid #dfdfdf;
color:#555;
}
.pageto a:hover {
color:#000;
text-decoration:none;
}
.disline {
border-bottom:1px dashed #ccc;
margin-top:10px;
}
#footer {
width:100%;
margin-top:15px;
padding:15px 0;
text-align:center;
color:#999;
background:#ddd;
}
引入样式后的页面效果：
好了，实例就结束了，看了你也赶紧试试吧。