DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV標簽實現布局的方式
DIV標簽實現布局的方式
編輯:CSS詳解     

現在使用DIV+CSS進行網頁布局是非常主流的,這裡向大家描述一下DIV標簽進行布局,如果有一個帶有附加到文檔的定位樣式的現有CSS樣式表,使用該標簽將非常有用。

DIV標簽進行布局

插入DIV標簽進行布局

可以使用DIV標簽創建CSS布局塊並在文檔中對它們進行定位。如果有一個帶有附加到文檔的定位樣式的現有CSS樣式表,使用該標簽將非常有用。DreamWeaver使您能夠快速插入DIV標簽並對其應用現有樣式。您可以將Dreamweaver設計文件用作CSS布局的起始點。從“新建文檔”對話框的“頁面設計(CSS)”類別中選擇一個文件.

若要插入DIV標簽,請執行以下操作:

1.在“文檔”窗口中,將插入點放置在要顯示DIV標簽的位置。

2.執行下列操作之一:

選擇“插入”>“布局對象”>“DIV標簽”。
在“插入”欄的“布局”類別中單擊“DIV標簽”按鈕,出現“插入DIV標簽”對話框。

3.完成對話框。

4.單擊“確定”。

DIV標簽以一個框的形式出現文檔中,並帶有占位符文本。將指針移到該框的邊緣上時,Dreamweaver會高亮顯示該框。如果已經給DIV標簽分配了絕對位置,它就可充當一個Dreamweaver層。有

使用DIV標簽進行布局

插入DIV標簽後,您可以對其進行操作或者在其中添加內容。絕對定位的DIV標簽為Dreamweaver層。

在為DIV標簽分配了邊框後,或者在選定了“CSS布局外框”後,DIV標簽便具有可視邊框。(默認情況下,“查看”>“可視化助理”菜單中已經選定了“CSS布局外框”。)將指針移到DIV標簽上時,Dreamweaver將高亮顯示此標簽。

在選擇DIV標簽時,可以在“CSS樣式”面板中查看和編輯它的規則。您也可以向DIV標簽添加內容,方法是:將插入點放在DIV標簽中,然後就像在頁面中添加內容那樣添加內容。

若要查看和編輯應用於DIV標簽的規則,請執行以下操作:

1.執行以下操作之一以選擇DIV標簽:
單擊DIV標簽的邊框。提示:查找標記色彩以查看邊框。
在DIV標簽內單擊,然後按兩次Ctrl+A(Windows)或Command+A(Macintosh)。
在DIV標簽內單擊,然後從“文檔”窗口底部的標簽選擇器中選擇DIV標簽。

2.如果“CSS樣式”面板尚未打開,請選擇“窗口”>“CSS樣式”以打開“CSS樣式”面板.應用於DIV標簽的規則顯示在面板中。

3.根據需要進行編輯。

若要在DIV標簽中放置插入點以添加內容,請執行以下操作:在該標簽邊框內的任意位置單擊。

若要更改DIV標簽中的占位符文本,請執行以下操作:選擇該文本,然後在它上面鍵入內容或按Delete鍵。就像在頁面中添加內容那樣,可以將內容添加到DIV標簽中。

更改DIV標簽的高亮顏色

在“設計”視圖中將指針移到DIV標簽的邊緣上時,Dreamweaver將高亮顯示標簽的邊框。如果需要,可以啟用或禁用高亮顯示功能,或者在“首選參數”對話框中更改高亮顏色。

若要更改DIV標簽的高亮顯示首選參數,請執行以下操作:

1.選擇“編輯”>“首選參數”(Windows)或Dreamweaver>“首選參數”(Macintosh),即顯示“首選參數”對話框。

2.從左側的類別列表中選擇“標記色彩”。

3.進行下面其中一項更改:
若要更改DIV標簽的高亮顏色,請單擊“鼠標滑過”顏色框並使用顏色選擇器來選擇一種高亮顏色(或在文本框中輸入高亮顏色的十六進制值)。
若要對DIV標簽啟用或禁用高亮顯示功能,請選擇或取消選擇“鼠標滑過”的“顯示”復選框。這些選項會影響當指針滑過時Dreamweaver會高亮顯示的所有對象,例如表格。

4.單擊“確定”。

【編輯推薦】

  1. 深入學習DIV標簽概念及其用法
  2. IE6.0對padding的解讀分析
  3. 利用img和div標簽實現圖像下拉列表的模擬
  4. DIV+CSS開發XHtml網頁對SEO優化的影響
  5. DIV CSS網頁布局中對段落進行排版的方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved