【美化音画】- HTML简单边框制作
HTML简单边框制作<BR>
单线、双线边框代码
<BR>
● 蔷薇几度花收集编写
<BR>
1、单线边框代码(代码见沙发楼层)
<BR>
<div style="BORDER-RIGHT: red 5pt solid; BORDER-TOP: red 5pt solid; BORDER-LEFT: red 5pt solid; BORDER-BOTTOM: red 5pt solid"><font color="#ff0000">这里插入文字</font> </div>
<BR>
说明:
<BR>
1、border-style则控制边框的效果,border-width控制边框的粗细,border-color调整边框的颜色,这里你仍然可以使用如#xxxxxx的颜色数值,而当使用“solid”则为单一颜色的线形简单边框。
<BR>
<BR>
2、这是4条边分开写的代码,所以,要将4边#号的值都要改变才能改变边框的颜色;将绿色处#号后的值改变就改变了边框内背景的颜色。
<BR>
<BR>
2、双线框代码(代码见沙发楼层)
<BR>
<div STYLE="border-style:Double;border-width:8pt; border-color: #8B008B"> <div style="width:100%;height:100%;background-color:#E6E6FA;">这里插入文字</div></div>
<BR>
说 明:
<BR>
将#号后的值(绿色处)改变就可以改变边框的颜色,随便填一个6位数字,试试?
<BR>
将#号后的值(蓝色处)改变就可以改变边框内背景的颜色,随便填一个6位数字,试试?
<BR>
看下面改变后的效果:<BR>
<p><strong></strong></p><div style="BORDER-RIGHT: #0000ff 6pt double; BORDER-TOP: #0000ff 6pt double; BORDER-LEFT: #0000ff 6pt double; BORDER-BOTTOM: #0000ff 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdab9"><p><font color="#ff0033"></font></p><p /><div style="BORDER-RIGHT: #ff4500 6pt double; BORDER-TOP: #ff4500 6pt double; BORDER-LEFT: #ff4500 6pt double; BORDER-BOTTOM: #ff4500 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdab9">这里插入文字</div></div></div></div><br />
<BR>
<br /><div style="BORDER-RIGHT: #00ff00 6pt double; BORDER-TOP: #00ff00 6pt double; BORDER-LEFT: #00ff00 6pt double; BORDER-BOTTOM: #00ff00 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdead"><p><font color="#44ffff"></font></p><p /><div style="BORDER-RIGHT: #44ffff 6pt double; BORDER-TOP: #44ffff 6pt double; BORDER-LEFT: #44ffff 6pt double; BORDER-BOTTOM: #44ffff 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdead">这里插入文字</div></div></div></div>
<BR>
<br /><div style="BORDER-RIGHT: #ff0000 6pt double; BORDER-TOP: #ff0000 6pt double; BORDER-LEFT: #ff0000 6pt double; BORDER-BOTTOM: #ff0000 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffffe0"><p><font color="#ff0033"></font></p><p /><div style="BORDER-RIGHT: #ff4500 6pt double; BORDER-TOP: #ff4500 6pt double; BORDER-LEFT: #ff4500 6pt double; BORDER-BOTTOM: #ff4500 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffffe0">这里插入文字</div></div></div></div>
<BR>
<br /><div style="BORDER-RIGHT: #f08080 6pt double; BORDER-TOP: #f08080 6pt double; BORDER-LEFT: #f08080 6pt double; BORDER-BOTTOM: #f08080 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdead"><p><font color="#ff0000"></font></p><p /><div style="BORDER-RIGHT: #f08080 6pt double; BORDER-TOP: #f08080 6pt double; BORDER-LEFT: #f08080 6pt double; BORDER-BOTTOM: #f08080 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdead">这里插入文字</div></div></div></div>
<BR>
<br /><div style="BORDER-RIGHT: #f08080 6pt double; BORDER-TOP: #f08080 6pt double; BORDER-LEFT: #f08080 6pt double; BORDER-BOTTOM: #f08080 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffffe0"><p><font color="#ff0000"></font></p><p /><div style="BORDER-RIGHT: #f08080 6pt double; BORDER-TOP: #f08080 6pt double; BORDER-LEFT: #f08080 6pt double; BORDER-BOTTOM: #f08080 6pt double"><div style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffffe0">这里插入文字</div></div></div></div>
<BR>
<BR>
3、立体效果的彩色边框代码(代码见沙发楼层)
<BR>
立体效果的彩色边框是在border-style后面使用不同的语法描述:
<BR>
Solid 简单线形边框 Double 简单双线边框 Groove 沟线立体效果边框 Ridge 脊线立体效果边框 Inset 嵌入线立体效果边框 Outset 浮出线立体效果边框。
<BR>
通过定制边框的方法再将上一教程添加色彩的语法嵌套其中,你就可以创造出具有立体效果的彩色日志背景。如:<BR>
<div STYLE="border-style:outset;border-width:2pt; border-color: red"> <div style="width:100%;height:100%;background-color:#ffdead;">这里插入文字 </div></div>
<BR>
<div STYLE="border-style:outset;border-width:3pt; border-color: red"> <div style="width:100%;height:100%;background-color:#ffdab9;">这里插入文字 </div></div>
<BR>
对于背景边框的四个边你也可以按自己的需要进行调整,以左边框为例,你可以使用下述语法:
<BR>
Border-left-style:solid (double, groove, ridge, inset, outset)定制边框样式 Border-left-color: #xxxxxx定制边框颜色 Border-left-width: xpt 定制边框粗细
<BR>
其他三个边框只要分别使用Right, Top, Bottom就可以了。将下面的语法放到你的日志中预览一下,看一看是什么效果:(效果这里就不给出来了,有兴趣的可以回去试一下。)<BR>
<div style= "border-top-style:outset;border-right-style:outset;border-left-style:outset; border-bottom-style:outset;background-color:#c6d9f0">
<BR>
你可以按照自己的想法随意调整四个边框的式样,以便创造与众不同的效果,记住一点,不同的属性描述之间用 ; 隔开。另外,你可能会注意到,当你设置完边框返回到日志文本编辑模式,在键入文字过程中如果使用回车键,就会又出现一个边框,从而影响文字的连贯性,这是因为HTML语法中不支持硬回车。要解决这个问题,必须返回到HTML编辑模式,在需要回车的地方键入,需要几次回车就键入几个,然后再返回到文本编辑模式,你就会发现边框背景内已经为你加入了回车后的效果。(注:将br的[ ]改为< >使用。)
</div></div></div></div>
<BR>
<BR>
4、立体线框代码(代码见沙发楼层)
<BR>
<div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge; border-bottom-style:Ridge;border-width:7pt; background-color:#8B008B"><div style="width:100%;height:100%;background-color:#E6E6FA;">效果如框内所示,是带背景色(熏衣草色)的浮出立体线框,代码中的#E6E6FA是背景的颜色(熏衣草色)
</div></div>
<BR>
<DIV style="BORDER-RIGHT: 5pt ridge; BORDER-TOP: 5pt ridge; BORDER-LEFT: 5pt ridge; BORDER-BOTTOM: 5pt ridge; BACKGROUND-COLOR: #a0522d"> <DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffc0cb">背景为粉红色,效果如框内所示。
</DIV></DIV>
<BR>
<DIV style="BORDER-RIGHT: 5pt ridge; BORDER-TOP: 5pt ridge; BORDER-LEFT: 5pt ridge; BORDER-BOTTOM: 5pt ridge; BACKGROUND-COLOR: #a0522d"> <DIV style="WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #ffdab9">背景为桃色,效果如框内所示。
</DIV></DIV>
<BR>
1、单线边框代码<div style="BORDER-RIGHT: red 5pt solid; BORDER-TOP: red 5pt solid; BORDER-LEFT: red 5pt solid; BORDER-BOTTOM: red 5pt solid"><font color="#ff0000">这里插入文字</font> </div>
2、双线边框代码<div STYLE="border-style:Double;border-width:8pt; border-color: #8B008B"> <div style="width:100%;height:100%;background-color:#E6E6FA;">这里插入文字</div></div>
3、立体效果的彩色边框代码
<div STYLE="border-style:outset;border-width:2pt; border-color: red"> <div style="width:100%;height:100%;background-color:#ffdead;">这里插入文字 </div></div>
4、立体线框代码
<div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge; border-bottom-style:Ridge;border-width:7pt; background-color:#8B008B"><div style="width:100%;height:100%;background-color:#E6E6FA;">这里插入文字</div></div> 总算编辑完了、累撒我了,眼睛都花了,闭上眼睛全部是代码。 不知道我描述的是不是太含糊了,想学音画的可以站内我。 以上内容由≮蔷薇几度花≯友情提供! 感谢大家对音画版的支持。 <EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://www.zqzone.cn/show/mp3/swf/zQzone_cn8.swf?mp3=http://zhangmenshiting.baidu.com/data/music/667640/I%20Cry.mp3?xcode=031602f7672469b3d21c0ed7334abdcd&autoStart=yes&repeatPlay=yes&song= 蔷薇几度花&.swf width=210 height=110 type=application/x-shockwave-flash wmode=\"transparent\" quality=\"high\"></EMBED> 楼主辛苦了 喔是来学习的 小薇薇真敬业是个负责的好斑竹是个可爱的好姑娘
回 6楼(泉水叮咚) 的帖子
谢谢泉水,我感动,我开心。Mua,~回 7楼(蔷薇几度花) 的帖子
MUA? 我是蕾丝边 不好乱亲Re:回 6楼(泉水叮咚) 的帖子
薇薇被偶吓坏咯回 9楼(泉水叮咚) 的帖子
我会对你负责滴,哈哈回 10楼(蔷薇几度花) 的帖子
被你吓得生活不能自理 认真学习~我急需要实用~~ 薇薇辛苦了Re:回 7楼(蔷薇几度花) 的帖子
引用第8楼泉水叮咚于2011-05-07 10:56发表的 回 7楼(蔷薇几度花) 的帖子 :MUA? 我是蕾丝边 不好乱亲 p_w_picpath/back.gif
<div style= \"border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge; border-bottom-style:Ridge;border-width:7pt; background-color:#8B008B\"><div style=\"width:100%;height:100%;background-color:#E6E6FA;\">如薇薇不方便的话,我们男斑竹可以吃点苦个</div></div>
回 14楼(杯水轻歌) 的帖子
哇塞,杯子会用表格啦。 蔷版去不去聚会?
页:
[1]