divcss布局及應(yīng)用入門教程-資料下載頁
2025-08-12 15:16本頁面
【導(dǎo)讀】DIV+CSS布局的問題，其實(shí)歸根結(jié)底還是由于沒有入門造成的。篇文章就帶領(lǐng)大家入門吧...在網(wǎng)頁制作中，有許多的術(shù)語，例如：CSS、HTML、DHTML、XHTML等等。教程之前，請確定你已經(jīng)具有了一定的HTML基礎(chǔ)。下面我們就開始一步一步使。用DIV+CSS進(jìn)行網(wǎng)頁布局設(shè)計(jì)吧。畫出來，以下是我構(gòu)思好的界面布局圖。理解起來就會(huì)更簡單了。font-size:12px;font-family:Tahoma；說明字體為12像素大小，字體為Tahoma. 順序是上/右/下/左，你也可以書寫為margin:0(縮寫)；說明上下邊距為0px，左右為自動(dòng)調(diào)整；文字對齊方式，可以設(shè)置為左、右、中，這里我將它設(shè)置為居中對齊。
【正文】 的紅色邊框 */ {bordercolor:0f0} .title a {fontweight:bold} a {fontsize:14px。color:f00} a {fontsize:12px。color:0f0} 大家可以看到，使用 CLASS 可以使得許多的元素可以共用同樣的樣式，通過元素的 TagName 的不同，又可以對每一個(gè)元素定制不同的樣式，我想大家應(yīng)該對什么時(shí)候該用 ID，什么時(shí)候該用 CLASS 已經(jīng)有了深刻的理解了吧！ 好了，這次的教程到這里，我不知道下一篇教程什么時(shí)候更新，但我會(huì)盡快的，謝謝大家的支持。 另外，花了點(diǎn)時(shí)間把以前的文件又重新整理了一下， 提供下載 ，并添加了詳細(xì)的注釋，大家可以通過查看文檔內(nèi)的注釋來了解到更多的內(nèi)容。 CSS 代碼 ~! 最近看過許多網(wǎng)友制作的 SKIN 的 CSS 文件，發(fā)現(xiàn)其中有著許多冗余的代碼。下面我來跟大家介紹一下，如何清除這些冗余的代碼，讓你的 CSS 文件更加簡潔。 （一）、 margin、 padding屬性 參照相關(guān)資料我們可以知道， margin 和 padding 代表的意 思分別是外部邊距和內(nèi)部填充距離，在許多網(wǎng)友的 CSS 中，關(guān)于這兩個(gè)屬性的冗余代碼是出現(xiàn)得最多的。比如： margin:0px，大家可以查看一下自己的 CSS文件中，是否許多的 margin:0px，其中有的是不需要的，你可以嘗試刪除它，當(dāng)然也并不是所有的 margin:0px 都沒有用，相同， padding:0px 也一樣。 另外， margin 和 padding 中各項(xiàng)屬性的順序是：上右下左，你只要記住是順時(shí)針方向就好了。我們再看看這兩段代碼： margin:0px 0px 0px 10px； marginleft:10px； 其實(shí)他們的作用是一樣的，下面的則是一種縮寫，使用縮寫我們可以減少 CSS代碼，并使閱讀起來更為方便。（ padding 也相同。） （ 二 ） 、 !important。屬性 !important 是 CSS1 就定義的語法，作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。 IE 是不支持這個(gè)語法的，而其他的瀏覽器都支持，通過這一點(diǎn)，我們可以得知，設(shè)置了優(yōu)先權(quán)的代碼是不會(huì)被 IE 執(zhí)行的。所以我們可以 important的后面添加 CSS 樣式，使其可以區(qū)別于 IE 和 FireFox 等瀏覽器。 上次在看 Miles 的 CSS 代碼時(shí)，我看到了這 樣一句： height:50px !important。height:50px。 這里就是多余的了，我們可以這樣寫： height:50px 就夠了，這個(gè)錯(cuò)誤在我剛開始制作 CSS 時(shí)也曾出現(xiàn)過。 三、 textalign、 font 樣式 這兩個(gè)樣式的作用我就不說了，但是這兩個(gè)樣式在許多網(wǎng)友的 CSS 中也存在許多冗余。下面我來舉例說明一下，層的定義如下： div id=main div id=body1 div id=content1 /div /div div id=body2 /div div CSS 文件如下（錯(cuò)誤示例） ： main{width:500px。textalgin:left。fontsize:12px。color:000000。} body1{width:500px。textalgin:center。fontsize:12px。color:FF0000。} content{textalgin:left。fontsize:12px。color:000000。} body2{textalgin:left。fontsize:12px。color:000000。} 大家可以從上面的代碼中輕易地看出，有許多的冗余代碼，現(xiàn)在我們來書寫正確的代碼： main{width:500px。textalgin:left。fontsize:12px。color:000000。} body1{textalgin:center。color:FF0000。} content{width:300px。textalgin:left。color:000000。} body2{} 以上就是正確的代碼，由于大家在制作 SKIN 時(shí)，對 PJBLOG 的 DIV 結(jié)構(gòu)沒搞清楚，才會(huì)出現(xiàn)這種錯(cuò)誤。 四、 display:none 的使用 display:none 的作用就是使被定義的層不顯示。我們再來看看這段代碼： blogTitle{fontsize:0px。margin:10px 3px 3px 40px。height:20px。color:FFC1E6。display:none} 大家有沒有覺得這有些多余呢，是的，既然設(shè)置了不顯示，為何還要保留那些不必要的樣式呢？ 出現(xiàn)這種情況我就知道，這個(gè) SKIN 是改自某人的。 五、還是 margin 和 padding 我還是通過例子來給大家說明，層的定義同上，以下是 CSS 的定義（錯(cuò)誤示例）： main{margin:5px 0px 5px 0px。} body1{margin:12px 0px 10px 0px。} content{margin:8px 0px 2px 0px。} body2{margin:10px 0px 15px 0px。} 現(xiàn)在我們再來書寫正確的樣式： main{} body1{margintop:17px 。} content{margin:8px 0px 2px 0px。} body2{margin:20px 0px 。} 這里需要大家制作一下示例才能了解，首先 main{margin:5px 0px 5px 0px。}是沒有必要的，他無非定義的就是整個(gè)頁面的上、下外邊距。 （在一定場合下卻需要這樣書寫） 我們同樣可以通過定義 body1 的上邊距和 body2 的下邊距來設(shè)置，所以才有了 body1{margintop:17px 。}和body2{margin:20px 0px 。}（這里定義的是 body2 的上下邊距為 20px，左右邊距為 0px，也是縮寫的一種方式。） 同樣的道理，于是我們可以省略了 body1 的下邊距，在 content 層在定義上邊距，另外大家還需要先弄清楚層的嵌套關(guān)系，否則就會(huì)出錯(cuò)。 好了，寫到這里我也該去睡了，以上就是這些時(shí)間查看大家的 CSS 文件獲得的經(jīng)驗(yàn)，希望對大家書寫 CSS 的時(shí)候有所幫助，制作出來的 SKIN 更加簡潔、明了 。
環(huán)評公示相關(guān)推薦
鄂ICP備17016276號-1