##导航规范
导航是一种模块与组件相重叠的结构
>模块结构
~~~
<nav id=”h5c_m_随机数” class=”h5c-name-随机数” data-type=”navigate” style=”position:relative;”>
<div class=”container”>
</div>
</nav>
~~~
>组件结构
~~~
<div class="collapse navbar-collapse" id="h5c_navigate" >
<ul class="nav navbar-nav navbar-right h5c-navbar-hover h5c-navbar-bgcolor text-center" style="margin: 20px 0;">
<li class="h5c-navbar-active"><a href="#" style=""><span class="h5c-navbar-text">首页</span></a></li>
<li><a href="#">产品</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><div class="dropdown">
<a type="button" class="btn dropdown-toggle" data-toggle="dropdown">关于我们
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">公司简介</a>
</li>
<li>
<a href="#">团队简介</a>
</li>
<li>
<a href="#">员工简介</a>
</li>
<li>
<a href="#">公司环境</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
~~~
##banner部分
>模块结构
~~~
<div id="h5c_m_随机数" class="h5c-name-随机数" style="position:relative"></div>
~~~
>组件定义
~~~
<div id="h5c_name_随机数" data-type="solideBanner" banner-effect="e-default" class="carousel slide e-default" data-interval="500000">
<link rel="stylesheet" type="text/css" href="/diy/asyn.file/jsb/module/css/bannerEffect.css">
<ol class="carousel-indicators">
<li data-target="#h5c_name_随机数" data-slide-to="0" class="active"></li>
<li data-target="#h5c_name_随机数" data-slide-to="1" class=""></li>
<li data-target="#h5c_name_随机数" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="././." onerror="javascript:this.src='././.'" data-holder-rendered="true">
<div class="carousel-caption">其他代码</div>
</div>
<div class="item">
<img class="img-responsive" src="././." onerror="javascript:this.src='././.'" data-holder-rendered="true">
<div class="carousel-caption"> 其他代码</div>
</div>
<div class="item">
<img class="img-responsive" src="././." onerror="javascript:this.src='././.'" data-holder-rendered="true">
<div class="carousel-caption">其他代码</div>
</div>
</div>
<a class="left carousel-control" href="#h5c_name_随机数" role="button" data-slide="prev"></a>
<a class="right carousel-control" href="#h5c_name_随机数" role="button" data-slide="next"></a>
</div>
~~~
>组件文字说明
（1）data-type="solideBanner"指明，这是一个轮播图组件；
（2）其他代码处，是可以写一些自己随意添加；
（3） banner-effect="e-default" 该方式是控制轮播特效的，e-default为默认特效 ，同时在class中添加e-default；同时 还有 disapear（逐渐消失），expand-disapear（变大消失），.hand-organ （手拉风情）
##横幅
横幅是一种模块与组件相重叠的结构
>模块(组件)结构
~~~
<div id="h5c_m_随机数" class="h5c_name_随机数" data-type="banner" style="position:relative;background-image:url('......')">
<div class="container">
其他代码
</div>
</div>
~~~
>代码说明
（1）其中的img 全部用data-type=“img” 标识，并且添加 onerror 事件。如同产品中的图片
（2）所有的文字都要添加data-effect=“edit”
##图文
>模块结构
~~~
<div id="h5c_m_随机数" class="h5c-name-随机数" style="position:relative;">
<div class="container">
..........
</div>
<script type="text/javascript" src="/diy/asyn.file/jsb/module/js/imgFontBase.js" onload=imgFontInit(this); onclick=imgFontInit(this);></script>
</div>
~~~
必须引入 js
>组件结构
（1）data-type="imgFont-group-common" position:relative; // 图文组件标识
（2）data-type="imgFont-row" position:relative; //图文组件一行的标识
（3）data-type="imgFont-row" position:relative; //图文组件一行的标识
（4）data-type="imgFont-el" position:relative; //图文组件某个图文的标识
（5）图文组件中图片的标识 data-type="imgFont-img" 并且添加 onerror 事件
~~~
<img data-type="imgFont-img" src="././." onerror="javascript:this.src='././.'">
~~~
##产品列表
>模块结构
~~~
<div id="h5c_m_随机数" class="h5c-name-随机数" style="position:relative;">
<div class="container">
..........
</div>
<script type="text/javascript" src="/diy/asyn.file/jsb/module/js/productAjax.js" onclick=productAjax(this,32);></script>
<script type="text/javascript" src="/diy/asyn.file/jsb/module/js/productBase.js" onclick=productInit(this); onload=productInit(this)></script>
</div>
~~~
必须引入两段js
>组件结构
（1）.产品组 data-type="products"（产品组件标识） position：relative；
data-num="3"（默认加载几条）
~~~
例如：<div style="margin: 0;position:relative;" data-type="products" data-num="3"></div>
~~~
（2）.产品组标题 data-type="products-title" 添加 data-effect=“edit”
（3）.产品组描述 data-type="products-desc" 添加 data-effect=“edit”
（4）.产品组查看更多 添加 products-see-more
（5）.产品行 class=“row ”
data-type="product-row" （产品行标识） position:relative;
data-num="3"（一行有多少个）；
~~~
例如： <div class="row" data-type="product-row" data-num="3" style="position:relative;"> </div>
~~~
5.产品 data-type="product" position：relative
6.产品缩略图 data-type="product-img"
7.产品标题 data-type="product-title"
8.产品描述信息 data-type="product-desc"
9.产品详情 product-see-more
10.产品所有文字不加data-effect 属性
##面板
>代码定义
~~~
<div class="col-md-8">
<div class="panel panel-default" id="h5c_jsw_m_about" data-style="default">
<div class="panel-heading">
<span class="fa fa-home"></span> <span class="panel-title-edit">关于我们</span>
</div><!-- / -->
<div class="panel-body">
......
</div><!-- / -->
</div><!-- / -->
</div>
~~~
>DOM结构定义
如上面的代码所示，`.row>col-md-*`这样的结构定义可使元素通过拖动来实现编辑，因此需保持 `.row>col-md-*>panel`这样的的结构不能变，`<span class="panel-title-edit">关于我们</span>`这里的结构和class是定义面板的标题部分是否可以编辑的属性，如果不是如上的结构或是没有class则面板的标题是不能被编辑的！
data属性定义
~~~
data-type="gallery" //按面板的类型进行分类：图片列表_gallery，图文混排_word，新闻列表_list
data-style="default"//样式如果panel的class是pnael-default的话，data-style的值就是default
~~~
##类footer
类footer是一种模块与组件相重叠的结构
>模块(组件)结构
~~~
<div id="h5c_m_随机数" class="h5c-name-随机数" data-type="likefooter" style="position:relative;">
<div class="container">
其他代码
</div>
</div>
~~~
>代码说明
（1）其中的img 全部用data-type=“img” 标识，并且添加 onerror 事件。如同产品中的图片
（2）所有的文字都要添加data-effect=“edit”
##版权模块
>模块结构
~~~
<div id="h5c_m_随机数" class="h5c-name-随机数" style="position:relative"></div>
~~~
>版权组件
（1）版权组件用data-type="copyright"
（2）.版权组件英文部分用data-type="copy-usa"
（3）.版权组件中文部分用data-type="copy-china"
>代码示例
~~~
<p class="text-center" style="font-size:1.8vh;color: #000;padding:24px 10px 44px 10px;margin: 0;" data-type="copyright"><span data-type="copy-usa">Copyright ©2013-2016 h5create.com. All Rights Reserved.</span><span data-type="copy-china" style="">嗨创版权所有</span></p>
~~~
>DOM结构定义
暂无强制性要求
