查看: 936|回复: 5

[休闲] 论坛帖子编辑指南——HTML代码篇

[复制链接]

706

帖子

1495

威望

0

LV.5

(。・∀・)ノ゙嗨⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Rank: 5Rank: 5

积分
1289
碎银
236

六一快乐

发表于 2017-11-12 11:43:20 | 显示全部楼层 |阅读模式

大家好,我是老南。
大家在编辑论坛攻略帖的时候有没有遇到过如下
问题呢:

-“天啦噜,论坛图片为什么限制上传文件的尺寸大小!”
-“嘤,人家不会排版,好气气!”
-“妈耶这次帖子又弄得好丑啊,这次又只能勉强拿及格了!”
-“我擦,狗币老南又拿了优秀?除了帖子好看点,她的教程哪里比得上我的高大上?!”

……


本期《
论坛攻略帖编辑指南》主要讲下简(sha)单(gua)的(shi)HTML代码使用,希望本帖能在大家编辑论坛攻略帖的时候,给大家提供一些帮助。
攻略群@水云流潺,QQ:331475486


-排版类-
-文字类-
-图片类-
-图文混排类-
-超链接类-
-音乐视频类-


←←点我啊!!
回复

使用道具 举报

706

帖子

1495

威望

0

LV.5

(。・∀・)ノ゙嗨⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Rank: 5Rank: 5

积分
1289
碎银
236

六一快乐

 楼主| 发表于 2017-11-12 11:43:21 | 显示全部楼层

      排版类
*……*……*……*……*……*……*……*……*

1.代码开始-代码结束:<div>【下一行的文字内容】</div>
      示例:这个好像没有什么好的示例,就是把代码放在中间,免得影响周围的代码效果。

2.文字居中:<td style="text-align: center;">【帖子内容】</td>
  示例:<td style="text-align: center;">现在就是文字居中~</td>
现在就是文字居中~

3.文字靠右:<td style="text-align: right;">【帖子内容】</td>
  示例:<td style="text-align: right;">现在就是文字靠右~</td>
现在就是文字靠右~  
   
4.文字靠左:<td style="text-align: left;">【帖子内容】</td>
  示例:<td style="text-align: left;">现在就是文字靠左~</td>
      现在就是文字靠左~

5.文字换行:【文字】<br>【下一行文字】
  示例:哦~帅气的老南子<br>啊~可爱的老南子<br>呀~亲切的老南子
      哦~帅气的老南子
      啊~可爱的老南子
      呀~亲切的老南子



  文字类
*……*……*……*……*……*……*……*……*

1.文字的颜色:
<font color="【色号代码,如:#000000】">【帖子文字内容】</font>
  示例:<font color="pink">粉红攻击!</font>
  示例:<font color="#FF0000">御姐口红!</font>
    粉红攻击!
    御姐口红!

2.文字纯色背景:如上粉红色的字看不清就给她加个背景吧!
<font style="background-color: 【颜色代码】">【帖子文字内容】</font>
示例:<font style="background-color: black"><font color="pink">粉红攻击!</font></font>
    粉红攻击!

3.字的大小:<font size="【数字越大,字号越大】">【帖子文字内容】</font>
  示例:<font size="2">2号文字</font>
<font size="3">3号文字</font>
<font size="4">4号文字</font>
<font size="5">5号文字</font>
    2号文字
   3号文字
   4号文字
  5号文字

4.字体:<font face="【字体】">【帖子文字内容】</font>
  示例:<font face="宋体">宋体文字</font>
<font face="楷体, 楷体_GB2312">楷体文字</font>
  宋体文字
  楷体文字

5.斜体:<i>【帖子文字内容】</i> 
6.下划线:<u>【帖子文字内容】</u> 
7.删除线:<s>【帖子文字内容】</s>
8.加粗:<b>【帖子文字内容】</b> 
示例:<i>斜体</i> <u>下划线</u> <s>删除线</s> <b>加粗</b>
    斜体 下划线 删除线 加粗
9.虚线:<font style=" border-bottom:dotted 【虚线像素值大小】px 【颜色,如pink】 ">【帖子文字内容】</font>
  示例:font style=" border-bottom:dotted  5px  red ">虚线</font>
    虚线
10.组合(可自行删减):<font face="【字体】"><font size="【字号】"><font color="【颜色】"><b><i><u><s><font style=" border-bottom:dotted 【虚线像素值大小】px 【颜色,如pink】 ">【帖子文字内容】</font></s></u></i></b></font></font></font>
  示例:<font face="黑体"><font size="2"><font color="black"><b><i><u><s><font style=" border-bottom:dotted 2px red ">疯狂特效</font></s></u></i></b></font></font></font>
    疯狂特效




←←点我啊!!
回复 支持 反对

使用道具 举报

706

帖子

1495

威望

0

LV.5

(。・∀・)ノ゙嗨⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Rank: 5Rank: 5

积分
1289
碎银
236

六一快乐

 楼主| 发表于 2017-11-12 11:43:22 | 显示全部楼层
  图片类
*……*……*……*……*……*……*……*……*
1.普通图片:<img src='【图片外链地址】'>
  示例:<img src='http://pic.xoyo.com/bbs/forum/201711/30/093926usetyzrhs0zs82ze.png'>
     

2.规定图片大小:<img src="【图片外链地址】" width="【宽度像素值】" _height="【长度像素值】">
  示例:<img src="http://pic.xoyo.com/bbs/forum/201711/30/093926usetyzrhs0zs82ze.png" width="192" _height="108">
