template 模板結(jié)構(gòu)

模板結(jié)構(gòu)分成三個(gè)部分：

• page 頁(yè)面
• layout 布局
• module 組件

** class命名要求：**
layout第一個(gè)字母縮寫(xiě) l, 如 l-header
module第一個(gè)字母縮寫(xiě)m，如 m-list-media
同一類(lèi)型布局和組件有不同風(fēng)格的尿扯，在樣式后加‘-數(shù)字’，不加默認(rèn)代表第一種類(lèi)型

.l-header //默認(rèn)代表第一種類(lèi)型
.l-header-2
.l-header-3
.l-header-4
…… 
.m-list-media //默認(rèn)代表第一種類(lèi)型
.m-list-media-2
.m-list-media-3
.m-list-media-4
……

page 頁(yè)面

page 頁(yè)面：html 展示單頁(yè)面，如 index.html

// page頁(yè)面結(jié)構(gòu)默認(rèn)配置
<div class="wrapper" style=" 
  background-image: none; //默認(rèn)無(wú)圖
  background-repeat: no-repeat; //默認(rèn)不平鋪
  background-size: auto; //默認(rèn)無(wú)拉伸
  background-attachment: scroll; //默認(rèn)背景滾動(dòng)
  background-color: transparent; //默認(rèn)顏色透明
">

頁(yè)面背景設(shè)置

// 背景圖片引用
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水平方向的通欄布局窃页，由上往下進(jìn)行垂直排列構(gòu)成一個(gè)完整的page

** layout 布局主要包含以下幾部分啤覆，可以根據(jù)實(shí)際情況進(jìn)行擴(kuò)展：**

• 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 / 在頁(yè)面中至多能顯示一個(gè)徙鱼，可以提供多個(gè)風(fēng)格供人選擇

l-header 頭部

// 頭部常用結(jié)構(gòu)
<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> //導(dǎo)航條   
</div> 

m-sign-brand 店招

• 背景尺寸：1920 * 100

m-search-global 全局搜索框

• 可控制顯隱

l-section 內(nèi)容部分

//結(jié)構(gòu)默認(rèn)配置
<div class="l-section" style="
   background-image: none; 
   background-repeat: no-repeat; 
   background-size: auto;
   background-color: transparent; 
">
</div>

//設(shè)置背景
 background-image: none | url;
 background-repeat: no-repeat | repat | repeat-x | repeat-y;
 background-size: auto | cover;
 background-color: transparent | value;

module 組件

module 組件：已經(jīng)封裝好的結(jié)構(gòu)模塊

** module 組件主要包含以下幾種，可以根據(jù)實(shí)際情況進(jìn)行擴(kuò)展：**

• m-banner 輪播圖
• m-slide 幻燈片
• m-video 視頻
• m-list 列表
• m-box 模塊盒
• m-ad 圖片廣告
• m-tabbox 選項(xiàng)卡
• m-carousel 輪播切換列表
• m-toolbar 工具欄
• m-menu-position 定位菜單
• m-popup-topic 主題彈出層

m-banner 輪播圖

// 結(jié)構(gòu)默認(rèn)配置
<div class="m-banner" id="banner">
    //翻頁(yè)切換
    <span class="prev">上一頁(yè)</span>
    <span class="next">下一頁(yè)</span>
    //分頁(yè)器
    <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 列表

列表分成三類(lèi)：

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

• img 標(biāo)簽需加 alt 屬性
• 標(biāo)題、描述等長(zhǎng)文本需加 ell 省略號(hào) 和 title 屬性
• 根據(jù)實(shí)際情況袱吆，設(shè)置 a 標(biāo)簽的 target 屬性

m-list-media 媒體列表

m-list-media 媒體列表： 列表項(xiàng)中包含圖片厌衙、視屏等媒體的列表

// 結(jié)構(gòu)常用配置
<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： 清除浮動(dòng)
col-4: 柵格布局，將容器分成12等份绞绒，col-4整個(gè)容器的三分之一
col-in: 用于拓展列表項(xiàng)
ell: 省略號(hào)婶希，文本超出容器寬度顯示省略號(hào)

m-list-text 文本列表

m-list-text 文本列表： 列表項(xiàng)只含文字和修飾元素的列表

// 結(jié)構(gòu)常用配置
<ul class="m-list-mix">
    <li><a class="ell" href="#" target="_blank" title="">文本列表項(xiàng)1</a></li>
    <li><a class="ell" href="#" target="_blank" title="">文本列表項(xiàng)2</a></li>
    <li><a class="ell" href="#" target="_blank" title="">文本列表項(xiàng)3</a></li>
</ul>

m-list-mix 混合列表

m-list-mix 混合列表： 既有媒體列表項(xiàng)也有文本列表項(xiàng)的列表

// 結(jié)構(gòu)常用配置
<ul class="m-list-mix">
    <li>
        <a href="#" target="_blank">
            <img class="media" src="media.jpg" alt="">
            <h3 class="title ell"> 媒體列表項(xiàng)1 </h3>
        </a>
    </li>
    <li><a class="ell" href="#" target="_blank" title="">文本列表項(xiàng)2</a></li>
    <li><a class="ell" href="#" target="_blank" title="">文本列表項(xiàng)3</a></li>
</ul>

m-box 模塊盒

//結(jié)構(gòu)默認(rèn)配置
<div class="m-box">
    <div class="head">
        <h3 class="title">標(biāo)題</h3>
    </div>
    <div class="body">
        內(nèi)容
    </div>
</div>