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://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>
二、快速套用文字布局影音 教學

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


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



【要看啦！】黑體字怎麼跑不出來？





範例：
<div class="title01">
這是中標的內文
</div>
<div  class="word01">
這是一般的內文。這是一般的內文。這樣的可以表現出，文字表現上的大中小之格式。
</div>

呈現：

這是中標的內文
這是一般的內文。這是一般的內文。這樣的可以表現出，文字表現上的大中小之格式。

沒有留言:

張貼留言