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

正文

新宅装修

作者:系统
{"name":"新宅装修","sizeType":1,"icon":"","order":9999}

回复

小宅:嘿,朋友,想要一个新家吗?

作者:Blue_sdo
从2011到2017年,已经过去6个年头了,技术宅走过了一段辉煌的历程,在这里,你也许曾经有过欢笑、有过痛苦、有过各种心酸历程……也许,技术宅陪你度过了人生的一小段时光……随着时间的流逝,时光的时钟逐渐指向了2018年…… 也许,你用你的iPhone、华为、小米……的时间越来越多了……可是,每当你躺在床上,想要回到社区一番畅聊的时候,你会发现,迎接你的是这样的一个页面:(左图),可是你心目中的手机页面应该是长成这样的:(右图)。
[attach]479025[/attach][attach]479024[/attach]
很快地你会发现,你用手机再不能像电脑那样在宅区进行流畅的交流了,于是心生落寞的你,逐渐和技术宅疏远了…… ====== 别急,我希望做出一些改变,创建一个全新移动平台的技术宅社区,将你曾经贮存宅这里的点点滴滴,搬到你的手机上,搬到离你最近的地方…… 那么,该回家了,朋友~ ====== 关于这个板块: 我们希望,在移动平台的技术宅是个全新的开始,技术宅原有的板块,无论是版规还是板块的活动、内容,都是各个版主以及会员们呕心沥血的成果,但是我们仔细翻阅了它们,发现里面制定的规则和各种内容,已经严重不适用在手机上操作了。介于此,我们决定全新开设一个空白的板块,作为我们在手机上新家的全新开始,也许,它现在还什么都没有,它很丑陋、很孤独、看着身旁的哥哥姐姐们(其余板块)英姿飒爽,很不是滋味,但是我们会不断完善它,改进它,吸收其他电脑板板块的优势,逐渐让它长大,变好看,变可爱,变帅…… 等到了后期,我们再逐渐将它同技术宅原有的板块对接,恢复宅区曾经的辉煌! ====== 关于技术的那些事: 手机版本的页面我们正在紧张地筹备中,大家敬候佳音,在完成度>50%的时候,我们会给出上线的具体时间。同时,在和移动版本对接的过程中,我们会对论坛的板块进行一些小小的微调,大家如果有时候发现路口的牌子不对,是正常滴。关于任务君,在后续的过程中我们会把它迁移过来,但是现在,拿出你的手机,就可以暂时远离任务君的恐怖调教~ ====== 其他的东西: 大家对于手机版的社区有什么建议(比如板块的布置,活动的设置)或想法,欢迎在下面回复交流,尽情发挥。 同时,新版的社区也在紧锣密鼓地筹备中,大家如果对新社区有什么意见建议:比如板块规划等,也可以在下方提出。
查看回复

大家,快来把宅子出的各种小毛病(bug)反馈到我这里

作者:Blue_sdo
为了便于交流 就不写长篇大论了 比如链接失效啦 帖子审核怎么也通不过啦 图片显示不出之类的 晚上维护进行统一处理 ==== 刚刚上任 若有处理不当之事请大家包容哈~
查看回复

版主手册 - 动态帖子修炼手册

