2020年史上最全移动端Web整理从开发基础到实战(三)

1、touch事件的缺陷

咱们在上面《页面分类》的项目中，对 tap 事件的处理使用的是 touch 事件处理的，由于若是使用 click 事件的话，总会有延时。

可是呢，touch 事件并非完美的，无论是咱们本身封装的 tap 事件，仍是 zepto 自带的 tap 事件，在移动端都有一个致命的缺陷，就是“点透”。

什么是“点透”呢？

假若有两个盒子，盒子A和盒子B，若是盒子A在盒子B的上面，当咱们使用 tap 事件点击盒子A的时候，盒子B会触发 click 事件，这就是点透。

触发这两个事件的顺序是 tap 事件，而后是 click 事件。由于 tap 事件内部是 touch 事件处理的，而 touch 事件是先于 click 事件触发的。

这个时候，咱们既想无延时，又不想触发点透效果，并且有的时候，咱们但愿咱们的网页不只能够在移动端访问，在 PC 模式下也能够访问，可是 tap 事件只能在移动端使用，因此只能用 click 事件，可是 click 又有延时，怎么办呢？

咱们知道， touch 事件只能在移动端使用，这个咱们没法改变，因此咱们只能改变延时的问题，因而咱们就引入了 "fastclick.js" 库文件，解决 click 的延时问题。

使用方式：

一、引入 fastclick.js 文件。

二、在 script 中加入如下函数：

原生 js 的话，加入：

if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
      	// document.body 表示整个body下的全部元素都是用fastclick效果，能够修改。
		FastClick.attach(document.body);
	}, false);
}
复制代码

jQuery 或 Zepto 的话：

$(function() {
	FastClick.attach(document.body);
});
复制代码

三、正常使用 元素.addEventListener("click", function(){}) 或者 元素.on("click", function(){}) ，来使用改装事后的 click 事件，这个 click 事件没有延时。

2、移动端的一些经常使用插件

见识到 fastclick 插件的好处以后，咱们就挖掘出了更多好用的插件，能够大大提升咱们开发的效率。

一、iScroll

如下为官方介绍：

iScroll是一个高性能，资源占用少，无依赖，多平台的 javascript 滚动 插件。

它能够在桌面，移动设备和智能电视平台上工做。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。

iScroll不只仅是 滚动。它能够处理任何须要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。给它一个扫帚它甚至能帮你打扫办公室。

即便平台自己提供的滚动已经很不错，iScroll能够在此基础上提供更多难以想象的功能。具体来讲：

细粒度控制滚动位置，甚至在滚动过程当中。你老是能够获取和设置滚动器的x，y坐标。 动画可使用用户自定义的擦出功能（反弹'bounce'，弹性'elastic'，回退'back'，...）。 你能够很容易的挂靠大量的自定义事件（onBeforeScrollStart, * 开箱即用的多平台支持。从很老的安卓设备到最新的iPhone，从Chrome浏览器到IE浏览器。

API:caibaojian.com/iscroll-5/

使用方式：

一、但愿你的结构以下，可是不限定标签（下面的 ul 能够改成 div，li 能够改成 p 等，不限定标签类型）。

<div id="wrapper">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>
复制代码

二、在 script 标签中初始化 iScroll。

var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
复制代码

若是是 jQuery 的话更简单了，一句话：

var myScroll = new IScroll(".wrapper");
复制代码

三、若是想实现像滚轮，显示滚动条等效果，能够在初始化的时候，将这些需求做为对象，填入第二个参数中，好比，增长滚轮上下滚动操做和显示滚动条的效果：

var myScroll = new IScroll(".wrapper", {
  mouseWheel: true, // 使用滚轮
  scrollbars: true  // 显示滚动条
});
复制代码

如此简单三步操做，就能够轻松实现你想要的功能。

二、swipe

swipe.js 是一个比较有名的触摸滑动插件，它可以处理内容滑动，支持自定义选项，你可让它自动滚动，控制滚动间隔，返回回调函数等。常常做为轮播图使用。

