網站開發之DIV+CSS簡單佈局網站入門篇（五）

Eastmount發表於2016-11-08
網站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;……}

<HTML>
<HEAD><TITLE>在標記符中直接巢狀樣式資訊</TITLE>
<STYLE>

P{ font-size:24px; text-align:center }
H1{ font-family:楷體_gb2312; text-align:center }

</STYLE>
</HEAD>
<BODY>
  <H1>一代人</H1>
  <P>黑夜給了我黑色的眼睛<BR>我卻用它尋找光明</P>
</BODY>
</HTML>

        執行結果如下所示：


        連結外部樣式表檔案
        使用LINK 標記符：
        <LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
        樣式表檔案可以用文字編輯器編輯，也可以用FP或DW編輯，內容為樣式定義。

<HTML>
<HEAD><TITLE>連結式樣式示例</TITLE>
<LINK rel="stylesheet" type="text/css" href="mycss.css">
</HEAD>
<BODY>
  <H1>一代人</H1>
  <P>黑夜給了我黑色的眼睛<BR>我卻用它尋找光明</P>
</BODY>
</HTML>

        其中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/ )

相關文章