这篇文章主要介绍如何使用div和css简单布局一个网站的首页，通常将网站划分为顶部（logo、导航条）、中部（页面主要内容、左右栏目）、底部（制作方介绍、超链接）。这是非常基础的一篇引入性文章，采用案例的方式进行介绍的，希望对你有所帮助。运行结果如下图所示：
main.html主页面代码
主要通过div进行布局的，同时<h2><a></a></h2>用户设置导航条，鼠标悬停时背景颜色切换。
css/main.css代码：
该部分代码主要是css文件，用于布局和设置主页面。
下面讲解几个重点：
1、在<div class="bg">布局过程中，需要在css中设置"margin:0 auto;"，才能让它居中显示，这段代码的含义是：第一个值就是元素的上下边距0，第二个值就是左右边距。当元素的定义了width属性时，auto还能实现居中的效果。
2、在css中设置h2，需要添加"float: left;"，使其水平显示，不增加该句的效果如下所示：
3、整个div布局代码如下所示，h2会向下移动一段距离，这时css中通过"margin-top: 4px;"进行微调。
4、悬停的核心代码如下所示，其中"text-decoration: none;"设置超链接无下划线，然后是悬停在超链接a和字体h2的变换效果。注意冒号(:)和hover之间不能有空格，否则效果消失。
简单补充css内容，更多的是希望你从课本中学习，这篇文章我以案例为主。
什么是css
css（cascading style sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 html 的功能，使网页设计者能够以更有效的方式设置网页格式。它是将样式信息与网页内容分离的一种标记性语言。
样式定义的语法
样式表项的组成：
selector{property1:value1;property2:value2;property3:value3;……}
selector定义样式作用的对象，property为css属性，value为属性对应的值。
css直接在标记符中嵌套
html 标记符的 style 属性。
例如：<p style=“text-align:center” >，其中，style属性的取值形式为“css属性:css属性值”，使用多个属性用分号分隔。
在style 标记符定义样式
<style>样式定义 </style>
样式定义的方式为：
运行结果如下所示：
链接外部样式表文件
使用link 标记符：
<link rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
样式表文件可以用文本编辑器编辑，也可以用fp或dw编辑，内容为样式定义。
其中css的代码如下所示：
希望文章对你有所帮助，上课内容还需要继续探索。
(by:eastmount 2016-11-08 中午12点 )