簡單、快速：3秒調出漂亮文字布局
文字在螢幕上呈現的耐不耐看，是決定了網路文本要不要被閱讀下去的重要因素。一篇好的數位文本，肯定在文字的呈
現
上下足了功夫。
這不是「字型」的原因而已，因為更重要的是字的大小、行寬、粗細，
這三點值得你一再去調整、調校。
| 一、文字範本的CSS |
| <style type="text/css"> .title01 { font-family: Verdana, '微軟正黑體'; font-size: 1.38em; font-weight: bold; line-height: 1.8em; text-align: left; padding-left: 2em; letter-spacing: 0.1em; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglrT3qtNTiWdwR03SZJD3m0xCb_eJ0aNz1Ih5LqT6g1RzXE3Dv4J15KEJUfoQ2GdFawp-OmnDlCDEYrv8YZK_y1suOtPUqW8MX_ncJXo0CI4YcSuRMN2qQtmycTghCeDFsq73zbyA4-N0/w23-h28-no/blogstars20140702-1.png); background-repeat: no-repeat; background-position: left center; background-size: 23px; border-bottom: 1px solid darkred; } .word01 { font-family: Verdana, '新細明體'; font-size: 15px; font-weight: normal; line-height: 1.6em; text-align: left; letter-spacing: 0.1em; } .tableword01 { font-family: Verdana, '微軟正黑體'; font-size: 1.01em; font-weight: bold; line-height: 1.6em; text-align: left; padding: 3px; } .column01 { -webkit-column-count: 2; -webkit-column-gap: 30px; -webkit-column-rule: 1px outset darkred; } </style> |
| 二、快速套用文字布局影音
教學 |
|
【要看啦！】文字的複製、貼上以及嵌入div，的一些超有用的小技巧：
【要看啦！】黑體字怎麼跑不出來？
範例：
<div class="title01">
這是中標的內文
</div>
<div class="word01">
這是一般的內文。這是一般的內文。這樣的可以表現出，文字表現上的大中小之格式。
</div>
呈現：
這是中標的內文
這是一般的內文。這是一般的內文。這樣的可以表現出，文字表現上的大中小之格式。
沒有留言:
張貼留言