Dreamweaver網頁製作初級教程:div框架的細分?

現如今,網頁製作以及建站成了人人需要掌握的技能,小編也從各方面得到需求說,以前有過PS的入門教程,現在能不能做一個DW的入門教程。那麼從今天開始,小編將用一些時間,為大家帶來DW的入門教程。只要能堅持,你也能成為大神。

方法/步驟

我們定義了上中下,也就是頭部,身體和底部之後,按照實際操作的要求,中間還應該有其他的定義,今天我們看一下,一個div如何進行更加細緻的劃分。當然,比如我們要劃分已經定義的head,就需要在head中進行劃分操作。

Dreamweaver網頁製作初級教程:div框架的細分

在head結束和開始div之間,我們輸入新的程式碼:

Dreamweaver網頁製作初級教程:div框架的細分

當然,如果我們要將header劃分為3部分,應該就是三行這種程式碼:

Dreamweaver網頁製作初級教程:div框架的細分

接下來是css的編輯,我們看一下:

#header_t_l{width:80px;height:80px;background-color:#CFF}

這一行是定義logo欄目,預覽如下:

Dreamweaver網頁製作初級教程:div框架的細分

當然,頭部右側的定義和作方基本相同,但是這裡要注意,一定要在語句後方輸入一個程式碼:

float:left

只有設定了對齊方式,我們定義的框架才不會“”亂跑“”

Dreamweaver網頁製作初級教程:div框架的細分

如果我們沒有設定對齊,預覽如下:

Dreamweaver網頁製作初級教程:div框架的細分

設定float命令後,再看:

Dreamweaver網頁製作初級教程:div框架的細分

最底部的定義如下:

#header_b{width:968px;height:20px;background-color:#3CF;float:left}

Dreamweaver網頁製作初級教程:div框架的細分

我們看下效果。

Dreamweaver網頁製作初級教程:div框架的細分

怎麼樣,很有用吧~

網頁, 大神, 框架, 建站,
相關問題答案