作者:Blue_sdo
<div id="basc" class="gn_content"> <div class="gn_box"> 这里是帖子排版滴进阶教学,嘘(禁声),敲黑板(咚咚咚)。<br> 好吧,与其说是进阶,其实是现对上个版本而言的。这里将从零开始教会你所有必须的知识,对,从零开始。<br> </div> <div class="gn_title"><span></span>标签</div> <p> 你所见之的技术宅社区的全部网页内容,寻根究底,无非是基于HTML语言的一系列HTML文档,如同用World编写一系列的doc文档。 而我们说发布的帖子,就如同你给一份原有的world文档增添新的一个章节。(想象一下这个画面) </p> <p> 首先打开你的浏览器(Chrome、或者火狐,或者任何一个除老土的IE以外先进的浏览器),打开百度首页(www.baidu.com)或者浏览其它任何一个网站, 敲击键盘上的F12按键打开开发者工具,你便可了然一份网页的真身,如图所示。 </p>
[attach]485102[/attach]
<p> 单点击左边的三角折叠起来其中复杂的内容后,显而易见,一份HTML文档,是以一系列相互嵌套的尖括号包裹的标签构成的。 用拙劣的英文水平将其翻译,可得:整个HTML文档,首尾以“HTML标签”包裹,随之而来的是一个“头部标签”——head,紧接着是一个“身体标签”,而后……就没有而后了。 网页的全部结构便呈现于此。事实上,<strong>标签,是构成网页结构的基本单元(元素)</strong>。 </p> <p> 通常来说,网页所要呈现在浏览器上面的内容都写在body标签里面,如下图所示。而head标签,则是给浏览器在加载页面的时候读取信息用的。例如 我们可以像下面的这份代码一样,给head标签里添加一个title标签,顾名思义,是标题的意思,那么浏览器在读取的时候,就将标题呈现在 网页的顶端。 </p>
<!doctype html> <html> <head> <title>我是标题</title> <!--注释:呈现在网页顶端--> </head> <body> 我是正文内容 <!--注释:呈现在网页正文空白处--> </body> </html>
[attach]485104[/attach]
<p> HTML文档里有各种各样的标签,如同给world文档添加字体、字号、段落一样,HTML文档通过标签给内容添加各种效果。比如,我们可以使用p标签来 生成一个段落,使用br标签换行(br标签不是成对的,一个标签代表一行),使用strong标签来给文本加粗(粗体)等等。HTML的常用标签,借助万能的百度, 你可以轻而易举地学习到很多,这里便不再赘述。 </p> <div class="gn_title"><span></span>盒子和样式</div> <p> 前面我们了解到了,标签是构成网页文档的基本单元,那么现在我们来学习一个万能的标签,它叫做“div”。打开一个记事本,输入如下内容,保存为HTML文档 而后使用浏览器打开即可看到效果。 </p>
<!doctype html> <html> <head> <title>我是标题</title> <meta charset="utf-8"> <!--注释:这里不懂可以百度一下哦--> <style> #div1{ background:grey; color:white; } #div2{ background:red; color:white; width:200px; height:200px; } </style> </head> <body> <div id="div1">我是没有定义宽高,灰色背景的div1</div> <div id="div2">我是宽高为200像素,红色背景的div2</div> </body> </html>
<p> 我们在body标签里面加上了一个style标签,顾名思义,样式、风格、主题的意思。前面我们提到过,head标签里面写的内容是给浏览器读取的, 现在我们便将body标签里的两个div,我将它们分别写上了id,为div1和div2,添加了样式规则。(其中的英文很好理解,就不解释了,字体颜色 、宽高、背景颜色什么的)那么浏览器读取的时候,就会按照我们规定的规则,将div呈现出来。如下图。 </p> <p> 注意一条特征,div标签在没有定义宽度的时候是100%宽度,即撑满整个浏览器页面,那么我们可以将div标签理解成一个你可以任意定义的盒子, 你希望它长成什么样,完全取决于你在style标签里给他的样式。关于style标签和div的更多内容,欢迎通过百度了解。 </p> <div class="gn_title"><span class="gn_title_red"></span>脚本,算法和数学</div> <p>在body标签还有一个奇特的标签,叫做script标签,在这里放置的东西,是可以进行数学运算的。要学习这个概念之前,请先准备两个工具,一个是记事本,一个是浏览器。</p> <div class="gn_title"><span class="gn_title_red"></span>变量</div> <p> 我们前面有提供网页的基本结构,将其全部复制到记事本,清空body标签里面的全部内容,并另存为后缀为html的文档,用浏览器打开查看效果。 每操作一次可以刷新一下浏览器查看最新的效果。 </p> <p>我们在head标签里面添加一个script标签,并在里面写上“var a = 3; alert("a")”。你写完后的效果应该是如下的样子。</p>
<!doctype html> <html> <head> <title>我是标题</title> <script> var a = 3; alert(a); </script> </head> <body> </body> </html>
<p> 打开浏览器运行后,你会发现它弹出了一个“数字3”。什么意思捏?在script标签里面,可以写上一段数学运算脚本,通过var关键字,可以定义 一个变量。这里,我们把a变量的值设定为3;而后我们通过alert来弹出a变量的值,也就是3。alert(XXX)是什么?alert可以帮助我们召唤浏览器 的弹窗,对我们定义的各种数学量进行呈现,比如括号里面放的便是需要呈现的东西的名字,比如这里我们就希望它呈现变量a的值。 </p> <p> 你可以多加尝试,比如这样写“var a = 3 + 5;alert(a)”弹出来的一定是8,请注意在script标签里,所有的量都可以“计算”。你也许注意到了分号, 一句话的结束,可以在尾部加上分号,这样就避免了换行的麻烦,总之需要一个分隔符把它们隔开。script的中文名叫做“精灵”,或者“脚本”,这里翻译 为脚本更合适。写脚本的时候,需要一句一句来,每句话结束用分号隔开。你还可以做这样的尝试:“var a = 3;var b = 9;alert(a+b)”。你可以很容易理解 什么叫做一句话。这里的一句话,我们称为“语句”。 </p> <div class="gn_title"><span class="gn_title_red"></span>数组</div> <p> 很多时候,我们也许需要一个一行n列的表格来存储一系列的值,那么,当我们使用“var a = 3;var b = 5;var k = 18;”诸如此类的变量未免太过于麻烦。 此时我们可以使用数组来存储一系列的值。使用一对方括号来生成一个数组:“var array = [3,4,17]”。其实,var关键字可以定义任何东西,而非仅仅是变量。 我们通过使用“alert(array[0],array[1],array[2])”来分别弹出数组array在第0个位置,第1个位置和第2个位置存储的数值,那么弹出的结果自然是3,4和17。 我们也许会很奇怪为什么是从0开始算位置的,但是这是电脑的特性,即规定了从零开始计数,我们记住它即可。 </p> <div class="gn_title"><span class="gn_title_red"></span>数组</div> </div>
查看回复

