喵宅苑 MewoGarden × 技术宅社区II | Z站 Z Station

正文

作者:Blue_sdo

<div class="gn_content"> <div class="gn_box">使用前，请先开启帖子的HTML功能哦！</div> <div class="gn_title"><span></span>简介</div> <p>唔……大家之前有看到我排版的比较漂亮的帖子，我终于有闲心去把样式库写好了（日常使用应该够了），下面是使用说明。</p> <div class="gn_title"><span class="gn_title_red"></span>颜色主题</div> <p>我在样式库里给大家预置了3个颜色主题，分别是蓝色（默认颜色）、红色、和绿色。看下面的三个按钮：</p> <div class="gn_btn">蓝色按钮</div> <div class="gn_btn gn_btn_green">绿色按钮</div> <div class="gn_btn gn_btn_red">红色按钮</div> <p>3个按钮的代码如下：</p> <div class="gn_box">

<div class="gn_btn">蓝色按钮</div> <div class="gn_btn gn_btn_green">绿色按钮</div> <div class="gn_btn gn_btn_red">红色按钮</div>

</div> <p>你可以随意选择你喜欢的颜色，注意，div标签在不添任何class属性的情况下，代表，100%宽度，根据内容自动调整高度的一个“盒子”，在指定class样式后会根据样式规定进行调整，我这里统一使用div标签来生成“盒子”。</p> <p>你可以直接复制代码到任何一个开启html功能的帖子里面查看效果哦！（注意该功能只对版主开发）</p> <div class="gn_title"><span class="gn_title_green"></span>正文和标题</div> <p>HTML文档格式中规定，换行使用“<br>”标签，通常情况下，如果你没有在行的末尾添加br标签的话，用回车换行是无效的。</p> <p>要写正文内容的时候，请先用div标签生成一个“盒子”，并指定它的class属性为content，像这样：</p> <xmp> <div class="gn_content">这里是正文内容</div> </xmp> <p>然后在class属性为gn_content的标签里，添加标题和段落，要添加标题，请使用以下代码来生成，就像本文的3个标题一样：</p> <div class="box">

<div class="gn_title"><span></span>我是蓝色标题</div> <div class="gn_title"><span class="gn_title_red"></span>我是红色标题</div> <div class="gn_title"><span class"gn_title_green"></span>我是绿色标题</div>

</div> <p>不理解直接复制粘贴即可。</p> <p>然后是段落，在class属性为gn_content的盒子里，使用p标签可以生成一个首行缩进2字符，文字大小15px的段落，如下图示：</p> <xmp> <div class="gn_content"> <p>我是段落A</p> <p>我是段落B</p> <p>我是段落C</p> </div> </xmp> <p>然后是灰色的块，像本文开头的那句话一样，使用class属性为gn_box的div标签生成一个灰色圆角块，如下代码：</p> <div class="gn_box">

<div class="gn_box">这里可以写一些东西，或者存放代码。</div>

</div> <p>各种div标签可以随意组和，但是注意，只有在class为content的盒子下，p标签的缩进才会按上述给定的标准。</p> <div class="gn_title"><span></span>卡片容器</div> <div class="gn_card"> <div class="gn_card_body"> 将div的class属性设置为gn_card，将会生成一个卡片，就像本文的样子。一个卡片分为头部header（通常用于写标题），和身体body（通常用于写卡片内容），生成一个具有头部和身体的卡片，请使用：<br>

<div class="gn_card"> <div class="gn_card_head">我是头部</div> <div class="gn_card_body">我是身体</div> </div>

效果如下： <div class="gn_card"> <div class="gn_card_header">我是头部</div> <div class="gn_card_body">我是身体</div> </div> </div> </div> </div> </div>

打开百度

作者:Blue_sdo

<div class="gn_btn gn_btn_green><a href="http://www.baidu.com" target="_blank">打开百度</a></div>

那改成这样

查看回复

本帖最后由戴蒙先生于 2018-5-2

作者:戴蒙先生

[i=s] 本帖最后由戴蒙先生于 2018-5-25 22:21 编辑 <br /><br />不是很懂，测试一下<br><br> 换行符<br> <div class="gn_box">所以这是类似引用</div>

<div class="gn_box">所以这是类似引用</div>

<br> <div class="gn_btn gn_btn_green">下载地址</div>按钮怎么添加链接呢？

<div class="gn_btn gn_btn_green">下载地址</div>

<br> <div class="gn_box"> <div class="gn_title"><span></span>剧情简介</div> <div class="gn_content"> <p>彼得帕克（汤姆·赫兰德 Tom Holland 饰）在内战后受到了钢铁侠托尼斯塔克（小罗伯特·唐尼 Robert Downey Jr. 饰）的赏识，表面上，彼得进入托尼的公司成为了一名实习生，实际上，他和复仇者联盟的成员们一起接受了各种各样的训练。托尼虽然欣赏彼得的勇敢和正直，却并不认为他目前已经拥有加入复联的实力，他派出了特工哈皮（乔恩·费儒 Jon Favreau 饰）暗中观察，这让十分想证明自己的彼得感到万分焦躁。 </p> <p>在对付两个银行劫匪的过程中，彼得发现劫匪们使用的是一种前所未见的新型武器，他孤身一人深入敌后顺藤摸瓜找到了幕后主使秃鹰（迈克尔·基顿 Michael Keaton 饰），让他彼得没有想到的是，秃鹰竟然是他爱慕的女生利兹（劳拉·海瑞尔 Laura Harrier 饰）的父亲。</p> </div> </div>

<div class="gn_box"> <div class="gn_title"><span></span>剧情简介</div> <div class="gn_content"> <p>段落1 </p> <p>段落2</p> </div> </div>

<div class="gn_btn"><a href="https://www.baidu.com/" target="_blank">百度一下</a></div>

<br> <br> 排版真好看@@22!!

查看回复

我也试一试

作者:老王的右手

<div class="gn_btn">我也试一试</div>

查看回复

大佬又是你！【前排围观

作者:bowencraft

大佬又是你！【前排围观

查看回复

感觉这样好好看啊

作者:bowencraft

<div class="gn_box"> <div class="gn_content"> <div class="gn_title"><span></span>感觉这样好好看啊</div> <p>wwww</p> </div> </div>

查看回复

本帖最后由千梦于 2018-5-15

作者:千梦

[i=s] 本帖最后由千梦于 2018-5-15 14:19 编辑 <br /><br /><div class="gn_title"><span class="gn_title_red"></span>这么厉害，年纪大了，操作不来，觉得还是随性比较好</div> <div class="gn_btn gn_btn_green">然后我就好奇的试了下</div>

查看回复

通用范例：<br> <div class

作者:Blue_sdo

通用范例：<br> <div class="gn_box"> <div class="gn_content"> <div class="gn_title"><span></span>蓝色默认标题</div> <p>一个段落A</p> <div class="gn_title"><span class="gn_title_red"></span>红色默认标题</div> <p>一个段落B</p> <div class="gn_title"><span class="gn_title_green"></span>绿色默认标题</div> <p>一个段落C</p> 一个普通文本带换行<br> </div> </div> <br> <div class="gn_box">

<div class="gn_box"> <div class="gn_content"> <div class="gn_title"><span></span>蓝色默认标题</div> <p>一个段落A</p> <div class="gn_title"><span class="gn_title_red"></span>红色默认标题</div> <p>一个段落B</p> <div class="gn_title"><span class="gn_title_green"></span>绿色默认标题</div> <p>一个段落C</p> 一个普通文本带换行<br> </div> </div>

</div>

查看回复