技术宅社区

 找回密码
 ╱人◕‿‿◕人╲订下契约(注册新用户)

QQ登录

只需一步,快速开始

搜索
查看: 1000 | 回复: 1
收起左侧

排版模板及格式说明 - 持续更新和维护

[复制链接]

签到天数: 792 天

连续签到: 89 天

[LV.10]以坛为家III

国庆70周年纪念刀剑神域|桐人杀戮の天使|艾札克杀戮の天使|瑞吉儿宫崎骏|龙猫1全职猎人|伊耳谜宫崎骏|千寻魔道祖师|金凌歌王|寿岭二Free|叶月渚野良神|雪音刀剑神域|诗乃刀剑神域|有纪刀剑神域|亚丝娜刀剑乱舞|狮子王歌王|一之濑时矢

发表于 2017-12-27 00:32:10 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要 登录 才可以下载或查看,没有帐号?╱人◕‿‿◕人╲订下契约(注册新用户)

x
如果你曾经没有接触过,你只有全部看完反复斟酌才能够理解哦!
名词解释:div - 块,层,无限扩展宽度矩形 ;html - 超文本标记语言;css - 层叠样式表; class - 类,类别,样式,风格;
一、必备工具:
1、Chrome、Edge、Firefox浏览器开发人用工具(F12)
2、VScode[简介][下载]

二、帖子编辑模式开启使用HTML代码、使用纯文本模式
帖子附加选项.png

三、使用说明
HTML代码和Discuz代码类似,使用<标签名>包裹内容对内容进行格式化,但是不同的是,可以单独通过CSS外部样式表对HTML文本内容进行位置、尺寸、字体字号、颜色、等各方面进行美化排版,从而实现对帖子排版效果。我模仿腾讯的Qui手动写了一套CSS样式表,给技术宅帖子排版专用,会持续更新和维护,下面是使用说明:

1、用标签或css标签内部的@import方式引入外部样式表
①用VScode新建一个空白文件,格式调整为HTML:
调整格式.png
②写入如下内容引用外部样式表
  1. <link rel="stylesheet" href="template/Gui/Gui.css" type="text/css" />
复制代码
2、生成窗体
然后若在不修改颜色的情况下,直接按如下格式生成“窗体”,你如果手打的话,VScode软件会帮助你排版哦,用VScode软件全部编辑完内容,复制粘贴到技术宅的发帖框就完成啦!
  1. <link rel="stylesheet" href="template/Gui/Gui.css" type="text/css" />
  2. <div class="vars window_core">
  3. <div class="vars window_head">
  4. <div class="vars window_title">这里填写窗体标题</div>
  5. </div>
  6. <div class="vars window_body window_body_content">
  7. 这里填写正文内容
  8. </div>
  9. <div class="vars window_foot">
  10. 这里是底部
  11. </div>
  12. </div>
复制代码
生成的效果如下图:
这里填写窗体标题
这里填写正文内容
这里是底部
在div标签中,class是该标签的属性,上面外部引用的css文件中定制了这个div标签的外观,看第一条div标签
  1. <div class="window_core">
复制代码
其css文件的内容描述如下:
  1. .window_core {
  2. /*框架属性*/
  3. min-width: 420px; /* 这里定义了最小宽度 */
  4. width: 500px; /* 这里定义了宽度 */
  5. border: none; /* 这里定义了描边样式为:无 */
  6. border-radius: 5px; /* 这里定义了边框有5个像素的圆角 */
  7. box-shadow: var(--window_shadow); /*这里定义了最小宽度*/
  8. /*颜色属性*/
  9. background: #fff; /*这里定义了背景颜色*/
  10. }
复制代码
其中
  1. 用/* 我是注释 */
复制代码
包裹的内容是注释,不会被浏览器程序解析,我这里只是阐释下原理哈,不对css文件进行具体的说明,你可以用浏览器直接下载那个外部样式表,用VScode查看里面的具体定义。你需要知道的是什么捏?

比如上面我定义了窗体的宽度是500像素,可是你想让窗体铺满整个发帖页面肿么办?这里留一个悬念,等下会说明。
3、div的class介绍
我在css样式表里面用一系列的样式,对每个div标签进行了不同的定义,以完成不同的效果显示,div标签在没有进行任何定义的情况下,你可以现象成一个没有颜色的长方形,无限延伸到浏览器边界两边,上下有一个换行(world里面的一个回车换行符),就如同一张白纸,我给它规定了各种属性,让它变成符合要求“长方形”;于是就有了你看到的每个div我赋予了不同的属性。

