這篇文章主要介紹如何使用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點 )