簡單“邊框”的制作方法
博客制作 2010-11-20 15:55:59 閱讀2 評論0 字號：大中小
hdly006502 在制作音畫作品及發(fā)表圖片時,給它添加一幅漂亮的邊框.這也許是許多博
友想做的...那么,該如何來為它添加漂亮的邊框呢？
其實,制作‘邊框’的方法有很多種,比如用Word、PS等軟件都可以制作出
邊框. 但這就要求你必須有一定的電腦專業(yè)知識,對于一般的朋友來說還是有點
難度的.
今天,筆者向大家介紹一種簡便、制作容易的的方法:
那就是用代碼直接制作音畫、日志的邊框.
首先,看下面的這段基本代碼:
首先,看下面的這段基本代碼:
原始代碼:(如下)
<TABLE style="BORDER-RIGHT: #0000ff 7pt double; BORDER-TOP: #0000ff 7pt double; BORDER-LEFT: #0000ff
7pt double; BORDER-BOTTOM: #0000ff 7pt double" width="80%" align=center>
<TBODY>
<TR>
<TD bgColor=#ffffff>填寫內(nèi)容</TD></TR></TBODY></TABLE>
熟悉上述代碼概念及用法
代碼解析: 1、BORDER-RIGHT:表示該邊框的右邊框線;LEFT表示左邊框線;TOP、BOTTOM表示上、下邊框線;
2、#0000ff 表示該邊框線的顏色,有關(guān)顏色的選取請參見《顏色速查表》一文;
3、7pt表示該邊框線的粗細度,可根據(jù)需要改變其數(shù)值;4、上述代碼中的紅色部分double表示該邊框為單線邊框、double為雙線邊框、outset表示為凸出型邊框、inset為凹槽型邊框、dashed為虛線型邊框等
4、align=center 表示該邊框在日志中居正中位置, 需要說明的是:日志頁面的總寬度一在720至800之間.只有寬度值小于700以下時,邊框才會出現(xiàn)居左、居右或居中的現(xiàn)象出現(xiàn);詳細內(nèi)容,請參見---《如何調(diào)整“邊框”在日志頁面的寬度及高度?》一文的解講;
5、如果去除上述代碼中的最后一行中的bgColor=#ffffff代碼, 最終該邊框內(nèi)部的顏色顯示為你日志頁面的顏色.如果你想在該邊框內(nèi)添加一種背景顏色,只要在粉紅處改變顏色代碼即可. 例:#ffffff表示內(nèi)框背景為白色,現(xiàn)在需要黑色作為背景顏色只要改為#00000即可.
有關(guān)顏色的選取請參見《
顏色速查表》一文.
修改代碼后,可獲得如下幾種不同邊框的效果圖:
你只需要改變上述代碼中的部分代碼及數(shù)值復(fù)制該代碼后,就可以獲得形狀不同的邊 框.
如:<1>單線邊框、<2>雙線邊框、<3>立體陰影邊框、<4>凸線邊框、<5>凹線邊框、<6 >郵票型邊框、<7>粒狀陰影型邊框、<8>虛線邊框等等
1、單線型邊框:
代碼復(fù)制區(qū):
<TABLE style="BORDER-RIGHT: red 4pt solid; BORDER-TOP: red 4pt solid; BORDER-LEFT: red 4pt solid; BORDER-BOTTOM: red 4pt solid" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#ffffff>填寫內(nèi)容</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
2、雙線型邊框:
代碼復(fù)制區(qū):
<TABLE style="BORDER-RIGHT: #0000ff 7pt double; BORDER-TOP: #0000ff 7pt double; BORDER-LEFT: #0000ff 7pt double; BORDER-BOTTOM: #0000ff 7pt double" width="99%"><TBODY>
<TR>
<TD bgColor=#CC9966>填寫內(nèi)容</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
3、凸出型邊框:
代碼復(fù)制區(qū):
<TABLE style="BORDER-RIGHT: #33CC33 11pt outset; BORDER-TOP: #33CC33 11pt outset; BORDER-LEFT: #33CC33 11pt outset; BORDER-BOTTOM: #33CC33 11pt outset"width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#9999ff>填寫內(nèi)容</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
4、凹陷型邊框:
代碼復(fù)制區(qū):
<TABLE style="BORDER-RIGHT: #00ff00 11pt inset; BORDER-TOP: #00ff00 11pt inset; BORDER-LEFT: #00ff00 11pt inset; BORDER-BOTTOM: #00ff00 11pt inset" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#ffc9cc>填寫內(nèi)容</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
5、虛線型邊框:
代碼復(fù)制區(qū):
<TABLE style="BORDER-RIGHT: #cc33ff 4pt dashed; BORDER-TOP: #cc33ff 4pt dashed; BORDER-LEFT: #cc33ff 4pt dashed; BORDER-BOTTOM: #cc33ff 4pt dashed" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#99ff00>填寫內(nèi)容</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
6、脊?fàn)盍Ⅲw型邊框:
代碼復(fù)制區(qū):
<TABLE style="BORDER-RIGHT: #cc9933 14pt ridge; BORDER-TOP: #cc9933 14pt ridge; BORDER-LEFT: #cc9933 14pt ridge; BORDER-BOTTOM: #cc9933 14pt ridge" width="99%" align=center>
<TBODY>
<TR>
<TD bgColor=#cc9000>填寫內(nèi)容</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
7粒狀陰影框:
代碼復(fù)制區(qū):
<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66, strength=20" height=55 cellSpacing=6 cellPadding=0 width="99%" border=1>
<TBODY>
<TR>
<TD bgColor=#cc9933>正文</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
8、立體陰影框:
代碼復(fù)制區(qū): <TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145, strength:15)" height=55 cellSpacing=6 width="99%" border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff>填寫內(nèi)容</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
9、郵票型邊框:
代碼復(fù)制區(qū):
<TABLE style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; WIDTH: 780px; BORDER-BOTTOM: #f6ae56 3px dashed; HEIGHT: 50px" cellSpacing=8 bgColor=#f6ae56>
<TBODY>
<TR bgColor=#33ccff >
<TD>填寫內(nèi)容</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
10, 凹狀雙內(nèi)虛線框:
代碼復(fù)制區(qū):
<TABLE borderColor=#0000ff cellSpacing=2 cellSpacing=1 width=780 align=center border=10>
<TBODY>
<TR>
<TD style="border:3 dashed #00cc00">填寫內(nèi)容</TD></TR></TBODY></TABLE>
效果圖如下:(可直接復(fù)制使用)
填寫內(nèi)容
最后,說明:
根據(jù)上述原始代碼,稍作修改后還可以制作出許多漂亮的圖片邊框.比如將上述代碼改為:
代碼復(fù)制區(qū):
<P align=center><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,
strength=20"
src="
</P>效果圖如下:具體操作步驟,請參見---