斑竹滴帖子排版手册

作者: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>
查看回复

【草稿】【讨论】技术宅2018板块改组、调整方案

作者:Blue_sdo
#3m 方案内容迁移至技术宅+ 欢迎大家参与讨论 [戳我进入]
查看回复

【2018】春节&amp;元宵 活动报备登记中心

作者:Blue_sdo
迎着2018年新春新年的钟声,技术宅新的社区UI和首页也刚刚上线,版主们若有举办什么活动的话来这里登记报备可以获得后台的支持哦 本次登记的所有活动都将会在新版首页展示,展示位置包括首页的幻灯,和幻灯下的大条帖子调用{:45_9091:}
那么老规矩,按格式在本贴下回复,无关回复直接删除:
活动举办范围:(请注明板块名,允许跨板块举办) 活动举办时间: 活动内容描述: 活动地址链接: 活动面向对象: 是否需要官方微博宣传: - 微博宣传稿件内容:(用code标签包裹) 是否需要首页幻灯片宣传: - 首页幻灯片贴图至此:(附件会有压缩,建议大家以图床方式贴图到这里,尺寸:710*310的整数倍为了避免模糊请尽量大于该尺寸,推荐为:1080*472) 首页大条调用图[必须随便找一张适宜的图均可]:(要求同上,尺寸:190*130的整数倍,为了避免模糊请尽量大于该尺寸) 备注:
新增加两条说明哦: 首页幻灯片调用的是贴图调用板块的帖子,如果你觉图片符合要求可以直接到该板块发帖,帖子格式参考该板块其余帖子,10分钟以内会被首页幻灯片自动读取并展示。 首页左栏调用的是栏目调用板块的帖子,帖子格式必须包含,首页展示用的介绍文字,写在最前面,展示用的图片(199*130)以及戳开后跳转到的帖子地址,具体格式参照本板块其余帖子,10分钟之内会被首页自动读取并展示。 附录: Discuz代码语法参考 排版模板格式及说明 召唤阵:
宅区: @。茶 @戴蒙先生 @F丶异声。@月夜琉璃猫 @千梦 @曲十一 @桜子 @少年时 @SsonicR @demoa @柳弃号 @_小神马 @tony168 @苏幕 @wugy315 @485543 @黑猫爱 @时记之日晷 @青辰 @不二Sama 技术区: @黑猫小丫头 @蛋挞妹。 @math1as @囧阿花 @M伽_ @小周的吐槽窝 @好害羞的的说~ @Yuuki_Asuna @ZoiiOh @尘埃之里 @whisky骷髅 @非陌痕 @OOOOO @荷卷卷 @这里是miku君 @服毒君 @柒指 @小宇很厉害 @胃痛君 @RangerCD 动漫区: @-★PiaoBaoLaN。 @澈儿 @_VastCast @娜叔_ @fxxxxl @尉迟辰 @地狱蝶 @命。 @威尔士的冬天 @叮当。@_小神马 音乐区: @SnakeMirror @1Ive1 @ 跳动的音乐旋律 @kozora @❤二姐 @纳兰子涵 @ 兔子乖 @酸酸酸酸酸 @、Neko @素米 @牧羊骚年 @【基宅】阴阳师 @乱·攻爷 @奔放的蘑菇 @RangerCD @酸酸酸酸酸 @ 非陌痕 文学区: @balanlannie @荷卷卷 @Suzuki_study @小诗哥 资源区: @晗晗晗子桑 @whisky骷髅 @Kop @oing_l @时记之日晷 @balanlannie 设计组: @小懒丫头 @Alaudi 工作组: @Nekor @澈儿 @茶。 @Blue_sdo @氺菓 @jadetb @-★PiaoBaoLaN。@_Nozomi @桜子
我按后台管理面板AT的,有遗漏记得提醒我哈~
查看回复

