CSS網頁文字分欄

山有木xi發表於2020-04-23

在一些文字內容較多的網站中,通常會採用多列布局的顯示方式,在DW中實現多列布局的效果有兩種方法,分別是浮動佈局和定位佈局,但是由於浮動佈局的靈活性太強了,容易錯位,因此CSS3.0中大多使用新增的column屬性來設定實現網頁多列布局的頁面結構

  • column-width屬性:定義多列布局中每一列的寬度,課單獨使用,也可以和其它多列布局屬性組合使用

  • column-count屬性:設定多列布局的列數,而不需要透過列寬自動調整列數

  • column-gap屬性:設定列與列之間的間距,從而更好的控制多列布局中的內容和版式

  • column-rule屬性:新增分欄線

這裡還要提一個小技巧

使用font-face可屬性可以載入伺服器端的字型檔案,讓客戶端,顯示客戶端所沒有安裝的字型

  • font-face

  • font-family:設定文字的名稱

  • font-style:設定文字樣式

  • font-variant:設定文字是否大小寫

  • font-weight:設定文字的粗細

  • font-stretch:設定文字是否橫向拉伸變形

  • font-size:設定文字字型大小

  • src:設定路徑

程式碼如下

#main {
 width: 750px;
 height: 362px;
 background-color: #4F5422;
 padding-left: 11px;
 padding-right: 10px;
 float: left;
 -moz-column-count: 3;
 -moz-column-gap: 25px;
}

效果如下


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69917874/viewspace-2687909/,如需轉載,請註明出處,否則將追究法律責任。

相關文章