使用方法：

一、引入 swipe.js 文件

二、但愿你的 html 结构为（不限定标签名称）：

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
复制代码

三、对其格式进行设定（固定写法，最好不要修改，固然类名称须要修改）

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}
复制代码

三、在 script 中进行初始化操做：

window.mySwipe = Swipe(document.getElementById('slider'));
复制代码

四、若是你想要自动轮播，滑动等操做，须要在初始化的第二个参数中，引入一个对象，好比：

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,  // 默认显示第二张图片
  speed: 400,     // 过渡400ms
  auto: 3000,     // 轮播间隔 2s
  continuous: true,  // 循环轮播（默认开启）
  disableScroll: false,  // 禁止滑动（默认关闭）
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});
复制代码

五、固然你还能够在 PC 上使用左右两个按钮来上一张下一张翻页。swipe 会提供 next() , prev() 等函数来实现上一张下一张翻页。好比：

document.getElementById('btn1').onclick = function(){
  window.mySwipe.prev(); // 调用系统的prev()方法
};

document.getElementById('btn2').onclick = function(){
  window.mySwipe.next(); // 调用系统的next()方法
};
复制代码

三、swiper

swiper 与 swipe 相似，均可以提供轮播触摸滑动的效果，只不过 swiper 可以提供的特效更多，更加炫酷，相应的体积也更大。

使用说明： 参考连接：www.swiper.com.cn/usage/index…

须要注意的是，swiper 不一样于 swipe，它也是结构固定，不限标签的，惟一的区别是类样式的名称是不可改变的。由于它引入了库文件的 css 样式。因此最好不要改变类样式的名称。具体的内容能够参考官网，有不少详细的使用说明和特效演示。

临时Tips：overflow:hidden 可让子元素浮动的父盒子由高度为0，到自动伸缩。

3、响应式布局

常见的网页布局方式分为如下四种：

一、固定宽度布局：为网页设置一个固定的宽度，一般以px作为长度单位，常见于PC端网页。

二、流式布局：为网页设置一个相对的宽度，一般以百分比作为长度单位。

三、栅格化布局：将网页宽度人为的划分红均等的长度，而后排版布局时则以这些均等的长度作为度量单位，一般利用百分比作为长度单位来划分红均等的长度。

四、响应式布局：经过检测设备信息，决定网页布局方式，即用户若是采用不一样的设备访问同一个网页，有可能会看到不同的内容，通常状况下是检测设备屏幕的宽度来实现。

注：以上几种布局方式并非独立存在的，实际开发过程当中每每是相互结合使用的。"

一、响应式布局

响应式布局，意在实现不一样屏幕分辨率的终端上浏览网页的不一样展现方式。

经过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验，以下图：

如上图所示，屏幕尺寸不同展现给用户的网页内容也不同，咱们利用 媒体查询 能够检测到屏幕的尺寸（主要检测宽度），并设置不一样的CSS样式，就能够实现响应式的布局。

二、响应式布局的缺点

咱们利用响应式布局能够知足不一样尺寸的终端设备很是完美的展示网页内容，使得用户体验获得了很大的提高，可是为了实现这一目的咱们不得不利用媒体查询写不少冗余的代码，使总体网页的体积变大，应用在移动设备上就会带来严重的性能问题。

响应式布局经常使用于企业的官网、博客、新闻资讯类型网站，这些网站以浏览内容为主，没有复杂的交互。

三、屏幕尺寸的划分

通常咱们会对常见的设备尺寸进行划分后，再分别肯定为不一样的尺寸的设备设计专门的布局方式，以下图所示

类型	布局宽度
大屏幕	>= 1200px
默认	>= 980px
平板	>= 768px
手机到平板之间	<= 767px
手机	<= 480px

四、媒体查询

参考连接：www.runoob.com/cssref/css3…

使用 @media 查询，你能够针对不一样的媒体类型定义不一样的样式。

