分享

整理几款常用的博客代码

 chwsr 2011-06-12

  

 

 

 

 
  
  别怕系统丢了,从头再来, 
这两个月来咱主要学了这些
   
               文    字    类                         

    1

   文字向右(或向左、向上、向下)滚动
  【代码】

<div class="cnt"><p align="center" ><marquee style="WIDTH:60%; HEIGHT:40px" scrollamount="4" direction="left" >

<div  align="left" ><font color="#ff0000" ><font face="隶书" ><font size="7" >
请在这里写字</font ></font ></font ></p></div >

      

注:

(1)、class="cnt" -----版面居中      (2)、align="center -----字体居中(可改为left居左、right居右 ) 

(3)、WIDTH:60%宽度; HEIGHT:40px高度 ----- 字体的行宽和显示高度  (4)、direction="left 向左滚动

(left<左>可改为right<向右>up<向上>dowm<向下>滚动)  (5)、color="#ff0000 -----字体颜色(选择字体颜色

的最简单办法是在百度编辑栏点字体标示,颜色符号自然就出来了)    (6)、size="7" ----- 字体大小。

  2                      文字竖排滚动
 【代码】

<DIV align=center><FONT color=#FF0000 size=5 face=华文行楷>
<MARQUEE height=250 behavior=slide width=60% loop=1 scrollAmount=3 scrollDelay=100><BR>
<MARQUEE style="WRITING-MODE: tb-rl; LINE-HEIGHT: 80%" direction=up height=250 width=100% scrollAmount=4 scrollDelay=100>
写字  &nbsp写字
<BR><BR><BR>
<BR>写字
<BR><BR>
<BR>写字
<BR>
<BR>以此类推
<BR>

</MARQUEE></MARQUEE></FONT></DIV>

    3                  一款带阴影的漂亮字体
 【代    码】  

<CENTER>
<FONT style="FONT-SIZE:150pt; FILTER: shadow(color=black, strength=25); WIDTH: 100%";FONT face=华文彩云 color=00ff00><B>
写字</B></FONT></CENTER>


 

