Div CSS布局入門教程 三

三、頁面頂部製作(1)

當我們寫好了頁面大致的div結構後，我們就可以開始細緻地對每乙個部分進行製作了。

程式**

/*基本資訊*/

body

a:link,a:visited

a:hover{}

/*頁面層容器*/

#container

樣式說明：

a:link,a:visited

a:hover {}

#container

指定整個頁面的顯示區域。

width:800px指定寬度為800畫素，這裡根據實際所需設定。

margin:10px auto，則是頁面上、下邊距為10個畫素，並且居中顯示。

上一章中我們講過，

對層的margin屬性的左右邊距設定為auto可以讓層居中顯示。

接下來，我們開始製作top部分，top部分包括了logo、選單和

程式**

為什麼要這麼寫呢，因為對選單使用列表

形式，可以在以後方便對選單定製樣式。

而為什麼要新增以下**呢？

插入這一段**是可以方便地對選單選項之間插入一些分隔樣式，例如預覽圖中的豎線分隔。

然後我們在css.css中再寫入以下樣式：

程式**

/*頁面頭部*/

#header

樣式說明：

#header

給頁面頭部分加入乙個背景logo，並且不作填充。

這裡，我們沒有指定header層的高度，為什麼不指定呢？

因為header層中還有選單和banner項，所以層的高度暫時是未知的，而層的屬性又可以讓層根據內容自動設定調整，因此我們並不需要指定高度。

div css布局入門教程 三

三 頁面頂部製作 1 當我們寫好了頁面大致的div結構後，我們就可以開始細緻地對每乙個部分進行製作了。程式 基本資訊 body a link,a visited a hover 頁面層容器 container 樣式說明 a link,a visited a hover container 指定整個頁...

Div CSS布局入門教程

一 頁面布局與規劃 在網頁製作中，有許多的術語，例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的html基礎。下面我們就開始一步一步使用div css進行網頁布局設計吧。所有的設計第一步就...

Div CSS布局入門教程

第 1 頁 頁面布局與規劃 第 2 頁 寫入整體層結構與css 第 3 頁 頁面頂部製作之一 第 4 頁 頁面頂部製作之二 第 5 頁 頁面製作 用好border和clear 網頁製作中，有許多的術語，例如 css html dhtml xhtml等等。在下面的文章中我們將會用到一些有關於html的...