前端模板规范

2016-11-26 本文已影响0人 SilencyXiao

template 模板结构

模板结构分成三个部分：

page 页面
layout 布局
module 组件

** class命名要求：**
layout第一个字母缩写 l, 如 l-header
module第一个字母缩写m，如 m-list-media
同一类型布局和组件有不同风格的，在样式后加‘-数字’，不加默认代表第一种类型

.l-header //默认代表第一种类型
.l-header-2
.l-header-3
.l-header-4
…… 
.m-list-media //默认代表第一种类型
.m-list-media-2
.m-list-media-3
.m-list-media-4
……

page 页面

page 页面：html 展示单页面，如 index.html

// page页面结构默认配置
<div class="wrapper" style=" 
  background-image: none; //默认无图
  background-repeat: no-repeat; //默认不平铺
  background-size: auto; //默认无拉伸
  background-attachment: scroll; //默认背景滚动
  background-color: transparent; //默认颜色透明
">

页面背景设置

// 背景图片引用
background-image: none | url;

// 背景图片平铺 (多用于背景底纹)
background-repeat: no-repeat | repat | repeat-x | repeat-y;

//背景图片拉伸
background-size: auto | cover;

//背景图片固定
background-attachment: scroll | fixed;

//背景颜色
background-color: transparent | value;

layout 布局

layout 布局：基于page水平方向的通栏布局，由上往下进行垂直排列构成一个完整的page

** layout 布局主要包含以下几部分，可以根据实际情况进行扩展：**

l-header 头部
l-section-banner 轮播图部分
l-section-search 搜索栏部分
l-section-video 视频部分
l-section-ad 广告部分
l-section-info 资讯信息部分
l-footer 底部

l-header / l-section-banner / l-section-search / l-footer / 在页面中至多能显示一个，可以提供多个风格供人选择

l-header 头部

// 头部常用结构
<div class="l-header">
    <div class="m-topbar"></div> // 顶部条 
    // 店招
    <div class="m-sign-brand"  style="background-image: url();">
        <form action="" class="m-search-global"></form> // 全局搜索框
    </div> 
    <div class="m-navbar"></div> //导航条   
</div>

m-sign-brand 店招

背景尺寸：1920 * 100

m-search-global 全局搜索框

可控制显隐

l-section 内容部分

//结构默认配置
<div class="l-section" style="
   background-image: none; 
   background-repeat: no-repeat; 
   background-size: auto;
   background-color: transparent; 
">
</div>

//设置背景
 background-image: none | url;
 background-repeat: no-repeat | repat | repeat-x | repeat-y;
 background-size: auto | cover;
 background-color: transparent | value;

module 组件

module 组件：已经封装好的结构模块

** module 组件主要包含以下几种，可以根据实际情况进行扩展：**

m-banner 轮播图
m-slide 幻灯片
m-video 视频
m-list 列表
m-box 模块盒
m-ad 图片广告
m-tabbox 选项卡
m-carousel 轮播切换列表
m-toolbar 工具栏
m-menu-position 定位菜单
m-popup-topic 主题弹出层

m-banner 轮播图

// 结构默认配置
<div class="m-banner" id="banner">
    //翻页切换
    <span class="prev">上一页</span>
    <span class="next">下一页</span>
    //分页器
    <div class="head">
        <ul></ul>
    </div>
   //切换容器
    <div class="body">
        <ul>
            <li _src="url(http://www.op110.com/huoliqing/_temp/banner.jpg)"><a href="#" target="_blank"></a></li>
            <li _src="url(http://www.op110.com/huoliqing/_temp/banner.jpg)"><a href="#" target="_blank"></a></li>
            <li _src="url(http://www.op110.com/huoliqing/_temp/banner.jpg)"><a href="#" target="_blank"></a></li>
        </ul>
    </div>
</div>

m-banner 轮播图尺寸
全屏 m-banner-full

1920*600
1920*500

固定尺寸

1200*400
760*325

m-list 列表

列表分成三类：

m-list-media 媒体列表
m-list-text 文本列表
m-list-mix 混合列表

img 标签需加 alt 属性

标题、描述等长文本需加 ell 省略号和 title 属性

根据实际情况，设置 a 标签的 target 属性

m-list-media 媒体列表

m-list-media 媒体列表：列表项中包含图片、视屏等媒体的列表

// 结构常用配置
<div class="m-list-media">
    <ul class="clearfix">
        <li class="col-4">
            <a class="col-in" href="#" target="_blank">
                <img class="media" src="media.jpg" alt="">
                <h3 class="title ell"  title="">媒体列表1</h3>
            </a>
        </li>
        <li class="col-4">
            <a class="col-in" href="#" target="_blank">
                <img class="media" src="media.jpg" alt="">
                <h3 class="title ell" title="">媒体列表2</h3>
            </a>
        </li>
       <li class="col-4">
            <a  class="col-in" href="#" target="_blank">
                <img class="media" src="media.jpg" alt="">
                <h3 class="title ell">媒体列表3</h3>
            </a>
        </li>
    </ul>
</div>

clearfix：清除浮动
col-4: 栅格布局，将容器分成12等份，col-4整个容器的三分之一
col-in: 用于拓展列表项
ell: 省略号，文本超出容器宽度显示省略号

m-list-text 文本列表

m-list-text 文本列表：列表项只含文字和修饰元素的列表

// 结构常用配置
<ul class="m-list-mix">
    <li><a class="ell" href="#" target="_blank" title="">文本列表项1</a></li>
    <li><a class="ell" href="#" target="_blank" title="">文本列表项2</a></li>
    <li><a class="ell" href="#" target="_blank" title="">文本列表项3</a></li>
</ul>

m-list-mix 混合列表

m-list-mix 混合列表：既有媒体列表项也有文本列表项的列表

// 结构常用配置
<ul class="m-list-mix">
    <li>
        <a href="#" target="_blank">
            <img class="media" src="media.jpg" alt="">
            <h3 class="title ell"> 媒体列表项1 </h3>
        </a>
    </li>
    <li><a class="ell" href="#" target="_blank" title="">文本列表项2</a></li>
    <li><a class="ell" href="#" target="_blank" title="">文本列表项3</a></li>
</ul>

m-box 模块盒

//结构默认配置
<div class="m-box">
    <div class="head">
        <h3 class="title">标题</h3>
    </div>
    <div class="body">
        内容
    </div>
</div>