@media 能够针对不一样的屏幕尺寸设置不一样的样式，特别是若是你须要设置设计响应式的页面，@media 是很是有用的。

当你重置浏览器大小的过程当中，页面也会根据浏览器的宽度和高度从新渲染页面。

CSS 语法：

@media mediatype and|not|only (media feature) {
    /*CSS-Code*/
}

/*或者引入不一样样式文件的判断：当知足某个条件的时候，引入mystylesheet.css样式*/
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
复制代码

mediatype 取值:

all 用于全部设备

print 用于打印机和打印预览

screen 用于电脑屏幕，平板电脑，智能手机等。

speech 应用于屏幕阅读器等发声设备

and|not|only：

and 同时知足，至关于 &&；

not 取反（通常写在 mediatype 前面）

示例：

<style>
  body{
    background-color: red;
  }
  /* 不在768-992之间的时候，设置背景颜色为蓝色*/
  @media not screen and (min-width: 768px) and (max-width: 992px){
    body{
      background-color: blue;
    }
}
</style>
复制代码

media feature 取值：（主要关注如下三个宽度）

device-height 定义输出设备的屏幕可见高度。

device-width 定义输出设备的屏幕可见宽度。

max-device-height 定义输出设备的屏幕可见的最大高度。

max-device-width 定义输出设备的屏幕最大可见宽度。

min-device-width 定义输出设备的屏幕最小可见宽度。

min-device-height 定义输出设备的屏幕的最小可见高度。

max-height 定义输出设备中的页面最大可见区域高度。

max-width 定义输出设备中的页面最大可见区域宽度。

min-height 定义输出设备中的页面最小可见区域高度。

min-width 定义输出设备中的页面最小可见区域宽度。

4.一、min-width 与 min-device-height 的区别

device 表示的是设备，因此加了 device 的 范围取值表示的是设备的宽度范围。

• 在移动端，因为经过模拟器改变的是移动端设备的宽度，因此 min-width 与 min-device-height 效果同样；
• 在 PC 端，若是改变浏览器的宽度，而咱们电脑的宽度并无改变，因此设备的宽度必定，最终的效果就是只有一个范围起做用。

4.二、案例：控制不一样屏幕尺寸下屏幕背景色,

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒体查询：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>
复制代码

4.三、媒体查询条件判断的顺序

缘由：若是结构如上面示例的那样，而且媒体查询条件由重叠的话，后面的媒体查询样式设置会覆盖前面的媒体查询设置，为了不发生这种状况，咱们就应该遵循必定的规律，使得不一样的媒体查询条件下，执行不一样的样式，而不会发生冲突。

特色：

向上兼容：若是设置了宽度更小时的样式，默认这些样式也会传递到宽度更大的条件范围内.

向下覆盖：宽度更大的样式会将前面宽度更小的样式覆盖

书写建议：

• 若是是判断最小值 (min-width)，那么范围就应该从小到大写
• 若是是判断最大值 (max-width)，那么范围就应该从大到小写

例如：

@media screen and (min-width: 768px){
  body{
    background-color: green;
  }
}
!*w:992!1200 blue  min-width: 992px:当屏幕的宽度大于等于992的时候*!
@media screen and (min-width: 992px){
  body{
    background-color: blue;
  }
}
!*w>1200 pink*!
@media screen and (min-width: 1200px){
  body{
    background-color: pink;
  }
}
复制代码

4、Bootstrap

一、常见的响应式框架

随着Web应用变的愈来愈复杂，在大量的开发过程当中咱们发现有许多功能模块很是类似，好比轮播图、分页、选项卡、导航栏等，开发中每每会把这些具备通用性的功能模块进行一系列封装，使之成为一个个组件应用到项目中，能够极大的节约开发成本，将这些通用的组件缩合到一块儿就造成了前端框架。

常见的响应式框架有：

一、Bootstrap

官网：www.bootcss.com/

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

来自 Twitter，粉丝众多，是目前最受欢迎的前端框架。

