 在了解甚麼是文字框前, 請先直接看下面的例子
文字 ABC 123
(HTML 代碼)
<span id="diaryStr" ><font size="2" ><strong ><span style="background-color: rgb(0, 255, 255);" ></span ><br > <div style="border-right: 1px solid rgb(0, 0, 0); border-top: 1px solid rgb(0, 0, 0); border-left: 1px solid rgb(0, 0, 0); height: 30px; background-color: rgb(255, 255, 224);" ><font color="#ff007f" >文字 ABC 123</font ></div ></strong ></font ></span >
文字 ABC 123
(效果)
看到吧? 這就是最簡單的文字框了。
當然, 文字框內, 你可以如常地輸入文字、貼圖或連結。
說穿了, 你大概可以想像文字框其實就是在普通文字上, 加上四條邊線。
但別小看它, 文字框可以令平凡的文字, 帶來不少美化效果。
OK, 就先由上面的例子解說~
border: 1px 是指邊線的粗幼為 1 pixel。 此數值越大, 邊線則越粗, 如果設定為 0 的話, 則不會顯示邊線。
solid 是指邊線的類形為實線。除了實線外, 邊線可設定成其他七種類形, 分別是 dotted (點線)、dashed (虛線)、double (雙線)、groove (立體內凹)、ridge (立體浮凸)、inset (內凹) 及 outset (外凸)。
#000000 是指邊線的顏色, #000000就是黑色。
background-color:#FFFFE0 是指文字框的背景顏色。
width:150px; height:30px 是指文字框闊度及高度。
那麽
標籤又是甚麼? 簡單來說, 它的定義就是用來將物件包裹起來, 甚麼是物件? 在 HTML 中, 一段文字、表格 (Table)、貼圖等等, 你也可以看成是物件, 而
就可以這些物件包裹起來, 將不同的物件打包後, 就會成為單一物件, 從而方便修改及管理。
坦白說, 如果要將
標籤的應用完全講解, 那就太花時間, 而且這裡的教學目的, 並非講解 HTML, 而是為了達到在 Windows Live Spaces 中的美化效果, 繼而針對性地利用部份 HTML 技巧來修飾 Windows Live Spaces, 所以就不在此詳述了。
除了實線外, 其餘七種文字框的邊線類形:
當然, 既然知道文字框是由四條邊線組成, 你就可以為每條邊線作出設定, 先看下面示範:
文字內容
<span id="diaryStr"><strong><strong><span style="background-color: rgb(0, 255, 255);"></span><br> <div style="border-right: 8px solid yellow; border-top: 2px dotted blue; border-left: 6px double green; height: 250px;"><font color="#ff007f">文字內容</font></div><br> <br> </strong></strong></span>
(HTML 代碼)
可以看見四條邊線也可以各自獨立設定, 而且用法簡單~
(效果)
border-top:dotted 2px blue 是指把外框上面的線設為為 2pixel 點線, 顏色是藍色。
border-bottom:dashed 4px red 是指把外框下面的線設為為 4pixel 點線, 顏色是紅色。
border-left:double 6px green 是指把外框左面的線設為為 6pixel 點線, 顏色是綠色。
border-right:solid 8px yellow 是指把外框右面的線設為為 8pixel 點線, 顏色是黄色。
現在, 你只要利用四條邊線的類形及不同顏色的設定, 就可以創做出不同風格的文字框, 再配合基本的文字修飾技巧或貼圖, 修飾你的日記就更為方便囉。
|
住戶編號:1944339
檢舉原因
心情: 
