iT邦幫忙

DAY 25
0

HTML5 & CSS3系列 第 27

30天分享(29) - CSS3 多欄文字

文章有時候太長不好閱讀該怎麼讓閱讀體驗變好呢?

如果寬度都不做調整,跟內頁一樣塞滿整頁的寬,

或者是太長沒有適度空白的空間讓讀者休息,

都是極差的閱讀體驗。

就像報章雜誌一樣,內容豐富的文章應該分成多段、多欄,

可以縮小閱讀範圍讓人輕鬆的瀏覽,

也該有適度放空的範圍,讓讀者有喘息的空間。

以往網頁設計為了多欄的文字,都會分割成不少的區塊,

CSS3 定義了多欄文字,就算只有一個區塊也能排出多欄文字。

div {

column-count: 3;

}

只要加入以上的屬性就行了,非常簡易!

數值代表要切割幾欄,通常不會超過五欄,

因為太常打斷閱讀的節奏,也會使閱讀者失去閱讀的興趣喔!


上一篇
30天分享(28) - CSS3 動畫
下一篇
30天分享(30) - CSS3 區塊設定
系列文
HTML5 & CSS328
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言