1.效果图

2.整体页面结构块

<!--顶部通栏-->
<header class="wjs_header"></header>
<!--导航-->
<nav class="wjs_nav"></nav>
<!--banner轮播图-->
<div class="wjs_banner"></div>
<!--信息-->
<div class="wjs_info"></div>
<!--预约-->
<div class="wjs_reserve"></div>
<!--产品-->
<div class="wjs_product"></div>
<!--新闻-->
<div class="wjs_news"></div>
<!--合作伙伴-->
<footer class="wjs_partner"></footer>

3.顶部通栏的制作：

a)效果：

b)分析：
i.这是一个通栏的结构，需要添加内容版心
ii.它需要实现响应式功能，在不同屏幕下显示的内容和样式不一样，所以使用响应式布局进行完成
iii.通栏块的宽度分布

c)结构：

d)结构块代码：

e)样式：
i.全局公共样式

/*公共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('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */url('../fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */
}
/*自定义字体图标*/
.wjs_font_icon{font-family: wjs;
}
/*手机图标对应的编码*/
.wjs_font_icon_phone::before{content: "\e908";
}
/*电话图标对应的编码*/
.wjs_font_icon_tel::before{content: "\e909";font-size: 14px;
}

ii.顶部通栏样式

.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;> .wjs_code{position: relative;display: block;> img{display: none;border: 1px solid #ccc;border-top: none;position: absolute;left: 50%;top:49px;transform:translateX(-50%);z-index: 999;}&:hover{>img{display: block;}}}}> div:last-of-type{> .btn-danger{background-color: @color;}> .btn{padding:3px 15px;}> .btn-link{color: #333;}}}
}

f)细节说明：

• i.字体图标的使用：自定义字体图标
• ii.公共样式的建立
• iii.Bootstrap提供的默认样式的使用(按钮和图标)
• iv.在sm和xs屏幕下顶部通栏不需要显示

4.导航栏的制作

a)使用bootstrap预制的导航条：

b)删除没有用的部分，如下拉列表和表单等元素
c)添加相应数量的导航，修改文本内容
d)对其进行定义样式修改设置

• i.修改版心容器的宽度：
• ii.修改导航的高度和行高
• iii.修改a标签的高度和行高
• iv.去掉a标签的默认背景色
• v.添加a标签激活状态和hover状态下的底部边框
• vi.字义字体图标
• vii.设置网页logo及文字，设置垂直居中对齐
• viii.设置超小屏幕下右侧“个人中心”的垂直居中对齐
• ix.设置不同屏幕下的响应式操作

e)效果：

5.轮播图的制作

a)使用bootstrap的预制组件—carousel
b)Carousel预制组件的说明

<!--data-ride="carousel":指定当前是一个轮播图插件   class="carousel slide"：轮播图样式，如果不添加，js效果可以正常实现，但是样式不一样-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- pageControl 页码展示 data-target="#carousel-example-generic"指定操作的是哪一个轮播图--><!--data-slide-to="0"控制指定索引的图片--><!--data-target="#carousel-example-generic"说明当前操作的是哪一个轮播图组件--><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

c)添加想进行展示的图片，同时添加对应数量的li。
d)调整样式：
i.在非移动端

1. 图片会进行等比例缩放，造成原始大于屏幕宽度的图片在非移动端屏幕展示的时候需要进行缩放，造成高度也会等比例缩放，影响显示效果
2. 解决方案：将图片做成背景图片，通过设置背景图片的居中显示，同时设置background-size:cover来达到背景图像完全覆盖背景区域
3. 结构代码：

<div class="item"><a href="" style="background-image: url('../images/slide_02_2000x410.jpg')"></a>
</div>

4.样式代码：

.carousel-inner a{
background-repeat: no-repeat;height:410px;width:100%;display: block;background-position: center;<!-把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。-background-size: cover;
}

ii.在移动端

1. 添加超链接，在超链接里面添加图片
2. 设置超链接的宽度为100%，设置图片的宽度也是100%.
3. Div代码：

<div class="item active"><a href=""><img src="../images/slide_01_640x340.jpg" alt="..."></a>
</div>

4.样式：

<style>.carousel-inner a{width:100%;display: block;}.carousel-inner a > img{width:100%;display: block;}
</style>

iii.静态的响应式轮播图

1. 简单思路：在结构代码中添加两种情况下的图片内容
2. 设置响应式隐藏，如在超小屏幕下:pc端的图片内容不显示 hidden-xs
3. 结构代码块：

