一、网页布局方式响应式开发

1、固定宽度布局：为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。
3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。
注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的。

二：响应式布局
Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

如上图所示，屏幕尺寸不一样展示给用户的网页内容也不一样，我们利用媒体查询可以检测到屏幕的尺寸（主要检测宽度），并设置不同的CSS样式，就可以实现响应式的布局。
我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容，使得用户体验得到了很大的提升，但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码，使整体网页的体积变大，应用在移动设备上就会带来严重的性能问题。
响应式布局常用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。

一般我们会对常见的设备尺寸进行划分后，再分别确定为不同的尺寸的设备设计专门的布局方式，如下图所示

以上是我们对常见的尺寸进行分类后的结果，下图是与之对应的媒体查询条件。

三：响应式开发

1. 什么是响应式开发
   a) 在移动互联日益成熟的时候，桌面浏览器上开发的网页已经不能满足移动端的设备的展示和阅读
   b) 之前，通常的做法是对移动端单独开发一套特定的版本
   c) 但是，如果移动终端设备起来越多的时候赋发成本太大，是因为需要做所有屏幕的适配
   d) 响应式开发的目的就是:一个网站能够兼容多种终端
   e) 在新建的网站上一般都会使用响应式开发
   f) 移动web开发和响应式开发是必须具备的技能
   g) 演示响应者页面

2. 响应式开发和移动web开发的区别

3. 响应式开发的原理：媒体查询：
   a) 查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。
   b) 实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。
   超小屏幕 （移动设备） w<768px
   小屏设备 768px-992px 768 <= w <992
   中等屏幕 992px-1200px 992 =< w <1200
   宽屏设备 1200px以上 w>=1200

4. 媒体查询的基本实现方式：常用属性设置: http://www.runoob.com/cssref/css3-pr-mediaquery.html
   a) CSS 语法
   @media mediatype and|not|only (media feature) {
   CSS-Code;
   }
   你也可以针对不同的媒体使用不同 stylesheets :

b) 媒体类型 值 描述 all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，智能手机等。 speech 应用于屏幕阅读器等发声设备 c) 媒体功能 值 描述 device-height 定义输出设备的屏幕可见高度。 device-width 定义输出设备的屏幕可见宽度。 max-device-height 定义输出设备的屏幕可见的最大高度。 max-device-width 定义输出设备的屏幕最大可见宽度。 min-device-width 定义输出设备的屏幕最小可见宽度。 min-device-height 定义输出设备的屏幕的最小可见高度。 max-height 定义输出设备中的页面最大可见区域高度。 max-width 定义输出设备中的页面最大可见区域宽度。 min-height 定义输出设备中的页面最小可见区域高度。 min-width 定义输出设备中的页面最小可见区域宽度。 d) 简单案例说明：控制不同屏幕尺寸下的屏幕背景色

四：CSS框架
随着Web应用变的越来越复杂，在大量的开发过程中我们发现有许多功能模块非常相似，比如轮播图、分页、选项卡、导航栏等，开发中往往会把这些具有通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，可以极大的节约开发成本，将这些通用的组件缩合到一起就形成了前端框架。

1. Bootstrap
   简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
   来自 Twitter，粉丝众多，是目前最受欢迎的前端框架。
   开始使用吧!
2. Amaze UI
   Amaze ~ 妹子UI，国人开发，后起之秀！
   开始使用吧!
3. Framework7
   Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。
   开始使用吧！

五：Bootstrap框架

1. Bootstrap框架：提高web开发效率
   e) Bootstrap简介：当前最流行的前端UI框架(有预制界面组件), Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目
   i. Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷
   ii. Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件
   f) 为什么 使用Bootstrap:
   i. 有自己的生态圈，不断的更新迭代
   ii. 提供一套简洁，直观，强悍的组件
   iii. 标准化的html+css编码规范
   iv. 让开发更简单，提高了开发效率
   v. 可以进行自定义扩展
   g) BootStrap的版本了解
   i. 2.x.x:兼容性好 / 代码不够简洁，功能不够完善
   ii. 3.x.x:稳定性好,放弃了IE6-IE7,对IE8的支持一般 /偏向于响应式布局开发，移动设备优先的web项目开发
   iii. 4.x.x:测试阶段，偏向于响应式，移动设备
   h) BootStrap基本模板

i) Bootstarp全局css样式 i. HTML5 文档类型 ... ii. 移动设备优先 iii. Normalize.css:为了增强跨浏览器表现的一致性，使用了 Normalize.css j) BootStrap版心容器—布局容器. i. 分类： 1. .container 类用于固定宽度并支持响应式布局的容器。 2. .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 ii. 针对.container,当屏幕宽度>992px的时候，布局容器宽度为1170px iii. 否则，当宽度>768px的时候，布局容器宽度为970px iv. 当宽度<768px的时候，布局容器宽度为100%(750px) k) BootStrap栅格系统 i. 概念：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中 ii. “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 iii. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 iv. 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 v. 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 vi. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。 vii. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。 viii. 栅格参数：

