一 响应式布局

1 传统布局

固定布局：通过块的width宽度进行设置，取固定值（960px，1000px）

缺点：会出现页面两边留白或者水平滚动条，让用户的体验感较差

2 优化布局

浮动+百分比布局：width宽度的取值不再固定化，直接使用%进行设置

优点：可以让页面随整体宽度的变化进行进行各自组成宽度的自动改变

弹性盒布局：通过display取值flex进行设定（在外层的大盒子进行设置，一旦设置后，会自动对其中的小盒子进行弹性布局）

弹性布局属性flex的常用子属性如下：

1 flex：伸缩性，取整型数值，通常在多个小盒子中设置，值一致的话，其所占宽度一致

2 flex-direction：伸缩方向，有4个取值

row：默认取值，小盒子自动从左往右进行排列
row-reverse：小盒子从右往左进行排列
column：小盒子从上到下进行排列
column-reverse：小盒子从下往上进行排列

3 flex-wrap：伸缩换行，常规3个取值

nowrap：默认值，不换行
wrap：换行
wrap-reverse：换行显示，会颠倒行顺序

4 justify-content：主轴对齐，常规5个取值

flex-start：默认取值，左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐，整体平均分布
space-around：环绕对齐，每个小盒子左右都右相同的间距，中间是双倍间距

3 媒体查询

终端显示设备的不同，决定了显示内容的不同（图片大小，块的位置等等...），我们需要通过媒体查询确定当前显示的设备信息，来显示操作对应的样式

媒体查询由以下3个部分组成：

1 媒体类型

设备终端的类型，通常有如下取值
all：所有设备
screen：显示器（PC端）
tv：家用电视机
...

2 媒体特性特征

媒体常用属性
width：宽度
height：高度
...

3 关键词，关键字

用来连接，关联（媒体类型和媒体特征）
and：并且，同时满足
only：唯一的，唯一性
not：取反，不包含

4 核心语法

有以下两种实现方式：

在内部样式表style标签中：
@media 媒体类型 关键字 (媒体特性){
    选择器{样式...}
}
注意：关键字和特性括号之间有空格

分两步：
先创建对应的外部样式表
再在页面中使用link标签进行设置，在media属性中设置
<link rel="stylesheet" type="text/css" href="css/style3.css" media="..."/>

5 实现案例：

浏览器页面宽度900px以上，背景色-红色

浏览器页面宽度600px-900px之间，背景色-黄色

浏览器页面宽度600px以下，背景色-蓝色

4 响应式布局优缺点

优点：

可以灵活的运行在不同的设备终端上，更少的维护成本

缺点：

兼容设备工作量大，代码繁杂，无用的媒体查询代码会影响加载时间

5 注意事项

在媒体查询中，相同的样式会覆盖

如果是按min-width进行查询，可以直接从小到大进行排列

反之如果是按max-width进行查询，可以直接从大到小进行排列

以避免样式覆盖

二 BootStrap样式

1 基本构成

概念：

来自Twitter，是一个比较常用的前端框架，由html，css，javascript等技术构成，成熟版本V3

引入：

需要在html页面中引入BootStrap的css文件和js文件（开发版+运行版[压缩版]），当然在引入js的时候，前置引入JQ的版本文件

构成：

由栅格系统、基础组件、Css组件、JS插件

2 栅格系统

定义：

通过一系列的row（行）和column（列）组成的页面，我们需要展现的内容直接放置到对应的列模块中。

通过等分12列的方式进行数据呈现（任何设备）

为了让数据呈现更加友好，会在外层设置名为container的类样式

由于终端设备的不同，BootStrap把分辨率设置为4种展现形式

1 超小屏幕（手机），类前缀col-xs，屏幕宽度<768px

2 小屏幕（平板），类前缀col-sm，屏幕宽度<992px

1 中等屏幕（常用显示器），类前缀col-md，屏幕宽度<1200px

1 大屏幕（超大显示器），类前缀col-lg，屏幕宽度>1200px

案例

<div class="row">
	<div class="col-sm-6 col-md-3 col-lg-2">1</div>
	<div class="col-sm-6 col-md-3 col-lg-2">1</div>
	<div class="col-sm-6 col-md-3 col-lg-2">1</div>
	<div class="col-sm-6 col-md-3 col-lg-2">1</div>
</div>

解析：

如果是大屏幕lg，页面行会共占据8个列

如果是中屏幕md，页面行会占据12个列（满了）

如果是小屏幕sm，页面共两行（有换行）,两个sm-6占据1行，4个两行