<div class="item"><a href="" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_02_640x340.jpg" alt="..."></a><a href="#" class="pc_imgBox hidden-xs" style="background-image: url('../images/slide_02_2000x410.jpg')"></a>

4.样式：

<style>.m_imgBox{width:100%;display: block;}.m_imgBox > img{width:100%;display: block;}.pc_imgBox{height: 410px;width: 100%;display: block;background-repeat: no-repeat;background-position: center;background-size: cover;}
</style>

iv.静态式的轮播图完成之后的问题

1. 在移动端也会加载非移动端的图片资源
2. 在非移动端也会加载移动端的图片资源
3. 数据固定，不方便动态扩展
   v.更好的实现方式：
4. 通过后台数据请求，动态的加载资源：前台发送数据请求，后台处理，返回json数据，前台进行解析并显示
5. 实现过程
   a)使用json文件来模拟后台数据-index.json

[{"pc":"../images/slide_01_2000x410.jpg","mb":"../images/slide_01_640x340.jpg"},{"pc":"../images/slide_02_2000x410.jpg","mb":"../images/slide_02_640x340.jpg"},{"pc":"../images/slide_03_2000x410.jpg","mb":"../images/slide_03_640x340.jpg"},{"pc":"../images/slide_04_2000x410.jpg","mb":"../images/slide_04_640x340.jpg"}
]

b)创建模板
i.点模板

<!--轮播图点模板-->
<script type="text/template" id="bannerIndicator"><%_.each(model,function(item,i){%><li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li><%});%>
</script>

ii.图片模板

<!--轮播图图片模板-->
<script type="text/template" id="bannerImgBox"><%_.each(model,function(item,i){%><div class="item <%=i==0?'active':''%>"><%if(isMoblie){%><a href="" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="<%=item.mb%>" alt="..."></a><%}else{%><a href="#" class="pc_imgBox hidden-xs" style="background-image: url('<%=item.pc%>')"></a><%}%></div><%});%>
</script>

c)创建js文件，添加ajax请求
d)Underscore.js的介绍：Underscore.js是一个很精干的库，压缩后只有4KB。它提供了几十种函数式编程的方法，弥补了标准库的不足，大大方便了JavaScript的编程。MVC框架Backbone.js就将这个库作为自己的工具库。除了可以在浏览器环境使用，Underscore.js还可以用于Node.js。
e)整体js代码：

$(function(){banner();
});
/*ajax数据请求处理*/
function  banner(){/*1.拿到数据 ajax2.判断设备类型    >=768 --非移动设备   <768=移动设备3.根据设备解析对应的数据  (读取json   1.字符串拼接   2.模板引擎--underscorejs.template)4.渲染到html页面5.当屏幕的尺寸发生变化的时候，动态的加载数据  on resize* *///1.通过ajax获取数据var getData=function(callback){$.ajax({url:"../js/index.json",  /*这个路径是相对于发出请求的页面的路径*/type:"get",data:{},dataType:"json",success:function(data){callback(data);}});};//2.整个渲染过程var render=function(){//1.获取屏幕尺寸，判断屏幕的类型var width=$(window).width();//2.标记是否是移动端var isMoblie=false;//3.判断是否是移动端if(width < 768 ){ //是移动端isMoblie=true;}//4.获取数据getData(function(data){//1.数据已经读取//2.读取模板,转换为模板对象var templateIndicator= _.template($("#bannerIndicator").html());//3.传入数据，生成展示的html代码var htmlIndicator=templateIndicator({model:data});//4.展示$(".carousel-indicators").html(htmlIndicator);//操作图片模板var templateImgBox= _.template($("#bannerImgBox").html());var htmlImgBox=templateImgBox({model:data,isMoblie:isMoblie});$(".carousel-inner").html(htmlImgBox);});}//当屏幕大小发生改变的时候，监听,并实时渲染$(window).on("resize",function(){render();}).trigger("resize");
}

e)使用bootstarp实现移动端的图片滑动：

//使用bootstarp实现轮播图手势滑动操作
var startX=0;
var moveX=0;
var distanceX=0;
var isMove=false;
//1,获取需要进行滑动的图片盒子
$(".carousel-inner").on("touchstart",function(e){startX= e.originalEvent.touches[0].clientX;
});
$(".carousel-inner").on("touchmove",function(e){isMove=true;moveX= e.originalEvent.touches[0].clientX;distanceX=moveX-startX;
});
$(".carousel-inner").on("touchend",function(e){/*指定最小滑动的距离*/if(Math.abs(distanceX) > 50 && isMove){if(distanceX >0){/*上一张*/$(".carousel").carousel('prev');}else {/*下一张*/$(".carousel").carousel('next');}}//重置参数isMove=false;
});

