Div CSS布局入門教程 五

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

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

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

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

程式**

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

程式**

#banner

程式**

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

程式**

#pagebody

#sidebar

#mainbody

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

程式**

border:1px solid #e00;

height:200px

儲存預覽效果，可以發現這兩個層完美的浮動，在達到了我們布局的要求，而兩個層的實際寬度應該160+2(border)+570+2=734px

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進行網頁布局設計吧。所有的設計第一步就...