网站开发之DIV+CSS简单布局网站入门篇（五）
? ? ? ? 這篇文章主要介紹如何使用DIV和CSS簡單布局一個網站的首頁，通常將網站劃分為頂部（Logo、導航條）、中部（頁面主要內容、左右欄目）、底部（制作方介紹、超鏈接）。這是非常基礎的一篇引入性文章，采用案例的方式進行介紹的，希望對你有所幫助。運行結果如下圖所示：
main.html主頁面代碼
? ? ? ? 主要通過div進行布局的，同時<h2><a></a></h2>用戶設置導航條，鼠標懸停時背景顏色切換。
<html> <head><title>網站主頁</title><link rel="stylesheet" href="css/main.css" > </head> <!-- 首頁 --> <body><div id="bg"><img src="images/bg.jpg" width="100%" height="100%" /></div><div id="bt"><h2 class="xz"><a href="#">學校概況</a></h2><h2><a href="jsjj.html">教師簡介</a></h2><h2><a href="#">校園生活</a></h2><h2><a href="#">校園文化</a></h2><h2><a href="#">聯系我們</a></h2></div><div id="main"><div id="left"></div><div id="right"></div></div><div id="footer"></div></body> </html>
css/main.css代碼：
? ? ? ? 該部分代碼主要是CSS文件，用于布局和設置主頁面。
#bg {text-align: center;margin:0 auto;width: 80%;height: 100px;/* background-image: url("../images/bg.jpg"); */ }#bt {margin:0 auto; /* 水平居中 */margin-top: 10px;width: 80%;height: 40px;background-color: yellow;}h2 {float: left; /* 水平顯示,否則豎直顯示 */margin-top: 0px; /* 置頂 */margin-left: 10px;width: 18%;background-color: red;height: 34px;font-size: 24px;text-align: center;padding-top: 6px; }a {text-decoration: none; }a:hover {color: black; }h2:hover {background-color: #0F0; }#main {margin:0 auto; /* 水平居中 */margin-top: 10px;width: 80%;height: 60%; background-color: #E6E6FA;}#left {float: left;margin-left: 20px;margin-top: 5px;width: 40%;height: 90%;background-color: #9ACD32; }#right {float: left;margin-left: 20px;margin-top: 5px;width: 50%;height: 90%;background-color: #BFEFFF; }#footer {margin:0 auto; /* 水平居中 */margin-top: 10px;width: 80%;height: 50px;background-color: #8B2500; }#main2 {margin:0 auto; /* 水平居中 */margin-top: 10px;width: 80%;height: 60%; background-color: #F00;}.xz {float: left; /* 水平顯示,否則豎直顯示 */margin-top: 0px; /* 置頂 */margin-left: 10px;width: 18%;background-color: #0F0;height: 34px;font-size: 24px;text-align: center;padding-top: 6px;}? ? ? ? 下面講解幾個重點：
? ? ? ? 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>
? ? ? ? 樣式定義的方式為：
? ? ? ? Selector{property1:value1;property2:value2;property3:value3;……}
? ? ? ? 運行結果如下所示：
? ? ? ? 鏈接外部樣式表文件
? ? ? ? 使用LINK 標記符：
? ? ? ? <LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
? ? ? ? 樣式表文件可以用文本編輯器編輯，也可以用FP或DW編輯，內容為樣式定義。
? ? ? ? 其中CSS的代碼如下所示：
P{ font-size:12px; text-align:center } H1{ font-family:黑體; text-align:center;background-color:green }? ? ? ? 運行結果如下所示：
? ? ? ? 希望文章對你有所幫助，上課內容還需要繼續探索。
? ? ? ??(By:Eastmount 2016-11-08 中午12點?http://blog.csdn.net/eastmount/?)
總結
以上是生活随笔為你收集整理的网站开发之DIV+CSS简单布局网站入门篇（五）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网站开发之鼠标悬停简单特效实现（四）
- 下一篇： CSS 基本样式