设为首页收藏本站
切换到宽版

 找回密码
 会员注册

微信扫码登录

手机号码，快捷登录

手机号码，快捷登录

靖江论坛（靖阅网）»靖江论坛 › 保留分区 › 诗情画意 › 【美化音画】- HTML简单边框制作
返回列表 发新帖
查看: 6515|回复: 16

【美化音画】- HTML简单边框制作

[复制链接]
蔷薇几度花
发表于 2011-5-5 11:17 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？会员注册

×
      　HTML简单边框制作
<BR>
单线、双线边框代码

<BR>

● 蔷薇几度花  收集编写

<BR>
１、单线边框代码（代码见沙发楼层）

<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>
２、双线框代码（代码见沙发楼层）

<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>
３、立体效果的彩色边框代码（代码见沙发楼层）

<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]，需要几次回车就键入几个[br]，然后再返回到文本编辑模式，你就会发现边框背景内已经为你加入了回车后的效果。（注：将br的[ ]改为< >使用。）
</div></div></div></div>
<BR>
<BR>
４、立体线框代码（代码见沙发楼层）

<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>







































　

评分

参与人数 3威望 +120 收起 理由
老潘打鸟 + 50 辛苦了啊&nbsp;&nbsp; 回头请吃饭吧
小亚 + 50 蔷版辛苦了
杯水轻歌 + 20 不错

查看全部评分

公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复

使用道具 举报

蔷薇几度花
 楼主| 发表于 2011-5-5 12:08 | 显示全部楼层
　

１、单线边框代码
  1. &lt;div style=&quot;BORDER-RIGHT: red 5pt solid; BORDER-TOP: red 5pt solid; BORDER-LEFT: red 5pt solid; BORDER-BOTTOM: red 5pt solid&quot;&gt;&lt;font color=&quot;#ff0000&quot;&gt;这里插入文字&lt;/font&gt; &lt;/div&gt;
复制代码

　
２、双线边框代码
  1. &lt;div STYLE=&quot;border-style:Double;border-width:8pt; border-color: #8B008B&quot;&gt; &lt;div style=&quot;width:100%;height:100%;background-color:#E6E6FA;&quot;&gt;这里插入文字&lt;/div&gt;&lt;/div&gt;
复制代码


３、立体效果的彩色边框代码
  1. &lt;div STYLE=&quot;border-style:outset;border-width:2pt; border-color: red&quot;&gt; &lt;div style=&quot;width:100%;height:100%;background-color:#ffdead;&quot;&gt;这里插入文字 &lt;/div&gt;&lt;/div&gt;
复制代码


４、立体线框代码
  1. &lt;div style= &quot;border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge; border-bottom-style:Ridge;border-width:7pt; background-color:#8B008B&quot;&gt;&lt;div style=&quot;width:100%;height:100%;background-color:#E6E6FA;&quot;&gt;这里插入文字&lt;/div&gt;&lt;/div&gt;
复制代码
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

蔷薇几度花
 楼主| 发表于 2011-5-5 12:54 | 显示全部楼层
　
　
11040511224e63e7ab59cc00aa.gif
　
1104201904dce387bfa2465b55.gif 总算编辑完了、累撒我了，眼睛都花了，闭上眼睛全部是代码。
　
不知道我描述的是不是太含糊了，想学音画的可以站内我。
　
以上内容由≮蔷薇几度花≯友情提供！
　
感谢大家对音画版的支持。
　
20096684226655.gif
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

蔷薇几度花
 楼主| 发表于 2011-5-5 13:31 | 显示全部楼层
<EMBED pluginspage=http://www&#46;macromedia&#46;com/go/getflashplayer src=http://www&#46;zqzone&#46;cn/show/mp3/swf/zQzone_cn8&#46;swf?mp3=http://zhangmenshiting&#46;baidu&#46;com/data/music/667640/I%20Cry&#46;mp3?xcode=031602f7672469b3d21c0ed7334abdcd&autoStart=yes&repeatPlay=yes&song= 蔷薇几度花&&#46;swf width=210 height=110 type=application/x-shockwave-flash wmode=\"transparent\" quality=\"high\"></EMBED>
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

_rocketman
发表于 2011-5-5 15:30 | 显示全部楼层
[s:93] 楼主辛苦了
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

疯神帮
发表于 2011-5-5 17:52 | 显示全部楼层
喔是来学习的 [s:66]
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

泉水叮咚
发表于 2011-5-6 07:56 | 显示全部楼层
小薇薇真敬业  是个负责的好斑竹  是个可爱的好姑娘  [s:38] [s:38] [s:38]
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

蔷薇几度花
 楼主| 发表于 2011-5-6 08:56 | 显示全部楼层

回 6楼(泉水叮咚) 的帖子

[s:47]  谢谢泉水，我感动，我开心。Mua，~
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

泉水叮咚
发表于 2011-5-7 10:56 | 显示全部楼层

回 7楼(蔷薇几度花) 的帖子

MUA  ？ 我是蕾丝边   不好乱亲     [s:66]
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

泉水叮咚
发表于 2011-5-8 11:50 | 显示全部楼层

Re:回 6楼(泉水叮咚) 的帖子

薇薇被偶吓坏咯    [s:66]
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

蔷薇几度花
 楼主| 发表于 2011-5-9 08:22 | 显示全部楼层

回 9楼(泉水叮咚) 的帖子

[s:93] 我会对你负责滴，哈哈
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

泉水叮咚
发表于 2011-5-9 10:53 | 显示全部楼层

回 10楼(蔷薇几度花) 的帖子

被你吓得生活不能自理   [s:63]
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

ssw8090
发表于 2011-5-9 11:57 | 显示全部楼层
认真学习~我急需要实用~~
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

杯水轻歌
发表于 2011-5-12 14:05 | 显示全部楼层
薇薇辛苦了
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

杯水轻歌
发表于 2011-5-12 14:07 | 显示全部楼层

Re:回 7楼(蔷薇几度花) 的帖子

引用第8楼泉水叮咚于2011-05-07 10:56发表的 回 7楼(蔷薇几度花) 的帖子 :
MUA  ？ 我是蕾丝边   不好乱亲     [s:66]  

                               
登录/注册后可看大图

<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>
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

蔷薇几度花
 楼主| 发表于 2011-5-12 14:58 | 显示全部楼层

回 14楼(杯水轻歌) 的帖子

哇塞，杯子会用表格啦。 [s:93]
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

老潘打鸟
发表于 2011-6-17 15:40 | 显示全部楼层
[s:70] [s:70] [s:70]      蔷版去不去聚会？
公众号：靖阅网、新靖江论坛（www.jjsbbs.com)
回复 点赞 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

靖江论坛（靖阅网）业务咨询：18952637888|热线电话：0523-84837888|手机客户端|手机版|小黑屋|靖江论坛（靖阅网） ( 苏ICP备18055248号-5 )

GMT+8, 2025-6-13 21:01 , Processed in 0.191937 second(s), 47 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表