二、Amaze UI

官网：amazeui.org/

中国首个开源 HTML5 跨屏前端框架。

Amaze ~ 妹子UI，国人开发，后起之秀！

三、Framework7

官网：www.framework7.cn/

Framework7 是一款免费、开源的移动HTML框架，主要用于开发混合手机App或者网页App，某些应用场景的体验几乎与原生开发的 iOS 和 Android 应用如出一辙，同时也是一款不可获取的应用原型快速开发及展现工具。

Framework7 主要的做用就是让你有机会可以使用 HTML，CSS 和 JavaScript 简单明了地开发 iOS 和 Android 应用。Framework7 是彻底开放的，它彻底没有限制你进行打开脑洞的创造，同时还提供了一些解决方案。

Framework7 并不支持全部平台。为了给你带来最好的体验感觉，它只专一于 iOS 和 Google Material 设计风格。

二、bootstrap

Bootstrap是当前最流行的前端UI框架(有预制界面组件)

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，造成一套本身独有的网站风格，并兼容大部分jQuery插件。

Bootstrap 的全部 JavaScript 插件都依赖 jQuery。

2.一、BootStrap的版本了解

• 2.x.x:兼容性好 / 代码不够简洁，功能不够完善
• 3.x.x:稳定性好,放弃了IE6-IE7,对IE8的支持通常 /偏向于响应式布局开发，移动设备优先的web项目开发
• 4.x.x:测试阶段，偏向于响应式，移动设备

2.二、bootstrap 基本模板

<!--说明页面是html5页面-->
<!DOCTYPE html>
<!--页面使用的语言环境-->
<html lang="zh-CN">
<head>
    <!--指定当前页面的字符编码-->
    <meta charset="utf-8">
    <!--若是是IE，会使用最新的渲染引擎进行渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--标准的视口设置-->
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap核心样式文件 -->
    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries: 这两个文件的引入是为了支持IE8下面的html5元素和媒体查询：由于在IE8下面默认不支持HTML5和媒体查询，因此须要引入两个插件-->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// 若是经过file://来查看文件，那么respond.js文件不能正常工做，说明必须在http://形式下访问才有用-->
    <!--html5shiv.min.js：为了在IE8下面支持HTML标签 respond.min.js：为了在IE8下面支持媒体查询-->
    <!--[if lt IE 9]> <!--只有IE9以前才会加载这两个文件 lt:less than-->
    <script src="../lib/html5shiv/html5shiv.min.js"></script>
    <script src="../lib/respond.js/respond.js"></script>
    <![endif]-->
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是依赖jquery的-->
<script src="../lib/jquery/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed bootstarp核心js文件-->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
复制代码

2.三、bootstrap 布局容器

bootstrap 的 css 样式中，有一个起着支撑整个页面框架的容器，也叫布局容器，它相似于咱们的版心结构。

一、.container 实现固定宽度并支持响应式布局的容器。

当屏幕宽度 > 1200，则页面宽度固定为 1170px
当屏幕宽度 992~1200，则页面宽度固定为 970px
当屏幕宽度 768~992，则页面宽度固定为 750px
当屏幕宽度 < 768，则页面宽度固定为 100%.
复制代码

二、.container-fluid ：实现宽度为全屏 100% 的容器。

2.四、bootstrap 栅格系统

概念：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会默认分为12列。

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

你的内容应当放置于“列（column）”内，而且，只有“列（column）”能够做为行（row）”的直接子元素。你可使用相似 .row 和 .col-xs-4 这种预约义的类，能够用来快速建立栅格布局。Bootstrap 源码中定义的 mixin 也能够用来建立语义化的布局。

经过为“列（column）”设置 padding 属性，从而建立列与列之间的间隔（gutter）。经过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

栅格系统中的列是经过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可使用三个 .col-xs-4 来建立。

若是一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被做为一个总体另起一行排列。

示例：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
</div>
复制代码