超小屏幕xs，各自一行，共4行

3 列的相关操作

以md中屏进行解读

1 列组合，使用col-md-数，值的类样式进行控制，数值为几就合并几个列

2 列偏移，使用col-md-offset-数值，的类样式进行控制，值为几就在列前空出几个列（左margin）

3 列嵌套，在某一个列中再使用row+列的方式进行页面组合

4 列排序

使用col-md-push-数值，的类样式进行控制，向右后置数值列的位置

使用col-md-pull-数值，的类样式进行控制，向左前置数值列的位置

三 微金所综合案例

1 项目准备

创建项目WJS-你的名字，引入css，js，fonts，images文件夹内容

使用BootStrap模板页面，进行首页内容开发

2 整体构成

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

3-1 头部

我们进行2，5，2，3块的划分，对于小屏，超小屏隐藏 hidden-sm hidden-xs

1 组成

<header class="wjs_header hidden-sm hidden-xs">
    <div class="container">
        <div class="row">
            <div class="col-md-2">2</div>
            <div class="col-md-5">5</div>
            <div class="col-md-2">2</div>
            <div class="col-md-3">3</div>
         </div>
    </div>
</header>

2 内容

第一块：手机图标，文字，向下箭头图标，二维码图片
第二块：电话图标，a标签文字
第三块：两个a标签文字
第四块：两个按钮

3 图标引入

在页面中引入css文件夹下的base.css文件

使用系统提供好的图标，或者自定义的图标，在对应的位置class引入

<!--手机图标-->
<span class="wjs_icon wjs_icon_phone"></span>
<!--向下箭头图标-->
<span class="glyphicon glyphicon-menu-down"></span>

4 Css设置

创建wjs.css样式文件，在页面中link引入

头部具体样式细节如下

.wjs_header{
	/*头部整体内容居中，行高的设置*/
	height: 50px;
	line-height: 50px;
	text-align: center;
	/*下边框样式*/
	border-bottom: 1px solid lightgrey;
}
.wjs_header .row div:nth-of-type(-n+3){
	/*给头部块中row里的前3个div设置右边框样式*/
	border-right: 1px solid lightgrey;
}
.wjs_header .row .wjs_code{
	/*让头部块中第一块整体相对定位，再让二维码块进行绝对定位，二维码的位置就固定了*/
	position: relative;
	display: block;
}
.wjs_header .row .wjs_code img{
	/*图片绝对定位*/
	position: absolute;
	/*上距离*/
	top:49px;
	/*左距离*/
	left: 0px;
	border: 1px solid lightgrey;
	/*没有上边框*/
	border-top: none;
    /*隐藏*/
	display: none;
}
.wjs_header .row .wjs_code:hover img{
	/*鼠标悬停头部第一块时，显示二维码图片*/
	display: block;
}

3-2 导航条

直接从官网组件中复制导航条原生代码：

整体控件分两个部分：

1 brand品牌图标区+手风琴按钮

2 被手风琴按钮控制的导航核心显示区域（ul构成）

具体样式代码如下

.wjs_nav{
	/*去除默认的下外边距*/
	margin-bottom:0px ;
}
.wjs_nav .navbar-brand{
	height: 80px;
	/*由于brand样式有默认15的内填充，所以行高和高度差30*/
	line-height: 50px;
}
.wjs_nav .wjs_icon{
	/*导航条图标大小*/
	font-size: 40px;
}
.wjs_nav .wjs_icon_logo{
	/*logo颜色*/
	color: rgb(225,37,27);
}
.wjs_nav .wjs_icon_text{
	/*文本颜色*/
	color: rgb(51,51,51);
}
.wjs_nav .navbar-nav a{
	line-height: 50px;
	font-size: 16px;
	/*下边框，颜色透明transparent*/
	border-bottom: 3px solid transparent;
}

.wjs_nav .navbar-nav a:hover,
.wjs_nav .navbar-nav a:focus{
	/*a标签悬停，或者获取焦点时，下边框的样式*/
	border-bottom: 3px solid rgb(225,37,27);
}
.wjs_nav .navbar-toggle{
	/*总高80，手风琴按钮自身高度34；（80-34）/2*/
	margin-top: 23px;
}

3-3 轮播图

直接从官网组件中复制轮播原生代码：

在整体轮播div中：

一个ol：多个li呈现图片下方小圆点

一个图片展示div容器：多个div子标签，每个div对应一张轮播图片设置

两个a标签：图片左右两边的上下点击图片(Previous Next)

