自定义模块功能排版HTML标准规范

admin

关于自定义版块移动的说明：以下涉及后台操作的重大调整
为了防止图文误删自定义版块设计，为了让图文更清爽专业性，支持NET版的自定义版块做了改善，单独开辟新的“功能版块设计”，在这儿你可以将图文设计迁移至此处进行录入，这样图文清静了，也不怕设计版块被新手误删了。
当然，原图文设计方法，依旧保持，选择哪一种，都是您的自愿，如果您的系统不支持商业版，请耐心等待统一升级。

HTML标签及其规范的意义与写法
div：不相关内容换行，一般用于不同性质、功能、模块、范畴的毫不相关的内容块排版，不同级别，
写法：<div>非文章段落内容</div>
h[1-5]：是指h1,h2,h3,h4,h5等，这是标题的特列用法，可以用div来实现

p：文章段落，
写法：<p>段落文字</p>，

br：多段落文字内部换行，
写法：<p>段落文字<br>段落文字<br>段落文字</p>

ul li：列表，用于相同级别的内容列表排版，下级可以增ul li，
写法：两级列表有两个ul li：<ul><li></li><li></li><li><ul><li></li><li></li><li><l/i></ul><l/i></ul>

dl dt dd：也是列表，特指有标题的列，dl相当于ul，dt dd相当于li内容，dt特指li内容的抬头标题，dd即li普通的内容顺文
写法：<dl><dt></dt><dd></dd></dl>，其标签可以用ulli来实现

section：特指要区别的两个版块，其作用和div相当，但更明确指定了这是版块功能。
写法：<section></section>，也可以用div标签代替，该标签可用可不用

如果标签很多且重复了，那么我们必须赋予每个标签的意义，这时候就用到了 class和id
一般来说，我们只用class，那么下文就没有id的说法了，不说其实也等于说了，和class一样只不过是一标识标签的一个英文词
写法：
如div，<div class="标识意义的英文">注意class内容不能是中文哟</div>
如section，<section class="英文字母">内容</section>
如p，<p class="lineN">class不分大小写，英文有意义，自己懂，也要让别人理解</p>
如h[1-5]，<h3 class="h3">大小偏中的标题</h3>，<h1>大标题</h1>

是不是写了标签就能实现图片？
不是的，你只管写HTML，其实还需要配合前端CSS，不会，就交给专业人士吧。
一般来说，交付的网站，CSS都已经编写好了，只要不乱改标签，都不太可能破坏版面页布局的。

不会写标签的快速解决方案
如果你会Word排版，可以在word中将图文排版好，然后复制粘进后台内容编辑器，先清除HTML代码，再点击一键排版，位置在编辑器一排右侧可找到。

未完待增加

admin

比如实现以上方案设计步骤：
1、登陆后台，菜单增加版块，比如：天然水菜单，功能为图文，栏目显示方式选单页图文
2、进入图文管理，新增，选中天然水菜单目录，在标题标注：天然水版块设计，不要删除的字样，避免图文管理时误操作。
3、在内容管理的编辑视图里，找到第一行第一列HTML代码小图标，点击进入代码编辑状态。
4、录入以下代码

<div class="explore bg py-5">
        <div class="container">
                <div class="RowsTitle">
                        <h3 class="Title">
                                <div class="cn">
                                        感谢大自然的馈赠
                                </div>
                                <div class="en">
                                        THANK NATURE FOR ITS GIFTS
                                </div>
                        </h3>
                </div>
                <div class="py-4 mt-4">
                        <div class="row justify-content-between">
                                <div class="col-lg-auto box p-5 p-lg-5 bg-white">
                                        <h2 class="fst">
                                                真正的天然·硒水
                                        </h2>
                                        <h5 class="gray-600">
                                                源自北纬30°石台县仙寓山牯牛降林区
                                        </h5>
<img src="../uploadfiles/picture/img_29.jpg" class="w-100 my-4" alt="源自北纬30°天然·硒水" />
                                        <div class="text-right">
                                                历经七个月零二十三天寻找到未污染的天然水源
                                        </div>
                                </div>
                                <div class="col-lg-4 mt-5 mt-lg-0 p-5 p-lg-5 bg-white question">
                                        <h5 class="fst alert">
                                                饮用水可能存在的问题
                                        </h5>
                                        <ul class="d-flex flex-row flex-wrap">
                                                <li class="col-5">
                                                        01泥沙
                                                </li>
                                                <li class="col-7">
                                                        06重金属
                                                </li>
                                                <li class="col-5">
                                                        02余氯
                                                </li>
                                                <li class="col-7">
                                                        07大肠杆菌
                                                </li>
                                                <li class="col-5">
                                                        03铁锈
                                                </li>
                                                <li class="col-7">
                                                        08伪纯净
                                                </li>
                                                <li class="col-5">
                                                        04细菌
                                                </li>
                                                <li class="col-7">
                                                        09小颗烂
                                                </li>
                                                <li class="col-5">
                                                        05异味
                                                </li>
                                                <li class="col-7">
                                                </li>
                                        </ul>
                                </div>
                        </div>
                </div>
        </div>
</div>
所有代码只涉及到了div h? ulli三个标签，是不是很简单。