5811前端基础规范-【标准模块代码】

常用模块规范

• 布局
• 头部
• 导航
• 文本列表
• 图片列表
• 图文列表
• 页码
• 选项卡
• 轮播图
• 小东西
• 当前位置、面包屑

布局

布局的行用 row- , 列用 col- 作为前缀
如果布局过多可以增加 row-2a 就是两列 row-3a 就是三列

两列和三列布局

<div class="wp">
    <div class="col-l"></div>
    <div class="col-r"></div>
    <div class="row-2a">
        <div class="col-l"></div>
        <div class="col-r"></div>
    </div>
    <div class="row-2b">
        <div class="col-l"></div>
        <div class="col-r"></div>
    </div>
    <div class="row-3a">
        <div class="col-l"></div>
        <div class="col-c"></div>
        <div class="col-r"></div>
    </div>
</div>

row-** 可以用于不同的布局列数，仅仅是控制col-每列的宽度

头部

头部

<div class="header">
    <div class="logo">
        <a href=""><img src="images/logo.jpg" alt=""></a>
    </div>
    <div class="hdr">
        <!-- 这里是放导航和右侧内容 -->
    </div>
</div>

导航

主导航

<div class="nav">
    <ul>
        <li class="on"><a href="">首页</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href="">公司简介</a></li>
        <li><a href="">联系我们</a></li>
    </ul>
</div>

带下拉菜单的导航

<div class="nav">
    <ul>
        <li class="on"><a href="" class="v1">首页</a></li>
        <li>
            <a href="" class="v1">关于我们</a>
            <dl>
                <dd><a href="">联系我们</a></dd>
                <dd><a href="">企业文化</a></dd>
                <dd><a href="">主营业务</a></dd>
            </dl>
        </li>
        <li>
            <a href="" class="v1">公司简介</a>
            <dl>
                <dd><a href="">联系我们</a></dd>
                <dd><a href="">企业文化</a></dd>
                <dd><a href="">主营业务</a></dd>
            </dl>
        </li>
        <li>
            <a href="" class="v1">联系我们</a>
            <dl>
                <dd><a href="">联系我们</a></dd>
                <dd><a href="">企业文化</a></dd>
                <dd><a href="">主营业务</a></dd>
            </dl>
        </li>
    </ul>
</div>

侧边导航

<div class="snv">
    <ul>
        <li class="on"><a href="">首页</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href="">公司简介</a></li>
        <li><a href="">联系我们</a></li>
    </ul>
</div>

折叠菜单或者二级菜单

<div class="snv">
    <h3><a href="">关于我们</a></h3>
    <ul>
        <li><a href="">企业文化</a></li>
        <li><a href="">经营模式</a></li>
        <li><a href="">公司历程</a></li>
    </ul>
    <h3><a href="">关于我们</a></h3>
    <ul>
        <li><a href="">企业文化</a></li>
        <li><a href="">经营模式</a></li>
        <li><a href="">公司历程</a></li>
    </ul>
    <h3><a href="">关于我们</a></h3>
    <ul>
        <li><a href="">企业文化</a></li>
        <li><a href="">经营模式</a></li>
        <li><a href="">公司历程</a></li>
    </ul>
    <h3><a href="">关于我们</a></h3>
    <ul>
        <li><a href="">企业文化</a></li>
        <li><a href="">经营模式</a></li>
        <li><a href="">公司历程</a></li>
    </ul>
</div>

文本列表

常用新闻列表

<ul class="ul-txt">
    <li><span>2016-09-09</span><a href="">中国洛阳前端网络科技</a></li>
    <li><span>2016-09-09</span><a href="">洛阳前端网络科技</a></li>
    <li><span>2016-09-09</span><a href="">前端外包就找5811</a></li>
    <li><span>2016-09-09</span><a href="">中国洛阳前端网络科技</a></li>
    <li><span>2016-09-09</span><a href="">洛阳前端网络科技</a></li>
    <li><span>2016-09-09</span><a href="">前端外包就找5811</a></li>
</ul>

图片列表

常用图片列表

<ul class="ul-pic">
    <li>
        <a href="">
            <span><img src="images/p1.jpg" alt=""></span>
            <p>标题</p>
        </a>
    </li>
    <li>
        <a href="">
            <span><img src="images/p1.jpg" alt=""></span>
            <p>标题</p>
        </a>
    </li>
    <li>
        <a href="">
            <span><img src="images/p1.jpg" alt=""></span>
            <p>标题</p>
        </a>
    </li>
    <li>
        <a href="">
            <span><img src="images/p1.jpg" alt=""></span>
            <p>标题</p>
        </a>
    </li>
    <li>
        <a href="">
            <span><img src="images/p1.jpg" alt=""></span>
            <p>标题</p>
        </a>
    </li>
</ul>