比如我用window_head定义了窗体的头部,那个div标题的那个彩色的矩形条;用window_title定义了矩形条上文字的字号,颜色等属性;用window_body window_body_content window_body_dialogue 一系列的组合class属性,定义了内容正文的相关属性;用window_foot定义了底部的内容的相关属性。

你大概了解了这些就可以,因为这些我都在css样式表里面定义好了,直接copy进去用,改一下标题文字就OK啦,下面你要认真学习的是正文部分怎么排版。
4、“我不管,我要先改一下颜色,这颜色不好看!”
你注意到每个class前面都写了一个“vars”了吗,这是啥?我在css样式表最头部写了一个可以供下面样式表调用的变量(不要问我变量是啥,就是高中函数里的那个变量,你让它等于多少,代入到函数里就是多少);我没有把全局的颜色写死了哦,你可以直接在vars里面修改颜色属性的变量,然后css就会自动带入到全局里面去替换原来相应的颜色值。
①首先,你在link标签和div的窗体标签之前插入一个style标签,用来替换外部css文件里面对“vars”class的定义,你要记住哦,在css里面,如果在上面和下面定义了同样一个规则,下面的规则一定会覆盖上面的,也就是说上面的规则就失效了,采用最下面的那条规则,根据这个原理,我们在link引用的css样式表下面用一个style标签,重新定义里面的颜色变量:
  1. <link rel="stylesheet" href="template/Gui/Gui.css" type="text/css" />
  2. <style>
  3. .vars {
  4. --color_light: #fff; /*这里定义了窗体的高亮颜色,比如标题、按钮的文字颜色*/
  5. --color_light_plus: #eee; /*这里定义了比高亮颜色暗一点点的颜色,用于按钮上文字的点击效果*/
  6. --color_dark: #ed5858; /*这里定义了窗体的暗、深的颜色,比如标题背景颜色、按钮背景颜色*/
  7. --color_dark_plus: #ff5e5e; /*这里定义了比窗体暗颜色深一点点的颜色,用于按钮的点击效果*/
  8. --window_shadow: 0 2px 20px 0 rgba(0, 0, 0, .15); /*这里定义了比窗体的阴影效果不建议修改*/
  9. --window_border_color: #999; /*这里定义了边框颜色*/
  10. }
  11. </style>
  12. <div class="vars window_core">
复制代码
比如我现在想把窗体颜色改成黑色,可以这样写:
  1. .vars {
  2. /*公用变量库*/
  3. --color_light: #fff;
  4. --color_light_plus: #eee;
  5. --color_dark: #333;
  6. --color_dark_plus: #000;
  7. --window_shadow: 0 2px 20px 0 rgba(0, 0, 0, .15);
  8. --window_border_color: #999;
  9. }
复制代码
但是我在前面有用原先的样式写过一个窗体,如果我直接修改这个样式的话,上面的样式也会同样被更改的,所以我改了下名字,把vars改成了varsx,把下面所有的 class="vars wind…… 改成 class="varsx window……,这样就可以用新颜色啦;如下:
这里填写窗体标题
这里填写正文内容
这里是底部
②于是,前面不是提到了要修改宽度吗,你可以酱紫在style标签里面重定义.window_core的宽度:
  1. .window_core {
  2. /*框架属性*/
  3. width: 100%; /*100%的意思是铺满整个容器哦*/
  4. }
复制代码
5、正文编写
好啦,终于要切入主题了,正文部分肿么写?
①完全使用discuz代码和排版:在正文部分创建一个pre标签,包裹你的全部discuz代码,应该能够正常显示,你用通常的discuz排版技巧排版即可。
  1. <pre>我是正文部分,这里可以用discuz代码啦啦啦
  2. 我的换行也是有效滴</pre>
复制代码
②直接使用html规范语法编写:推荐用这种方式,但是你有熟悉html的基本语法哦,下面给出解释: a标签:创建一个链接,语法如下:
  1. <a href="https://www.baidu.com" target="_blank">我是一个链接</a>
复制代码
和discuz语法的url标签类似,href属性指定了链接的地址;target属性指定了链接的打开方式:在浏览器新标签页打开。a标签中间包裹的是文字部分。更多关于a标签的用法可以参考:这里的说明

br标签:换行,html默认是无视换行的,我们需要用一个br标签手动换行。
  1. 我是一句话<br>我是第二句话
复制代码
上面的这两句话实际上是分两行显示的,因为br标签起了一个换行作用。

p标签:段落标签,用p标签包裹段落,上下会产生一个换行符;p标签的默认显示样式比较糟糕,可以用style标签里用css单独指定p标签的显示样式哦。
  1. <p>呜啦啦啦啦我是一个段落</p>
