CSS混沌初開(kāi)VI：正文與圖片的混排
現(xiàn)在我們可以開(kāi)始在網(wǎng)頁(yè)中添加內(nèi)容了，在后續(xù)教程中將會(huì)介紹友情鏈接版塊以及頁(yè)腳的制作。
首先在CSS中添加一個(gè)id選擇符，在其中定義一個(gè)寬度值514px (692-178)：
#content {
width: 514px;
float: left;
}
因?yàn)閷?dǎo)航菜單浮動(dòng)在頁(yè)面主體的左邊，所以我們要在#left中添加一條float: left語(yǔ)句，#content中的左浮動(dòng)是針對(duì)其外圍容器的，解析之后它將顯示在導(dǎo)航右邊的正文版塊：
#left {
width: 178px;
float: left;
}
接下來(lái)在XHTML中添加如下代碼：
<div id="content">this is the right</div>
如果你對(duì)上面的CSS和XHTML組織感到疑惑，下面的教程可能會(huì)對(duì)你有所幫助： CSS中的Float屬性入門(mén) 浮動(dòng)屬性Float的應(yīng)用
你會(huì)發(fā)現(xiàn)正文的內(nèi)容跟導(dǎo)航菜單貼得很緊，我們可以利用padding來(lái)增加一點(diǎn)間隙：
#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}
也可以將代碼簡(jiǎn)化成：
[/code]#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}
[/code]
不論是padding還是margin，若其后跟著四個(gè)數(shù)值，對(duì)應(yīng)的邊緣順序是上右下左，即順時(shí)針?lè)较?。大家?huì)發(fā)現(xiàn)現(xiàn)在#container中定義的寬度由原來(lái)的514變成了479，因?yàn)槲覀優(yōu)榱俗屨奈谋九c左右邊框空出一點(diǎn)距離，左邊緣用padding實(shí)現(xiàn)，而右邊緣因?yàn)檎麄€(gè)DIV是左浮動(dòng)的，所以我們直接將DIV的寬度縮減15px，所以width的值就變成了514-20-15=479px。

你可能會(huì)疑問(wèn)：“為什么不直接使用"width: 494px" 和 "padding-right: 15px"呢？”剛開(kāi)始的時(shí)候我也是這么做的，出來(lái)的效果在Safari, FireFox 和Mozilla還算正常，但在IE中就不行了，正文版塊跳到了導(dǎo)航的下面，好像右邊沒(méi)有足夠的空間容納下正文DIV，具體問(wèn)題出在哪里我也說(shuō)不清楚，可能也是IE的一個(gè)Bug吧。
添加正文的文章標(biāo)題
先來(lái)看一下主內(nèi)容版塊的結(jié)構(gòu)：

我們把文章的標(biāo)題放在H2標(biāo)簽中：
<h2>This is the title</h2>
針對(duì)文章標(biāo)題的CSS定義如下：
#content h2 {
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #80866A;
background: transparent url(images/bullet_title.gif) no-repeat;
width: 454px;
padding: 0 0 0 30px;
margin: 0;
}
這里我們使用#content h2的選擇符組合，當(dāng)然也可以直接對(duì)H2標(biāo)簽進(jìn)行定義，但是會(huì)對(duì)頁(yè)面中所有的H2元素都起作用。這個(gè)CSS樣式的定義中，除了常規(guī)的字體集、顏色、字號(hào)之外，還利用padding屬性在標(biāo)題文本左邊空出30px的縮進(jìn)，目的是不要遮蓋背景圖片。背景background屬性中，除了圖片的路徑及其平鋪方式，還定義了其背景色為透明transparent，使整個(gè)標(biāo)題更好的與其它元素融合
添加正文文本
下面一個(gè)class類(lèi).text定義了正文文字的樣式：
.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}
與id不同的是，class類(lèi)可以在一張頁(yè)面中重復(fù)使用，里面的屬性比較簡(jiǎn)單，需要補(bǔ)充一下的是，11px/18px表示字體大小是11px，行高是18px。在XHTML中，我們添加一個(gè)段落標(biāo)簽P來(lái)放置文本，并應(yīng)用.text樣式：
<p class="text">Here comes the text</p>
在正文中添加混排圖像
下面是應(yīng)用在圖像上的樣式：
.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}
這里我們還是使用class類(lèi)，因?yàn)橐院罂赡苓€會(huì)用到它。float:right讓圖片在文本塊中居右，而白色的背景和四邊均為7px的padding，使得圖片的四周有了類(lèi)似7像素白邊的效果，目的是讓圖片內(nèi)容與邊框保持7px的間距。而真正的邊框由border定義，1像素實(shí)線(xiàn)。如果在文本塊中有居左的圖片，我們可以再添加一個(gè)名為.imageleft的class類(lèi)，具體的屬性設(shè)置只要把float: right改成float: left就可以了。

最新評(píng)論