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

江南浪子的博客

“清茶几许、人生百味……”

 
 
 

日志

 
 
关于我

本站文章除注明【原创】外,均来源于网络。文摘辑翠,配图编辑,增加可读性。阳春白雪、下里巴人,雅俗共赏,欢迎朋友们分享。每天都有新精彩,每天都有新期待! 联系方式:13065197070(weixin号同)

网易考拉推荐

博客文章色彩背景代码  

2013-08-13 12:45:01|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

为了使自己的文章更有个性,可以把下面的代码复制粘贴到文章的显示源代码区,

在自定义文字里面输入你想写的文字即可:

 

<table width=500 
style="filter: alpha(opacity=100,finishopacity=10,style=1);">
<tr><td align=center bgcolor=
颜色>
 <PRE>
在这里输入你的文字</PRE> </td></tr></table>

 

bgcolor=skyblue(天蓝色)

bgcolor=red(红色)

bgcolor=purple(紫色)

bgcolor=green(绿色)

bgcolor=yellow(黄色)

bgcolor=gold(金色) 

alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity,
style,startX,startY,finishX,finishY).
opacity代表透明度数,选值0-100,0是完全透明,100是不透明.
finishopacity用来设置结束时的透明度,以达到渐变效果.取值范围也是0-100.style指渐变类
型,0是无变化,1是线行渐变,2是放射渐变,3是X型渐变.

《解析HTML边框

 

 一、虚线边框

 先来看一下代码:

 <TABLE style="BORDER-RIGHT: #ff0000 3px dashed; BORDER-TOP: #ff0000 3px dashed; BORDER-LEFT: #ff0000 3px dashed; WIDTH: 691px; BORDER-BOTTOM: #ff0000 3px dashed; HEIGHT: 50px" cellSpacing=5 cellPadding=0 align=center bgColor=#ff0000>

 <TBODY>

 <TR>

 <TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

 边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

 可能的参数值 

描述

none

定义无边框

dotted

点状边框

dashed

虚线边框

solid

实线边框

double

双线边框,双线的宽度等于border-width的值。

groove

凹槽边框

其效果取决于border-color的值

ridge

垄状边框

inset

Inset边框

outset

Outset边框

inherit

规定从父元素继承边框样式

 

BORDER-RIGHT表示右边框,BORDER-TOP表示顶边框,BORDER-LEFT表示左边框,BORDER-BOTTOM表示底边框。

二、点线边框

从可能的值中我们可以看到dashed是虚线边框,我们将上面的dashed改为dotted看点状边框的效果。

代码:

<TABLE style="BORDER-RIGHT: #ff0000 3px dotted; BORDER-TOP: #ff0000 3px dotted; BORDER-LEFT: #ff0000 3px dotted; WIDTH: 691px; BORDER-BOTTOM: #ff0000 3px dotted; HEIGHT: 50px" cellSpacing=5 cellPadding=0 align=center bgColor=#ff0000>

<TBODY>

<TR>

<TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

 三、

3D垄状边框

代码:

<TABLE style="BORDER-RIGHT: #ff0000 10px ridge; BORDER-TOP: #ff0000 10px ridge; BORDER-LEFT: #ff0000 10px ridge; WIDTH: 691px; BORDER-BOTTOM: #ff0000 10px ridge; HEIGHT: 50px" cellSpacing=5 cellPadding=0 align=center bgColor=#ff0000>

<TBODY>

<TR>

<TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

 四、

3D凹槽边框

代码:

<TABLE style="BORDER-RIGHT: #ff0000 10px groove; BORDER-TOP: #ff0000 10px groove; BORDER-LEFT: #ff0000 10px groove; WIDTH: 691px; BORDER-BOTTOM: #ff0000 10px groove; HEIGHT: 50px" cellSpacing=5 cellPadding=0 align=center bgColor=#ff00ee>

<TBODY>

<TR>

<TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

 其他值我没有试,总之改变边框的属性值即可以改变边框的样式。

五、去掉内边框时的虚线边框

代码:

<TABLE style="BORDER-RIGHT: #ff0000 3px dashed; BORDER-TOP: #ff0000 3px dashed; BORDER-LEFT: #ff0000 3px dashed; WIDTH: 691px; BORDER-BOTTOM: #ff0000 3px dashed; HEIGHT: 50px" >

<TBODY>

<TR>

<TD vAlign=center align=middle width=60 bgColor=#0000ee height=30></TD></TR> </TBODY> </TABLE>

边框效果如下图:

博客文章色彩背景代码 - 江南浪子 - 江南浪子的博客

 代码输入可以在发博文时选中编辑窗口下面的“显示源代码”,然后输入代码,再取消“显示源代码”即可正常显示。

我们可以举一反三的修改一下颜色、高度、宽度等试一试,很好玩的。

