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

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

 

■ 使用方法:

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

 

 

■ 框線 樣式

 

標題文字寫在這

 

 

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

<div class="jane_bar" style="margin: auto auto 35px;
	padding: 20px;
	border-width: 5px 0px 0px;
	border-style: solid dotted dotted;
	border-color: rgb(2, 141, 106) gray gray;
	border-image: initial;
	font-style: normal;
	font-variant-ligatures: normal;
	font-variant-caps: normal;
	font-variant-numeric: inherit;
	font-variant-east-asian: inherit;
	font-stretch: inherit;
	line-height: 50px;
	vertical-align: baseline;
	letter-spacing: 1px;
	orphans: 2;
	text-indent: 0px;
	text-transform: none;
	white-space: normal;
	widows: 2;
	word-spacing: 0px;
	-webkit-text-stroke-width: 0px;
	text-decoration-thickness: initial;
	text-decoration-style: initial;
	text-decoration-color: initial;
	border-radius: 0px;
	background-color: rgb(207, 236, 224);
	box-sizing: border-box;
	text-align: center;
	"><font color="#000000" face="microsoft jhenghei, cwtexhei, open sans"><span style="font-size: 20px"><strong>標題文字寫在這</strong></span></font></div>

 

 

■ 說明|註解

以下列出常會修改的幾個地方。margin、padding、border-style因較為複雜,補充在後面。

而文字的樣式在pixnet中,則可用內建的工具直接修改即可。文字顏色、大小則修改紅色部分

 

<div class="jane_bar" style="margin: auto auto 35px;  //外邊距。語法。
    padding: 20px;                                    //內距
    border-width: 5px 0px 0px;                //邊框寬度
    border-style: solid dotted dotted;     //框線樣式
    border-color: rgb(2, 141, 106) gray gray;         //框線顏色
    border-image: initial;            //邊框圖片
    font-style: normal;                //字體樣式
    font-variant-ligatures: normal;           //文字連字表現形式
    font-variant-caps: normal;                 //控制大寫字母特殊字元的使用
    font-variant-numeric: inherit;            //控制數字,分數和序號標記的替代字形的使用
    font-variant-east-asian: inherit;         //控制東亞腳本(如日文和中文)的交替符號的使用
    font-stretch: inherit;                          //字體定義一個正常或經過伸縮變形的字體外觀,這個屬性並不會通過伸展/縮小而改變字體的幾何外形,如font-feature-settings和font-variant屬性,它僅僅意味著當有多種字體可供選擇時,會為字體選擇最適合的大小。
    line-height: 50px;              //設置多行元素的空間量
    vertical-align: baseline;
    letter-spacing: 1px;
    orphans: 2;
    text-indent: 0px;
    text-transform: none;
    white-space: normal;
    widows: 2;
    word-spacing: 0px;
    -webkit-text-stroke-width: 0px;
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    border-radius: 0px;
    background-color: rgb(207, 236, 224);    //背景顏色
    box-sizing: border-box;
    text-align: center;  //文字置中
    "><font color="#000000" face="microsoft jhenghei, cwtexhei, open sans"><span style="font-size: 20px"><strong>標題文字寫在這</strong></span></font></div>

 

 


 

 

■ margin 

❏ 功能:用來設定邊界距離的語法,透過 margin 可以設定各元素間的間距。margin 是屬於外距。

❏ 語法一:

  • margin-top:設定上邊界距離。
  • margin-left:設定左邊界距離。
  • margin-right:設定右邊界距離。
  • margin-bottom:設定下邊界距離。
  • margin:一次設定上下左右四個邊距。

 

❏ 語法二:

margin:屬性值

屬性值可以是 1~4個值

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

 

❏ 可填入的值:

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

 

 

■ 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) 人氣()