5.1.代码规范

更新时间：2020-02-18 16:09:56 作者：米拓建站

## HTML规范
- 外层的标签class中必须带`$uicss`，必须带`m-id`，如：
```html
<div class="$uicss xxx" m-id='{$ui.mid}'>
	...
</div>
```
- 网站数据调取
网站数据、简单的数据处理均使用`模板标签`调取，按照 [模板标签大全](http://doc.metinfo.cn/mb/mbtag/ "模板标签大全") 的规范编写。

- 被遮挡元素的可视化编辑：
如果某元素遮挡了其他元素，则该元素标签需加上属性`met-imgmask`，如：
```html
<img src='' / alt="图片关键词" title="图片关键词">
<div met-imgmask></div>
```
加了属性`met-imgmask`的元素在可视化编辑的时候，在该元素上`点击鼠标右键`，会弹出`隐藏该元素`的选项，隐藏后即可对`被遮挡的元素进行可视化编辑`。
![](../upload/202001/1579233222278917.jpg)
![](../upload/202001/1579233249303548.jpg)
---
## CSS规范
- 所有css必须用`$uicss`包起来，如：
```css
$uicss a{
	...
}
```

---
## 公共参数规范
1. 每个UI的设置参数必备背景颜色（继承网站背景颜色），标题颜色（继承模板主色调），副标题颜色（继承模板副色调），经过颜色（继承模板配色调）;
```css
背景颜色：background-color: $bgcolor$;
标题颜色：color:$firstcolor$;color:$titlecolor$;
副标题颜色：color:$secondcolor$; color:$desccolor$;
经过颜色：color:$thirdcolor$; color:$hovercolor$;
```
2. 产品列表页列表内容排序方式：hits（点击），new（新），sales（销量）；
```
<ul>
	<tag action="product.list" order="hits">
	<li><a href="" {$g.urlnew} title="链接关键词"></a></li>
	</tag>
</ul>
```
3. 新窗口打开：
```
内容：$g.urlnew；
例如:
<ul>
	<tag action="list" cid="3">
	<li><a href="" {$g.urlnew} title="链接关键词"></a></li>
	</tag>
</ul>
栏目：$m.urlnew;
例如:
<ul>
	<tag action="category" cid="3" type="son">
	<li><a href="" {$m.urlnew} title="链接关键词"></a></li>
	</tag>
</ul>
```

文档中心

米拓学堂

帮助中心

在线交流

{"status":1,"html":"<style type=\"text\/css\">\r\n.onlinebox_three{border:2px solid;}\r\n.onlinebox_three .onlinebox_three_list{width: 160px;padding: 10px 0px;}\r\n.onlinebox_three .online-item{margin-bottom: 5px; padding: 0px 17px; position: relative;display: block;color: #666;}\r\n.onlinebox_three .online-item:last-child{margin-bottom: 0px;}\r\n.onlinebox_three .online-item:hover{background: #f8f8f8;}\r\n.onlinebox_three .online-item i{font-size: 16px;}\r\n.onlinebox_three .onlinebox-open{font-size: 22px;display:none;cursor: pointer;padding: 0 10px; font-size: 18px; line-height: 40px;}\r\n.onlinebox.min .onlinebox-open{display:block;padding:0 10px;background:#444;font-size:18px;line-height:40px;color:#fff}\r\n.onlinebox .onlinebox-min{position: relative;top:-4px;}\r\n@media (max-width: 767px){\r\n.onlinebox_three .online-item{font-size: 12px;padding-top: 6px;}\r\n.onlinebox_three .online-item i{font-size: 14px;}\r\n}\r\n<\/style>\r\n<div id='onlinebox'  class=\"onlinebox onlinebox_three hide\" m-type='online' m-id='online' style=\"border-color:#1baadb;\">\r\n    <div class=\"onlinebox-open\" style=\"background:#1baadb;\"><i class=\"fa fa-comments-o\"><\/i><\/div>\r\n    <div class=\"onlinebox-box\">\r\n        <div class=\"onlinebox-top\" style=\"background:#1baadb;\">\r\n            <div class=\"onlinebox-top-btn font-size-26\">\r\n                <a href=\"javascript:;\" class=\"onlinebox-close\" title=\"\">×<\/a>\r\n                <a href=\"javascript:;\" class=\"onlinebox-min\">-<\/a>\r\n            <\/div>\r\n            <h4>在线交流<\/h4>\r\n        <\/div>\r\n                                    <div class=\"met-editor onlinebox-bottom p-x-10 p-y-5\"><p style=\"text-align: center;\">\r\n    <img src=\"..\/upload\/202001\/1579417409303256.png\" data-width=\"120\" width=\"120\" data-height=\"120\" height=\"120\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    微信公众号\r\n<\/p>\r\n<p style=\"text-align:center;\">\r\n    <img src=\"..\/upload\/202001\/1579417452544806.png\" data-width=\"150\" width=\"150\" data-height=\"150\" height=\"150\" title=\"\"\/>\r\n<\/p>\r\n<p style=\"text-align: center;\">\r\n    QQ交流群\r\n<\/p><\/div>\r\n    <\/div>\r\n<\/div>","t":"4","x":"10","y":"130"}