Div CSS布局入門教程 五

四、頁面製作(1)----用好border和clear

由於找工作找房子的原因，隔了這麼久才能開始寫教程，心裡感覺很對不起一直在關注本站的朋友，今天是找到房子的第二天，於是趕快繼續寫教程。

這一節裡面，主要就是想告訴大家如何使用好border和clear這兩個屬性。

首先，如果你曾用過table製作網頁，你就應該知道，如果要在**中繪製一條虛線該如何做，那需要製作乙個很小的來填充，其實我們還有更簡單的辦法，只要在

中加入這麼一段就可以了，你可以試試：

程式**

以上**便可以實現設計草圖中的banner，在css.css中加入以下樣式：

程式**

#banner

另乙個要說明的就是

clear:both，表示清除左、右所有的浮動，在接下來的布局中我們還會用這個屬性：clear:left/right。在這裡新增clear:both是由於之前的ul、li元素設定了浮動，如果不清除則會影響banner層位置的設定。

程式**

以上是頁面主體部分，我們在css.css中新增以下樣式：

程式**

#pagebody

#sidebar

#mainbody

為了可以檢視到效果，建議在#sidebar和#mainbody中加入以下**，預覽完成後可以刪除這段**：

程式**

border:1px solid #e00;

height:200px

儲存預覽效果，可以發現這兩個層完美的浮動，在達到了我們布局的要求，而兩個層的實際寬度應該

160+2(border)+570+2=734px，已經超出了父層的寬度，由於clear的原因，這兩個層才不會出現錯位的情況，這樣可以使我們布局的頁面不會因為內容太長（例如）而導致錯位。

而之後新增的overflow:hidden則可以

css中每乙個屬性運用得當，就可以解決許多問題，或許它們與你在布局的頁並沒有太大的關係，但是你必須知道這些屬性的作用，在遇到難題的時候，可以嘗試使用這些屬性去解決問題。

Div CSS布局入門教程 五

四 頁面製作 1 用好border和clear 由於找工作找房子的原因，隔了這麼久才能開始寫教程，心裡感覺很對不起一直在關注本站的朋友，今天是找到房子的第二天，於是趕快繼續寫教程。這一節裡面，主要就是想告訴大家如何使用好border和clear這兩個屬性。首先，如果你曾用過table製作網頁，你就應...

Div CSS布局入門教程 五

四 頁面製作 1 用好border和clear 這一節裡面，主要就是想告訴大家如何使用好border和clear這兩個屬性。首先，如果你曾用過table製作網頁，你就應該知道，如果要在 中繪製一條虛線該如何做，那需要製作乙個很小的來填充，其實我們還有更簡單的辦法，只要在 中加入這麼一段就可以了，你可...

Div CSS布局入門教程

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