2020年史上最全移動端Web整理從開發基礎到實戰(四)

時間  2019-12-18
標籤 2020年 史上 移動 web 整理 開發 基礎 實戰 欄目 無線 简体版
原文   原文鏈接

file

一、案例要求

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

二、不一樣屏幕尺寸佈局

總體樣式

file

中大屏幕下樣式

file

小屏幕下樣式

file

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

file

三、代碼結構

file

四、頁面結構

頁面結構主要分8大塊：css

  • 頭部塊
  • 導航條
  • 輪播圖
  • 信息塊
  • 預定塊
  • 產品塊
  • 新聞塊
  • 合做塊

五、源碼

相關源代碼已放置github：github.com/Daotin/Web/…html

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
    });
});
複製代碼

六、代碼說明

使用到的技術點：java

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

因爲須要輪播圖效果：jquery

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

實現方式：img的寬度爲100%,經過img標籤來實現。github

w>=768px：chrome

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

因此不能在 html 中直接添加代碼的方式，只能經過 js 動態插入圖片或背景圖的方式。安全

  1. 信息塊的製做可使用 bootstrap 組件的媒體對象來作，實現左邊爲圖標，右邊爲文字說明的樣式；
  2. 產品塊的製做可使用 bootstrap js插件下的標籤頁修改獲得，並且爲了實如今小屏幕下的滑動效果，引入了 iScroll 插件。

產品塊中「寶北」的添加：

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

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

  • 工具提示會默認的生成一個新的div標籤，只不過默認的文本顯示會換行，緣由是新添加的標籤的寬度是參照父容器的 ，應該將父容器div的寬度設置爲100%。
  • 記得對工具提示進行初始化 $('[data-toggle="tooltip"]').tooltip();
  1. 新聞塊同產品塊同樣，也是使用 bootstrap js插件下的標籤頁修改獲得，值得注意的是，在不一樣屏幕大小下，的顯示方式不一樣，因此在css樣式中使用到了媒體查詢的方式。

最後

還有2件事拜託你們

一：求贊 求收藏 求分享 求留言，讓更多的人看到這篇內容

二：歡迎添加個人我的微信

備註「資料」， 300多篇原創技術文章，海量的視頻資料便可得到

備註「加羣」，我會拉你進技術交流羣，羣裏大牛學霸具在，哪怕您作個潛水魚也會學到不少東西

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程