解释：上面四个div，若是在超小屏幕上就 100%显示（占12栅格）；在小屏幕上，每一个div占50%显示；在中等屏幕上，每一个div占25%显示；在大屏幕上，每一个div占33.33%显示。

栅格参数：

.col-xs-：超小屏幕 手机 (<768px)

.col-sm- : 小屏幕 平板 (≥768px)

.col-md- : 中等屏幕 桌面显示器 (≥992px)

.col-lg- : 大屏幕 大桌面显示器 (≥1200px)

注意：

1.栅格系统是往上兼容的：意味着小屏幕上的效果在大屏幕上也是能够正常显示的人，可是大屏幕上的设置在小屏幕上却没法正常显示。

2.Row能够再次嵌套在列中。若是不能填满整列，则默认从左排列，若是超出，则换行展现。

2.五、列排序

• col-xs-offset-n：往右偏移 n 个栅格，可是会影响后面全部元素也偏移 n 个栅格。（内部经过 margin-left 实现的）
• col-xs-push/pull-n：push 往右推，pull 往左拉。往右偏移 n 个栅格，可能会与后面的元素重叠。（内部实现原理经过定位实现）

2.六、列嵌套

列嵌套就是列中还能够嵌套行，注意不能嵌套版心 container 和 container-fluid。

由于：

若是在外层没有再包含container,那么嵌套列的宽度就是参参照当前所在的栅格；

若是外层添加了container,那么参照就是核心样式文件所设置的容器宽度

<div class="container">
    <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">2</div>
        <div class="col-xs-6">
            <!-- 1.若是在外层没有再包含container,那么嵌套列的宽度就是参参照当前所在的栅格 2.若是外层添加了container,那么参照就是核心样式文件所设置的容器宽度-->
            <!--<div class="container">-->
                <div class="row">
                    <div class="col-xs-6">3</div> <!--这里的6占的是直接父div的一半，而不是container的一半-->
                    <div class="col-xs-6">4</div>
                </div>
            <!--</div>-->
        </div>
        <div class="col-xs-1">4</div>
        <div class="col-xs-1">5</div>
        <div class="col-xs-1">6</div>
        <div class="col-xs-1">7</div>
    </div>
</div>
复制代码

2.七、响应式工具

（无向上兼容，内部实现是一个具体的范围，没有波及到其余区域）

.hidden-xs ：在超小屏幕下不可见

.hidden-sm ：在小屏幕下不可见

.hidden-md ：在中等屏幕下不可见

.hidden-lg ：在大屏幕下不可见

示例：

<div class="container">
    <div class="row">
        <div class="col-xs-1 hidden-sm">1</div> <!--在小屏幕下不可见-->
        <div class="col-xs-1 hidden-xs">2</div> <!--在超小屏幕下不可见-->
        <div class="col-xs-6 hidden-lg">        <!--在大屏幕下不可见-->
        <div class="col-xs-1">4</div>
        <div class="col-xs-1">5</div>
        <div class="col-xs-1">6</div>
        <div class="col-xs-1">7</div>
    </div>
</div>
复制代码

5、Less

一、Less简介

LESS 是一种动态的样式表语言，经过简洁明了的语法定义，使编写 CSS 的工做变得很是简单，本质上，LESS 包含一套自定义的语法及一个解析器。

二、less 安装

一、下载安装 node.js 环境。（官网：nodejs.org/zh-cn/）

二、安装完成后验证 node 环境是否安装成功。

在命令行中输入：node -v 出现 node 的版本号表示安装成功。

三、安装 less 工具（须要联网）。

在命令行中输入：npm install -g less 便可下载安装。

四、安装后验证 less 是否安装成功。

命令行输入：lessc -v 出现 less 版本号，即表示安装成功。

三、编译

浏览器只能识别 CSS，Less 只是用来提高CSS可维护性的一个工具，所最终须要将LESS编译成CSS。

编译方式有两种：

一、一种是使用命令行的方式手工编译。

