小小 BLOG

This is the place where I pour into lov

日志

关于我

小小 BLOG

人生之路,从起点到终点,奔波忙碌中也遇人无数。能有缘遇到,同路,并肩走上一程,即算缘分和幸事。然而人生的残酷在于,绝少或者没有人能一路相陪。所以,人,注定了要学会一个人走。

文章分类

博客制作基本代码

2008-03-10 10:15:32| 分类：博客代码 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

网易小小博客

大家好,首先欢迎你的到来,这一篇是为大家讲解并总结一下博客制作的基本代码,供新手参考
本篇代码来源于多个博友,本人仅收集归纳,整理,并加以说明而已

在首页模块HTML中如何使用代码:博客在编辑状态下,选择"排版设置","内容模块","自定义添加HTML",这时你的博客最下面出现一个空白模块,那现在就把你要的代码粘进去吧

一.文字类
1)字体加粗：<b>你的文字</b>

2)字体斜体：<i>你的文字</i>

3)字体下划线: <u>你的文字</u>

4)字体删除线: <s>你的文字</s>

5)字体加大: <big>你的文字</big>

6)字体大小：<h1>你的文字</h1>

大小从h1-h5不等

7)字体颜色：<font color="#ff0099">你的文字</font>

8)滚动字(左右循环滚动)：<marquee>你的文字</marquee>

9)高级滚动文字(可自定义):<marquee scrollamount=3 FONT style="COLOR:#B03060; FONT-FAMILY: 隶书; FONT-SIZE: 25pt; WIDTH: 100%">小小欢迎你</marquee>

效果如下:
小小欢迎你

属性分析:

marquee:此代码为滚动代码 scrollamount=3:些代码为速度,其中数值可以更改 COLOR:#B03060:字体颜色 FONT-FAMILY: 隶书:字体代码,可以更改文字的字体描述来改变字体 FONT-SIZE: 25pt:字体大小,可改变数值来实现文字的大小更改 WIDTH: 100%:在屏幕上滚动的比例

    10)来回移动的文字:<marquee behavior="alternate" scrollamount=3 FONT style="COLOR:#B03060; FONT-FAMILY: 隶书; FONT-SIZE: 25pt; WIDTH: 100%">小小欢迎你</marquee>

    效果如下:

属性分析:

marquee:此代码为滚动代码 behavior="alternate":来回移动代码 scrollamount=3:些代码为速度,其中数值可以更改 COLOR:#B03060:字体颜色 FONT-FAMILY: 隶书:字体代码,可以更改文字的字体描述来改变字体 FONT-SIZE: 25pt:字体大小,可改变数值来实现文字的大小更改 WIDTH: 100%:在屏幕上滚动的比例

注意:9)和10)的区别只在于一个方向代码behavior="alternate":来回移动代码而已大家可以活学活用这并不难的

    11)滚动字幕:<marquee scrollamount=2 FONT style="COLOR:#B03060;FONT-FAMILY: 隶书; FONT-SIZE: 25pt; WIDTH: 100%" direction=up >忘记是一种罪<br>有它就没有美好的回忆<br>如果愿意<br>可以把它记录<br>回忆曾经<br>是一件享受的事<br>欢迎来到幽幽世界<br>愿每个人都有美好的回忆在内心深处<br>这样的人才会永远没有孤单</marquee>

    效果如下:
忘记是一种罪
有它就没有美好的回忆
如果愿意
可以把它记录
回忆曾经
是一件享受的事
欢迎来到小小世界
愿每个人都有美好的回忆在内心深处
这样的人才会永远没有孤单
属性分析:

marquee:此代码为滚动代码 scrollamount=3:些代码为速度,其中数值可以更改 COLOR:#B03060:字体颜色 FONT-FAMILY: 隶书:字体代码,可以更改文字的字体描述来改变字体 FONT-SIZE: 25pt:字体大小,可改变数值来实现文字的大小更改 WIDTH: 100%:在屏幕上滚动的比例 direction=up:方向代码   <br>:换行代码

