*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2014年9月17日 星期三

簡單、快速:3秒調出漂亮文字布局


簡單、快速: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://lh5.googleusercontent.com/-DOigud2kQVs/U7OZ90USuEI/AAAAAAAATjc/PushP-fiJWM/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>
二、快速套用文字布局影音 教學

  1. 請把範例之CSS複製到<body>之後。
  2. 再依影音教學操作。


【要看啦!】文字的複製、貼上以及嵌入div,的一些超有用的小技巧:



【要看啦!】黑體字怎麼跑不出來?





沒有留言:

張貼留言