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>