l) 实例：从堆叠到水平排列: 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
i. 效果：

ii. 代码：

------------------------------------------------ ------------------------------------------------ ------------------------------------------------ 简单说：栅格系统就是规范了你的column占据的宽度，只不过这个宽度是bootstrap事先规范好了。 m) 栅格系统的意义：移动设备和桌面屏幕：它可以规范在不同尺寸的屏幕下，当前的列占据的宽度。或者说一行可以放置几个列。 i. 效果：

ii. 代码：

细节： 1. 栅格系统是往上兼容的：意味着小屏幕上的效果在大屏幕上也是可以正常显示的人，但是大屏幕上的设置在小屏幕上却无法正常显示。 2. Row可以再次嵌套在列中。如果不能填满整列，则默认从左排列，如果超出，则换行展示 n) 栅格系统扩展说明： i. 嵌套列 1. 效果

2. 代码：

ii. 列偏移

1. 说明：使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

2. 注意：如果偏移前面的列，那么会将当前列后面所有的列都往后偏移

3. 效果：

4. 代码：

iii. 排序

1. 后推：push

2. 前拉：pull

3. 效果：

4. 代码：

o) BootStrap文档查看：可以利用bootstrap提供好的一些组件或者js效果来帮助我们快速的完成页面的开发，提高开发的效果。

五：LESS
LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单，本质上，LESS 包含一套自定义的语法及一个解析器。
安装
1、安装Nodejs环境 Node Package Manager (验证 node -v npm -v) npm:node packge manager
2、打开控制台（cmd），执行npm install -g less (验证 lessc -v) node packet manager
3、命令行编译 lessc path/xxx.less path/xxx.css
编译
浏览器只能识别CSS，LESS只是用来提升CSS可维护性的一个工具，所最终需要将LESS编译成CSS，然而通过命令行编译效率比较低下，一般都会借助于编辑器来完成编译，以sublime_text为例，sublime_text默认并不支持LESS的编译操作，需要安装插件实现。
1、执行npm install -g less-plugin-clean-css（使用sublime_text才用）
2、ctrl+shit+p打开命令面板
3、输入install package然后回车
4、安装 LESS、lessc、Less2Css三个插件
5、alt+s快捷键即可实现编译
语法
1、变量
格式：@变量名: 值，定义完成后可以重复使用

见代码示例6-1.less
2、混合
我们可以像使用函数一样来使用CSS

见代码示例6-2.less
3、嵌套
嵌套可以非常方便的管理我们的CSS层级关系

见代码示例6-3.html
浏览器中使用
了解了LESS基本语法后，可以用LESS写编写CSS代码了，但是需要实时的将LESS编译成CSS浏览器才能识别，利用编辑器能够编译，但是效率相对较低。
我们可以引入一个less.js文件，实现实时的解析，而不必每次修改都要编译，最后完成所有开发任务后，再通过编辑器编译成css文件。
1、下载然后引入less.js
2、引入xx.less文件，如：

注意：rel属性必须指定成stylesheet/less，并且styles.less要先于less.js引入。 必须以服务器方式访问，webstrom自带服务器功能也可以使用ghostlab调试工具的服务器。

六：案例：微金所页面的完成

1. 效果图

2. 整体页面结构块

<!—合作伙伴--> 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. 修改版心容器的宽度：

5. 轮播图的制作
   a) 使用bootstrap的预制组件—carousel
   b) Carousel预制组件的说明

.pc_imgBox{
height: 410px;
width: 100%;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

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. 点模板

ii. 图片模板

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.拿到数据 ajax
2.判断设备类型 >=768 --非移动设备 <768=移动设备
3.根据设备解析对应的数据 (读取json 1.字符串拼接 2.模板引擎–underscorejs.template)
4.渲染到html页面
5.当屏幕的尺寸发生变化的时候，动态的加载数据 on resize
* */
//1.通过ajax获取数据
var getData=function(callback){
KaTeX parse error: Expected 'EOF', got '}' at position 241: … }); }̲; //2.整个渲染过…(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);//操作图片模板vartemplateImgBox{=}_{.}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代码，进行展示
4. 信息块的制作
   a) 效果：

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

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

b) 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;
   KaTeX parse error: Expected '}', got 'EOF' at end of input: … */ width+=(this).innerWidth();
   console.log($(this));
   });
   //将宽度设置给nav
   nav.width(width);
   //使用小插件实现滑动效果
   itcast.iScroll({
   swipeDom:document.querySelector(".wjs_product_nav_parent"),
   swipeType:“x”,
   swipeDistance:50
   });
   }
3. 产品信息块详细产品信息的制作
   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代码：

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. 全部新闻块

iii. 标签块 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;
}
}