隨手記錄

【CSS】部落格 - 框線 - 範例 003

對不懂CSS程式語法的我們，看到別人的部落格各種的框線、排版時，想要學，卻也沒有那麼簡單。既然已經學不會，那就直接用「複製、貼上大法」。再直接修改裏面的原始碼。所以著手收集看到的格式。

■ 使用方法：

1. 直接複製下面的「原始碼」，並貼到自己的部落格即可。
2. 想到修改樣式，則參考「說明|註解」處即可。
3. 建議使用電腦查看此網頁。

■ 框線 樣式

格　　式

■ 原始碼(使用時，直接複製此處即可)

<h2 class="ih-heading" style="margin: 0px 0px 15px;
	padding: 0px;
	background-color: RGB(255, 255, 255);
	border-width: 0px 0px 2px 0px;
	border-bottom-style: solid;
	border-bottom-color: RGB(255, 128, 0);
	vertical-align: baseline;
	"><span style="background-color: RGB(255, 237, 219);
	display: inline-block;
	font-size: 16px;
	padding: 8px 13px 8px;
	vertical-align: baseline;
	"><strong>格　式</strong></span></h2>

■ 說明|註解

以下列出常會修改的幾個地方 。不過最常修改的地方應該「底線」及「背景顏色」。此兩項特別用黃底色標註出來。

<h2 class="ih-heading" style="margin: 0px 0px 15px;

padding: 0px;

background-color: RGB(255, 255, 255);  //右邊的背景顏色。目前設定為白色

border-width: 0px 0px 2px 0px;   //邊框粗細

border-bottom-style: solid;        //邊框樣式

border-bottom-color: RGB(255, 128, 0);  //底線的顏線

vertical-align: baseline;

"><span style="background-color: RGB(255, 237, 219);  //左邊的背景影顏色

display: inline-block;

font-size: 16px;  //字體的大小

padding: 8px 13px 8px;  //文字距離邊框的數值

vertical-align: baseline;

"><strong>格　式</strong></span></h2>

■ Padding 

❏ 功能：內距的設定

❏ 語法一：

• padding-top：上方的內距
• padding-right：右方的內距
• padding-bottom：下方的內距
• padding-left：左方的內距
• padding：一次設定上下左右四個內距。

❏ 語法二：

padding：屬性值

屬性值可以是 1~4個值

• 1個值：該值會統一應用到全部四個邊的內邊距上。
• 2個值：上下　左右。第一個值會應用於上邊和下邊的內邊距，第二個值應用於左邊和右邊。
• 3個值：上　左右　下。第一個值會應用於上邊，第二個值會應用於左右邊，第三個值會應用於下邊。
• 4個值：上　右　下　左。第一個值會應用於上邊，第二個值會應用於右邊，第三個值會應用於下邊，第三個值會應用於左邊。

❏ 可填入的值：

• padding：auto;　//代表讓瀏覽器自己去設定。
• padding：長度單位;　//就是給數字跟單位，單位可以是 em、px、pt 等値。
• padding：%;　//讓瀏覽器自己去設定，跟邊界元素有關。

■ border-style 

❏ 功能：設定邊框樣式

❏ 語法：

border-style：樣式；

• border-style：設定四個邊框樣式    
• border-top-style：僅設定上邊框樣式
• border-right-style：設定右邊框樣式
• border-bottom-style：僅設定下邊框樣式
• border-left-style：設定左邊框樣式 

❏ 樣式：

• solid 實線
• dashed 虛線
• double 雙線
• dotted 點線
• groove 凹線
• ridge 凸線
• inset 嵌入線
• outset 浮出線
• none 沒有線