<img src="http://pic.xoyo.com/bbs/forum/201711/30/093926usetyzrhs0zs82ze.png" width="96" _height="54">
     

     

  图文混排类
*……*……*……*……*……*……*……*……*
1.图左文右:<img src="【图片外链地址】" align="left">【帖子文字内容】
  示例:<img src="http://pic.xoyo.com/bbs/forum/201711/30/093926usetyzrhs0zs82ze.png" width="192" _height="108" align="left">北冥猪好帅<br>北冥猪好帅<br>北冥猪好帅<br>北冥猪好帅
北冥猪好帅
北冥猪好帅
北冥猪好帅
北冥猪好帅

2.图右文左:<img src="【图片外链地址】" align="right">【帖子文字内容】
  示例:<img src="http://pic.xoyo.com/bbs/forum/201711/30/093926usetyzrhs0zs82ze.pngg" width="192" _height="108" align="right">北冥猪好帅<br>北冥猪好帅<br>北冥猪好帅<br>北冥猪好帅
北冥猪好帅
北冥猪好帅
北冥猪好帅
北冥猪好帅

点评

外链图片**推荐【贴图库】:http://www.tietuku.com/  发表于 2017-11-12 11:44
←←点我啊!!
回复 支持 反对

使用道具 举报

706

帖子

1495

威望

0

LV.5

(。・∀・)ノ゙嗨⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Rank: 5Rank: 5

积分
1289
碎银
236

六一快乐

 楼主| 发表于 2017-11-12 12:48:30 | 显示全部楼层

      背景类

*……*……*……*……*……*……*……*……*
代码:<div align="center"><table style="text-align: center; width: 【宽度像素值,官方论坛通常用760】px; height: 【长度像素值,如5600】px;" bordercolor="white" cellspacing="1" background="【背景图外链地址】" border="1"><tbody><tr><td style="text-align: center;"><br>【帖子内容】<br></td></tr></tbody></table><br></div>

示例:<div align="center"><table style="text-align: center; width: 760px; height: 7200px;" bordercolor="white" cellspacing="1" background="http://i4.bvimg.com/591758/eb93f333dcf314ff.jpg" border="1"><tbody><tr><td style="text-align: center;"><br>第二十四期 知秋<br></td></tr></tbody></table><br></div>

    这个没办法在这里示例啦,传送门:第二十四期 知秋





      超链接类

*……*……*……*……*……*……*……*……*……*


1.在当前页面跳转:<a href="【网页地址】">【文字介绍】</a>
   示例:<a href="https://weibo.com/1752659273/profile?topnav=1&wvr=6&is_all=1#1510449812198">@小雨躺数位板上_南</a>
      @小雨躺数位板上_南
2.在新页面打开:<a href="【网页地址】" target="show">【文字介绍】</a>
   示例:<a href="https://weibo.com/1752659273/profile?topnav=1&wvr=6&is_all=1#1510449812198" target="show">@小雨躺数位板上_南</a>

     @小雨躺数位板上_南


  音视频类

*……*……*……*……*……*……*……*……*


1.添加音乐播放器:<embed src=音乐地址>
   示例:<embed src=http://data.5sing.kgimg.com/G098/M07/03/01/og0DAFkbBl6AY2MxAMZ8as49gLQ587.mp3>
      

2.隐藏音乐播放器+循环播放:<embed src=音乐地址 HIDDEN=TRUE autostart=【循环:true,不循环:false】>

  示例:<embed src=http://data.5sing.kgimg.com/G098/M07/03/01/og0DAFkbBl6AY2MxAMZ8as49gLQ587.mp3 HIDDEN=TRUE autostart=true>

     这里我就不试用啦,毕竟隐藏播放器不好操作,建议下去自己试用厚QWQ


3.视频播放器:<embed src=【视频地址(不是网址)】 width=【宽度】 height=【高度】 autostart=true loop=true>

   示例1:<embed src=http://static.hdslb.com/miniloader.swf?aid=16191856&page=1 width=415 height=544 autostart=true loop=true>


——如果是B站的话可以直接复 制它的html代码

   示例2:<embed height="415" width="544" quality="high" allowfullscreen="true" type="application/x-shockwave-flash" src="//static.hdslb.com/miniloader.swf" flashvars="aid=16191856&page=1" pluginspage="//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"></embed>




←←点我啊!!
回复 支持 反对

使用道具 举报

706

帖子

1495

威望

0

LV.5

(。・∀・)ノ゙嗨⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Rank: 5Rank: 5

积分
1289
碎银
236

六一快乐

 楼主| 发表于 2017-11-12 13:10:06 | 显示全部楼层
分享一些链接
贴图库(图片外链):http://www.tietuku.com/
颜色代码表:http://www.114la.com/other/rgb.htm
分割线:http://588ku.com/image/gufengfengexian.html
←←点我啊!!
回复 支持 反对

使用道具 举报

706

帖子

1495

威望

0

LV.5

(。・∀・)ノ゙嗨⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

Rank: 5Rank: 5

积分
1289
碎银
236

六一快乐

 楼主| 发表于 2017-11-28 23:22:46 | 显示全部楼层
垃圾贴图库开始收费了_(:з)∠)_这个外链也不能用了
←←点我啊!!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|剑侠情缘网络版叁  

Powered by Discuz! X3.1

Copyright © 2014 Kingsoft Corporation.All rights reserved. 金山软件 版权所有

快速回复 返回顶部 返回列表
论坛导航