复制代码

strong标签:加粗一段文本,相当于discuz的b标签。
  1. <strong>加粗我,快</strong>
复制代码

table标签:和discuz代码类似,生成一个表格哦,用法和discuz代码差不多把方括号改成尖括号就可以了,但是颜色等方式不是discuz代码那样指定的噢:
  1. [table]
  2. <tr><td>我是第一行第一列</td><td>我是第一行第二列</td></tr>
  3. <tr><td>我是第二行第一列</td><td>我是第二行第二列</td></tr>
  4. [/table]
复制代码
大概就简介到这里,更多的标签及用法可以翻阅上面介绍a标签提供的w3school的手册哦

6、属性的说明
所有的标签都有的属性:
name属性:定义标签的识别名字
id属性:给标签一个唯一的识别id,用于css里面调用
class属性:给标签定义类别,css里面制定该类别的样式,和id属性不同的是,class一个样式可以给多个标签调用,而id属性定义的样式是唯一的。
style属性:不通过样式表,直接给该标签用css语法指定样式
好像就没有了,想不起来了……

注意点:我这里写得很简略,但是用法很复杂的,首先要注意申明格式,在html里面,属性定义用等号+引号+空格定义,比如:
  1. <div id="div1" class="div1_class" name="div1" style="width:30px; height:50px; background:#333; ">
复制代码
你注意到了在style里面申明的css属性使用冒号+属性值+分号隔开的,这是不同的哦

其次是用法的解释:也许你看到这里对html和css还一知半解,这个时候你只要做一件事情,用VScode软件的另存为功能保存一份html文档文件,然后把这份html用浏览器打开,然后按F12打开开发人员工具,边修改里面的属性值边看实际效果,实践出真知哦。

最后,我为了精简内容,好像忽略了很多理论上的要点细节,我这里重新解释一下html和css的关系:
html只负责文档内容的展示,比如页面的文字和图片;而css负责文档内容的美化,包括制定位置、大小、宽度、阴影、颜色、文字效果、行间距等等属性,把美化和文档内容分离,这样如果希望修改页面风格的话,就可以在不破坏原文档内容的基础上直接修改css。

接着,为了维护方便,css代码可以保存成单独的"我是任意的css名字.css",就像我们这里用到的一样,在html文档里面用link标签引入;或者是用style标签写在文档头部;再或者,用html的某个标签的style属性,作为该标签的一个属性定义在标签里面,当然这样就达不到内容和风格分离的效果啦。
有一件很悲催的事情,我这份css文字暂时只定义了框架(窗体)和按钮的样式,其余的样式还没定义,还达不到我希望地提供模板地效果,目前大家想使用还是有难度的,需要一定的html+css的语法知识,手动定义所需要地效果,我会仔细思考如何去更加友好地编写这份说明和更加完善css样式库。
因为下午音乐区地版主突然提出来,所以临时赶了一份说明,逻辑上面应该是比较混乱的,需要继续整理,希望能给版主们一些帮助吧。
最后,html的标签,一定要闭合,一定要闭合,一定要闭合,否则会出大事情的,整个网页会被污染哦!!!更严重的会导致帖子无法编辑,用vs软件检测尽量保证不出语法错误!

关于怎么帖音乐播放器:开启html后,直接把iframe代码粘贴过来就可以了。
签名被小宅喵吞掉了~~~~(>_<)~~~~

签到天数: 173 天

连续签到: 4 天

[LV.7]常住居民III

国庆70周年纪念技术宅七周年野良神|雪音野良神|一岐日和野良神|毘沙门天我英|芦户三奈我英|上鸣电气我英|轰焦冻鬼灭之刃|灶门祢豆子宫崎骏|龙猫3宫崎骏|龙猫1宫崎骏|无脸男宫崎骏|吉吉宫崎骏|卡西法阴阳师|判官阴阳师|酒吞童子

发表于 2018-5-30 15:27:48 | 显示全部楼层
友情补充:还有两款编辑工具个人感觉挺好用的  

HBuilder  【下载

sublime 【下载
签名被小宅喵吞掉了~~~~(>_<)~~~~
回复 支持 反对 送花

使用道具 举报

本版积分规则

小黑屋手机版腾讯分析

JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!JS of wanmeiff.com and vcpic.com Please keep this copyright information, respect of, thank you!

GMT+8, 2020-4-6 02:52 Processed in 0.126456 second(s), 41 queries .

© 2020 技术宅(基宅) Powered by Discuz! X3.4 Theme by Jvmao 粤ICP备18082987号-1

快速回复 返回顶部 返回列表