注意:9)和11)的区别只在于一个方向代码direction=up而已大家可以活学活用这并不难的

12)文字超链接(网页跳转)：<a href="链接地址">你的文字</a>

13)文字超链接(在新窗口打开)：<a href="链接地址" target="_blank">你的文字</a>

14)消除链接文字的下划线：<a href="链接地址" style="text-decoration:none">你的文字</a>

二.图片类

1)粘图代码：<img src="你的图片地址">

图片地址获取方法:把鼠标放到你要添加的图片上,右键单击图片,选择"属性",出现对话框,全部复制URL地址,此地址便是图片地址

2)滚动图片:<marquee width="100%" scrollamount="3"><img src="你的图片地址1" width="99" height="95" border="0"><img src="你的图片地址2" width="99" height="95" border="0"><img src="你的图片地址3" width="99" height="95" border="0"><img src="你的图片地址4" width="99" height="95" border="0"><img src="你的图片地址5" width="99" height="95" border="0"></marquee>

效果如下:

属性分析:

此特效代码包含两部分:1滚动代码部分,<marquee width="100%" scrollamount="3"> marquee:滚动代码 width="100%":屏幕滚动比例  scrollamount=3:些代码为速度,其中数值可以更改 2为粘图部分,<img src="你的图片地址1" width="99" height="95" border="0">,此部分可以根据图片的多少粘贴数个.img src="你的图片地址1":图片粘贴代码 width="99":宽度代码,其中数值可以更改 height="95":高度代码,其中数值可以更改 border="0"边缘代码

3)来回移动图片代码:<marquee behavior="alternate" width="100%" scrollamount="3"><img src="你的图片地址1" width="99" height="95" border="0"><img src="你的图片地址2" width="99" height="95" border="0"><img src="你的图片地址3" width="99" height="95" border="0"><img src="你的图片地址4" width="99" height="95" border="0"><img src="你的图片地址5" width="99" height="95" border="0"></marquee>

效果如下:

属性分析:

此特效代码包含两部分:1滚动代码部分,<marquee behavior="alternate" width="100%" scrollamount="3"> marquee:滚动代码 behavior="alternate":来回移动代码 width="100%":屏幕滚动比例  scrollamount=3:些代码为速度,其中数值可以更改 2为粘图部分,<img src="你的图片地址1" width="99" height="95" border="0">,此部分可以根据图片的多少粘贴数个.img src="你的图片地址1":图片粘贴代码 width="99":宽度代码,其中数值可以更改 height="95":高度代码,其中数值可以更改 border="0"边缘代码

注意: 2)和3)的区别只在于3)多了一个方向代码,behavior="alternate":来回移动代码

3)图片超链接(生成原图大小):<a target="cont" href="链接地址"><img src="图片地址"></a>

4)图片超链接(可自定义图片大小):<a target="cont" href="链接地址"><img src="图片地址" width="100" height="100" border="0"></a>

5)滚动图片超链接:<marquee   width="100%" scrollamount="1" ><a target="cont" href="链接地址1><img src="你的图片地址1" width="99" height="95" border="0"></a> <a target="cont" href="链接地址2><img src="你的图片地址2" width="99" height="95" border="0"></a> <a target="cont" href="链接地址3><img src="你的图片地址3" width="99" height="95" border="0"></a> <a target="cont" href="链接地址4><img src="你的图片地址4" width="99" height="95" border="0"></a></marquee>

属性分析:

此特效代码包含三部分:1滚动代码部分,<marquee width="100%" scrollamount="3"> marquee:滚动代码 width="100%":屏幕滚动比例  scrollamount=3:些代码为速度,其中数值可以更改 2超链接代码部分,<a target="cont" href="链接地址1> 3为粘图部分,<img src="你的图片地址1" width="99" height="95" border="0">,此部分可以根据图片的多少粘贴数个.img src="你的图片地址1":图片粘贴代码 width="99":宽度代码,其中数值可以更改 height="95":高度代码,其中数值可以更改 border="0"边缘代码

