從零開始學 Web 之移動Web（九）微金所案例

阿新 • • 發佈：2018-08-16

空格 avi 系列教程知識 open 流量 dao 當前 ger

大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......

github：https://github.com/Daotin/Web

微信公眾號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的探索之旅吧！

技術分享圖片

微金所案例

1、案例要求

利用響應式布局，實現微金所頁面結構。

2、不同屏幕尺寸布局

整體樣式

技術分享圖片

中大屏幕下樣式

技術分享圖片

小屏幕下樣式

技術分享圖片

超小屏幕（移動端）下樣式

技術分享圖片

3、代碼結構

技術分享圖片

4、頁面結構

頁面結構主要分8大塊：

頭部塊
導航條
輪播圖
信息塊
預約塊
產品塊
新聞塊
合作塊

5、源碼

相關源代碼已放置github：https://github.com/Daotin/Web/blob/master/Code/src/11/wjs.zip

index.html 文件

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微金所</title>
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- 在線字體圖標文件 -->
    <link href="./lib/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/wjs-index.css">
</head>

<body>
    <!-- 頭部塊開始 -->
    <header class="wjs-header hidden-sm hidden-xs">
        <div class="container">
            <div class="row">
                <!-- 在xs sm下是不顯示的，所以沒必要寫 -->
                <div class="col-md-2">
                    <a href="javascript:;" class="code">
                        <span class="fa fa-mobile fa-lg"></span>
                        <span>手機微金所</span>
                        <span class="fa fa-angle-down fa-lg"></span>
                        <img src="./images/code.jpg" alt="">
                    </a>
                </div>
                <div class="col-md-5">
                    <span class="fa fa-phone"></span>
                    <a href="javascript:;">4006-89-4006（服務時間：9:00~21:00） 聯系在線客服</a>
                </div>
                <div class="col-md-2">
                    <a href="javascript:;">常見問題</a>&nbsp;&nbsp;
                    <a href="javascript:;">財富登錄</a>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-danger">免費註冊</button>
                    <button type="button" class="btn btn-link">登錄</button>
                </div>
            </div>
        </div>
    </header>
    <!-- 頭部塊結束 -->

    <!-- 導航條開始 -->
    <nav class="navbar navbar-default wjs-nav">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <span class="wjs_icon wjs_icon_logo"></span>
                    <span class="wjs_icon wjs_icon_text"></span>
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav hidden-sm">
                    <li class="active">
                        <a href="#">我要投資
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">我要借貸</a>
                    </li>
                    <li>
                        <a href="#">平臺介紹</a>
                    </li>
                    <li>
                        <a href="#">新手專區</a>
                    </li>
                    <li>
                        <a href="#">最新動態</a>
                    </li>
                    <li>
                        <a href="#">微平臺</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#">個人中心</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 導航條結束 -->

    <!-- 輪播圖開始 -->
    <div class="wjs-banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- 小白點 -->
            <ol class="carousel-indicators">
                <!-- data-target="#carousel-example-generic"：自定義屬性，給哪個id的輪播圖加小白點 -->
                <!-- data-slide-to="0"：第幾個小白點 -->
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- 輪播圖主體部分 -->
            <div class="carousel-inner" role="listbox">
                <!-- HTML5 增加了一項新功能是 自定義數據屬性 ，也就是  data-* 自定義屬性。
                    jQuery中可以使用data()方法獲取自定義屬性的值 -->
                <div class="item active" data-large-image="./images/slide_01_2000x410.jpg" data-small-image="./images/slide_01_640x340.jpg">
                    <!-- 這裏面的輪播圖片使用jq動態添加，否則加大小圖的話，加載的時候，不管是大屏幕還是小屏幕
                        大小圖都會加載，浪費流量 -->

                    <!-- 每張輪播圖的圖片說明，這裏不需要 -->
                    <!-- <div class="carousel-caption">
                        ...
                    </div> -->
                    <a href="">
                        <img src="" alt="">
                    </a>
                </div>
                <div class="item" data-large-image="./images/slide_02_2000x410.jpg" data-small-image="./images/slide_02_640x340.jpg"></div>
                <div class="item" data-large-image="./images/slide_03_2000x410.jpg" data-small-image="./images/slide_03_640x340.jpg"></div>
                <div class="item" data-large-image="./images/slide_04_2000x410.jpg" data-small-image="./images/slide_04_640x340.jpg"></div>
            </div>

            <!-- 左右箭頭，點擊可切換上下一張 -->
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!-- 輪播圖結束 -->

    <!-- 信息塊開始 -->
    <div class="wjs-info hidden-xs">
        <!-- 信息塊的制作可以使用bootstrap組件的媒體對象來做 -->
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-md-4">
                    <a href="javascript:;">
                        <div class="media">
                            <span class="media-left wjs_icon wjs_icon_E900"></span>
                            <div class="media-body">
                                <h4 class="media-heading">支持交易保障</h4>
                                <p>銀聯支持全程保障安全</p>
                            </div>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
    <!-- 信息塊結束 -->

    <!-- 預約塊開始 -->
    <div class="wjs-reverse hidden-xs">
        <div class="container">
            <div class="row">
                <div class="col-sm-9">
                    <span class="wjs_icon wjs_icon_E906"></span>
                    <span>現在的 272 人在排隊，累計預約交易成功 7571 次</span>
                    <a href="javascript:;">什麽叫預約投標</a>
                    <a href="javascript:;">立即預約</a>
                </div>
                <div class="col-sm-3">
                    <span class="wjs_icon wjs_icon_E905"></span>
                    <a href="javascript:;">微金所企業宣傳片</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 預約塊結束 -->

    <!-- 產品塊開始 -->
    <div class="wjs-product">
        <div class="container">
            <!-- 手動滑動效果 -->
            <div class="tabs-parent">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#p1" aria-controls="p1" role="tab" data-toggle="tab">特別推薦</a>
                    </li>
                    <li role="presentation">
                        <a href="#p2" aria-controls="p2" role="tab" data-toggle="tab">微投資</a>
                    </li>
                    <li role="presentation">
                        <a href="#p3" aria-controls="p3" role="tab" data-toggle="tab">友金所</a>
                    </li>
                    <li role="presentation">
                        <a href="#p4" aria-controls="p4" role="tab" data-toggle="tab">團貸網</a>
                    </li>
                    <li role="presentation">
                        <a href="#p5" aria-controls="p5" role="tab" data-toggle="tab">懶投資</a>
                    </li>
                    <li role="presentation">
                        <a href="#p6" aria-controls="p6" role="tab" data-toggle="tab">掌遊寶</a>
                    </li>
                    <li role="presentation">
                        <a href="#p7" aria-controls="p7" role="tab" data-toggle="tab">英雄聯盟</a>
                    </li>
                </ul>
            </div>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="p1">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="wjs-pBox active">
                                    <div class="wjs-pLeft">
                                        <p>新手體驗1002期</p>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wjs-pRight">
                                        <b>8</b>
                                        <sub>%</sub>
                                        <p>年利率</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="wjs-pBox">
                                    <div class="wjs-pLeft">
                                        <p>新手體驗1002期</p>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wjs-pRight">
                                        <div class="wjs-pRight-tip">
                                            <span data-toggle="tooltip" data-placement="top" title="微金寶">寶</span>
                                            <span data-toggle="tooltip" data-placement="top" title="北京市">北</span>
                                        </div>
                                        <b>8</b>
                                        <sub>%</sub>
                                        <p>年利率</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="wjs-pBox">
                                    <div class="wjs-pLeft">
                                        <p>新手體驗1002期</p>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wjs-pRight">
                                        <b>8</b>
                                        <sub>%</sub>
                                        <p>年利率</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4">
                                <div class="wjs-pBox">
                                    <div class="wjs-pLeft">
                                        <p>新手體驗1002期</p>
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                            <div class="col-xs-6">
                                                <p>起投金額(元)</p>
                                                <p>0.01萬</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="wjs-pRight">
                                        <b>8</b>
                                        <sub>%</sub>
                                        <p>年利率</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="p2">2</div>
                <div role="tabpanel" class="tab-pane" id="p3">3</div>
                <div role="tabpanel" class="tab-pane" id="p4">4</div>
                <div role="tabpanel" class="tab-pane" id="p5">5</div>
                <div role="tabpanel" class="tab-pane" id="p6">6</div>
                <div role="tabpanel" class="tab-pane" id="p7">7</div>
            </div>
        </div>
    </div>
    <!-- 產品塊結束 -->

    <!-- 新聞塊開始 -->
    <div class="wjs-news">
        <div class="container">
            <div class="row">
                <div class="col-md-2 col-md-offset-2">
                    <h3 class="wjs_nTitle">全部新聞</h3>
                </div>
                <div class="col-md-1">
                    <div class="wjs_newsLine hidden-xs hidden-sm"></div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
                                <span class="wjs_icon wjs_icon_new01"></span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
                                <span class="wjs_icon wjs_icon_new02"></span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">
                                <span class="wjs_icon wjs_icon_new03"></span>
                            </a>
                        </li>
                        <li role="presentation">
                            <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
                                <span class="wjs_icon wjs_icon_new04"></span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-7">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                            <ul class="wjs_newslist">
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微公告】關於海航通寶22期項目募集期延長通知
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微動態】世紀佳緣與百合網的投資人首善財富董事長吳正新一行蒞臨微金所調研指導
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微動態】封面人物第六期 ▏萬雅泉—— 手寫心情的雙魚座美女
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微公告】2016年7月11日微金所平臺系統升級維護公告
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微動態】微金所與前海航交所攜手，正式推出安全優質的理財產品—海航金寶！
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微動態】微金所七月電腦節，激情狂歡理財好禮送不停！
                                    </a>
                                </li>
                                <li>
                                    <a href="">
                                        <span class="hidden-xs">2016-01-22</span>【微還款】一周還款公告2016年7月11日-7月17日
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">2</div>
                        <div role="tabpanel" class="tab-pane" id="messages">3</div>
                        <div role="tabpanel" class="tab-pane" id="settings">4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 新聞塊結束 -->

    <!-- 合作塊開始 -->
    <footer class="wjs-partner">
        <div class="container">
            <h3>合作夥伴</h3>
            <ul>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner01"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner02"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner03"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner04"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner05"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner06"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner07"></a></li>
                <li><a href="javascript:;" class="wjs_icon wjs_icon_partner08"></a></li>
            </ul>
        </div>
    </footer>
    <!-- 合作塊結束 -->

    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/iscroll.js"></script>
    <script src="./js/wjs-index.js"></script>
