注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

欣欣然张开了眼

行进中...

 
 
 

日志

 
 

引用 精美边框及代码(装饰之四)  

2007-09-22 15:39:31|  分类: 博客装扮 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用

柳下荫精美边框及代码(装饰之四)

一.日志背景-情人节系列

文字

1.代码:

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/ZODn7MCmcQdYefFrb1H77w==/1424544857133167748.jpg"><tr><td><div align="center"><table border="0" width="400" cellspacing="0" cellpadding="0"><tr><td><p align="left"><font style=" font-size: 11pt" color="#333333">文字</font></td></tr></table></div></td></tr></table></div>

文字

2.代码:

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/5s8qKfqBjK07L2R81u668Q==/1424544857133167751.jpg"><tr><td><div align="center"><table border="0" width="450" cellspacing="0" cellpadding="0"><tr><td><p align="left"><font style="font-size: 11pt" color="#333333">文字</font></td></tr></table></div></td></tr></table></div>

文字

3.代码:

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/OuFm52Gs8aY1vf28lsesyQ==/1424544857133167759.jpg"><tr><td><div align="center">

<table border="0" width="450" cellspacing="0" cellpadding="0"><tr><td><p align="left">文字</td></tr></table></div></td></tr></table></div>

文字

  4.代码:

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/hD1S2VumHq-MpFGKUdPxjA==/1424544857133167760.jpg"><tr><td><div align="center"><table border="0" width="450" cellspacing="0" cellpadding="0"><tr><td><p align="left">文字</td></tr></table></div></td></tr></table></div>

文字

 

5.代码:

 

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/VT3fb_0n4N54oTQMQUUe7A==/1424544857133167761.jpg"><tr><td><div align="center"><table border="0" width="450" cellspacing="0" cellpadding="0"><tr><td><p align="left">文字</td></tr></table></div></td></tr></table></div>

 

文字

 

6.代码:

 

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/eRmD4eRH-YetcO20FddJIQ==/1424544857133167762.jpg"><tr><td><div align="center"><table border="0" width="450" cellspacing="0" cellpadding="0"><tr><td><p align="left">文字</td></tr></table></div></td></tr></table></div>

文字

 

7.代码:

 

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/3DoVy9RERH1-B_sp14dkug==/2859504288404051769.jpg"><tr><td><div align="center"><table border="0" width="450" cellspacing="0" cellpadding="0"><tr><td><p align="left">文字</td></tr></table></div></td></tr></table></div>

文字

 8.代码:

 

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/UOncvDSd1OK2CE3ROhABmg==/3726165741695776707.jpg"><tr><td><div align="center"><table border="0" width="430" cellspacing="0" cellpadding="0"><tr><td><p align="left">文字</td></tr></table></div></td></tr></table></div>

 

文字

  9.代码:

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/otinZ-LmZxvF1hCDPpqrWQ==/2859504288404051774.jpg"><tr><td><div align="center"><table border="0" width="480" cellspacing="0" cellpadding="0"><tr><td><p align="left">文字</td></tr></table></div></td></tr></table></div>

文字

 10.代码:

 

<div align="center"><table border="0" width="700" cellspacing="0" cellpadding="0" background="http://img.blog.163.com/photo/fuFzkmEi92JdoIKRSC7ABA==/2870200337518671441.jpg"><tr><td><div align="center"><table border="0" width="480" cellspacing="0" cellpadding="0"><tr><td><p align="left">文字</td></tr></table></div></td></tr></table></div>

 

 

加入文字1

 

 

 

内容1 

 

 

内容2 




 

内容3 

 

 内容4

 

内容5 

 
内容6
 

 引用 精美边框及代码(装饰之四) - 悠然如我 - 欣欣然张开了眼

 






 

 

 

内容7 

 

 

               

 

 

 

内容8 



 内容9

 

 

 

 

 

 内容10

 

 

 

内容11 

 

 

 

 内容12

 


 

 内容13

 

内容14 


 

题  目

 

内容

写入正文内容 

 

  

 

内容16 

 

 

内容17 

 

 

 

 

 内容18

 

 

 内容19

 

 

 

 内容20

 

 

 

 

 内容21

 

 

 内容22

 

 

 

 内容23

 

 

 

 

 

 

 内容24


内容25

内容

 

 

 内容26

 

 

 内容27

 

 内容28

   


内容29

内容30代码

</table></fieldset></div></td></tr></tbody></table></div></td></tr></tbody></table></p>
<p>
<table align="center" background="http://bbs.nxnews.net/forum/UploadFile/2004-9/200492885633367.jpg" border="17" bordercolor="#4a934a" cellpadding="3" cellspacing="2" width="593">
<tbody>
<tr>
<td>

 

 

给日志加边框--彩色代码

1★彩色边框代码★: <div style="border: 5pt solid red;">日志文字1</div>

日志文字1

它会在你的文字外围生成一个红色边框,效果如框内显示。 border-style则控制边框的效果 border-width控制边框的粗细, border-color调整边框的颜色, 这里你仍然可以使用如#xxxxxx的颜色数值,而当使用“solid”则为单一颜色的线形简单边框。

