從零開始學 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> <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(九)微金所案例