【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 沒有線

 

 


arrow
arrow
    全站熱搜

    News123 發表在 痞客邦 留言(0) 人氣()