<div style="border: 4px solid rgb(255, 69, 0); background-color: rgb(255, 222, 173);">实线2</div>
实线2
2★双线框代码★: <div style="border: 8pt double rgb(139, 0, 139);">
<div style="width: 100%; height: 100%; background-color: rgb(230, 230, 250);">文字3</div></div>
文字3
效果如框内,是带背景色(熏衣草色)的简单双线框。
<div style="border: 6pt double rgb(255, 69, 0);">
<div style="width: 100%; height: 100%; background-color: rgb(255, 218, 185);">文字4</div></div>
文字4
显示的效果是背景色为桃色的简单双线框。效果如框内所示,边框的颜色是橙红色#ff4500,框内背景色为桃色#ffdab9。
<div style="border: 6pt double rgb(255, 69, 0);">
<div style="width: 100%; height: 100%; background-color: rgb(255, 222, 173);">文字5</div></div>
文字5
显示的效果是背景色为NAVAJO白的简单双线框。效果如框内所示,边框的颜色是橙红色#ff4500,框内背景色为桃色#ffdead。
<div style="border: 6pt double rgb(255, 69, 0);">
<div style="width: 100%; height: 100%; background-color: rgb(255, 255, 224);">文字6</div></div>
文字6
背景颜色为淡黄色#FFFFE0,效果如框内所示。
<div style="border: 6pt double rgb(240, 128, 128);">
<div style="width: 100%; height: 100%; background-color: rgb(255, 222, 173);">文字7</div></div>
文字7
这种双线框的效果有若隐若现的感觉,框的颜色是淡珊瑚色#f08080,框内背景的颜色是NAVAJO白#FFdead。效果如框内所示。
<div style="border: 6pt double rgb(240, 128, 128);">
<div style="width: 100%; height: 100%; background-color: rgb(255, 255, 224);">文字8</div></div>
文字8
这种双线框的效果有若隐若现的感觉,框的颜色是淡珊瑚色#f08080,框内背景的颜色是淡黄色#FFFFE0。效果如框内所示。 ★立体线框代码★
<div style="border: 7pt ridge ; background-color: rgb(139, 0, 139);">
<div style="width: 100%; height: 100%; background-color: rgb(230, 230, 250);">文字9</div></div>
文字9
效果如框内所示,是带背景色(熏衣草色)的浮出立体线框,代码中的#E6E6FA是背景的颜色(熏衣草色)
<div style="border: 5pt ridge ; background-color: rgb(160, 82, 45);">
<div style="width: 100%; height: 100%; background-color: rgb(255, 192, 203);">文字10</div></div>
文字10
背景为粉红色,效果如框内所示。
<div style="border: 5pt ridge ; background-color: rgb(160, 82, 45);">
<div style="width: 100%; height: 100%; background-color: rgb(255, 218, 185);">文字11</div></div>
文字11
背景为桃色,效果如框内所示。 立体效果的彩色边框是在border-style后面使用不同的语法描述: Solid 简单线形边框 Double 简单双线边框 Groove 沟线立体效果边框 Ridge 脊线立体效果边框 Inset 嵌入线立体效果边框 Outset 浮出线立体效果边框。通过定制边框的方法再将上一教程添加色彩的语法嵌套其中,你就可以创造出具有立体效果的彩色日志背景。如:
<div style="border: 2pt outset red;">
<div style="width: 100%; height: 100%; background-color: rgb(255, 222, 173);">日志文字12</div></div>
日志文字12
使用上述语法将会为你呈现一个NAVAJO白底色红边框的浮出线效果背景,效果如框内显示。
<div style="border: 3pt outset red;">
<div style="width: 100%; height: 100%; background-color: rgb(255, 218, 185);">日志文字13 </div></div>
日志文字13
显示的效果是背景色为桃色的立体线框。效果如框内所示,框内背景色为桃色#ffdab9。 对于背景边框的四个边你也可以按自己的需要进行调整,以左边框为例,你可以使用下述语法: Border-left-style:solid (double, groove, ridge, inset, outset)定制边框样式 Border-left-color: #xxxxxx定制边框颜色 Border-left-width: xpt 定制边框粗细 其他三个边框只要分别使用Right, Top, Bottom就可以了。将下面的语法放到你的日志中预览一下,看一看是什么效果:(效果这里就不给出来了,有兴趣的可以回去试一下。)
<div style="border-style: outset; background-color: rgb(204, 51, 102);">14、
14、你可以按照自己的想法随意调整四个边框的式样,以便创造与众不同的效果,记住一点,不同的属性描述之间用 ; 隔开。另外,你可能会注意到,当你设置完边框返回到日志文本编辑模式,在键入文字过程中如果使用回车键,就会又出现一个边框,从而影响文字的连贯性,这是因为HTML语法中不支持硬回车。要解决这个问题,必须返回到HTML编辑模式,在需要回车的地方键入
,需要几次回车就键入几个
,然后再返回到文本编辑模式,你就会发现边框背景内已经为你加入了回车后的效果。
1<table bgcolor="#b766ad" border="1" cellpadding="2" cellspacing="10" width="100%">
<tbody>
<tr>
<td>
<table bgcolor="#ffffdf" border="1" cellpadding="10" cellspacing="8" width="100%">
<tbody>
<tr>
<td>内容部分15</td></tr></tbody></table></td></tr></tbody></table>
内容部分15

2<table bgcolor="#8600ff" border="1" cellpadding="2" cellspacing="10" width="100%">
<tbody>
<tr>
<td>
<table bgcolor="#ffecec" border="1" cellpadding="10" cellspacing="8" width="100%">
<tbody>
<tr>
<td>内容部分16</td></tr></tbody></table></td></tr></tbody></table>

内容部分16

3<table bgcolor="#ffa6ff" border="1" cellpadding="2" cellspacing="10" width="100%">
<tbody>
<tr>
<td>
<table bgcolor="#ceffce" border="1" cellpadding="10" cellspacing="8" width="100%">
<tbody>
<tr>
<td>内容部分17</td></tr></tbody></table></td></tr></tbody></table>

内容部分17

  评论这张
 
阅读(67)| 评论(6)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017