&#27178;幅背景&#22270;片的&#24212;用

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 14:58
14.199.141.150

#1

分享私人訊息

单花边横幅背景

文字或图片

代码：

不同宽度的横条背景套用在以上代码的效果：

代码：
<center>
<div style="WIDTH: 630px">
<TABLE style="background-repeat: repeat-y" borderColor=#467500 cellSpacing=2 cellPadding=1 align=center background=背景网址 width=630 border=5>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-RIGHT: #669900 4px dotted; BORDER-TOP: #669900 4px dotted; BORDER-LEFT: #669900 4px dotted; WIDTH: 520px; BORDER-BOTTOM: #669900 4px dotted; HEIGHT: 120px" cellSpacing=1 cellPadding=10 align=right>
<TBODY>
<TR>
<TD cellpadding=20>
<P align=left><FONT style="FONT-SIZE: 20px; FONT-FAMILY: 黑体" color=#009900>文字或图片</FONT></P>
<BR>
<BR>
<BR>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</div></center>

另一种代码是把横条背景图分成左右两列（用2个TD）：

横条背景的代码

<DIV style="width:背景宽度px">
<TABLE style="BORDER-RIGHT: magenta 5px double; BORDER-TOP: magenta 5px double; BORDER-LEFT: magenta 5px double; BORDER-BOTTOM: magenta 5px double; background-repeat: repeat-y" cellspaing=10 cellpadding=10 width=背景宽度 background=背景网址>
<TBODY>
<TR>
<TD width="15%"></TD>
<TD width="85%"> <TABLE cellpadding=20 width="100%" align=right border=0>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #b4b4b4 6px dotted; BORDER-TOP: #b4b4b4 6px dotted; BORDER-LEFT: #b4b4b4 6px dotted; BORDER-BOTTOM: #b4b4b4 6px dotted">
<BR>
<center>
<div style="FONT-SIZE: 40pt; FILTER: glow(color=magenta); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 标楷体"><b>横条背景的代码</b></div></center>
<BR>
<P align=left><FONT style="FONT-SIZE: 16px; FONT-FAMILY: 黑体" color=magenta>（文字编辑）</FONT></P>
<BR><BR>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></DIV>

说明：以上代码的背景宽度约等于原背景图的宽度减去cellspacing、cellpadding和border总和的两倍，在不同网站和不同的背景图网址所得出的效果都可能不同，必须经过调试才能得到完美的效果，一般宜取小不宜取大。

（注意：本主题介绍的代码里的主背景图必须要用横幅的长条背景图，绝对不能用其他四方形或竖条形的背景图！！！）

