CSS網(wǎng)頁文本分欄怎么實現(xiàn)

這篇文章主要講解了“CSS網(wǎng)頁文本分欄怎么實現(xiàn)”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS網(wǎng)頁文本分欄怎么實現(xiàn)”吧！

在一些文字內(nèi)容較多的網(wǎng)站中，通常會采用多列布局的顯示方式，在DW中實現(xiàn)多列布局的效果有兩種方法，分別是浮動布局和定位布局，但是由于浮動布局的靈活性太強(qiáng)了，容易錯位，因此CSS3.0中大多使用新增的column屬性來設(shè)置實現(xiàn)網(wǎng)頁多列布局的頁面結(jié)構(gòu)

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

• column-count屬性：設(shè)置多列布局的列數(shù)，而不需要通過列寬自動調(diào)整列數(shù)

• column-gap屬性：設(shè)置列與列之間的間距，從而更好的控制多列布局中的內(nèi)容和版式

• column-rule屬性：添加分欄線

這里還要提一個小技巧

使用font-face可屬性可以加載服務(wù)器端的字體文件，讓客戶端，顯示客戶端所沒有安裝的字體

• font-face

• font-family：設(shè)置文本的名稱

• font-style：設(shè)置文本樣式

• font-variant：設(shè)置文本是否大小寫

• font-weight：設(shè)置文本的粗細(xì)

• font-stretch：設(shè)置文本是否橫向拉伸變形

• font-size：設(shè)置文本字體大小

• src：設(shè)置路徑

代碼如下

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

效果如下

感謝各位的閱讀，以上就是“CSS網(wǎng)頁文本分欄怎么實現(xiàn)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS網(wǎng)頁文本分欄怎么實現(xiàn)這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！