</body>

</html>

common.css 文件

/*公共css樣式*/

body {
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: #333;
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    text-decoration: none;
    color: #333;
}

/*左邊距*/

.m_l10 {
    margin-left: 10px;
}

/*右邊距*/

.m_r10 {
    margin-right: 10px;
}

/*自定義字體*/

@font-face {
    font-family: 'wjs';
    src: url('../fonts/MiFie-Web-Font.eot');
    /* IE9*/
    src: url('../lib/fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */
    url('../lib/fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */
    url('../lib/fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../lib/fonts/MiFie-Web-Font.svg') format('svg');
    /* iOS 4.1- */
}

/*自定義字體使用樣式*/

.wjs_icon {
    font-family: wjs;
}

/*手機圖標對應的編碼*/

.wjs_icon_phone::before {
    content: "\e908";
}

/*電話圖標對應的編碼*/

.wjs_icon_tel::before {
    content: "\e909";
    font-size: 14px;
}

/*wjs logo*/

.wjs_icon_logo::before {
    content: "\e920";
}

/*wjs 文本*/

.wjs_icon_text::before {
    content: "\e93e";
}

.wjs_icon_new01::before {
    content: "\e90e";
}

.wjs_icon_new02::before {
    content: "\e90f";
}

.wjs_icon_new03::before {
    content: "\e910";
}

.wjs_icon_new04::before {
    content: "\e911";
}

.wjs_icon_partner01::before {
    content: "\e946";
}

.wjs_icon_partner02::before {
    content: "\e92f";
}

.wjs_icon_partner03::before {
    content: "\e92e";
}

.wjs_icon_partner04::before {
    content: "\e92a";
}

.wjs_icon_partner05::before {
    content: "\e929";
}

.wjs_icon_partner06::before {
    content: "\e931";
}

.wjs_icon_partner07::before {
    content: "\e92c";
}

.wjs_icon_partner08::before {
    content: "\e92b";
}

.wjs_icon_partner09::before {
    content: "\e92d";
}

.wjs_iconn_E903::before {
    content: "\e903";
}

.wjs_icon_E906::before {
    content: "\e906";
}

.wjs_icon_E905::before {
    content: "\e905";
}

.wjs_icon_E907::before {
    content: "\e907";
}

.wjs_icon_E901::before {
    content: "\e901";
}

.wjs_icon_E900::before {
    content: "\e900";
}

.wjs_icon_E904::before {
    content: "\e904";
}

.wjs_icon_E902::before {
    content: "\e902";
}

.wjs_icon_E906::before {
    content: "\e906";
}

wjs-index.less 文件

@baseColor: #e92322;

/* 頭部塊 */
.wjs-header {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    .row {
        height: 100%;
        text-align: center;
        > div:nth-of-type(-n+3) {
            border-right: 1px solid #ccc;
        }
        .code {
            display: block;
            position: relative;
            > img {
                display: none;
                position: absolute;
                border: 1px solid #ccc;
                border-top: none;
                left: 50%;
                transform: translateX(-50%);
                top: 49px;
            }
            &:hover {
                > img {
                    display: block;
                }
            }
        }
        > div:nth-last-of-type(1) {
            > .btn-danger {
                background-color: @baseColor;
                border-color: @baseColor;
            }
            > .btn {
                padding: 3px 15px;
            }
            > .btn-link {
                text-decoration: none;
                color: #aaa;
            }
            
        }
    }
}

/*導航條*/ 
.wjs-nav {
    &.navbar {
        margin-bottom: 0;
    }
    .navbar-brand {
        height: 80px;
        line-height: 50px;
        font-size: 40px;

        > span:nth-of-type(1) {
            color: @baseColor;
        }

        > span:nth-of-type(2) {
            color: #333;
        }
    }
    .navbar-toggle {
        margin-top: 23px;;
    }
    .navbar-nav {
        > li {
            height: 80px;
            > a {
                height: 80px;
                line-height: 50px;
                font-size: 16px;
                
                &:hover, &:active {
                    color: #777;
                    border-bottom: 3px solid @baseColor;
                }
            }
        }
        .active {
            a,a:hover,a:active {
                background-color: transparent;
                border-bottom: 3px solid @baseColor;
            }
        }
    }
}

/*輪播圖*/
/*
w<768px-移動端：圖片會隨著屏幕的縮小自動適應--縮小
    img的寬度為100%,通過img標簽來實現

w>=768px：
    圖片做為背景，當屏幕寬度變寬的時候，會顯示更多的圖片的兩邊區域
    1.background-image添加圖片
    2.添加background-position:center center
    3.background-size:cover
*/
.wjs-banner {
    .bigImg {
        width: 100%;
        height: 410px;
        /*去除圖片基線*/ 
        display: block;
        background-position:center center;
        background-size: cover;
    }

    .smallImg {
        // width: 100%;
        // display: block;
        img {
            width: 100%;
            /*去除圖片基線*/ 
            display: block;
        }
    }
}

/*信息塊*/
.wjs-info {
    padding: 20px;
    .wjs_icon {
        font-size: 26px;
    }
    .row {
        > div {
            margin: 10px 0;
            > a:hover {
                color: @baseColor;
            }
        }
    }
} 

/*預約塊*/
.wjs-reverse {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    .wjs_icon {
        font-size: 18px;
    }

    a:hover {
        color: @baseColor;
    }

    .col-sm-9 {
        > a:last-of-type {
            color: @baseColor;
            border-bottom: 1px dashed @baseColor;
        }
    }
}

/*產品塊*/ 
.wjs-product{
    clear: both;
    background-color: #eee;
    

    li {
        height: 100px;
        line-height: 100px;
        padding: 0 10px;
        > a {
            margin: 0;
            border: none;
            line-height: 50px;
        }

        a:hover {
            border: none;
            border-bottom: 3px solid @baseColor;
        }

        &.active {
            > a,a:hover,a:focus{
                background-color: transparent;
                border: none;
                border-bottom: 3px solid @baseColor;
            }
            
            
        }
    }
}

/*產品塊*/ 
.wjs-product {
    .tabs-parent {
        width: 100%;
        overflow: hidden;
    }
    .wjs-pBox {
        height: 100%;
        background-color: #fff;
        margin-top: 20px;
        position: relative;
        box-shadow: 1px 1px 5px #ccc;

        > .wjs-pLeft {
            height: 100%;
            margin-right: 100px;
            padding: 10px 0;
            font-size: 12px;
            position: relative;

            > p {
                font-size: 16px;
                text-align: center;
            }
            .row {
                margin-left: 0;
                margin-right: 0;
                > div:nth-of-type(even) {
                    text-align: right;
                }
            }
        }

        > .wjs-pRight {
            width: 100px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            border-left: 1px dashed #ccc;
            text-align: center;
            padding-top: 40px;

            > .wjs-pRight-tip {
                width: 100%;
                span {
                    font-size: 12px;
                    border-radius: 3px;
                    cursor: pointer;
                }
                span:first-of-type {
                    border: 1px solid @baseColor;
                    color: @baseColor;
                }
                span:last-of-type {
                    border: 1px solid blue;
                    color: blue;
                }
            }

            > b {
                font-size: 40px;
                color: @baseColor;
            }
            > sub {
                bottom: 0;
                color: @baseColor;
            }
            &::before, &::after {
                content: "";
                width: 10%;
                height: 10px;
                border-radius: 5px;
                background-color: #eee;
                position: absolute;
                left: -5px;
            }
            &::before {
                top: -5px;
            }
            &::after {
                bottom: -5px;
            }
        }

        &.active {
            background-color: @baseColor;
            .wjs-pLeft {
                color: #fff;
                &::before {
                    content: "\e915";
                    font-family: "wjs";
                    position: absolute;
                    left: 0;
                    top: -4px;
                    font-size: 26px;
                }
            }
            .wjs-pRight {
                b,sub,p {
                    color: #fff;
                }
            }   
        }
    }
}

/*新聞塊*/
.wjs-news {
    padding: 20px;
    .wjs_nTitle{
        line-height:50px;
        font-size: 25px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        position: relative;
        &::before{
          content: "";
          width: 8px;
          height: 8px;
          border-radius: 4px;
          border: 1px solid #ccc;
          position: absolute;
          bottom: -4px;
          right: -8px;
        }
    }
    /*設置li元素間的虛線*/ 
    .wjs_newsLine {
        width: 1px;
        height: 100%;
        position: absolute;
        border-left: 1px dashed @baseColor;
        left:45px;
        top:0;
    }
    .nav-tabs {
        border-bottom: none;
        > li {
            margin-bottom:60px;
            > a {
                background-color: #ccc;
                width: 60px;
                height: 60px;
                border: none;
                border-radius: 50%;

            }
            > a:hover {
                border: none;
                background-color: @baseColor;
            }
            &.active {
                > a {
                    border: none;
                    background-color: @baseColor;
                }
                
            }
            .wjs_icon{
                font-size: 30px;
                color: #fff;
              }
        }
        > li:last-of-type {
            margin-bottom: 0;
        }
        /*媒體查詢設置li元素的樣式*/
        @media screen and (min-width: 768px) and (max-width: 992px) {
            li {
                margin: 20px 30px;
            }
        } 
        @media screen and (max-width: 768px) {
            li {
                margin: 20px 0;
                width: 25%;
            }
        } 
    }

    .tab-content {
        .wjs_newslist {
            list-style: none;
            > li {
            line-height:60px;
            }
        }
    }
} 

/*合作塊*/ 
.wjs-partner {
    background-color: #eee;
    padding: 20px;
    text-align: center;
    h3 {
        width: 100%;
    }
    ul {
        list-style: none;
        display: inline-block;
        > li {
            float: left;
            margin: 0 15px;
        }
        .wjs_icon {
            font-size: 80px;
        }
    }
}

wjs-index.js 文件

$(function () {
    // 獲取所有的item元素
    var items = $(".carousel-inner .item");

    // 當屏幕大小改變的時候，動態創建圖片
    // triggle函數表示頁面在第一次加載的時候，自動觸發一次。
    $(window).on("resize", function () {
        // 判斷屏幕的大小，以決定加載大圖還是小圖
        var screenWidth = $(window).width();
        // 添加大屏幕的圖片
        if (screenWidth >= 768) {
            // 為每個item添加大圖片
            items.each(function (index, value) {
                // 獲取每個item的圖片，使用data()獲取自定義屬性
                var imgSrc = $(this).data("largeImage");
                // 使用插入小圖片的方法不可以，因為路徑符號會被解析成空格
                $(this).html($('<a href="javascript:;" class="bigImg"></a>').css("backgroundImage", "url('" + imgSrc + "')"));
            });

            // 添加小屏幕的圖片
        } else {
            // 為每個item添加小圖片
            items.each(function (index, value) {
                // 獲取每個item的圖片，使用data()獲取自定義屬性
                var imgSrc = $(this).data("smallImage");
                $(this).html('<a href="javascript:;" class="smallImg"><img src="' + imgSrc + '"></a>');
            });
        }
    }).trigger("resize");

    // 實現滑動輪播效果
    // 實現滑動輪播可以可以直接調用插件的點擊按鈕上下切換的功能

    // 獲取滑動區域的元素
    var carouselInner = $(".carousel-inner");
    var carousel = $(".carousel");
    var startX, endX;
    // 給元素添加touchstart和touchend事件
    carouselInner[0].addEventListener("touchstart", function (e) {
        startX = e.targetTouches[0].clientX;
    });

    carouselInner[0].addEventListener("touchend", function (e) {
        endX = e.changedTouches[0].clientX;
        // endX - startX > 10px 證明往右滑動
        if (endX - startX > 10) {
            carousel.carousel("prev");
        } else if (startX - endX > 10) {
            carousel.carousel("next");
        }
    });

    // 產品塊的寶，北標簽的鼠標懸停效果
    $('[data-toggle="tooltip"]').tooltip();

    // 設置產品塊的標簽欄在移動端時可以滑動
    var ulProduct = $(".tabs-parent .nav-tabs");
    var liProducts = ulProduct.children("li");
    var totleWidth = 0;
    liProducts.each(function (index, element) {
        /*獲取寬度的方法的說明：
         * width():它只能得到當前元素的內容的寬度
         * innerWidth():它能獲取當前元素的內容的寬度+padding
         * outerWidth():獲取當前元素的內容的寬度+padding+border
         * outerWidth(true):獲取元素的內容的寬度+padding+border+margin*/
        totleWidth += $(element).innerWidth();

    });
    ulProduct.width(totleWidth);
    // 使用iScroll插件實現滑動效果
    /*使用插件實現導航條的滑動操作*/
    var myScroll = new IScroll('.tabs-parent', {
        /*設置水平滑動，不允許垂直滑動*/
        scrollX: true,
        scrollY: false
    });
});

6、代碼說明

使用到的技術點：

大面積使用 bootstrap 的 .container + .row + .col-xx-xx 的布局，構成響應式布局結構；
在某些屏幕尺寸下不顯示，使用 hidden-xx；
字體圖標的使用；
導航條樣式直接使用 bootstrap 組件中的導航條樣式修改而成。
輪播圖直接使用 bootstrap js插件下的 Carousel （輪播圖）插件。

由於需要輪播圖效果：

w<768px-移動端：圖片會隨著屏幕的縮小自動適應--縮小

實現方式：img的寬度為100%,通過img標簽來實現。

w>=768px：

圖片做為背景，當屏幕寬度變寬的時候，會顯示更多的圖片的兩邊區域
實現方式：
1.background-image添加圖片
2.添加background-position:center center;
3.background-size:cover；

所以不能在 html 中直接添加代碼的方式，只能通過 js 動態插入圖片或背景圖的方式。

信息塊的制作可以使用 bootstrap 組件的媒體對象來做，實現左邊為圖標，右邊為文字說明的樣式；
產品塊的制作可以使用 bootstrap js插件下的標簽頁修改得到，而且為了實現在小屏幕下的滑動效果，引入了
iScroll 插件。

產品塊中“寶北”的添加：

添加兩個文本
寶北兩個字應該是一個整體，所以使用div包含
添加兩個字之後，不應該破壞之前的元素的布局，所以可以讓div進行定位
設置div的水平居中，垂直方向的偏移可以使用top實現
添加文本的顏色和邊框
添加工具提示
添加工具提示，可以修改類型為span

type="button":說明當前工具提示的類型，類型默認是按鈕，如果不需要，可以修改為其它任意的元素類型
data-toggle="tooltip":說明當前插件/組件是一工具提示
data-placement="top"：提示出現的位置
title="提示文本"

工具提示會默認的生成一個新的div標簽，只不過默認的文本顯示會換行，原因是新添加的標簽的寬度是參照父容器的
，應該將父容器div的寬度設置為100%。
記得對工具提示進行初始化 $(‘[data-toggle="tooltip"]‘).tooltip();

新聞塊同產品塊一樣，也是使用 bootstrap js插件下的標簽頁修改得到，值得註意的是，在不同屏幕大小下，的顯示方式不同，所以在css樣式中使用到了媒體查詢的方式。

7、案例演示

技術分享圖片

從零開始學 Web 之移動Web（九）微金所案例

空格 avi 系列教程知識 open 流量 dao 當前 ger 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：htt

《從零開始學Swift》學習筆記（Day67）——Cocoa Touch設計模式及應用之MVC模式

table control sdn rate term targe rac uitabbar bsp 原創文章，歡迎轉載。轉載請註明：關東升的博客 MVC（Model-View-Controller，模型-視圖-控制器）模式是相當古老的設計模式之中的一個，它最早出如今

《從零開始學Swift》學習筆記（Day60）——Core Foundation框架

類型轉換字符 sso grid blog spa www water 轉載創文章，歡迎轉載。轉載請註明：關東升的博客 Core Foundation框架是蘋果公司提供一套概念來源於Foundation框架，編程接口面向C語言風格的API。盡管在Swift中調用這樣

從零開始學Kotlin-使用接口（7）

如何 mark android interface inter rand 兩個 blog dtw 從零開始學Kotlin基礎篇系列文章定義接口使用關鍵字interface定義接口 interface InterfaceDemo7 { } 類或對象可以實現一個或者多個接

從零開始學習比特幣開發（九）--P2P 網路建立之訊息處理中篇

P2P 網路的建立是在系統啟動的第 12 步，最後時刻呼叫 CConnman::Start 方法開始的。恭喜你越來越接近比特幣的核心了，在上篇中，我們主要講解了比特幣的訊息處理執行緒，接下來，在下篇中，將以具體的比特幣訊息即比特幣協義分析為主。針對比特幣的協義

webpack從零開始構建專案之rem問題（三）

使用webpack解決px轉rem的自適應問題現在的專案配置已經可以正常執行接下來我們要考慮下一個問題，由於VUE主要適用於移動端，所以我們需要一個自適應方案由於這是一個大眾需求的剛需方案，所以我們大可不必自己手動去寫JS程式碼，重複造輪子那麼我

【高德地圖API】從零開始學高德JS API（七）——定位方式大揭祕

摘要：關於定位，分為GPS定位和網路定位2種。GPS定位，精度較高，可達到10米，但室內不可用，且超級費電。網路定位，分為wifi定位和基站定位，都是通過獲取wifi或者基站資訊，然後查詢對應的wifi或者基站位置資料庫，得到的定位地點。定位資料庫可以不斷完善不斷補充，所以，

轉載：高德地圖API學習從零開始學高德JS API（一）地圖展現

摘要：關於地圖的顯示，我想大家最關心的就是麻點圖，自定義底圖的解決方案了吧。在過去，marker大於500之後，瀏覽器開始逐漸卡死，大家都開始尋找解決方案，比如聚合marker啊，比如麻點圖啊。聚合marker裡面還有一些複雜的演算法，而麻點圖，最讓大家頭疼的，就是如何生成麻點圖，如何切圖，如何把圖片貼到地圖

《從零開始學Swift》學習筆記（Day 57）——Swift編碼規範之凝視規範：文件凝視、文檔凝視、代碼凝視、使用地標凝視

精品 -type mil 顯示 clas ber ansi tex text 原創文章。歡迎轉載。轉載請註明：關東升的博客前面說到Swift凝視的語法有兩種：單行凝視（//）和多行凝視（/*...*/）。這裏來介紹一下他們的使用規範。 1、文件凝視文件凝視就在每個文

【SpringMvc】從零開始學SpringMvc之資料庫(二)

大家好，在上一篇中，我們介紹了SpringMvc 的搭建，這篇我們來看下SpringMvc連線資料庫。【SpringMvc】從零開始學SpringMvc之初始化(一) 準備首先，需要安裝Mysql、Navicat（或者類似軟體）、有一點sql基礎，瞭解一點

【SpringMvc】從零開始學SpringMvc之初始化(一)

大家好，我們今天開始SpringMvc 這個系列，由於筆者也是安卓出身，對SpringMvc 也是接觸不久，所以，這個系列僅僅只是記錄筆者學習SpringMvc 過程中的心得，如有錯誤，歡迎指正。在開始之前，我們需要準備一些東西，JDK、Eclipse（MyEclipse）、Tom

【SpringMvc】從零開始學SpringMvc之實現使用者登入(三)

大家好，在前2篇中，我們實現了SpringMvc的配置和資料庫連線，這一篇我們來用html/ajax實現一個簡單的登入功能。【SpringMvc】從零開始學SpringMvc之初始化(一) 【SpringMvc】從零開始學SpringMvc之資料庫(二) 準

【SpringMvc】從零開始學SpringMvc之實現使用者管理(四)

大家好，在上一篇中，我們實現了使用者登入，這一篇我們來實現使用者的增刪改查。由於在第2篇中，我們已經建立好了資料庫，這裡就不在詳述了。準備這裡，我們用到了騰訊的前端模板引擎art-template，不熟悉的小夥伴可以先了解一番，或者有熟悉其他模板引擎的，也

從零開始學Java之五種內部類將執行緒隱藏類中

1.使用普通內部類繼承Thread類 <code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box;

從零開始學C++之虛擬函式與多型（一）：虛擬函式表指標、虛解構函式、object slicing與虛擬函式、C++物件模型圖

#include <iostream>using namespace std;class CObject {public: virtual void Serialize() { cout << "CObject::Serialize ..." <&

從零開始學Java之單例模式:懶漢模式和飽漢模式

單例模式：單例模式是一種常用的軟體設計模式。在它的核心結構中只包含一個被稱為單例類的特殊類。通過單例模式可以保證系統中一個類只有一個例項而且該例項易於外界訪問，從而方便對例項個數的控制並節約系統資源。

從零開始學C++之IO流類庫（三）：檔案的讀寫、二進位制檔案的讀寫、檔案隨機讀寫

#include <cassert>#include <iostream>#include <fstream>#include <string>using namespace std;struct Test { int a; int b; };i

從零開始學Java之出入門衛管理（二）

這個系統包含了四塊，第一塊就是人員管理，經理分配三位分別有“ABC"許可權的人，分別管理請假申請，請假審批，門衛登記管理。同時不屬於本公司的內部人員，如別的公司的人員如果想到本公司訪問，也是先通過這”ABC“許可權的三個人代為寫來訪申請，來訪審批，來訪門衛登記管理

從零開始學Java之編寫簡單的工程

筆者本人從最初開始接觸C語言、C++、VC++、彙編到後來接觸PHP以及Java，在這些語言的使用過程中深刻感受到這些語言都是相同的編寫思路，程式碼編寫的方式也是大同小異，目前認為Java語言的亮點是package以及反射機制。 package不僅提供

從零開始學Python3之五——模組

from ... import ... 什麼的我就不寫了= =模組的 __name__每個模組都有一個名稱，模組中的語句可以找到它們所處的模組的名稱。當模組第一次被匯入時，它所包含的程式碼將被執行。我們可以通過這一特性來使模組以不同的方式執行，這取決於它是為自己所用還

從零開始學 Web 之 移動Web（九）微金所案例

微金所案例

1、案例要求

2、不同屏幕尺寸布局

整體樣式

中大屏幕下樣式

小屏幕下樣式

超小屏幕（移動端）下樣式

3、代碼結構

4、頁面結構

5、源碼

index.html 文件

common.css 文件

wjs-index.less 文件

wjs-index.js 文件

6、代碼說明

7、案例演示

相關推薦

從零開始學 Web 之移動Web（九）微金所案例