解析div布局之四大屬性用法

《解析div布局之四大屬性用法》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、·解析DIV布局之四大屬性用法本文向大家介紹一下DIV布局屬性的概念，主要包括position屬性，direction屬性，float和clear屬性等內(nèi)容，希望本文的介紹能讓你有所收獲。在學習網(wǎng)頁布局的過程中，你對DIV布局的屬性是否了解，在以前的HTML里，元素的位置只能靠元素的依次排列覺得，而在CSS里你可以更精確的定位元素。DIV布局屬性：在以前的HTML里，元素的位置只能靠元素的依次排列覺得，而在CSS里你可以更精確的定位元素。Netscape曾提出過Layer標記，它對于精確布局很有好處，但是并沒有被W3C承認，W3C在CSS提出了

2、類似于Layer標記的功能。◆DIV布局之position屬性：position屬性用來決定元素的位置類型，詳見屬性：屬性名稱:'position'屬性值:absoluterelativestatic初始值:static適合對象:所有元素是否繼承:no百分比備注:被禁止其屬性值分別代表：absolute：屏幕上的絕對位置。relative：屏幕上的相對位置。static：固有位置。◆DIV布局之direction屬性：direction屬性決定BOX的排列方向，詳見屬性：屬性名稱:'direction'屬性值:ltrrtl初始值:ltr適合對象

3、:所有元素是否繼承:yes百分比備注:被禁止◆DIV布局之float和clear屬性：在HTML中圖片可以選擇飄浮的位置，現(xiàn)在BOX對象通過CSS對于也可以選擇飄浮的位置。改變BOX的float屬性，BOX將飄浮在其他元素的左或右方：屬性名稱:'float'屬性值:leftrightnone初始值:none適合對象:所有元素是否繼承:no百分比備注:被禁止例如：?1.?2.IMG{float:left}?3.BODY,P,IMG{margin:2em}?4.?5.

4、ODY>?6.

?7.?8.Somesampletextthathasnoother...?9.?◆相反的，使用clear屬性將禁止元素在BOX的左方或右方飄?。簩傩悦Q:'clear'屬性值:leftrightbothnone初始值:none適合對象:所有元素是否繼承:no百分比備注:被禁止·Div+CSS布局入門教程之頁面布局和規(guī)劃本文向大家介紹一下Div+CSS布局入門教程中頁面布局和規(guī)劃，在網(wǎng)頁制作中，有許多的術(shù)語，例如：C

5、SS、HTML、DHTML、XHTML等等，你對這些屬于應該有所了解。你對網(wǎng)頁的頁面布局和規(guī)劃是否了解，這里和大家分享一下Div+CSS布局入門教程中有關(guān)頁面布局和規(guī)劃的介紹，希望本文的介紹能讓你有所收獲。Div+CSS布局入門教程?在網(wǎng)頁制作中，有許多的術(shù)語，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會用到一些有關(guān)于HTML的基本知識，而在你學習這篇入門教程之前，請確定你已經(jīng)具有了一定的HTML基礎(chǔ)。下面我們就開始一步一步使用DIV+CSS進行網(wǎng)頁布局設(shè)計吧?！羲械脑O(shè)計第一步就是構(gòu)思，構(gòu)思好了，一般來說還需要用

6、PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來，以下是我構(gòu)思好的界面布局圖?！粝旅妫覀冃枰鶕?jù)構(gòu)思圖來規(guī)劃一下頁面的布局，仔細分析一下該圖，我們不難發(fā)現(xiàn)，圖片大致分為以下幾個部分：1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；3、底部，包括一些版權(quán)信息。有了以上的分析，我們就可以很容易的布局了，我們設(shè)計層如下圖:根據(jù)上圖，我再畫了一個實際的頁面布局圖，說明一下層的嵌套關(guān)系，這樣理解起來就會更簡單了。DIV結(jié)構(gòu)如下：│bod

7、y{}　/*這是一個HTML元素，具體我就不說明了*/└#Container{}　/*頁面層容器*/　├#Header{}　/*頁面頭部*/　├#PageBody{}　/*頁面主體*/　│　├#Sidebar{}　/*側(cè)邊欄*/　│　└#MainBody{}　/*主體內(nèi)容*/　└#Footer{}　/*頁面底部*/至此，頁面布局與規(guī)劃已經(jīng)完成，接下來我們要做的就是開始書寫HTML代碼和CSS。