標題: 【旧帖修复】 单层边框
rainbow
註冊會員

帖子 4340
註冊 2013-7-1
用戶註冊天數 3962
發表於 2022-7-20 17:29 
14.199.140.108
分享  私人訊息  頂部

用背景图片制作最简单的代码边框

单 层 边 框

  这里为初学制作代码边框的网友介绍一种用背景图片制作最简单的边框,方法如下:
1)打开博文编辑器,点击编辑器左上角的“源码”按钮。
2)把代码复制并把它贴到编辑栏里,
3)用你的背景图片网址取代以下代码里的红色字。
4)用你喜好的颜色代码替换代码里的绿色字。
5)把“大标题”和“文字开始”改成自己的内容。
6)编辑完成,点“下一步”,你将看到类似现在这个边框的效果。
你觉得好看吗?自己动手试做一个吧,祝你成功!

代码:

<div align=center>
<div style="background-image:url('背景网址 ');border:4px #0000ff ridge; width:840px; padding:40px" align=center>
<table style="background-color:#ffffff; border:10px #8ec0f1 solid; width:100%">
<tr>
<td style="padding:30px">
<p align=center><font size=7 color=#003399><b>单 层 边 框</b></font></p>
<p align=left><font size=5 color=#003399><b>文字开始……。</b></font></p>
</td></tr></table>
</div></div>


  以下是用不同背景图片和颜色制作好的几款单层边框,喜欢就拿去用:


单层边框01 复制开始

单 层 边 框

文字开始……。

单层边框01 复制结束



单层边框02 复制开始

单 层 边 框

文字开始……。

单层边框02 复制结束



单层边框03 复制开始

单 层 边 框

文字开始……。

单层边框03 复制结束



单层边框04 复制开始

单 层 边 框

文字开始……。

单层边框04 复制结束



单层边框05 复制开始

单 层 边 框

文字开始……。

单层边框05 复制结束



单层边框06 复制开始

单 层 边 框

文字开始……。

单层边框06 复制结束



单层边框07 复制开始

单 层 边 框

文字开始……。

单层边框07 复制结束



单层边框08 复制开始

单 层 边 框

文字开始……。

单层边框08 复制结束



[ 本帖最後由 rainbow 於 2022-7-20 17:31 編輯 ]