f)补充说明

• i.当一张很大的图片显示在较小容器上的时候，如果设置了宽度，那么高度在默认情况下会等比例缩放
• ii.轮播图通过键盘的左右键也能进行操作
• iii.如果图片不需要说明，可以将说明块的div结构删除
• iv.使用underscore模板的大致步骤

1. 准备数据
2. 读取模板，生成模板对象
3. 将数据传递给模板对象，生成html代码，进行展示

6.信息块的制作

a)效果：

b)结构说明：栅格系统的使用

c)Div代码：注意字体图标的使用

<div class="wjs_info  hidden-xs"><div class="container"><div class="row"><div class="col-md-4 col-sm-6"><a href=""><div class="media"><div class="media-left"><span class="wjs_font_icon wjs_font_icon_E900"></span></div><div class="media-body"><h4 class="media-heading">支持交易保障</h4><p>银联支持全程保障支持安全</p></div></div></a></div>

d)样式：

.wjs_info{padding: 30px;.row{>div{margin-top:20px;.wjs_icon{font-size: 30px;}>a:hover{color: @color;}}}
}

7.预约块的制作

a)效果：

b)Div结构：

<!--预约-->
<div class="wjs_reserve hidden-xs"><div class="container"><div class="row"><div class="pull-left"><span class="wjs_font_icon wjs_font_icon_E906"></span>现在的 272 人在排队，累计预约交易成功 7571 次<a href="" class="m_l10">什么叫预约投标</a><a href="" class="m_l10 wjs_link">立即预约</a></div><div class="pull-right"><span class="wjs_font_icon wjs_font_icon_E905"></span><a href="">微金所企业宣传片</a></div></div></div>
</div>

c)样式：

.wjs_reverse{height: 60px;line-height: 60px;border-top: 1px solid #ccc;.wjs_icon{font-size: 18px;}.wjs_now{color: @color;border-bottom: 1px dashed @color;}a:hover{color: @color;}
}

8.产品信息块标签页的制作:bootstrap标签页的使用

a)效果

b)使用bootstrap提供的标签页，进行自定义的扩展修改

• i.添加版心
• ii.设置背景色，底部边框，内间距
• iii.拷贝样式到当前页面做自定义修改(如：去除标签页的边框，背景等)
• iv.添加li标签的下边框，设置背景色在不同状态下一致(#e92322)

c) 标签栏的补充操作：隐藏及滑动

• i.在拖动屏幕缩小的时候，标签栏会自动换行，影响美观

• ii.我们可以将父容器设置为overflow:hidden.
  

• iii.实现标签栏的左右滑动效果

1. 使用js计算出ul的实际宽度(所有li宽度的和)
2. 添加滑动效果

//动态的计算wjs_product_nav的宽度
function initProduct(){var nav=$(".wjs_product_nav");//获取里面所有li标签var lis=nav.find("li");var width=0;$.each(lis,function(i,item){/*width:内容的宽度innerWidth:内容+内间距的宽度outerWidth:内容+内间距+边框的宽度outerWidth(true):内容+内间距+边框+外边距的宽度* */width+=$(this).innerWidth();console.log($(this));});//将宽度设置给navnav.width(width);//使用小插件实现滑动效果itcast.iScroll({swipeDom:document.querySelector(".wjs_product_nav_parent"),swipeType:"x",swipeDistance:50});
}

9.产品信息块详细产品信息的制作
a)栅格系统的使用（lg:3列 md/sm:2列 xs:1列）
b)单一信息块的结构

c)单一信息块样式

