四、頁(yè)面制作(1)—-用好border和clear
由于找工作找房子的原因，隔了這么久才能開始寫教程，心里感覺(jué)很對(duì)不起一直在關(guān)注本站的朋友，今天是找到房子的第二天，于是趕快繼續(xù)寫教程。
這一節(jié)里面，主要就是想告訴大家如何使用好border和clear這兩個(gè)屬性。
標(biāo)簽歸檔：CSS
Div+CSS布局入門教程(四)
三、頁(yè)面頂部制作(2)—-使用列表li制作菜單
開始此節(jié)的學(xué)習(xí)前，請(qǐng)確認(rèn)你已經(jīng)參照之前的幾節(jié)內(nèi)容寫入了DIV、CSS到index.htm和css.css文件中。
這一節(jié)我將告訴大家如何用列表li來(lái)制作菜單。
Div+CSS布局入門教程(三)
三、頁(yè)面頂部制作(1)
當(dāng)我們寫好了頁(yè)面大致的DIV結(jié)構(gòu)后，我們就可以開始細(xì)致地對(duì)每一個(gè)部分進(jìn)行制作了。
在上一章中我們寫入了一些樣式，那些樣式是為了預(yù)覽結(jié)構(gòu)而寫入的，我們把css.css中的樣式全部清除掉，重新寫入以下樣式代碼：
Div+CSS布局入門教程(二)
二、寫入整體層結(jié)構(gòu)與CSS
接下來(lái)我們?cè)谧烂嫘陆ㄒ粋€(gè)文件夾，命名為“DIV+CSS布局練習(xí)”，在文件夾下新建兩個(gè)空的記事本文檔，輸入以下內(nèi)容：
Div+CSS布局入門教程(一)
轉(zhuǎn)自http://www.tblog.com.cn
一、頁(yè)面布局與規(guī)劃
好久沒(méi)有認(rèn)真寫點(diǎn)東西了，想起最近這些時(shí)間經(jīng)常有朋友問(wèn)到我有關(guān)于DIV+CSS布局的問(wèn)題，其實(shí)歸根結(jié)底還是由于沒(méi)有入門造成的。那么接下來(lái)的這篇文章就帶領(lǐng)大家入門吧…
在網(wǎng)頁(yè)制作中，有許多的術(shù)語(yǔ)，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會(huì)用到一些有關(guān)于HTML的基本知識(shí)，而在你學(xué)習(xí)這篇入門教程之前，請(qǐng)確定你已經(jīng)具有了一定的HTML基礎(chǔ)。下面我們就開始一步一步使用DIV+CSS進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)吧。
所有的設(shè)計(jì)第一步就是構(gòu)思，構(gòu)思好了，一般來(lái)說(shuō)還需要用PhotoShop或FireWorks(以下簡(jiǎn)稱PS或FW)等圖片處理軟件將需要制作的界面布局簡(jiǎn)單的構(gòu)畫出來(lái)，以下是我構(gòu)思好的界面布局圖。
又一個(gè)用CSS制作的圓角層
終于找到一個(gè)沒(méi)有使用VML制作的圓角效果的層，仔細(xì)看了一下代碼，其實(shí)也很簡(jiǎn)單，用幾個(gè)b作了點(diǎn)小小的欺騙，應(yīng)該也算是技巧了吧，以下是代碼：
padding-CSS速查手冊(cè)
padding版本：CSS1 兼容性：IE4+ NS4+ 繼承性：無(wú)
語(yǔ)法：
padding : length
參數(shù)：
length : 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值 | 或者百分?jǐn)?shù)。百分?jǐn)?shù)是基于父對(duì)象的寬度。請(qǐng)參閱長(zhǎng)度單位
說(shuō)明：
檢索或設(shè)置對(duì)象四邊的補(bǔ)丁邊距。
如果提供全部四個(gè)參數(shù)值，將按上－右－下－左的順序作用于四邊。
如果只提供一個(gè)，將用于全部的四條邊。
如果提供兩個(gè)，第一個(gè)用于上－下，第二個(gè)用于左－右。
如果提供三個(gè)，第一個(gè)用于上，第二個(gè)用于左－右，第三個(gè)用于下。
內(nèi)聯(lián)對(duì)象要使用該屬性，必須先設(shè)定對(duì)象的height或width屬性，或者設(shè)定position屬性為absolute。
不允許負(fù)值。
對(duì)應(yīng)的腳本特性為padding。請(qǐng)參閱我編寫的其他書目。
關(guān)于對(duì)象的尺寸與邊框，內(nèi)外補(bǔ)丁等樣式表屬性的關(guān)系，請(qǐng)參看圖例以及height和width屬性。
示例：
body { padding: 36pt 24pt 36pt; }
body { padding: 11.5%; }
body { padding: 10% 10% 10% 10%; }
word-break應(yīng)用
word-break版本：IE5+專有屬性 繼承性：無(wú)語(yǔ)法：
word-break : normal | break-all | keep-all
參數(shù)：
normal : 依照亞洲語(yǔ)言和非亞洲語(yǔ)言的文本規(guī)則，允許在字內(nèi)換行
break-all : 該行為與亞洲語(yǔ)言的normal相同。也允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 與所有非亞洲語(yǔ)言的normal相同。對(duì)于中文，韓文，日文，不允許字?jǐn)嚅_。適合包含少量亞洲文本的非亞洲文本
說(shuō)明：
設(shè)置或檢索對(duì)象內(nèi)文本的字內(nèi)換行行為。尤其在出現(xiàn)多種語(yǔ)言時(shí)。
對(duì)于中文，應(yīng)該使用break-all 。
對(duì)應(yīng)的腳本特性為wordBreak。請(qǐng)參閱我編寫的其他書目。
示例：
div {word-break : break-all; }
WordPress-簡(jiǎn)單的Menu制作
其實(shí)只是很簡(jiǎn)單的增加一列l(wèi)i，然后用css來(lái)控制這部分li的表現(xiàn)，如果要應(yīng)用到其他模版，請(qǐng)自行修改css部分的相關(guān)代碼
解決圖片撐破頁(yè)面的問(wèn)題
在CSS樣式表中加入以下代碼:
1 2 3 4 | #primary .entry-content img { max-width: 545px; width: expression( this.width> 545 ? "545px" : (this.width+"px") ); } |
注:primary和entry-content 根據(jù)使用的替換