Div+CSS 布局入門教程之二構(gòu)建網(wǎng)站

發(fā)布時(shí)間：2009-12-21 02:26:21 作者：佚名

規(guī)劃網(wǎng)站，本教程將以圖示為例構(gòu)建網(wǎng)站，需要的朋友可以參考下，其實(shí)多看一些你喜歡的網(wǎng)站布局，能學(xué)到很多東西。

首先需要規(guī)劃網(wǎng)站，本教程將以下圖為例構(gòu)建網(wǎng)站。

其基本布局見下圖：

主要由五個(gè)部分構(gòu)成：
1.Main Navigation 導(dǎo)航條，具有按鈕特效。 Width: 760px Height: 50px
2.Header 網(wǎng)站頭部圖標(biāo)，包含網(wǎng)站的logo和站名。 Width: 760px Height: 150px
3.Content 網(wǎng)站的主要內(nèi)容。 Width: 480px Height: Changes depending on content
4.Sidebar 邊框，一些附加信息。 Width: 280px Height: Changes depending on
5.Footer 網(wǎng)站底欄，包含版權(quán)信息等。 Width: 760px Height: 66px

第二步：創(chuàng)建html模板及文件目錄等

1.創(chuàng)建html模板。代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Div+Css</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>

將其保存為index.html,并創(chuàng)建文件夾css，images，網(wǎng)站結(jié)構(gòu)如下：

2.創(chuàng)建網(wǎng)站的大框：
建立一個(gè)寬760px的盒子，它將包含網(wǎng)站的所有元素。
在html文件的和之間寫入

<div id="page-container">
Hello world.
</div>

創(chuàng)建css文件，命名為master.css,保存在/css/文件夾下。寫入：

/*Example Source Code*/
#page-container {
width: 760px;
background: red;
}

控制html的id為page-container的盒子的寬為760px，背景為紅色。

現(xiàn)在為了讓盒子居中，寫入margin: auto;，使css文件為：

/*Example Source Code*/
#page-container {
width: 760px;
margin: auto;
background: red;
}

現(xiàn)在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由于瀏覽器的默認(rèn)的填充和邊界造成的。消除這個(gè)空隙，就需要在css文件中寫入：

/*Example Source Code*/
* {
margin: 0;
padding: 0;
}

第三步：將網(wǎng)站分為五個(gè)div，網(wǎng)頁(yè)基本布局的基礎(chǔ)：

1.將“第一步”提到的五個(gè)部分都放入盒子中，在html文件中寫入：

<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>

2.為了將五個(gè)部分區(qū)分開來(lái)，我們將這五個(gè)部分用不同的背景顏色標(biāo)示出來(lái)，在css文件寫入：

/*Example Source Code*/
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}

表現(xiàn)如下：

第四步：網(wǎng)頁(yè)布局與div浮動(dòng)等

1.浮動(dòng)：首先讓邊框浮動(dòng)到主要內(nèi)容的右邊。用css控制浮動(dòng)。

/*Example Source Code*/
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}

表現(xiàn)如下：

2.往主要內(nèi)容的盒子中寫入一些文字。在html文件中寫入：

<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

但是你可以看到主要內(nèi)容的盒子占據(jù)了整個(gè)page-container的寬度，我們需要將#content的右邊界設(shè)為280px。以使其不和邊框發(fā)生沖突。css代碼如下：

/*Example Source Code*/
#content {
margin-right: 280px;
background: green;
}

同時(shí)往邊框里寫入一些文字。在html文件中寫入：

<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>

表現(xiàn)如下：