用圖像和風格語言css 定義數字章節的格式

寫文章或博客，將內容按內容的邏輯分為小塊，或章節，這樣讀者讀起來更為容易。一種分章節的方式是用小標題，標題的文字簡明扼要說明其內容，這是最為通常的方式；有的時候，章節標題很難用簡短文字來描述，更為簡單的方式就是簡單的數字、字母，或簡單圖示方式來表述。

我已經在博文中採用了第一種方式，而這種文字標題的格式不適合後一種，於是我開始研究一種新的格式來規範數字章節的格式。經過一段時間的觀察、研究和實驗，我終於找到一個比較滿意的答案。

博客是網路上的文字，基於html，既文字格式描述語言，新的html版本推崇用css，串接方式的格式描述語言。我的谷歌博客可以讓用戶自己設計和控制html和css，於是我就利用這兩個工具來設計我的章節格式。

下面就簡單介紹我是如何做的。

01

數字章節是採用數字或字母的方式做為章節的標題，我喜歡的格式是：數字或字母在一個圓圈內，放在中心。圓圈的背後是一個簡單的水平線放射線圖形。

首先，這個簡單的圖形是一長條細線，中心部分較粗，伸展到兩邊逐漸變細，線條縱向有點輻射的影子，漸漸由黑變淺色。設計好線條之後，我上傳到我的博客網頁，在 css class 中取名為 numericSection

02

然後，我要用css來定義兩個圓圈，外面的圓圈內部為較淺的灰色，裡面較小的圓圈顏色深點，在圓圈中心的文字顏色為白色。

下面是外園，css class 名字為 numericSectionOuterCircle:

 

這是裡面的圓圈，css class 名字為 numericSectionInnerCircle, 裡面的圓比上面的圓圈半徑要小一些。

這是兩個圓圈疊合的效果（中間字母T）：

T

03

這樣，我的數字章節風格就定義好了：一個圖像，兩個圓圈。下面是它們的css定義描述：

1. /* Numeric Section Style */
2. div .numericSection {
3.  margin: 1.5em auto;
4.  padding-top: 0.5em;
5.  padding-bottom: 0.5em;
6.  white-space: normal;
7.  border: none;
8.  text-align: center;
9.  width: 100%;
10.  background-image: url(http://2.bp.blogspot.com/.../section.png);
11.  background-size: 100%;
12.  background-position: 50% 50%;
13.  background-repeat: no-repeat no-repeat;
14. }
16. div .numericSectionOuterCircle {
17.  width: 60px;
18.  min-height: 60px;
19.  border-radius: 50%;
20.  background: lightgray;
21.  display: inline-block;
22. }
24. div .numericSectionInnerCircle {
25.  width: 50px;
26.  min-height: 50px;
27.  margin: 5px auto;
28.  background-color: gray;
29.  color: white;
30.  font-size: 150%;
31.  line-height: 50px;
32.  border-radius: 50%;
33. }

我將上面的定義放到我博客的html template中。這樣我在寫博客的時候，就可以採用這些css class來定義我博客文中的數字章節了，比如說下面是html描述數字章節01：

1. <div class="numericSection">
2.  <div class="numericSectionOuterCircle">
3.  <div class="numericSectionInnerCircle">
4. 01
5.  </div>
6.  </div>
7. </div>

其它博文

• 下一篇
• 前一篇