[算是临时的]技术宅社区 手机客户端|APP

作者:Blue_sdo
# 1 我觉的为了大家更方便的手机交流,我还是发出来吧 其实就是用手机浏览器访问的移动版社区,打包成了一个APP 可能运行速度上会比浏览器版的略快一点=1012= ---我是分割线--- # 2 目前存在的问题: 1.任务君不能用,还是辛苦大家用电脑做任务吧=683= 2.有一部分系统消息收不到,比如帖子被回复,被at的消息等 3.电脑版内置的表情不能用了 4.搜索功能搜索到结果无法动态加载,只能显示前面几条 5.其它神奇的问题 ---我是分割线--- # 3 手机版是在Discuz应用商店购买的,存在的问题需要联系供应商解决……但是那边响应好像不怎么及时,bug解决比较慢=464= 为了便于手机阅读我就不用复杂的代码排版了,简洁些比较好 下载地址(安卓+苹果):[微云网盘]
查看回复

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

作者:Blue_sdo
<link rel="stylesheet" href="template/Gui/Gui.css" type="text/css" /> 如果你曾经没有接触过,你只有全部看完反复斟酌才能够理解哦!<br> 名词解释:div - 块,层,无限扩展宽度矩形 ;html - 超文本标记语言;css - 层叠样式表; class - 类,类别,样式,风格;<br> 一、必备工具:<br> 1、Chrome、Edge、Firefox浏览器开发人用工具(F12)<br> 2、VScode[简介][下载]<br> <br> 二、帖子编辑模式开启使用HTML代码、使用纯文本模式<br> [attach]480528[/attach]<br> <br> 三、使用说明<br> HTML代码和Discuz代码类似,使用<标签名></标签名>包裹内容对内容进行格式化,但是不同的是,可以单独通过CSS外部样式表对HTML文本内容进行位置、尺寸、字体字号、颜色、等各方面进行美化排版,从而实现对帖子排版效果。我模仿腾讯的Qui手动写了一套CSS样式表,给技术宅帖子排版专用,会持续更新和维护,下面是使用说明:<br> <br> 1、用<link></link>标签或css标签内部的@import方式引入外部样式表<br> ①用VScode新建一个空白文件,格式调整为HTML:<br> [attach]480529[/attach]<br> ②写入如下内容引用外部样式表<br>
<link rel="stylesheet" href="template/Gui/Gui.css" type="text/css" />
2、生成窗体<br> 然后若在不修改颜色的情况下,直接按如下格式生成“窗体”,你如果手打的话,VScode软件会帮助你排版哦,用VScode软件全部编辑完内容,复制粘贴到技术宅的发帖框就完成啦!<br>
<link rel="stylesheet" href="template/Gui/Gui.css" type="text/css" /> <div class="vars window_core"> <div class="vars window_head"> <div class="vars window_title">这里填写窗体标题</div> </div> <div class="vars window_body window_body_content"> 这里填写正文内容 </div> <div class="vars window_foot"> 这里是底部 </div> </div>
生成的效果如下图:<br> <div class="vars window_core"> <div class="vars window_head"> <div class="vars window_title">这里填写窗体标题</div> </div> <div class="vars window_body window_body_content window_body_dialogue"> 这里填写正文内容 </div> <div class="vars window_foot"> 这里是底部 </div> </div> 在div标签中,class是该标签的属性,上面外部引用的css文件中定制了这个div标签的外观,看第一条div标签
<div class="window_core">
其css文件的内容描述如下:<br>
.window_core { /*框架属性*/ min-width: 420px; /* 这里定义了最小宽度 */ width: 500px; /* 这里定义了宽度 */ border: none; /* 这里定义了描边样式为:无 */ border-radius: 5px; /* 这里定义了边框有5个像素的圆角 */ box-shadow: var(--window_shadow); /*这里定义了最小宽度*/ /*颜色属性*/ background: #fff; /*这里定义了背景颜色*/ }
其中
用/* 我是注释 */
包裹的内容是注释,不会被浏览器程序解析,我这里只是阐释下原理哈,不对css文件进行具体的说明,你可以用浏览器直接下载那个外部样式表,用VScode查看里面的具体定义。你需要知道的是什么捏?<br> <br> 比如上面我定义了窗体的宽度是500像素,可是你想让窗体铺满整个发帖页面肿么办?这里留一个悬念,等下会说明。<br> 3、div的class介绍<br> 我在css样式表里面用一系列的样式,对每个div标签进行了不同的定义,以完成不同的效果显示,div标签在没有进行任何定义的情况下,你可以现象成一个没有颜色的长方形,无限延伸到浏览器边界两边,上下有一个换行(world里面的一个回车换行符),就如同一张白纸,我给它规定了各种属性,让它变成符合要求“长方形”;于是就有了你看到的每个div我赋予了不同的属性。<br> <br> 比如我用window_head定义了窗体的头部,那个div标题的那个彩色的矩形条;用window_title定义了矩形条上文字的字号,颜色等属性;用window_body window_body_content window_body_dialogue 一系列的组合class属性,定义了内容正文的相关属性;用window_foot定义了底部的内容的相关属性。<br> <br> 你大概了解了这些就可以,因为这些我都在css样式表里面定义好了,直接copy进去用,改一下标题文字就OK啦,下面你要认真学习的是正文部分怎么排版。<br> 4、“我不管,我要先改一下颜色,这颜色不好看!”<br> 你注意到每个class前面都写了一个“vars”了吗,这是啥?我在css样式表最头部写了一个可以供下面样式表调用的变量(不要问我变量是啥,就是高中函数里的那个变量,你让它等于多少,代入到函数里就是多少);我没有把全局的颜色写死了哦,你可以直接在vars里面修改颜色属性的变量,然后css就会自动带入到全局里面去替换原来相应的颜色值。<br> ①首先,你在link标签和div的窗体标签之前插入一个style标签,用来替换外部css文件里面对“vars”class的定义,你要记住哦,在css里面,如果在上面和下面定义了同样一个规则,下面的规则一定会覆盖上面的,也就是说上面的规则就失效了,采用最下面的那条规则,根据这个原理,我们在link引用的css样式表下面用一个style标签,重新定义里面的颜色变量:
<link rel="stylesheet" href="template/Gui/Gui.css" type="text/css" /> <style> .vars { --color_light: #fff; /*这里定义了窗体的高亮颜色,比如标题、按钮的文字颜色*/ --color_light_plus: #eee; /*这里定义了比高亮颜色暗一点点的颜色,用于按钮上文字的点击效果*/ --color_dark: #ed5858; /*这里定义了窗体的暗、深的颜色,比如标题背景颜色、按钮背景颜色*/ --color_dark_plus: #ff5e5e; /*这里定义了比窗体暗颜色深一点点的颜色,用于按钮的点击效果*/ --window_shadow: 0 2px 20px 0 rgba(0, 0, 0, .15); /*这里定义了比窗体的阴影效果不建议修改*/ --window_border_color: #999; /*这里定义了边框颜色*/ } </style> <div class="vars window_core">
比如我现在想把窗体颜色改成黑色,可以这样写:<br>
.vars { /*公用变量库*/ --color_light: #fff; --color_light_plus: #eee; --color_dark: #333; --color_dark_plus: #000; --window_shadow: 0 2px 20px 0 rgba(0, 0, 0, .15); --window_border_color: #999; }
但是我在前面有用原先的样式写过一个窗体,如果我直接修改这个样式的话,上面的样式也会同样被更改的,所以我改了下名字,把vars改成了varsx,把下面所有的 class="vars wind…… 改成 class="varsx window……,这样就可以用新颜色啦;如下:</br> <style> .varsx { /*公用变量库*/ --color_light: #fff; --color_light_plus: #eee; --color_dark: #333; --color_dark_plus: #000; --window_shadow: 0 2px 20px 0 rgba(0, 0, 0, .15); --window_border_color: #999; } </style> <div class="varsx window_core"> <div class="varsx window_head"> <div class="varsx window_title">这里填写窗体标题</div> </div> <div class="varsx window_body window_body_content window_body_dialogue"> 这里填写正文内容 </div> <div class="varsx window_foot"> 这里是底部 </div> </div> ②于是,前面不是提到了要修改宽度吗,你可以酱紫在style标签里面重定义.window_core的宽度:<br>
.window_core { /*框架属性*/ width: 100%; /*100%的意思是铺满整个容器哦*/ }
5、正文编写<br> 好啦,终于要切入主题了,正文部分肿么写?<br> ①完全使用discuz代码和排版:在正文部分创建一个pre标签,包裹你的全部discuz代码,应该能够正常显示,你用通常的discuz排版技巧排版即可。<br>
<pre>我是正文部分,这里可以用discuz代码啦啦啦 我的换行也是有效滴</pre>
②直接使用html规范语法编写:推荐用这种方式,但是你有熟悉html的基本语法哦,下面给出解释: a标签:创建一个链接,语法如下:<br>
<a href="https://www.baidu.com" target="_blank">我是一个链接</a>
和discuz语法的url标签类似,href属性指定了链接的地址;target属性指定了链接的打开方式:在浏览器新标签页打开。a标签中间包裹的是文字部分。更多关于a标签的用法可以参考:这里的说明<br> <br> br标签:换行,html默认是无视换行的,我们需要用一个br标签手动换行。<br>
我是一句话<br>我是第二句话
上面的这两句话实际上是分两行显示的,因为br标签起了一个换行作用。<br> <br> p标签:段落标签,用p标签包裹段落,上下会产生一个换行符;p标签的默认显示样式比较糟糕,可以用style标签里用css单独指定p标签的显示样式哦。<br>
<p>呜啦啦啦啦我是一个段落</p>
<br> strong标签:加粗一段文本,相当于discuz的b标签。
<strong>加粗我,快</strong>
<br> table标签:和discuz代码类似,生成一个表格哦,用法和discuz代码差不多把方括号改成尖括号就可以了,但是颜色等方式不是discuz代码那样指定的噢:<br>
[table] <tr><td>我是第一行第一列</td><td>我是第一行第二列</td></tr> <tr><td>我是第二行第一列</td><td>我是第二行第二列</td></tr> [/table]
大概就简介到这里,更多的标签及用法可以翻阅上面介绍a标签提供的w3school的手册哦<br> <br> 6、属性的说明<br> 所有的标签都有的属性:<br> name属性:定义标签的识别名字<br> id属性:给标签一个唯一的识别id,用于css里面调用<br> class属性:给标签定义类别,css里面制定该类别的样式,和id属性不同的是,class一个样式可以给多个标签调用,而id属性定义的样式是唯一的。<br> style属性:不通过样式表,直接给该标签用css语法指定样式<br> 好像就没有了,想不起来了……<br> <br> 注意点:我这里写得很简略,但是用法很复杂的,首先要注意申明格式,在html里面,属性定义用等号+引号+空格定义,比如:<br>
<div id="div1" class="div1_class" name="div1" style="width:30px; height:50px; background:#333; ">
你注意到了在style里面申明的css属性使用冒号+属性值+分号隔开的,这是不同的哦<br> <br> 其次是用法的解释:也许你看到这里对html和css还一知半解,这个时候你只要做一件事情,用VScode软件的另存为功能保存一份html文档文件,然后把这份html用浏览器打开,然后按F12打开开发人员工具,边修改里面的属性值边看实际效果,实践出真知哦。<br> <br> 最后,我为了精简内容,好像忽略了很多理论上的要点细节,我这里重新解释一下html和css的关系:<br> html只负责文档内容的展示,比如页面的文字和图片;而css负责文档内容的美化,包括制定位置、大小、宽度、阴影、颜色、文字效果、行间距等等属性,把美化和文档内容分离,这样如果希望修改页面风格的话,就可以在不破坏原文档内容的基础上直接修改css。<br> <br> 接着,为了维护方便,css代码可以保存成单独的"我是任意的css名字.css",就像我们这里用到的一样,在html文档里面用link标签引入;或者是用style标签写在文档头部;再或者,用html的某个标签的style属性,作为该标签的一个属性定义在标签里面,当然这样就达不到内容和风格分离的效果啦。<br> 有一件很悲催的事情,我这份css文字暂时只定义了框架(窗体)和按钮的样式,其余的样式还没定义,还达不到我希望地提供模板地效果,目前大家想使用还是有难度的,需要一定的html+css的语法知识,手动定义所需要地效果,我会仔细思考如何去更加友好地编写这份说明和更加完善css样式库。<br> 因为下午音乐区地版主突然提出来,所以临时赶了一份说明,逻辑上面应该是比较混乱的,需要继续整理,希望能给版主们一些帮助吧。<br> 最后,html的标签,一定要闭合,一定要闭合,一定要闭合,否则会出大事情的,整个网页会被污染哦!!!更严重的会导致帖子无法编辑,用vs软件检测尽量保证不出语法错误!<br> <br> 关于怎么帖音乐播放器:开启html后,直接把iframe代码粘贴过来就可以了。
查看回复
上一页
下一页
0%
粤ICP备18082987号-1 浙公网安备 33010902001746号
站点地图友情链接:
喵宅苑
喵空间社区程序
络合兔
技术宅
腕能新趣
小五四博客
莉可POI
Mithril.js
枫の主题社
Project1
午后少年
机智库
七濑胡桃
xiuno
幻想の博客
茶兔社区
乐享社区
魂研社
26云导航
Nothentai
Lanzainc