.wjs_product{.tabParent{overflow: hidden;border-bottom: 1px solid #ddd;}background-color: #eee;clear: both;border-top:1px solid #ccc;padding: 20px;.nav-tabs{border-bottom: none;> li{margin-bottom: 0px;padding:0px 15px;border-bottom: none;>a{background-color: #eee;line-height: 45px;border-radius: 0;border-bottom: none;}>a:hover{background-color: #eee;border-bottom: 2px solid @color;box-sizing: border-box;border-radius: 0;}&.active{>a,a:hover,a:focus{border: none;background-color: #eee;border-bottom: 3px solid @color;border-radius: 0;}}}}/*产品详细信息块*/.wjs_pBox{height: 150px;background-color: #fff;box-shadow: 1px 1px 1px #ddd;margin-top: 20px;> .wjs_Pleft{height: 100%;overflow: hidden;padding-top:10px;font-size: 12px;color: #666;>p{width: 100%;text-align: center;font-size: 14px;}> .row{margin-left:-10px;margin-right:-10px;> div:nth-of-type(even){text-align: right;}}}> .wjs_Pright{width: 100px;height: 100%;float: right;border-left:1px dashed #ccc;position: relative;text-align: center;padding-top:30px;> .wjs_tip{position: absolute;left: 50%;top:20px;width: 100%;transform:translateX(-50%);>span{font-size: 13px;cursor: pointer;}>span:nth-of-type(1){color: @color;border: 1px solid @color;}>span:nth-of-type(2){color: @blueColor;border: 1px solid @blueColor;}}> b{font-size: 40px;color: @color;}>sub{color: @color;bottom: 0;}> p{font-size: 12px;}&::before,&::after{content: "";width: 10px;height: 10px;border-radius: 50%;background-color: #eee;position: absolute;left:-5px;}&::before{top:-5px;box-shadow: 0px -1px 1px #ddd inset;}&::after{bottom:-5px;box-shadow: 0px 1px 1px #ddd inset;}}/*第一块样式:注意将这块样式添加到最后，防止被 其它样式覆盖*/&.active{background-color: @color;/*在相同权重的情况下进行样式的覆盖*/>.wjs_Pright{> b,sub,p{color: #fff;}}>.wjs_Pleft{color: #fff;position: relative;/*不回左上角图标*/&::before{content: "\e915";/*一定要指定字体*/font-family: wjs;font-size: 25px;position: absolute;left: 0;top: -6px;}}}}
}

d)工具提示：
i.Div代码：

<div class="wjs_tip"><span data-toggle="tooltip" data-placement="top" title="微金宝">宝</span><span data-toggle="tooltip" data-placement="top" title="北京市">北</span>
</div>

ii.一定要自己进行工具提示的初始化：

//初始化工具
$('[data-toggle="tooltip"]').tooltip();

e)进度条的添加
i.使用bootstrap提供的组件-进度条
ii.放置到合适的位置
iii.修改样式：

/*进度条*/
.wjs_product_box > .box_left .progress{height: 10px;line-height:10px;
}
.wjs_product_box > .box_left .progress > .progress-bar{line-height:10px;
}

f)注意事项：
i.渲染顺序的问题：先放置浮动块
ii.栅格系统可以嵌套
iii.通过右侧块的伪类来实现两个半圆效果
10.新闻的制作
a)Bootstrap页签的使用
b)新闻标题的制作
i.整体结构块：

ii.全部新闻块

<div class="col-md-2 col-md-offset-2"><p class="news_title">全部新闻</p>
</div>

iii.标签块

<div class="col-md-1"><div class="leftline hidden-xs hidden-sm"></div><ul class="nav wjs_news_nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#home1" aria-controls="home" role="tab" data-toggle="tab"><span class="wjs_font_icon wjs_font_icon_new01"></span></a></li><li role="presentation"><a href="#profile1" aria-controls="profile" role="tab" data-toggle="tab"><span class="wjs_font_icon wjs_font_icon_new02"></span></a></li><li role="presentation"><a href="#messages1" aria-controls="messages" role="tab" data-toggle="tab"><span class="wjs_font_icon wjs_font_icon_new03"></span></a></li><li role="presentation"><a href="#settings1" aria-controls="settings" role="tab" data-toggle="tab"><span class="wjs_font_icon wjs_font_icon_new04"></span></a></li></ul>
</div>

iv.新闻内容块

v.样式

.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;right: -8px;bottom: -4px;}}.wjs_news_line{position: absolute;width: 1px;height: 100%;border-left:1px dashed @color;left: 45px;top: 0;}.nav-tabs{border-bottom: none;position: relative;>li{margin-bottom:60px;> a{background-color: #eee;width: 60px;height: 60px;border-radius: 50%;}> a:hover{background-color: @color;}&.active{>a,a:hover,a:focus{background-color: @color;border: none;}}.wjs_icon{color: #fff;font-size: 30px;}}> li:last-of-type{margin-bottom: 0px;}@media screen and (min-width: 768px) and (max-width: 992px){>li{margin:20px 30px;}}@media screen and (max-width: 768px){>li{margin:20px 0px;width: 25%;}}}.wjs_newslist{list-style: none;> li{line-height: 60px;}}
}

11.合作伙伴块的制作
a)效果：

b)结构：

c)样式：

.wjs_partner{padding:20px;background-color: #eee;text-align: center;h3{width: 100%;text-align: center;line-height: 50px;}ul{list-style: none;display: inline-block;> li{float: left;margin-left:20px;}}.wjs_icon{font-size: 80px;}
}