最简单实现轮播效果，在div展示容器的div子标签里img标签直接引入图片

本题使用两种大小图片进行不同屏幕的投放，所以在div中通过存储数据，使用jq代码进行动态实现：

<div class="item" 
	data-large-image="images/slide_02_2000x410.jpg" 
	data-small-image="images/slide_02_640x340.jpg">
</div>

jq实现代码（注意：页面引入需要把自定义的js文件放在jq版本文件下方）

/*获取class名为item的4个div*/
var items = $(".wjs_banner .item");
/*浏览器屏幕尺寸改变事件*/
$(window).on("resize",function(){
    /*获取浏览器尺寸*/
    var width = $(window).width();
    /*if-else判断*/
    if (width >= 768) {
        //pc端，遍历
        $(items).each(function(){
            /*每一个div*/
            var item = $(this);
            /*获取大背景图片路径*/
            var imgSrc = item.data("largeImage");
            /*填充内容*/
            $(item).html('<a href="#" class="pcImg" style="background-image: url('+imgSrc+');"></a>');
        });
    } else{
        //移动端，遍历
        $(items).each(function(){
            /*每一个div*/
            var item = $(this);
            /*获取小图片路径*/
            var imgSrc = item.data("smallImage");
            /*填充内容*/
            $(item).html('<a href="#" class="mobileImg"><img src="'+imgSrc+'"/></a>');
        });
    }
}).trigger("resize");/*trigger函数：为了程序一加载就强制执行一次*/

3-4 信息块

该块特征：

1 在xs宽度下隐藏该模块（hidden-xs）

2 在md宽度下，一行显示三个栅格（col-md-4）

3 在sm宽度下，一行显示两个栅格（col-sm-6）

页面有如下代码复制6个构成

<div class="col-sm-6 col-md-4">
    <a href="#">
        <div class="media">
            <!-- 左侧的文字或图片 -->
            <div class="media-left wjs_icon wjs_icon_E900"></div>
			<!-- 右侧文字 -->
            <div class="media-body">
               	<!-- 右侧标题文字，稍大 -->
                <h4 class="media-heading">支持交易保障</h4>
				<!-- 右侧正文，稍小一点 -->
                <p>银联支持全程保障安全支持</p>
			</div>
		</div>
	</a>
</div>

核心样式

.wjs_info{
    /*外填充*/
	padding: 30px;
}
.wjs_info .wjs_icon{
    /*字体图标大小，注意设置前置选择器*/
	font-size: 30px;
}
.wjs_info .row>div{
    /*行下的子div进行上外边距设置*/
	margin-top: 20px;
}
.wjs_info .row a:hover{
	color: rgb(225,37,27);
}

3-5 预约块

和信息块相似，是整体首页比较简单的两个模块，该块特征

1 在xs宽度下隐藏该模块（hidden-xs）

2 栅格列模式：col-sm-9，col-sm-3

3-6 产品块

该模块的实现，需要使用到 JavaScript插件 中的 标签页 组件

该组件核心由两部分构成

1 ul构成的导航tab
li的a标签href属性指向某个面板div
href="#id值"
2 div构成的面板tab
某个div的属性id="id值"

1 tab导航区

为方便tab导航标签项溢出问题，在原生ul代码外层套一个div

css样式如下：

.wjs_product{
	/*清除前后浮动信息*/
	clear: both;
	/*产品块背景色和底部是一致的*/
	background-color:rgb(238,238,238) ;
	padding: 20px;
}
.wjs_product .nav-tabs li{
	/*给li左右产生内填充*/
	padding: 0px 15px;
}
.wjs_product .nav-tabs li a{
	/*增加高度，去除边框影响，设置下边框样式*/
	line-height: 50px;
	border: none;
	border-bottom: 3px solid transparent;
}
.wjs_product .nav-tabs li a:hover{
	/*悬停显示特殊红色下边框*/
	border-bottom: 3px solid rgb(225,37,27);
}

.wjs_product .nav-tabs li.active a,
.wjs_product .nav-tabs li.active a:hover,
.wjs_product .nav-tabs li.active a:focus{
	/*被选中带active样式的a标签默认，悬停，焦点时候的样式*/
	background-color: transparent;
	border: none;
	border-bottom: 3px solid rgb(225,37,27);
}
/*tab项进行隐藏并能水平滑动*/
.wjs_product .tab_parent{
	width: 100%;
	overflow: hidden;
}

计算ul整体宽度js代码如下：

