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

强者生存 与狼共舞

理财,合作营销。娱乐,艺术欣赏音画收藏

 
 
 

日志

 
 
关于我

用心去感受…相识是最珍贵的缘分,思念是最美丽的心情,牵挂是最真挚的心动,问候是最真挚的语言,知音是最完美的深交,知己是最贴心的默契。

网易考拉推荐

日志彩色边框  

2008-02-21 22:03:54|  分类: 博客知识 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用

无门关主人日志彩色边框

 

 1、★彩色边框代码★

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

<DIV style="BORDER-RIGHT: #ff4500 4px solid; BORDER-TOP: #ff4500 4px solid; BORDER-LEFT: #ff4500 4px solid; BORDER-BOTTOM: #ff4500 4px solid; BACKGROUND-COLOR: #ffdead">实线</DIV>

2、★双线框代码★

<div STYLE="border-style:Double;border-width:8pt; border-color: #8B008B"> <div style="width:100%;height:100%;background-color:#E6E6FA;">文字</div></div>

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

效果如框内所示,是带背景色(熏衣草色)的浮出立体线框,代码中的#E6E6FA是背景的颜色(熏衣草色)

4、★滚动文本框代码★

把代码拷贝后可直接双击文本框就可以在里面输入文字和粘贴图片,而且文本框的大小可以随意调整。

<DIV align=center style=' color: #990099; background-color:#FFFFE0; border: solid 2px black; width: 470px; height: 180px; overflow: scroll; scrollbar-face-color: #ffc0cb; scrollbar-shadow-color: #ffb6c1; scrollbar-highlight-color: #98fb98; scrollbar-3dlight-color: #ffb6c1; scrollbar-darkshadow-color: #90ee90; scrollbar-track-color: #ffdead; scrollbar-arrow-color: #f5deb3; '>日志文字</DIV>

代码实现的文本框是浅黄色的背景,粗略效果如文本框内所示。

(注释:附语法语句的解释:

//层开始标记,对中对齐 : <DIV align=center //样式如下: : style=' //前景色为#ffffff : color: #ffffff; //背景色为#000000 : background-color: #000000; //边框为2像素,黑色 : border: solid 2px black; //宽度120像素 : width: 120px; //高度200像素 : height: 200px; //超出范围时使用滚动条 : overflow: scroll; //滚动条的各个颜色如下 : scrollbar-face-color: #889B9F; : scrollbar-shadow-color: #3D5054; : scrollbar-highlight-color: #C3D6DA; : scrollbar-3dlight-color: #3D5054; : scrollbar-darkshadow-color: #85989C; : scrollbar-track-color: #95A6AA; : scrollbar-arrow-color: #FFD6DA; //在这个层中显示文字“日志文字”,层结束标志 : '>日志文字</DIV>

5、★文字竖排代码★

接下来说说文字竖排是如何实现的。

<DIV style="FONT-SIZE: 9pt; WRITING-MODE: tb-rl; TEXT-ALIGN: left"><p>日志文字</P></DIV>

这个语法中唯一的亮点就是Writing-Mode这个参数,其后的tb代表文字排列从上到下,rl代表从右到左。效果如下所示:

 

变换颜色请参看我的“文字颜色代码一览”一文。 

 


欢迎光临无门关

请您阅读,请您评论

  评论这张
 
阅读(362)| 评论(2)
推荐 转载

历史上的今天

评论

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

页脚

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