告灵秀:1、SIZE指字体尺寸,150pt调整字体大小    2、shadow 阴影,color 颜色 black 阴影为黑色 strength=25 调整阴影的强度

 3、fsce原意是 脸,这里face=华文彩云 指字体形式,color(字体颜色)=00ff00(颜色符号)

    4           普通写字代码(一般在需要大字体时实用
  【代码】

【代码】、<LEFT><FONT style="COLOR: #ff0000; FONT-FAMILY: 宋体; FONT-SIZE:200pt;LINE-HEIGHT: 100%; WIDTH:100%"><B>晚霞

     

注:

1、COLOR:#ff0000颜色符号,改变字的颜色     2、SIZE:200pt改变字体大小   3、HEIGHT:150%该字占居空间位置的高度比例,比例值是

与字体大小之比,大于100时,上下占居相应比例的空间,小于100,字体将按比例显示一部分。  4、WIDTH:100% 表示字体在横向占居的宽度空

间,其实即便是该值设小了,需要时,在编辑框里仍可以把它的宽度空间用鼠标拉大。

  

                       图 片 类
    1 图片里加动画(可作为重要工具,粘贴到博客后去掉原动画,做博传图干什么都可以)
 【代码】

<div class=cnt id=blog_text>
<P align=center><FONT size=5></FONT> </P><FONT size=5>
<P align=center></P>
<P align=center></P>
<P align=center>
<table height=500 width=900>
    <tr>
      <td style="BACKGROUND-POSITION: center center; BACKGROUND-REPEAT: no-repeat; TEXT-ALIGN: left" vAlign=center background=把jpg格式的背景图片网址粘贴到这里>
<P align=center></P>

      <P align=center><EMBED style="WIDTH: 294px; HEIGHT: 436px" pluginspage=http://www.macromedia.com/go/getflashplayer src=/flashl/sucai/bird/20.swf width=294height=436 type=application/x-shockwave-flash wmode="transparent" play="true" loop="false" menu="false" allownetworking="none" allowscriptaccess="never"></EMBED></P></td>
    </tr>
</table>

    2  可以使图片平铺、用做博客背景图能竖直下延
 【代码】

<CENTER>
<TABLE  width=730 height=1000 bgColor="#D7FFEE" background="中间背景图片地址贴到这里"  border=0>
<TR><TD>
<CENTER>
<TABLE width=500 height=850 border=0>
<TR><TD height="200">
</TD></TR>
<TR>
<td align=LEFT valign=top>
<font face=隶书 style=font:20pt color=0000ff><b>
<BR>
这里原来是写字处,实际上根本不需要,张贴到博客后我们在那里一样随意些字做博。所以这个代码还可以再简化,我姑且不动了。到博客后再删吧。 
<BR>
<p align=RIGHT>chwsr</P>
<br></b></FONT>
</TD></TR></TABLE></center>
</CENTER>
</TD></TR></TABLE></center>

    3                         图  片  雾 化
  【代码】
STRONG><IMG style="FILTER: Alpha(opacity=100,style=2);
WIDTH: 750px; HEIGHT: 600px" height=700 src="
贴图片处"
width=600></STRONG>
</body></html>
 
          
其中:
   width=雾化宽度     height=雾化高度   不断地调换看看效果就明白了。
 当然也可以用鼠标拖动调整高和宽
    4                      图片由右向左移动
  【代码】

<MARQUEE><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"><IMG src="图片地址"></MARQUEE

 

图片数量可以根据需要增加减少,图片两边引号一定不可以丢掉。

    5                           单边框代码
  【代码】

<CENTER>
<TABLE cellpadding=20 style="WIDTH: 500px; BORDER-COLLAPSE: collapse; HEIGHT: 300px"bgColor="#FFE6FF" borderColor="0000ff" border=10>
<TR>
<TD>
这里插入文字和图片等内容,若要插入图片时,建议你最好还是在博客编辑栏手工插入,很简单,而且还省去了需要在这里插入图片代码的程序,你如果偏爱在这里插入图片,请在这里插入图片代码(附后)就连文字在博客编辑框里操作也比这里方便的多了。
</TD></TR></TABLE></center>

    6                            双边框代码
  【代码】  

<DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px">
<TABLE  cellSpacing=25 cellpadding=20 width=810 height=390 background="里边框图片,gif格式动画图片也行" borderColor="#C4C400" border=20>
<TR>
<TD bgColor=#CEFFCE>

插入文字和图片等内容,到博客编辑栏操作更好

</TD></TR></TABLE></center>
</DIV><br><br>

    7                   透明flash在博客里的定位
  【代码】

<EMBED style="LEFT:10px; POSITION: absolute; TOP:400px" align=right

src=透明动画的地址width=400height=400type=application/x-shockwave-flash ; quality="high" wmode="transparent"></EMBED>

      

 

代码说明:

LEFT:10px;    动画离屏幕左侧的距离,值越大动画越往右,此数值也可以为负值(负值越大动画越往左);

POSITION: absolute;位置固定;

TOP:400px     动画离屏幕顶端的距离,值越大动画越往下,此数值可以为负值(负值越大动画越往上);

width=400height=400    动画本身的宽和高,改变数值可以改变动画本身的大小;

quality="high"    为高质量;

wmode="transparent"    使动画透明(就是没有背景),如果不想透明就去掉这个代码,一般使用透明FLASH都要加上这个代码,不然你的透明FLASH就不是透明的了,不是大白板就是大黑板。

  以上参数可以根据你的意向加以变化,让动画出现在你需要的位置。其实就是在文章中设置了一个坐标,调整相应的值就可以定位动画的位置。有的时候需要不断的调整,直到满意为止。

    8                           图  片  链  接
第2行第1列

1、链接核心代码;

<A href="链接地址" ><IMG  src="图片地址" > </A>

    

2、多图链接

<MARQUEE title=点击图片进入相关内容 style="WIDTH: 750px; HEIGHT: 400px" scrollAmount=3 direction=up behavior=alternate height=554>
<MARQUEE scrollAmount=3 behavior=alternate width=650 height=350>


<A><MARQUEE height="350" width="750" behavior="alternate" scrollAmount="5"><A>

<A href="链接地址" target=_blank><IMG style="FILTER: alpha(opacity=100,style=3)" src="图片地址" width=300> </A><A>

 

<A href="链接地址" target=_blank><IMG style="FILTER: alpha(opacity=100,style=3)" src="图片地址" width=300> </A><A>

 

<A href="链接地址" target=_blank><IMG style="FILTER: alpha(opacity=100,style=3)" src="图片地址" width=300> </A><A>

 

<A href="链接地址" target=_blank><IMG style="FILTER: alpha(opacity=100,style=3)" src="图片地址" width=300> </A><A>


<A href="链接地址" target=_blank><IMG style="FILTER: alpha(opacity=100,style=3)" src="图片地址" width=300> </A><A>

 

<A href="链接地址" target=_blank><IMG style="FILTER: alpha(opacity=100,style=3)" src="图片地址" width=300> </A></MARQUEE>
<CENTER> </CENTER></MARQUEE>

 

 

【解析】

锚标签和 Href 属性

HTML 使用 <a> (锚)标签来创建连接另一个文档的链接。

锚可以指向网络上的任何资源:一张 HTML 页面,一幅图像,一个声音或视频文件等等。

创建锚的语法:

<a href="url">Text to be displayed</a>

<a> 用来创建锚。href 属性用于定位需要链接的文档,锚的开始标签和结束标签之间的文字被作为超级链接来显示。

这个锚定义了指向 w3school 的链接:

<a href="http://www.w3school.com.cn/">Visit W3School!</a>

上面的这行在浏览器中显示为这样:Visit W3School!

                       其    它

 

 

第2行第1列 第2行第2列
第3行第1列 第3行第2列
第1行第1列 第1行第2列
第2行第1列 第2行第2列
第3行第1列 第3行第2列
第1行第1列 第1行第2列
第2行第1列 第2行第2列
第3行第1列 第3行第2列
第1行第1列 第1行第2列
第2行第1列 第2行第2列
第3行第1列 第3行第2列
第1行第1列 第1行第2列
第2行第1列 第2行第2列
第3行第1列 第3行第2列
第1行第1列 第1行第2列
第2行第1列 第2行第2列
第3行第1列 第3行第2列
第1行第1列 第1行第2列
第2行第1列 第2行第2列
第3行第1列 第3行第2列
第1行第1列 第1行第2列
第2行第1列 第2行第2列
第3行第1列 第3行第2列
第1行第1列 第1行第2列
第2行第1列 第2行第2列
第3行第1列 第3行第2列
     
 


  


 

 

  


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 全屏 打印 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多