//计算ul的整体宽度
var ul = $(".wjs_product .nav-tabs");
var lis = ul.find("li");
//定义总宽度
var totals = 0;
$(lis).each(function(){
	totals += $(this).innerWidth();//内容+padding
});
ul.width(totals);

水平滑动js代码如下（注意：页面引入iscroll.js文件）：

var myScroll = new IScroll('.tab_parent',{
	scrollX:true,scrollY:false
});

2 tab面板区

本题一共由7个导航tab选项+7个面板显示区构成，我们只在第一个面板里完成了效果呈现

语法架构如下

<div class="container">
	<div class="row">
		<div class="col-xs-12 col-sm-6 col-md-4">
			在不同分辨率屏幕大小下：超小屏1行一个，小屏1行两个，中屏1行3个（产品小块）
			每个小块中分左右两块
            左边为可变宽度区域
            右边定位后大小不变
		</div>
	</div>
</div>

核心样式如下

.wjs_product .wjs_proBox .wjs_pLeft>.row{
	/*左侧默认row样式左右外边距调整，默认-15px*/
	margin-left: -10px;
	margin-right: -10px;
}
.wjs_product .wjs_proBox .wjs_pLeft>.row div:nth-of-type(even){
	/*左侧嵌套列中的偶数div，文字靠右对齐*/
	text-align: right;
}
.wjs_product .wjs_proBox .wjs_pRight{
	/*盒子右侧样式*/
	height: 150px;
	width: 100px;
    /*定位*/
	position: absolute;
	right: 0px;
	top:20px;
	text-align: center;
	border-left: 1px dashed lightgrey;
	padding-top: 30px;
}
.wjs_product .wjs_proBox .wjs_pRight::after,
.wjs_product .wjs_proBox .wjs_pRight::before{
	/*定位2个和背景同色的圆，造页面特殊形状，注意宽度，高度，半径，left，top等值的关系*/
	content: "";
	width: 10px;
	height: 10px;
	background-color: rgb(238,238,238);
	position: absolute;
	border-radius: 5px;
	left: -5px;
}
.wjs_product .wjs_proBox .wjs_pRight::before{
	top: -5px;
}
.wjs_product .wjs_proBox .wjs_pRight::after{
	bottom: -5px;
}
/*高亮的盒子，active样式，注意交集选择器写法，两个选择器间没有空格*/
.wjs_product .wjs_proBox.active{
	background-color: rgb(225,37,27) ;
	color: white;
}

3-7 新闻块

该模块的实现，和产品块一样，也需要使用 JavaScript插件 中的 标签页 组件，整体结构如下

<div class="constants">
    <div class="row">
        <div class="col-md-2 col-md-offset-2">
            新闻的标题块
		</div>
        <div class="col-md-1">
            新闻tab图标（可水平，也可垂直呈现）
        </div>
        <div class="col-md-7">
            新闻面板（我们只实现第一个面板）
        </div>
   	</div>
</div>

核心样式

.wjs_news .wjs_news_title::before{
    /*新闻块左边标题下边框线条右边的小圆点*/
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 4px;
	border: 1px solid lightgrey;
	position: absolute;
	bottom: -4px;
	right: -8px;
}
.wjs_news .nav-tabs li:nth-of-type(-n+3){
	/*中间tab导航区，撑高li：最后一个li下方不撑高*/
	margin-bottom: 60px;
}

.wjs_news .wjs_newsLine{
    /*中间tab导航区，红色竖虚线*/
	width: 1px;
	height: 100%;
	border: 1px dashed rgb(225,37,27);
	position: absolute;
	left: 45px;
}
/*中屏下（小于992px）的li横向样式，媒体查询*/
@media screen and (max-width:992px) {
	.wjs_news .nav-tabs li{
		width: 25%;
		margin-top: 20px;
	}
}

3-8 底部-合作伙伴

整个底部和头部一致，设置对应分辨率下的显隐，样式hidden-xs，hidden-sm

构成：

一个h3+一个ul（9个li，核心字体图标）

样式：

.wjs_partner{
	/*整体高度，对齐，背景色的样式处理*/
	height: 185px;
	text-align: center;
	background-color: rgb(238,238,238);
    /*溢出内容自动隐藏*/
	overflow: hidden;
}
.wjs_partner li{
	/*去除li列表风格(小黑点)*/
	list-style: none;
	/*浮动，水平排列*/
	float: left;
	/*+左外边距*/
	margin-left: 25px;
}
.wjs_partner li .wjs_icon{
	/*设置字体图标的大小*/
	font-size: 80px;
}

###