1）樣式管理→部落格Css原始碼

Css筆記1

 

2）拉到最下面，定義我要的文字框內容（這個步驟決定你的文字框外觀）

以下我先寫一個簡單的綠色框框

Css筆記2

程式碼：

.yuan_box_2{

margin: 2em 0px;

padding: 15px;

color: #666;

background-color: #BBFFBB;

}

.yuan_box_2 ：自己定義的類別名稱（到時候寫文章時可以直接呼叫）

color: #666 ： 文字顏色（注意不要和底色搞混）

background-color: #BBFFBB ：後面的#BBFFBB是我要的色碼（淺綠色）

 

3）回到編輯文章→將我要加框的文字內容用以下的程式碼包起來

<div class="yuan_box_2"> <p>輸入你要的文字</p> </div>

Css筆記4

大家注意到程式碼上的yuan_box_2，就是上個步驟我們寫的類別

Css筆記3

最後的效果就是這樣

ps：如果要更改顏色或文字框的樣式，記得在第二步驟的地方修改程式碼。


arrow
arrow
    文章標籤
    css css框線 css筆記 痞客邦 文字框 文字框底色
    全站熱搜

    元元不絕 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