三.综合应用类

1)贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>

2)贴flash: <embed src="flash地址" width="宽度" height="高度">

3)贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>

4)换行：<br>

5)段落：<p>文字</p>

6)原始文字样式：<pre>正文</pre>

7)换帖子背景：<body background="背景图片地址">

8)固定帖子背景不随滚动条滚动：<body background="背景图片地址" body bgproperties=fixed>

9)定制帖子背景颜色：<body bgcolor="#value">(value值见10)

10)帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>

11)贴网页：<iframe src="相关地址" width="宽度" height="高度"></iframe>

12)分割线代码: 你的文字<HR> 你的文字

添加属性:你的文字<HR COLOR=red WIDTH="宽度px" SIZE="厚度px" ALIGN="对齐位置" NOSHADE>你的文字

属性分析:

HR:分割线代码

COLOR=red:分割线颜色代码可以更改

WIDTH="宽度px":分割线宽度代码将文字换成合适的数值

SIZE="厚度px":分割线厚度代码将文字换成合适的数值

ALIGN="对齐位置":分割线与文字的对齐方式分为 1居左:ALIGN="LEFT" 2居中:ALIGN="CENTER" 3居右:ALIGN="RIGHT"

NOSHADE:阴影效果

评论这张

转发至微博

阅读(1035)| 评论(7)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_084066082082080070093080084095081085081069093085085066',
              blogTitle:'博客制作基本代码',
              blogAbstract:' \n        <div\></div\>\n   <fieldset style=\"width:840px;\"   \><legend\><a href=\"http://daodao.258.blog.163.com/\"   \><font color=\"#009999\"   \><strong\>网易小小博客</strong\></font\></a\></legend\> <div align=\"left\"   \><strong\> <br\></strong\><strong\> \n\n <p style=\"TEXT-INDENT: 2em;\"   \><font color=\"#444444\"   size=\"4\"   face=\"幼圆\"   \>   大家好,首先欢迎你的到来,这一篇是为大家讲解并总结一下博客制作的基本代码,供新手参考</font\></p\>   本篇代码来源于多个博友,本人仅收集归纳,整理,并加以说明而已<p\></p\>  <p style=\"TEXT-INDENT: 2em;\"   \> 在首页模块HTML中如何使用代码:博客在编辑状态下,选择\"排版设置\",\"内容模块\",\"自定义添加HTML\",这时你的博客最下面出现一个空白模块,那现在就把你要的代码粘进去吧 </p\>  <p style=\"TEXT-INDENT: 2em;\"   \><font color=\"#00ff00\"   size=\"5\"   \>一.文字类</font\></p\>   1)字体加粗：<b>你的文字</b><p\></p\>  <p style=\"TEXT-INDENT: 2em;\"   \>2)字体斜体：<i>你的文字</i></p\>  <p style=\"TEXT-INDENT: 2em;\"   \>3)字体下划线: <u>你的文字</u></p\></strong\></div\></fieldset\>',
              blogTag:'',
              blogUrl:'blog/static/530693312008210101532893',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1460200138892,
              publishTime:1205115332893,
              permalink:'blog/static/530693312008210101532893',
              commentCount:7,
              mainCommentCount:7,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'人生之路,从起点到终点,奔波忙碌中也遇人无数。能有缘遇到,同路,并肩走上一程,即算缘分和幸事。然而人生的残酷在于,绝少或者没有人能一路相陪。所以,人,注定了要学会一个人走。',
              hmcon:'0',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/530693312008210101532893">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

小小 BLOG

导航

日志

博客制作基本代码

历史上的今天

最近读者

热度

评论

页脚