[ 本帖最後由 rainbow 於 2013-7-1 15:47 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 15:21
14.136.98.235

#2

私人訊息

以下是用單邊花橫條背景做成對稱花邊的代碼：

使背景的花紋左右對稱

歡迎你的光臨!

代碼： 說明：背景圖片的尺寸有長短，代碼中的每一個 width 須根據原圖尺寸長短不同自己調整尺寸。

[ 本帖最後由 rainbow 於 2013-7-1 15:24 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 15:28
14.136.98.235

#3

私人訊息

欢迎你到此一遊

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 15:48
58.177.134.227

#4

私人訊息

不同宽度横条背景的代码和效果：

宽度740的横条背景的代码

<DIV style="width:680px">
<TABLE style="BORDER-RIGHT: purple 5px double; BORDER-TOP: purple 5px double; BORDER-LEFT: purple 5px double; BORDER-BOTTOM: purple 5px double; background-repeat: repeat-y" cellspaing=10 cellpadding=10 width=680 background=背景网址>
<TBODY>
<TR>
<TD width="15%"></TD>
<TD width="85%"> <TABLE cellpadding=20 width="100%" align=right border=0>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #b4b4b4 6px dotted; BORDER-TOP: #b4b4b4 6px dotted; BORDER-LEFT: #b4b4b4 6px dotted; BORDER-BOTTOM: #b4b4b4 6px dotted">
<BR>
<center>
<div style="FONT-SIZE: 40pt; FILTER: glow(color=purple); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 标楷体"><b>横条背景的代码</b></div></center>
<BR>
<P align=left><FONT style="FONT-SIZE: 16px; FONT-FAMILY: 黑体" color=purple>（文字编辑）</FONT></P>
<BR><BR>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></DIV>

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 15:51
58.177.134.227

#5

私人訊息

宽屏背景图的代码

<DIV style="left:-0px; position:relative; top:0px; width:920px"> （這裏須按照各個網站的具體情况調正數字）
<TABLE style="BORDER-RIGHT: purple 5px double; BORDER-TOP: purple 5px double; BORDER-LEFT: purple 5px double; BORDER-BOTTOM: purple 5px double; background-repeat: repeat-y" cellspaing=10 cellpadding=10 width=920 background=背景网址>
<TBODY>
<TR>
<TD width="15%"></TD>
<TD width="85%"> <TABLE cellpadding=20 width="100%" align=right border=0>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #b4b4b4 6px dotted; BORDER-TOP: #b4b4b4 6px dotted; BORDER-LEFT: #b4b4b4 6px dotted; BORDER-BOTTOM: #b4b4b4 6px dotted">
<BR>
<center>
<div style="FONT-SIZE: 40pt; FILTER: glow(color=purple); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 标楷体"><b>横条背景的代码</b></div></center>
<BR>
<P align=left><FONT style="FONT-SIZE: 16px; FONT-FAMILY: 黑体" color=purple>（文字编辑）</FONT></P>
<BR><BR>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></DIV>
<br><br><br><br><br><br><br><br><br>

[ 本帖最後由 rainbow 於 2013-7-1 15:58 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 16:00
58.177.134.227

#6

私人訊息

宽屏背景图的代码

<DIV style="left:-0px; position:relative; top:0px; width:920px">
<TABLE style="BORDER-RIGHT: purple 5px double; BORDER-TOP: purple 5px double; BORDER-LEFT: purple 5px double; BORDER-BOTTOM: purple 5px double; background-repeat: repeat-y" cellspaing=10 cellpadding=10 width=920 background=背景网址>
<TBODY>
<TR>
<TD width="15%"></TD>
<TD width="85%"> <TABLE cellpadding=20 width="100%" align=right border=0>
<TBODY>
<TR>
<TD>
<BR>
<center>
<div style="FONT-SIZE: 40pt; FILTER: glow(color=purple); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 标楷体"><b>横条背景的代码</b></div></center>
<BR>
<P align=left><FONT style="FONT-SIZE: 16px; FONT-FAMILY: 黑体" color=purple>（文字编辑）</FONT></P>
<BR><BR>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></DIV>
<br><br><br><br><br><br><br><br><br>

以下边框的背景图本身是对称花边的横条背景

原图为对称花边的横条背景

代码:

<center>
<div style="width:770px" align="center">
<table border="0" cellpadding="10" cellspacing="20" width="770" background="背景网址"> <tr>
<td><br><br>
<blockquote><blockquote>
<p align=center><FONT size=7 color=#660099><b>大标题</b></font></p><br>
<p align=left><FONT size=4 color=#660099><b>文字从这里开始……。</b></FONT></p>
<br>
</blockquote></blockquote>
</td></tr></table></div></center>

另一种代码的效果：

原图为对称花边的横条背景

代码：

<center>
<div style="width:770px" align="center">
<table border="0" cellpadding="10" cellspacing="20" width="770" background="背景图网址"> <tr>
<td>
<center>
<table style="width:520px" align="center">
<tr>
<td>
<p align=center><FONT size=7 color=#660099><b>大标题</b></font></p><br>
<p align=left><FONT size=4 color=#660099><b>文字从这里开始……。</b></FONT></p>
<br>
</td></tr></table></center>
</td></tr></table></div></center>

以下代码在边框外加上点状周边，宽度须相应调整：

原图为对称花边的横条背景

代码：

<center>
<div style="width:790px" align="center">
<table style="BORDER-RIGHT: #660099 6px dotted; BORDER-TOP: #660099 6px dotted; BORDER-LEFT: #660099 6px dotted; BORDER-BOTTOM: #660099 6px dotted" cellpadding="10" cellspacing="20" width="770" background="背景图网址"> <tr>
<td>
<center>
<table style="width:520px" align="center">
<tr>
<td>
<p align=center><FONT size=7 color=#660099><b>大标题</b></font></p><br>
<p align=left><FONT size=4 color=#660099><b>文字从这里开始……。</b></FONT></p>
<br>
</td></tr></table></center>
</td></tr></table></div></center>

[ 本帖最後由 rainbow 於 2013-7-1 16:40 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 16:03
58.177.134.227

#7

私人訊息

原图为单边花做成对称花边框

此边框的背景图是用楼上的宽度为1024px的单边花横条背景。

代码：

<div style="LEFT:-40px; position: relative; TOP:0px; width:1000px">
<TABLE border=0 cellSpacing=0 cellPadding=0 width=1000 background=1024宽背景图网址> <TBODY>
<TR>
<TD width=180></TD>
<TD width=640><br><br>
<P align=center><FONT color=purple size=6><b>大标题</b></FONT></P>
<P align=left><FONT color=purple size=5> 文字编辑开始……。</FONT></P>
</TD>
<TD style="FILTER: flipH" background=1024宽背景图网址 width=180></TD></TR></TBODY></TABLE></div>
<br><br><br><br><br><br><br><br><br><br>

说明：
以上代码整个 Table 的总宽度为1000px，用3个TD分隔为三列：两边花边和中间文字部分。
第一个和第三个TD 的宽度各为180应根据花边的宽度调整大小。
中间TD 的宽度640 是文字内容的宽度，其大小由花边的宽度决定，算法：中间TD 的宽度=Table 的总宽度1000减去第一个和第三个TD 的宽度2x180

[ 本帖最後由 rainbow 於 2013-7-1 16:04 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 16:08
58.177.134.215

#8

私人訊息

原图为单边花做成对称花边框

此边框的背景图是用楼上的宽度为1024px的单边花横条背景，周边加上5px的点状边，因此各个width的数值都相应作了调整。

代码：

<div style="LEFT:-40px; position: relative; TOP:0px; width:1000px">
<TABLE style="BORDER-RIGHT: purple 5px dotted; BORDER-TOP: purple 5px dotted; BORDER-LEFT: purple 5px dotted; BORDER-BOTTOM: purple 5px dotted; background-repeat: repeat-y" cellSpacing=0 cellPadding=0 width=980 background=1024宽背景图网址> <TBODY>
<TR>
<TD width=180></TD>
<TD width=620><br><br>
<P align=center><FONT color=purple size=6><b>大标题</b></FONT></P>
<P align=left><FONT color=purple size=5> 文字编辑开始……。</FONT></P>
</TD>
<TD style="FILTER: flipH" background=1024宽背景图网址 width=180></TD></TR></TBODY></TABLE></div>
<br><br><br><br><br><br><br><br><br><br>

00 复制从这里开始

大标题

文字编辑开始……。

00 复制到这里结束

01 复制从这里开始

大标题

文字编辑开始……。

01 复制到这里结束

02 复制从这里开始

大标题

文字编辑开始……。

02 复制到这里结束

03 复制从这里开始

大标题

文字编辑开始……。

03 复制到这里结束

04 复制从这里开始

大标题

文字编辑开始……。

04 复制到这里结束

05 复制从这里开始

大标题

文字编辑开始……。

05 复制到这里结束

06 复制从这里开始

大标题

文字编辑开始……。

06 复制到这里结束

[ 本帖最後由 rainbow 於 2013-7-1 16:13 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 16:18
58.177.134.215

#9

私人訊息

黑底横条背景图制作的边框

（因原背景图宽度各不同，所以使用边框时必须注意可插图片宽度的限制，否则会把边框撑坏。）

黑底横条01 复制开始

大标题

文字编辑开始……。
（最大图片宽度460px）

欢迎使用

黑底横条01 复制结束

黑底横条02 复制开始

大标题

文字编辑开始……。
（最大图片宽度520px）

黑底横条02 复制结束

黑底横条03 复制开始

大标题

文字编辑开始……。
（最大图片宽度520px）

黑底横条03 复制结束

黑底横条04 复制开始

大标题

文字编辑开始……。
（最大图片宽度680px）

黑底横条04 复制结束

黑底横条05 复制开始

大标题

文字编辑开始……。
（最大图片宽度550px）

黑底横条05 复制结束

黑底横条06 复制开始

大标题

文字编辑开始……。
（最大图片宽度670px）

黑底横条06 复制结束

黑底横条07 复制开始

大标题

文字编辑开始……。
（最大图片宽度670px）

黑底横条07 复制结束

黑底横条08 复制开始

大标题

文字编辑开始……。
（最大图片宽度580px）

黑底横条08 复制结束

黑底横条09 复制开始

大标题

文字编辑开始……。
（最大图片宽度660px）

黑底横条09 复制结束

黑底横条10 复制开始

大标题

文字编辑开始……。
（最大图片宽度660px）

黑底横条10 复制结束

黑底横条11 复制开始

大标题

文字编辑开始……。
（最大图片宽度660px）

黑底横条11 复制结束

[ 本帖最後由 rainbow 於 2013-7-1 16:19 編輯 ]

rainbow

註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3955

發表於 2013-7-2 16:20
58.177.134.215

#10

私人訊息

=== 1 ===

对称边框

以下5款边框均由单边花边横条背景制成对称花边。

取得代码的方法：从边框上面的数字开始按住鼠标左键开始涂抹，一直涂抹到这个边框下面的数字，放开左键，然后把鼠标移动到刷蓝的画面上，右击“复制”。贴到本论坛“所见即所得”状态下的编辑器，删除多余的文字，接着在本论坛编辑器左下的“启用Html 代码”和“禁用 Smilies”旁小格子里剔勾，修改完毕即可发出。若点击编辑栏左上的“Discuz！代码模式”编辑栏上的画面就变成代码，更便于习惯使用代码编辑的网友进行修改编辑。

=== 1 ===

=== 2 ===

对称边框

文字编辑从这里开始

=== 2 ===

=== 3 ===

对称边框

文字编辑从这里开始

=== 3 ===

=== 4 ===

对称边框

文字编辑从这里开始

=== 4 ===

=== 5 ===

对称边框

文字编辑从这里开始

=== 5 ===

[ 本帖最後由 rainbow 於 2013-7-1 16:32 編輯 ]

kwok53

註冊會員

帖子 120
註冊 2013-7-18
用戶註冊天數 3938

發表於 2013-8-17 01:09
112.118.224.195

#11

私人訊息

苦瓜之戀

雖然生下來又苦又醜

但我卻緬戀那一片植育我的土地

既沒有恚怨也沒有悻恨

楫洋泛海也不道出苦憂

於是，我將根莖仍留在舊壤裡

（抄自韓江水語鄞北荻著。香港文學報社）