|
CSS混沌初開VI：正文與圖片的混排
現(xiàn)在我們可以開始在網(wǎng)頁中添加內(nèi)容了，在后續(xù)教程中將會介紹友情鏈接版塊以及頁腳的制作。
首先在CSS中添加一個id選擇符，在其中定義一個寬度值514px (692-178)：
#content {
width: 514px;
float: left;
}
因為導(dǎo)航菜單浮動在頁面主體的左邊，所以我們要在#left中添加一條float: left語句，#content中的左浮動是針對其外圍容器的，解析之后它將顯示在導(dǎo)航右邊的正文版塊：
#left {
width: 178px;
float: left;
}
接下來在XHTML中添加如下代碼：
<div id="content">this is the right</div>
如果你對上面的CSS和XHTML組織感到疑惑，下面的教程可能會對你有所幫助：
你會發(fā)現(xiàn)正文的內(nèi)容跟導(dǎo)航菜單貼得很緊，我們可以利用padding來增加一點間隙：
#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}
也可以將代碼簡化成：
[/code]#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}
[/code]
不論是padding還是margin，若其后跟著四個數(shù)值，對應(yīng)的邊緣順序是上右下左，即順時針方向。大家會發(fā)現(xiàn)現(xiàn)在#container中定義的寬度由原來的514變成了479，因為我們?yōu)榱俗屨奈谋九c左右邊框空出一點距離，左邊緣用padding實現(xiàn)，而右邊緣因為整個DIV是左浮動的，所以我們直接將DIV的寬度縮減15px，所以width的值就變成了514-20-15=479px。
你可能會疑問：“為什么不直接使用"width: 494px" 和 "padding-right: 15px"呢？”剛開始的時候我也是這么做的，出來的效果在Safari, FireFox 和Mozilla還算正常，但在IE中就不行了，正文版塊跳到了導(dǎo)航的下面，好像右邊沒有足夠的空間容納下正文DIV，具體問題出在哪里我也說不清楚，可能也是IE的一個Bug吧。
添加正文的文章標(biāo)題
先來看一下主內(nèi)容版塊的結(jié)構(gòu)：
我們把文章的標(biāo)題放在H2標(biāo)簽中：
<h2>This is the title</h2>
針對文章標(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)然也可以直接對H2標(biāo)簽進行定義，但是會對頁面中所有的H2元素都起作用。這個CSS樣式的定義中，除了常規(guī)的字體集、顏色、字號之外，還利用padding屬性在標(biāo)題文本左邊空出30px的縮進，目的是不要遮蓋背景圖片。背景background屬性中，除了圖片的路徑及其平鋪方式，還定義了其背景色為透明transparent，使整個標(biāo)題更好的與其它元素融合
添加正文文本
下面一個class類.text定義了正文文字的樣式：
.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}
與id不同的是，class類可以在一張頁面中重復(fù)使用，里面的屬性比較簡單，需要補充一下的是，11px/18px表示字體大小是11px，行高是18px。在XHTML中，我們添加一個段落標(biāo)簽P來放置文本，并應(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類，因為以后可能還會用到它。float:right讓圖片在文本塊中居右，而白色的背景和四邊均為7px的padding，使得圖片的四周有了類似7像素白邊的效果，目的是讓圖片內(nèi)容與邊框保持7px的間距。而真正的邊框由border定義，1像素實線。如果在文本塊中有居左的圖片，我們可以再添加一個名為.imageleft的class類，具體的屬性設(shè)置只要把float: right改成float: left就可以了。
點擊查看效果
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2864629-1-1.html
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 頁面DIV布局解構(gòu) 下一頁 頁腳的構(gòu)建
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 7 頁 正文與圖片的混排
