divcss布局及應(yīng)用入門(mén)教程-閱讀頁(yè)
2024-09-10 15:16本頁(yè)面
【正文】 { width:160px。 /*文字左對(duì)齊 */ float:left。 /*不允許左側(cè)存在浮動(dòng) */ overflow:hidden。 textalign:left。 /*浮動(dòng)居右 */ clear:right。 height:200px 保存預(yù)覽效果，可以發(fā)現(xiàn)這兩個(gè)層完美的浮動(dòng)，在達(dá)到了我們布局的要求，而兩個(gè)層的實(shí)際寬度應(yīng)該 160+2(border)+570+2=734px，已經(jīng)超出了父層的寬度，由于 clear 的原因，這兩個(gè)層才不會(huì)出現(xiàn)錯(cuò)位的情況，這樣可以使我們布局的頁(yè)面不會(huì)因?yàn)閮?nèi)容太長(zhǎng)（例如圖片）而導(dǎo)致錯(cuò)位。通常我們會(huì)看到一些網(wǎng)頁(yè)在載入時(shí)，由于圖片太大，導(dǎo)致布局被撐開(kāi)，直到頁(yè)面下載完成才恢復(fù)正常，通過(guò)添加 overflow:hidden 就可以解決這個(gè)問(wèn)題。 ID 和 CLASS 首先，有些東西需要說(shuō)明一下。因?yàn)?CSS 是區(qū)分大小寫(xiě)的。 我們先來(lái)處理 sidebar 的樣式，經(jīng)過(guò)分析，我們可以得知， sidebar 有四個(gè)部分，我們將這四個(gè)部分分為四個(gè)層： 程序代碼 div id=search/div div id=login div class=bar_title/div div class=bar_body/div /div div id=infomation div class=bar_title/div div class=bar_body/div /div div id=standard div class=bar_title/div div class=bar_body/div /div 在這里我們有到 ID 和 CLASS，那么有的朋友就要問(wèn)了，究竟什么情況下用ID，什么情況下用 CLASS 呢？ ID，表示的是唯一性，并且在這個(gè)頁(yè)面中只會(huì)出現(xiàn)一次，我們用它來(lái)表示布局的結(jié)構(gòu)； CLASS，表示一組（類(lèi)）或一個(gè)具有同樣性質(zhì)的元素，它們可以共用樣式，并且在頁(yè)面中將會(huì)出現(xiàn)多次。 但有的時(shí)候，我們需要給這些層中的元素設(shè)置不同的樣式時(shí)，我們要如何做呢？例如會(huì)員登錄這幾個(gè)文字使用 14px 加粗，其他是使用 12px 加粗，我們要怎么寫(xiě) CSS 呢，看下面的代碼？ 程序代碼 .bar_title {fontsize:12px。login .bar_title 在單獨(dú)設(shè)置了 fontsize:14px 的樣式時(shí)，同時(shí)也繼承了 .bar_title 這一組（類(lèi)）的樣式，那就是 fontweight:bold，加粗。 程序代碼 div class=title atitle1/a /div span class=title atitle2/a /div 這里，我要將 title1 的文字樣式設(shè)置為 14px,紅色，將 title2 的文字樣式為10px，綠色， title1 和 title2 都需要加粗， DIV 加 一個(gè)紅色的 1px 的邊框， SPAN加一個(gè)綠色的 1px 的邊框，樣式可以這樣寫(xiě)： 程序代碼 .title {border:1px solid f00} /*默認(rèn)為 1px的紅色邊框 */ {bordercolor:0f0} .title a {fontweight:bold} a {fontsize:14px。color:0f0} 大家可以看到，使用 CLASS 可以使得許多的元素可以共用同樣的樣式，通過(guò)元素的 TagName 的不同，又可以對(duì)每一個(gè)元素定制不同的樣式，我想大家應(yīng)該對(duì)什么時(shí)候該用 ID，什么時(shí)候該用 CLASS 已經(jīng)有了深刻的理解了吧！ 好了，這次的教程到這里，我不知道下一篇教程什么時(shí)候更新，但我會(huì)盡快的，謝謝大家的支持。 CSS 代碼 ~! 最近看過(guò)許多網(wǎng)友制作的 SKIN 的 CSS 文件，發(fā)現(xiàn)其中有著許多冗余的代碼。 （一）、 margin、 padding屬性 參照相關(guān)資料我們可以知道， margin 和 padding 代表的意 思分別是外部邊距和內(nèi)部填充距離，在許多網(wǎng)友的 CSS 中，關(guān)于這兩個(gè)屬性的冗余代碼是出現(xiàn)得最多的。 另外， margin 和 padding 中各項(xiàng)屬性的順序是：上右下左，你只要記住是順時(shí)針?lè)较蚓秃昧恕＃?padding 也相同。屬性 !important 是 CSS1 就定義的語(yǔ)法，作用是提高指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。所以我們可以 important的后面添加 CSS 樣式，使其可以區(qū)別于 IE 和 FireFox 等瀏覽器。height:50px。 三、 textalign、 font 樣式 這兩個(gè)樣式的作用我就不說(shuō)了，但是這兩個(gè)樣式在許多網(wǎng)友的 CSS 中也存在許多冗余。textalgin:left。color:000000。textalgin:center。color:FF0000。fontsize:12px。} body2{textalgin:left。color:000000。textalgin:left。color:000000。color:FF0000。textalgin:left。} body2{} 以上就是正確的代碼，由于大家在制作 SKIN 時(shí)，對(duì) PJBLOG 的 DIV 結(jié)構(gòu)沒(méi)搞清楚，才會(huì)出現(xiàn)這種錯(cuò)誤。我們?cè)賮?lái)看看這段代碼： blogTitle{fontsize:0px。height:20px。display:none} 大家有沒(méi)有覺(jué)得這有些多余呢，是的，既然設(shè)置了不顯示，為何還要保留那些不必要的樣式呢？ 出現(xiàn)這種情況我就知道，這個(gè) SKIN 是改自某人的。} body1{margin:12px 0px 10px 0px。} body2{margin:10px 0px 15px 0px。} content{margin:8px 0px 2px 0px。} 這里需要大家制作一下示例才能了解，首先 main{margin:5px 0px 5px 0px。 （在一定場(chǎng)合下卻需要這樣書(shū)寫(xiě)） 我們同樣可以通過(guò)定義 body1 的上邊距和 body2 的下邊距來(lái)設(shè)置，所以才有了 body1{margintop:17px 。}（這里定義的是 body2 的上下邊距為 20px，左右邊距為 0px，也是縮寫(xiě)的一種方式。 好了，寫(xiě)到這里我也該去睡了，以上就是這些時(shí)間查看大家的 CSS 文件獲得的經(jīng)驗(yàn)，希望對(duì)大家書(shū)寫(xiě) CSS 的時(shí)候有所幫助，制作出來(lái)的 SKIN 更加簡(jiǎn)潔、明
環(huán)評(píng)公示相關(guān)推薦
鄂ICP備17016276號(hào)-1