CSS網頁文字分欄
在一些文字內容較多的網站中,通常會採用多列布局的顯示方式,在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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 【Goku】net文字分頁Go
- CSS數字分頁效果CSS
- 解析網站CSS中文字型連結造成404頁面網站CSS
- CSS設定選中網頁文字時的背景和顏色CSS網頁
- CSS分頁簡潔樣式CSS
- 網頁文字的祕密網頁
- python 網頁文字提取Python網頁
- 網頁固定側欄的做法網頁
- VUE-表格佈局、表格查詢、工具欄、表格、分頁欄Vue
- Smultron for Mac 網頁文字編輯工具Mac網頁
- Smultron for Mac(網頁文字編輯器)Mac網頁
- 如何修改網頁文字或圖片?網頁
- html&css基礎_頁面常見文字設定HTMLCSS
- 噹噹網首頁——CSS程式碼CSS
- 網站欄目和頁面的策劃網站
- Java 在Word指定段落/文字位置插入分頁符Java
- 分頁練習-網頁開發常用網頁
- Laravel 分頁後的欄位返回都是什麼意思?Laravel
- CSS——CSS 給文字加樣式:② 文字屬性CSS
- 5分鐘學會製作 CSS 波浪文字動畫特效CSS動畫特效
- 中文字型網頁開發指南網頁
- CSS 文字居中CSS
- CSS文字排版CSS
- 4分鐘內完成網頁設計:簡單美觀通用的CSS - jgthms網頁CSS
- CSS實現可拉伸調整尺寸的分欄佈局CSS
- css網頁的幾種佈局CSS網頁
- css將元素固定於網頁底部CSS網頁
- 網頁中的CSS換行控制網頁CSS
- 網頁變灰的CSS程式碼網頁CSS
- CSS系列:CSS文字樣式CSS
- Repeater 的分頁 (摘自網路)
- css數字分頁佈局程式碼例項CSS
- 數字按鈕分頁CSS樣式程式碼CSS
- 特強的的拖動分頁(JS+CSSJSCSS
- 【轉】5分鐘學會製作 CSS 波浪文字動畫特效CSS動畫特效
- Mac上實用網頁文字編輯工具Mac網頁
- Smultron for Mac(網頁文字編輯工具)12.5.2Mac網頁
- Chrome 獲取網頁顏色(文字、圖片)Chrome網頁