在咱们编写好一个 less 文件后，可使用命令行输入如下指令将 less 文件编译成 css 文件。

lessc .\test.less .\test.css
复制代码

这种手工编译的方式效率比较低下，通常咱们都会借助一些编辑器来完成自动编译。

二、这里我使用 vscode，使用很简单，只须要安装插件 “Easy LESS” ，那么编写的 less 文件在保存时会自动在 less 文件相同的目录下生成 css 文件。

四、语法

一、注释

注释的方式有两种：// 或者 /**/ 。

可是这两种注释有区别：这两种样式在 less 中都是注释，可是 // 注释不会进行编译，也就是不会在生成的 css 文件中显示，而 /**/ 注释则会在 css 文件中对应显示。

/*注释 才会编译*/
//这也是样式，可是不会进行编译
复制代码

二、变量

语法格式为：@变量名：值; ，好比 @baseColor: #ccc;

使用的时候： div { color: @baseColor;}

/*变量 @变量名:值; */
@baseColor:#e92322;
a{
  color: @baseColor;
}
复制代码

三、混入（相似于函数）

语法：.样式名(@变量名 ：默认值) {具体样式}

/*混入:能够将一个定义好的样式引入到另一个样式中 相似于函数的调用*/
/*.addRadius{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }*/
/*至关于定义一个函数的参数*/
.addRadius(@r:10px){
  border-radius: @r;
  -webkit-border-radius: @r;
  -moz-border-radius: @r;
}
div{
  width: 200px;
  height: 200px;
  /*引入已经写好的圆角样式*/
  /*传入参数*/
  .addRadius(5px);
}
复制代码

四、嵌套

嵌套能够实现选择器的继承，能够减小代码量，同时使用代码结构更加清晰。

/* 之前咱们写的样式 .jd_header{} .jd_header > div{} .jd_header > div > h3{} .jd_header > div > h3::before{} .jd_header > div > a{} .jd_header > div > a:hover{} */


/*嵌套:实现选择器的继承，能够减小代码量，同时使用代码结构更加清晰*/
.jd_header{
  width: 100%;
  height: 200px;
  .addRadius();
  // 加 > 表示直接子元素
  > div{
    // 加 & 表示中间没有空格为 div::before，若是没有 & 则是 div ::before 就错了。
    &::before{
      content: "";
    }
    width: 100%;
    // div下面的直接子元素a
    >a{
      text-decoration: underline;
      // a::hover，中间没有空格
      &:hover{
        text-decoration: none;
      }
    }
    > h3{
      height: 20px;
    }
    ul{
      list-style: none;
    }
  }
}

复制代码

五、less 文件引入

咱们以前编写好 less 文件以后，都是自动解析成 css 而后添加到 html 文件中。若是 css 的文件不少的话，就要引入不少个 link 标签，那么可不能够直接引入 less 文件呢？

固然能够。

语法：

<link rel="stylesheet/less" href="./index.less">
复制代码

只是在 stylesheet 后面加上 less 的说明。

只是引入 less 文件是不能够的，还须要引入解析 less 的 js 插件。

<script src="./js/less.js"></script>
复制代码

看起来好麻烦哦，为何要引入 less 文件，它有什么好处吗？

好处是：无论有多少 less 文件，只须要引入一个 less 文件就能够了，其余须要的 less 文件都包含在引入的这个 less 文件中。

如何在 less 文件中引入其余 less 文件呢？

语法：

@import "other1.less";  // other.less 为其余 less 文件的路径名称
@import "other2.less";
@import "other3.less";
复制代码

这样，无论有多少个 less 文件，均可以写到一个待引入的 less 文件中。

最后

还有2件事拜托你们

一：求赞 求收藏 求分享 求留言，让更多的人看到这篇内容

二：欢迎添加个人我的微信

备注“资料”， 300多篇原创技术文章，海量的视频资料便可得到

备注“加群”，我会拉你进技术交流群，群里大牛学霸具在，哪怕您作个潜水鱼也会学到不少东西