說說HTML邊框
HTML邊框很多朋友都在做,也在用 。也問了我不
少的問題。
1。問我空間的圖框都比較好看,是咋做的。
2。問我要突起的圖框咋做。
3。問我咋我貼的圖都是滿的,他(她)貼的
圖咋總離框邊還有空的地方。
4??虻念伾ε?。。。。。。。。。。。。
其實,我QQ空間的HTML邊框沒一個是我做的,全
是偷的朋友們的來組合的。這篇日記里我不說圖框的
制作(因這方面的教材很多的),說說HTML邊框的
組合問題。
一。邊框的分類和合成
HTML邊框分成兩種,一種是純代碼形成的邊框,如圖:
另一種是用圖片做成的邊框,如圖:
1。這兩種邊框可套用,也就是說,兩種邊框都可
內(nèi)外再加邊框。如圖:
2。第二種邊框可拆用其中一部分進行組合,如圖:
3??騼?nèi)可打字和貼上要表現(xiàn)的圖片(其格式可
以用JPG,GIF,SWF,MPG圖都行)
二。代碼邊框的色彩改變
代碼邊框是由純的代碼形成的,如圖:
其代碼是:
<TABLE style="BORDER-RIGHT: #555555 10px groove; BORDER-TOP: #55
5555 10px groove; BORDER-LEFT: #555555 10px groove; BORDER-BOT
TOM: #555555 10px groove; BORDER-COLLAPSE: collapse" borderColor=#55
5555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
</TR></TBODY></TABLE>
這些代碼是啥意思呢,它們的意思是:
#555555 顏色可變 10 大小可變 width=300 寬度可變
groove是圖框的類型
BORDER和后面的代碼表示邊框的上下橫條和左右豎條
搞清了這些就好辦了,1。要把邊框加粗就把10改大,要變細就把10改小。2。要改變框的顏色,就改用另外的顏色代碼(下圖里括號內(nèi)的代碼)。
顏色代碼如下:
aliceblue (#F0F8FF) | antiquewhite (#FAEBD7) | aqua (#00FFFF) | aquamarine (#7FFFD4) |
azure (#F0FFFF) | beige (#F5F5DC) | bisque (#FFE4C4) | black (#000000) |
blanchedalmond (#FFEBCD) | blue (#0000FF) | blueviolet (#8A2BE2) | brown (#A52A2A) |
burlywood (#DEB887) | cadetblue (#5F9EA0) | chartreuse (#7FFF00) | chocolate (#D2691E) |
coral (#FF7F50) | cornflowerblue (#6495ED) | cornsilk (#FFF8DC) | crimson (#DC143C) |
cyan (#00FFFF) | darkblue (#00008B) | darkcyan (#008B8B) | darkgoldenrod (#B8860B) |
darkgray (#A9A9A9) | darkgreen (#006400) | darkkhaki (#BDB76B) | darkmagenta (#8B008B) |
darkolivegreen (#556B2F) | darkorange (#FF8C00) | darkorchid (#9932CC) | darkred (#8B0000) |
darksalmon (#E9967A) | darkseagreen (#8FBC8B) | darkslateblue (#483D8B) | darkslategray (#2F4F4F) |
darkturquoise (#00CED1) | darkviolet (#9400D3) | deeppink (#FF1493) | deepskyblue (#00BFFF) |
dimgray (#696969) | dodgerblue (#1E90FF) | firebrick (#B22222) | floralwhite (#FFFAF0) |
forestgreen (#228B22) | fuchsia (#FF00FF) | gainsboro (#DCDCDC) | ghostwhite (#F8F8FF) |
gold (#FFD700) | goldenrod (#DAA520) | gray (#808080) | green (#008000) |
greenyellow (#ADFF2F) | honeydew (#F0FFF0) | hotpink (#FF69B4) | indianred (#CD5C5C) |
indigo (#4B0082) | ivory (#FFFFF0) | khaki (#F0E68C) | lavender (#E6E6FA) |
lavenderblush (#FFF0F5) | lawngreen (#7CFC00) | lemonchiffon (#FFFACD) | lightblue (#ADD8E6) |
lightcoral (#F08080) | lightcyan (#E0FFFF) | lightgoldenrodyellow (#FAFAD2) | lightgreen (#90EE90) |
lightgrey (#D3D3D3) | lightpink (#FFB6C1) | lightsalmon (#FFA07A) | lightseagreen (#20B2AA) |
lightskyblue (#87CEFA) | lightslategray (#778899) | lightsteelblue (#B0C4DE) | lightyellow (#FFFFE0) |
lime (#00FF00) | limegreen (#32CD32) | linen (#FAF0E6) | magenta (#FF00FF) |
maroon (#800000) | mediumaquamarine (#66CDAA) | mediumblue (#0000CD) | mediumorchid (#BA55D3) |
mediumpurple (#9370DB) | mediumseagreen (#3CB371) | mediumslateblue (#7B68EE) | mediumspringgreen (#00FA9A) |
mediumturquoise (#48D1CC) | mediumvioletred (#C71585) | midnightblue (#191970) | mintcream (#F5FFFA) |
mistyrose (#FFE4E1) | moccasin (#FFE4B5) | navajowhite (#FFDEAD) | navy (#000080) |
oldlace (#FDF5E6) | olive (#808000) | olivedrab (#6B8E23) | orange (#FFA500) |
orangered (#FF4500) | orchid (#DA70D6) | palegoldenrod (#EEE8AA) | palegreen (#98FB98) |
paleturquoise (#AFEEEE) | palevioletred (#DB7093) | papayawhip (#FFEFD5) | peachpuff (#FFDAB9) |
peru (#CD853F) | pink (#FFC0CB) | plum (#DDA0DD) | powderblue (#B0E0E6) |
purple (#800080) | red (#FF0000) | rosybrown (#BC8F8F) | royalblue (#4169E1) |
saddlebrown (#8B4513) | salmon (#FA8072) | sandybrown (#F4A460) | seagreen (#2E8B57) |
seashell (#FFF5EE) | sienna (#A0522D) | silver (#C0C0C0) | skyblue (#87CEEB) |
slateblue (#6A5ACD) | slategray (#708090) | snow (#FFFAFA) | springgreen (#00FF7F) |
steelblue (#4682B4) | tan (#D2B48C) | teal (#008080) | thistle (#D8BFD8) |
tomato (#FF6347) | turquoise (#40E0D0) | violet (#EE82EE) | wheat (#F5DEB3) |
white (#FFFFFF) | whitesmoke (#F5F5F5) | yellow (#FFFF00) | yellowgreen (#9ACD32) |
三。代碼邊框的種類
代碼邊框的種類很多,常用的有:
槽線邊框
<TABLE style="BORDER-RIGHT: #555555 10px groove; BORDER-TOP: #55
5555 10px groove; BORDER-LEFT: #555555 10px groove; BORDER-BOT
TOM: #555555 10px groove; BORDER-COLLAPSE: collapse" borderColor=#55
5555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
脊線邊框
<TABLE style="BORDER-RIGHT: #555555 10px ridge; BORDER-TOP: #5
55555 10px ridge; BORDER-LEFT: #555555 10px ridge; BORDER-BOT
TOM: #555555 10px ridge; BORDER-COLLAPSE: collapse" borderColor
=#555555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
內(nèi)凹效果邊框
<TABLE style="BORDER-RIGHT: #555555 10px inset; BORDER-TOP: #5555
55 10px inset; BORDER-LEFT: #555555 10px inset; BORDER-BOTTOM: #5
55555 10px inset; BORDER-COLLAPSE: collapse" borderColor=#555555 h
eight=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>內(nèi)凹效果邊框</DIV></TD>
</TR></TBODY></TABLE>
外凸效果邊框
<TABLE style="BORDER-RIGHT: #555555 10px outset; BORDER-TOP: #555
555 10px outset; BORDER-LEFT: #555555 10px outset; BORDER-BOT
TOM: #555555 10px outset; BORDER-COLLAPSE: collapse" borderColor=#55
5555 height=100 cellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果邊框</DIV></TD>
</TR></TBODY></TABLE>
外虛內(nèi)實
<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dash
ed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" bor
derColor=#555555 height=100 cellSpacing=8 cellPadding=2 width=300 alig
n=center bgColor=#555555 border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #555555 3px solid; BORDER-TOP: #555555 3px so
lid; BACKGROUND: #333333; BORDER-LEFT: #555555 3px solid; BORDER-BOT
TOM: #555555 3px solid">
<DIV align=center>外虛內(nèi)實邊框</DIV></TD></TR></TBODY></TABLE>
雙實線邊框
<TABLE borderColor=#555555 height=100 cellPadding=2 width
=300 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>雙實線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
點線邊框
<TABLE style="BORDER-RIGHT: #555555 3px dotted; BORDER-TOP: #555
555 3px dotted; BORDER-LEFT: #555555 3px dotted; BORDER-BOTTO
M: #555555 3px dotted; BORDER-COLLAPSE: collapse" borderColor=#3333
33 height=100 cellPadding=2 width=300 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>點線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
單實線邊框
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#555555
height=100 cellPadding=1 width=300 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>單實線邊框表格</DIV></TD>
</TR></TBODY></TABLE>
立體陰影邊框
<TABLE style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#33
3333,direction:130,strength:10)" borderColor=#555555 height=100 cellPa
dding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>立體陰影邊框表格</DIV></TD>
</TR></TBODY></TABLE>
水平顛倒邊框
<TABLE style="filter:fliph" borderColor=#555555 height=100 c
ellPadding=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>水平顛倒邊框表格</DIV></TD>
</TR></TBODY></TABLE>
上下顛倒邊框
< TABLE style="filter:flipv" borderColor=#555555 height=100 cellPadding
=1 width=300 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>上下顛倒邊框表格</DIV></TD>
</TR></TBODY></TABLE>
浮雕特效邊框
<TABLE style="filter:progid:DXImageTransform.Microsoft.Emboss()" borderCol
or=#555555 height=100 cellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
浮雕特效邊框表格
</DIV></TD></TR></TBODY></TABLE>
色彩漸變特效邊框
<TABLE style="filter:invert" borderColor=#555555 height=100 c
ellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
色彩漸變特效邊框表格
</DIV></TD></TR></TBODY></TABLE>
X光特效邊框
<TABLE style="filter:'xray'" borderColor=#555555 height=100 c
ellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
X光特效邊框表格
</DIV></TD></TR></TBODY></TABLE>
黑白特效邊框
<TABLE style="filter:'gray'" borderColor=#555555 height=100 c
ellPadding=1 width=300 align=center border=12>
<TBODY>
<TR>
<TD>
<DIV align=center>
黑白特效邊框表格
</DIV></TD></TR></TBODY></TABLE>
特效邊框表格
我的QQ空間里常用的是外凸效果邊框
在使用這些邊框時,兩種方法都可用
1。直接復(fù)制上面的圖框,粘貼在日記的編輯欄里。
2。復(fù)制代碼,貼在日記編輯欄上面的“高級”里的“HTML”里,貼前要把里面的<P></P>先刪掉再貼,貼好后點“返回”就可繼續(xù)編輯日記內(nèi)容了。
要特別說明的是:
1。在圖框內(nèi)編輯日記前不能先放大圖框。
2。如要在代碼圖框內(nèi)加圖片圖框后使用,
所貼的日記正圖比例要和圖框的內(nèi)框的寬一致。