把文字引號起來了
網路書寫,在於文字的表現力上要適合「掃瞄性」。所以,重點強調式的文字框呈現,就是讓讀者快速掌握重點的方式之一。
這種形式的表達,很容易以「表格」的功能來處理。我們可以看一下以下範例如何運用表格。
以下這是一個範例:
「 | ……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是審美的!…… |
」
|
表格文字框的語法:
<div style="width: 590px;">
<table border="0" cellpadding="5" cellspacing="2" style="border-bottom: 1px solid gray; border-top: 1px solid gray; font-family: '微軟正黑體'; font-size: 130%; line-height: 28px; width: 100%;">
<tbody>
<tr>
<td align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="top" width="10%">「
</td>
<td valign="top">……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……</td>
<td align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="bottom" width="10%">
」
</td>
</tr>
</tbody>
</table>
</div>
<table border="0" cellpadding="5" cellspacing="2" style="border-bottom: 1px solid gray; border-top: 1px solid gray; font-family: '微軟正黑體'; font-size: 130%; line-height: 28px; width: 100%;">
<tbody>
<tr>
<td align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="top" width="10%">「
</td>
<td valign="top">……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!……</td>
<td align="center" style="color: red; font-size: 180%; font-weight: bold;" valign="bottom" width="10%">
」
</td>
</tr>
</tbody>
</table>
</div>
思考過程:
1.先做出一個一列三欄的表格:
- 左右格各設為整體表格的10%。
- 整體表格,字體設為「微軟正黑體」,字的大小為130%,行高為28px。
- 左、右格的字再設為紅色,置中,大小180%,粗體。
10% |
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!…… | 10% |
2.去掉表格格線,再用css的style為表格的上、下加上灰色線。
10% |
……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!…… | 10% |
3.再於左、右格去掉「10%」,各加上引號。左格設為置頂,右格設為置底。
「 | ……在人生的道路上,我們並不是一定要不斷向前走。有時往後看。更好!人生並不可能什麼都如意。學會欣賞情緒中的各種姿態,是美的!…… | 」 |
▒ CSS 的引號強調作用
這是一段文字。引文的作用在於對文章的重點作出提示。這是網路文字效果運用中常見的技巧手法。這一範例是使用CSS語
法寫成。
CSS語法:使用 class="quo" 即可
.quo {
font-size: 110%;
font-family: '微軟正黑體';
font-weight: bold;
line-height:1.5;
padding: 20px 80px 20px 80px;
background-color: #f0f0f0;
position: relative;
}
.quo::before {
content: open-quote;
font-size: 400%;
font-weight:bold;
position: absolute;
left: 15px;
top: -8px;
}
.quo::after {
content: close-quote;
font-size: 400%;
font-weight:bold;
position: absolute;
right: 15px;
top:-8px;
}
沒有留言:
張貼留言