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