六、关于插入文字的说明:我们看上面代码的红色部分,在“显示源代码”的编辑状态下在“ <TD vAlign=center align=middle width=60 bgColor=#0000ee height=30>”后面输入<p>然后输入文字,打入</p>结束本行文字,然后</TD>这时文字就加入了,或在正常编辑状态直接输入文字即可。要让文字居中请在<p>标签中输入 align=center 即是<p align=center >,看一下全部代码:

<TABLE style="BORDER-RIGHT: #ff0000 3px dashed; BORDER-TOP: #ff0000 3px dashed; BORDER-LEFT: #ff0000 3px dashed; WIDTH: 691px; BORDER-BOTTOM: #ff0000 3px dashed; HEIGHT: 50px" >

<TBODY>

<TR>

<TD vAlign=center align=middle width=690 bgColor=#0000ee height=30><p align=center >这里是文字</p></TD>

</TR> </TBODY> </TABLE>

将上面的代码在“显示源代码”时粘贴过去试一下,如果不居中有可能是段落宽度太小,修改一下上面代码中的黄色数据就好了。

七、其他需要说明的地方

vAlign代表行的垂直对齐方式,等号后面是参数,center表示居中,top表示项部对齐,bottom表示下部对齐,baseline是基线对齐。 

align代表水平对齐方式,参数left是左对齐,right是右对齐,middle是水平居中对齐。

给大家提供一个HTML学习的网页希望大家喜欢。

HTML语言-字体

标题大小:

<h#> 文字 </h#>

#=1, 2, 3, 4, 5, 6

 

文字大小:

<font size=#> ... </font>

#=1, 2, 3, 4, 5, 6, 7 or +#, -#
<basefont size=#>

#=1, 2, 3, 4, 5, 6, 7

 

物理字体:

加粗:<b>文字</b>

斜体:<i>文字</i>

加下划线:<u>文字</u>

垂直居中:<tt>文字</tt>

垂直靠上:<sup>文字</sup>

垂直靠下:<sub>文字</sub>

加删除线:<s>文字</s>

加粗:文字 斜体:文字 加下划线:文字 垂直居中:文字

 垂直靠上:文字 垂直靠下:文字 加删除线:文字 

文字颜色:

<font color=#> 文字 </font>

#=Black(黑色), Red(红色), Blue(兰色), Yellow(黄色)

也可以用颜色代码。

 

HTML语言-图像

链入图像的基本语法:

<img src=图像地址>

 

在浏览器尚未完全读入图像时,在图像位置显示的文字:

<img src=图像地址 alt=要显示的文字>

 

图像和文字的对齐:

<img src=图像地址 align=#>文字<br>

#=top(文字对齐图像上沿), middle(文字对齐居中图像), bottom(文字对齐图像下沿)。

 

图像在页面中的对齐/布局:

<img src=图像地址 align=#>文字<br>
#=left(图像在左文字在右), right(文字在左图像在右)。

 

图像在中,文字左右布局:

文字<img src=图像地址 hspace=图像和文字左右间距值>文字

 

图像在中,文字上下布局:

文字<br><img src=图像地址 vspace=图像和文字上下间距值><br>文字

 

图像边框:

<img src=图像地址 border=边框的粗细值>

 

 

HTML语-排版

【文字置左、置中、置右】

1、使用方法:可以让其整个文字段落置左、置中或置右。

2、解说:“align=对齐位置”它的功能是专门在设定“水平对齐位置”,其常见的设定值有三个,也就是置左(align="left")、置中(align="center")、置右(align="right")。

 

【置中标签】

1、使用方法:<center>内容</center>

2、解说:除了文字,对于图片、表格,任何可以显现的都可以置中。

 

【向右缩排标签】

1、使用方法:<blockquote>文字</blockquote>

2、解说:利用<blockquote></blockquote>这个标签可以将其包起来的文字,全部往右缩,而且加一组标签,往右缩排一单位,加两组标签,往右缩排两单位,依此类推。

 

【保存原始格式标签】

1、使用方法:<pre>文字<pre>

2、解说:利用<pre></pre>这个标签可以将其包起来的文字排版、格式,原封不动的呈现出来。

 

【分隔线标签】

1、使用方法:上一段文字内容<hr>下一段文字内容

2、解说:利用<hr>这个标签便可产生一条横分隔线。

普通分隔线<hr>

有色分隔线<hr color="色码">

有宽度分隔线<hr width="宽度">

有厚度分隔线<hr size="厚度">

 


如果你喜欢此日志,请点击日志左下方的“推荐”,让大家分享,也欢迎你点击日志右下方的“引用”(转载),也算是对 江南浪子的支持,谢谢!!!!!

  评论这张
 
阅读(287)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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