• b站pink老师JavaScript的移动端网页特效 案例代码——移动端轮播图+返回顶部模块

    目录

    代码段

    1.index.js部分（全是重点）

    2.index.html部分（红色部分是重点）

    3.index.css部分（红色部分是重点）

    4.normalize.css部分（不是重点，辅助作用）

    目标效果：

    1.利用定时器(setInterval)自动轮播图片

    2.等着1.中过渡完成之后，再去判断 监听过渡完成的事件 transitionend

    实现无缝滚动

    （第一个focus1的index是0，最后一个focus1的index是3。当index变为3或更大的时候，跳转回index为0；当index<0的时候，跳转回index为2）

    3.ul滚动的时候，小圆点跟随变化

    4.手指可以滑动轮播图(本质上是让ul跟随手指移动)

    (触摸元素（touchstart）获得手指初始坐标，手指滑动（touchmove）获得手指移动距离，盒子最终移动距离=盒子之前的移动距离+手指移动的距离)

    5.在4.中手指滑动轮播图，手指移开（touchend）的时候，如果用户手指移动过再去判断，不然不判断

    (1)如果移动距离大于50px,则播放上一张/下一张

    (2)如果移动距离小于50px,则回弹

    手指移开（touchend）后，重新开启定时器，让ul继续自动轮播

    6.当窗口滚到nav的地方，显示goBack返回顶部图片

    7.点击goBack图片，滚动窗口至页面最上方 window.scroll(0,0);

    （1）轮播图要实现无缝滚动，所以复制第一张图片去最后

    （2）【移动端轮播图的特殊性】因为移动端的轮播图，如果处在第一张图片，往右拉动，可以看到第一张图片之前的内容。因此需要复制第三张图片去第一张图片的前面，防止用户拉动后看到空白。这样用户处在原来的第一张图片1，右拉会看到新复制过去的图片3。

     （3）复制完毕后，由于盒子默认左对齐

    如下图：一开始看到的是图片3

    所以加这一句话，使得一开始看是看到的是图片1 

     （4）自动播放的无缝滚动原理：

    a.先播放图片1，再图片2，图片3，再最后一个复制的图片1

    b.然后让最后一个图片1，快速跳到前面的那个图片1上去 ：

     

     之后就继续重复a.步骤

    e.g.轮播图效果见图片的红框中 

    1.index.js部分（全是重点）

    1. window.addEventListener('load', function () {//等整个页面加载完毕，再运用js
    2.     // 1.获取元素
    3.     var focus = document.querySelector('.focus');
    4.     var ul = focus.children[0];
    5.     var ol = focus.children[1];
    6.     // 移动的每张图片的宽度，就是focus宽度
    7.     // 获得focus的宽度
    8.     var w = focus.offsetWidth;
    9.     // 2.利用定时器自动轮播图片
    10.     // 声明一个变量index来控制ul每次移动
    11.     var index = 0;
    12.     var timer = setInterval(function () {
    13.         index++;
    14.         var translatex = -index * w;//因为是往左走，所以是负值
    15.         ul.style.transition = 'all .3s';//添加过渡，让图片慢点自动滚动
    16.         ul.style.transform = 'translateX(' + translatex + 'px)';//每隔2S，往左滚动一张图片
    17.     }, 2000);
    18.     // 等着过渡完成之后，再去判断 监听过渡完成的事件 transitionend 
    19.     ul.addEventListener('transitionend', function () {
    20.         // 无缝滚动
    21.         // 第一个focus1的index是0，最后一个focus1的index是3
    22.         // 当index变为3或更大的时候，跳转回index为0
    23.         if (index >= 3) {
    24.             index = 0;
    25.             // 去掉过渡，直接跳转
    26.             ul.style.transition = 'none';
    27.             // 用最新的index*宽度，继续滚动图片
    28.             var translatex = -index * w;
    29.             ul.style.transform = 'translateX(' + translatex + 'px)';
    30.         } else if (index < 0) {
    31.             // 当index<0的时候，跳转回index为2
    32.             index = 2;
    33.             // 去掉过渡，直接跳转
    34.             ul.style.transition = 'none';
    35.             // 用最新的index*宽度，继续滚动图片
    36.             var translatex = -index * w;
    37.             ul.style.transform = 'translateX(' + translatex + 'px)';
    38.         }
    39.         // 3.小圆点跟随变化效果
    40.         // 移除（classList.remove）ol中li中有current类名的li
    41.         ol.querySelector('li.current').classList.remove('current');
    42.         // 给当前index的li添加（classList.add）类名current
    43.         ol.children[index].classList.add('current');
    44.  
    45.     });
    46.     // 4.手指滑动轮播图
    47.     // 本质上是让ul跟随手指移动
    48.     // 触摸元素（touchstart）获得手指初始坐标
    49.     // 此处是左右滑动，所以只需要X坐标
    50.     var startX = 0;
    51.     var moveX = 0;//之后会使用到该移动距离，所以要是全局变量
    52.     var flag = false;//声明一个全局变量flag
    53.     ul.addEventListener('touchstart', function (e) {
    54.         startX = e.targetTouches[0].pageX;
    55.         // 手指滑动轮播图的时候，要停止轮播图的自动滚动
    56.         // 当手指按下时候，就停止图片自动滚动
    57.         clearInterval(timer);
    58.     });
    59.  
    60.     // 手指滑动（touchmove）获得手指移动距离
    61.     ul.addEventListener('touchmove', function (e) {
    62.         // 手指移动距离=手指滑动时的手指X坐标-手指初始X坐标
    63.         moveX = e.targetTouches[0].pageX - startX;
    64.         // 盒子最终移动距离=盒子之前的移动距离+手指移动的距离
    65.         var translatex = -index * w + moveX;
    66.         // 手指移动的时候不需要过渡效果，所以去掉过渡，直接跳转
    67.         ul.style.transition = 'none';
    68.         ul.style.transform = 'translateX(' + translatex + 'px)';
    69.         flag = true;//如果用户手指移动过再去判断，不然不判断
    70.         e.preventDefault();//阻止滚动ul的时候，让屏幕滚动的行为
    71.     });
    72.     // 手指移开（touchend）根据移动距离判断是 回弹 还是 播放上一张/下一张
    73.     ul.addEventListener('touchend', function (e) {
    74.         if (flag) {//如果用户手指移动过再去判断，不然不判断
    75.             // （1）如果移动距离大于50px,则播放上一张/下一张
    76.             if (Math.abs(moveX) > 50) {
    77.                 // 如果是右滑，则播放下一张，moveX是正值
    78.                 if (moveX > 0) {
    79.                     index--;
    80.                 } else {
    81.                     // 如果是左滑，则播放上一张，moveX是负值
    82.                     index++;
    83.                 }
    84.                 // 用最新的index*宽度，继续滚动图片
    85.                 var translatex = -index * w;
    86.                 // 图片滚动时要有过渡效果
    87.                 ul.style.transition = 'all .3s';
    88.                 ul.style.transform = 'translateX(' + translatex + 'px)';
    89.             } else {
    90.                 // (2)如果移动距离小于50px,则回弹
    91.                 // 用最新的index*宽度，继续滚动图片
    92.                 var translatex = -index * w;
    93.                 // 图片滚动时要有过渡效果
    94.                 ul.style.transition = 'all .1s';
    95.                 ul.style.transform = 'translateX(' + translatex + 'px)';
    96.             }
    97.  
    98.         }
    99.         // 手指离开的时候就重新开启定时器
    100.         clearInterval(timer);//先清除定时器，保证页面中只有一个定时器
    101.         //再开启定时器
    102.         timer = setInterval(function () {
    103.             index++;
    104.             var translatex = -index * w;
    105.             ul.style.transition = 'all .3s';
    106.             ul.style.transform = 'translateX(' + translatex + 'px)';
    107.         }, 2000);
    108.     });
    109.     // 返回顶部模块制作
    110.     var goBack = document.querySelector('.goBack');
    111.     var nav = document.querySelector('nav');
    112.     window.addEventListener('scroll', function () {
    113.         if (window.pageYOffset >= nav.offsetTop) {
    114.             // 当窗口滚到nav的地方，显示goBack返回顶部图片
    115.             goBack.style.display = 'block';
    116.         } else {
    117.             goBack.style.display = 'none';
    118.         }
    119.     });
    120.     // 点击goBack图片，滚动窗口至页面最上方
    121.     goBack.addEventListener('click', function () {
    122.         window.scroll(0, 0);
    123.     });
    124.  
    125. })

    2.index.html部分（红色部分是重点）

       

       

       

       

       

        携程在手，说走就走

       

       

       

       

       

           

    搜索:目的地/酒店/景点/航班号

            我 的

       

       

       

           

                 

                 

                 

      •            

      •            

      •            

      •            

                 

      •        

           

                 

    1.            

    2.            

    3.        

       

       

       

       

       

       

       

       

       

           

               

    热门活动

                获取更多福利

           

           

               

                   

                       

                   

                   

                       

                   

               

               

                   

                       

                   

                   

                       

                   

               

               

                   

                       

                   

                   

                       

                   

               

           

       

    3.index.css部分（红色部分是重点）

    body {

        max-width: 540px;

        min-width: 320px;

        margin: 0 auto;

        font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;

        color: #000;

        background: #f2f2f2;

        overflow-x: hidden;

        -webkit-tap-highlight-color: transparent;

    }

    ul {

        list-style: none;

        margin: 0;

        padding: 0;

    }

    a {

        text-decoration: none;

        color: #222;

    }

    div {

        box-sizing: border-box;

    }


     

    /* 搜索模块 */

    .search-index {

        display: flex;

        /* 固定定位跟父级没有关系 它以屏幕为准 */

        position: fixed;

        top: 0;

        left: 50%;

        /* 设置z-index让搜索模块始终在最上层 */

        z-index: 999;

        /* 固定的盒子应该有宽度 */

        -webkit-transform: translateX(-50%);

        transform: translateX(-50%);

        width: 100%;

        min-width: 320px;

        max-width: 540px;

        height: 44px;

        /* background-color: pink; */

        background-color: #F6F6F6;

        border-top: 1px solid #ccc;

        border-bottom: 1px solid #ccc;

    }

    .search {

        position: relative;

        height: 26px;

        line-height: 24px;

        border: 1px solid #ccc;

        flex: 1;

        font-size: 12px;

        color: #666;

        margin: 7px 10px;

        padding-left: 25px;

        border-radius: 5px;

        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);

    }

    .search::before {

        content: "";

        position: absolute;

        top: 5px;

        left: 5px;

        width: 15px;

        height: 15px;

        background: url(../images/sprite.png) no-repeat -59px -279px;

        background-size: 104px auto;

    }

    .user {

        width: 44px;

        height: 44px;

        /* background-color: purple; */

        font-size: 12px;

        text-align: center;

        color: #2eaae0;

    }

    .user::before {

        content: "";

        display: block;

        width: 23px;

        height: 23px;

        background: url(../images/sprite.png) no-repeat -59px -194px;

        background-size: 104px auto;

        margin: 4px auto -2px;

    }


     

    /* goBack */

    .goBack {

        display: none;

        position: fixed;

        bottom: 50px;

        right: 20px;

        width: 38px;

        height: 38px;

        background: url(../images/back.png) no-repeat;

        background-size: 38px 38px;

    }


     

    /* focus */

    .focus {

        position: relative;

        padding-top: 44px;

        overflow: hidden;

    }

    .focus img {

        width: 100%;

    }

    .focus ul {

        width: 500%;

        margin-left: -100%;

    }

    .focus ul li {

        float: left;

        width: 20%;

    }

    .focus ol {

        position: absolute;

        bottom: -9px;

        right: 5px;

    }

    .focus ol li {

        display: inline-block;

        width: 5px;

        height: 5px;

        background-color: #fff;

        list-style: none;

        border-radius: 2px;

        /* 给ol里的li也就是小圆点加transition过渡，让小圆点的变化更自然 */

        transition: all .3s;

    }

    .focus ol li.current {

        width: 15px;

    }


     

    /* local-nav */

    .local-nav {

        display: flex;

        height: 64px;

        margin: 3px 4px;

        background-color: #fff;

        border-radius: 8px;

    }

    .local-nav li {

        flex: 1;

    }

    .local-nav a {

        display: flex;

        flex-direction: column;

        /* 侧轴居中对齐 因为是单行 */

        align-items: center;

        font-size: 12px;

    }

    .local-nav li [class^="local-nav-icon"] {

        width: 32px;

        height: 32px;

        background-color: pink;

        margin-top: 8px;

        background: url(../images/localnav_bg.png) no-repeat 0 0;

        background-size: 32px auto;

    }

    .local-nav li .local-nav-icon-icon2 {

        background-position: 0 -32px;

    }

    .local-nav li .local-nav-icon-icon3 {

        background-position: 0 -64px;

    }

    .local-nav li .local-nav-icon-icon4 {

        background-position: 0 -96px;

    }

    .local-nav li .local-nav-icon-icon5 {

        background-position: 0 -128px;

    }


     

    /* nav */

    nav {

        overflow: hidden;

        border-radius: 8px;

        margin: 0 4px 3px;

    }

    .nav-common {

        display: flex;

        height: 88px;

        background-color: pink;

    }

    .nav-common:nth-child(2) {

        margin: 3px 0;

    }

    .nav-items {

        /* 不冲突的 */

        flex: 1;

        display: flex;

        flex-direction: column;

    }

    .nav-items a {

        flex: 1;

        text-align: center;

        line-height: 44px;

        color: #fff;

        font-size: 14px;

        /* 文字阴影 */

        text-shadow: 1px 1px rgba(0, 0, 0, .2);

    }

    .nav-items a:nth-child(1) {

        border-bottom: 1px solid #fff;

    }

    .nav-items:nth-child(1) a {

        border: 0;

        background: url(../images/hotel.png) no-repeat bottom center;

        background-size: 121px auto;

    }


     

    /* -n+2就是选择前面两个元素 */

    .nav-items:nth-child(-n+2) {

        border-right: 1px solid #fff;

    }

    .nav-common:nth-child(1) {

        background: -webkit-linear-gradient(left, #FA5A55, #FA994D);

    }

    .nav-common:nth-child(2) {

        background: -webkit-linear-gradient(left, #4B90ED, #53BCED);

    }

    .nav-common:nth-child(3) {

        background: -webkit-linear-gradient(left, #34C2A9, #6CD559);

    }


     

    /* subnav-entry */

    .subnav-entry {

        display: flex;

        border-radius: 8px;

        background-color: #fff;

        margin: 0 4px;

        flex-wrap: wrap;

        padding: 5px 0;

    }

    .subnav-entry li {

        /* 里面的子盒子可以写 % 相对于父级来说的 */

        flex: 20%;

    }

    .subnav-entry a {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    .subnav-entry-icon {

        width: 28px;

        height: 28px;

        background-color: pink;

        margin-top: 4px;

        background: url(../images/subnav-bg.png) no-repeat;

        background-size: 28px auto;

    }


     

    /* sales-box */

    .sales-box {

        border-top: 1px solid #bbb;

        background-color: #fff;

        margin: 4px;

    }

    .sales-hd {

        position: relative;

        height: 44px;

        border-bottom: 1px solid #ccc;

    }

    .sales-hd h2 {

        position: relative;

        text-indent: -999px;

        overflow: hidden;

    }

    .sales-hd h2::after {

        position: absolute;

        top: 5px;

        left: 8px;

        content: "";

        width: 79px;

        height: 15px;

        background: url(../images/hot.png) no-repeat 0 -20px;

        background-size: 79px auto;

    }

    .more {

        position: absolute;

        right: 5px;

        top: 0px;

        background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);

        border-radius: 15px;

        padding: 3px 20px 3px 10px;

        color: #fff;

    }

    .more::after {

        content: "";

        position: absolute;

        top: 9px;

        right: 9px;

        width: 7px;

        height: 7px;

        border-top: 2px solid #fff;

        border-right: 2px solid #fff;

        transform: rotate(45deg);

    }

    .row {

        display: flex;

    }

    .row a {

        flex: 1;

        border-bottom: 1px solid #eee;

    }

    .row a:nth-child(1) {

        border-right: 1px solid #eee;

    }

    .row a img {

        width: 100%;

    }

    4.normalize.css部分（不是重点，辅助作用）

    1. /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
    2.  
    3. /**
    4.  * 1. Change the default font family in all browsers (opinionated).
    5.  * 2. Correct the line height in all browsers.
    6.  * 3. Prevent adjustments of font size after orientation changes in
    7.  *    IE on Windows Phone and in iOS.
    8.  */
    10. /* Document
    11.    ========================================================================== */
    12.  
    13. html {
    14.   font-family: sans-serif; /* 1 */
    15.   line-height: 1.15; /* 2 */
    16.   -ms-text-size-adjust: 100%; /* 3 */
    17.   -webkit-text-size-adjust: 100%; /* 3 */
    18. }
    19.  
    20. /* Sections
    21.    ========================================================================== */
    22.  
    23. /**
    24.  * Remove the margin in all browsers (opinionated).
    25.  */
    27. body {
    28.   margin: 0;
    29. }
    30.  
    31. /**
    32.  * Add the correct display in IE 9-.
    33.  */
    35. article,
    36. aside,
    37. footer,
    38. header,
    39. nav,
    40. section {
    41.   display: block;
    42. }
    43.  
    44. /**
    45.  * Correct the font size and margin on `h1` elements within `section` and
    46.  * `article` contexts in Chrome, Firefox, and Safari.
    47.  */
    49. h1 {
    50.   font-size: 2em;
    51.   margin: 0.67em 0;
    52. }
    53.  
    54. /* Grouping content
    55.    ========================================================================== */
    56.  
    57. /**
    58.  * Add the correct display in IE 9-.
    59.  * 1. Add the correct display in IE.
    60.  */
    62. figcaption,
    63. figure,
    64. main { /* 1 */
    65.   display: block;
    66. }
    67.  
    68. /**
    69.  * Add the correct margin in IE 8.
    70.  */
    72. figure {
    73.   margin: 1em 40px;
    74. }
    75.  
    76. /**
    77.  * 1. Add the correct box sizing in Firefox.
    78.  * 2. Show the overflow in Edge and IE.
    79.  */
    81. hr {
    82.   box-sizing: content-box; /* 1 */
    83.   height: 0; /* 1 */
    84.   overflow: visible; /* 2 */
    85. }
    86.  
    87. /**
    88.  * 1. Correct the inheritance and scaling of font size in all browsers.
    89.  * 2. Correct the odd `em` font sizing in all browsers.
    90.  */
    92. pre {
    93.   font-family: monospace, monospace; /* 1 */
    94.   font-size: 1em; /* 2 */
    95. }
    96.  
    97. /* Text-level semantics
    98.    ========================================================================== */
    99.  
    100. /**
    101.  * 1. Remove the gray background on active links in IE 10.
    102.  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
    103.  */
    105. a {
    106.   background-color: transparent; /* 1 */
    107.   -webkit-text-decoration-skip: objects; /* 2 */
    108. }
    109.  
    110. /**
    111.  * Remove the outline on focused links when they are also active or hovered
    112.  * in all browsers (opinionated).
    113.  */
    115. a:active,
    116. a:hover {
    117.   outline-width: 0;
    118. }
    119.  
    120. /**
    121.  * 1. Remove the bottom border in Firefox 39-.
    122.  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    123.  */
    125. abbr[title] {
    126.   border-bottom: none; /* 1 */
    127.   text-decoration: underline; /* 2 */
    128.   text-decoration: underline dotted; /* 2 */
    129. }
    130.  
    131. /**
    132.  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
    133.  */
    135. b,
    136. strong {
    137.   font-weight: inherit;
    138. }
    139.  
    140. /**
    141.  * Add the correct font weight in Chrome, Edge, and Safari.
    142.  */
    144. b,
    145. strong {
    146.   font-weight: bolder;
    147. }
    148.  
    149. /**
    150.  * 1. Correct the inheritance and scaling of font size in all browsers.
    151.  * 2. Correct the odd `em` font sizing in all browsers.
    152.  */
    154. code,
    155. kbd,
    156. samp {
    157.   font-family: monospace, monospace; /* 1 */
    158.   font-size: 1em; /* 2 */
    159. }
    160.  
    161. /**
    162.  * Add the correct font style in Android 4.3-.
    163.  */
    165. dfn {
    166.   font-style: italic;
    167. }
    168.  
    169. /**
    170.  * Add the correct background and color in IE 9-.
    171.  */
    173. mark {
    174.   background-color: #ff0;
    175.   color: #000;
    176. }
    177.  
    178. /**
    179.  * Add the correct font size in all browsers.
    180.  */
    182. small {
    183.   font-size: 80%;
    184. }
    185.  
    186. /**
    187.  * Prevent `sub` and `sup` elements from affecting the line height in
    188.  * all browsers.
    189.  */
    191. sub,
    192. sup {
    193.   font-size: 75%;
    194.   line-height: 0;
    195.   position: relative;
    196.   vertical-align: baseline;
    197. }
    198.  
    199. sub {
    200.   bottom: -0.25em;
    201. }
    202.  
    203. sup {
    204.   top: -0.5em;
    205. }
    206.  
    207. /* Embedded content
    208.    ========================================================================== */
    209.  
    210. /**
    211.  * Add the correct display in IE 9-.
    212.  */
    214. audio,
    215. video {
    216.   display: inline-block;
    217. }
    218.  
    219. /**
    220.  * Add the correct display in iOS 4-7.
    221.  */
    223. audio:not([controls]) {
    224.   display: none;
    225.   height: 0;
    226. }
    227.  
    228. /**
    229.  * Remove the border on images inside links in IE 10-.
    230.  */
    232. img {
    233.   border-style: none;
    234. }
    235.  
    236. /**
    237.  * Hide the overflow in IE.
    238.  */
    240. svg:not(:root) {
    241.   overflow: hidden;
    242. }
    243.  
    244. /* Forms
    245.    ========================================================================== */
    246.  
    247. /**
    248.  * 1. Change the font styles in all browsers (opinionated).
    249.  * 2. Remove the margin in Firefox and Safari.
    250.  */
    252. button,
    253. input,
    254. optgroup,
    255. select,
    256. textarea {
    257.   font-family: sans-serif; /* 1 */
    258.   font-size: 100%; /* 1 */
    259.   line-height: 1.15; /* 1 */
    260.   margin: 0; /* 2 */
    261. }
    262.  
    263. /**
    264.  * Show the overflow in IE.
    265.  * 1. Show the overflow in Edge.
    266.  */
    268. button,
    269. input { /* 1 */
    270.   overflow: visible;
    271. }
    272.  
    273. /**
    274.  * Remove the inheritance of text transform in Edge, Firefox, and IE.
    275.  * 1. Remove the inheritance of text transform in Firefox.
    276.  */
    278. button,
    279. select { /* 1 */
    280.   text-transform: none;
    281. }
    282.  
    283. /**
    284.  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
    285.  *    controls in Android 4.
    286.  * 2. Correct the inability to style clickable types in iOS and Safari.
    287.  */
    289. button,
    290. html [type="button"], /* 1 */
    291. [type="reset"],
    292. [type="submit"] {
    293.   -webkit-appearance: button; /* 2 */
    294. }
    295.  
    296. /**
    297.  * Remove the inner border and padding in Firefox.
    298.  */
    300. button::-moz-focus-inner,
    301. [type="button"]::-moz-focus-inner,
    302. [type="reset"]::-moz-focus-inner,
    303. [type="submit"]::-moz-focus-inner {
    304.   border-style: none;
    305.   padding: 0;
    306. }
    307.  
    308. /**
    309.  * Restore the focus styles unset by the previous rule.
    310.  */
    312. button:-moz-focusring,
    313. [type="button"]:-moz-focusring,
    314. [type="reset"]:-moz-focusring,
    315. [type="submit"]:-moz-focusring {
    316.   outline: 1px dotted ButtonText;
    317. }
    318.  
    319. /**
    320.  * Change the border, margin, and padding in all browsers (opinionated).
    321.  */
    323. fieldset {
    324.   border: 1px solid #c0c0c0;
    325.   margin: 0 2px;
    326.   padding: 0.35em 0.625em 0.75em;
    327. }
    328.  
    329. /**
    330.  * 1. Correct the text wrapping in Edge and IE.
    331.  * 2. Correct the color inheritance from `fieldset` elements in IE.
    332.  * 3. Remove the padding so developers are not caught out when they zero out
    333.  *    `fieldset` elements in all browsers.
    334.  */
    336. legend {
    337.   box-sizing: border-box; /* 1 */
    338.   color: inherit; /* 2 */
    339.   display: table; /* 1 */
    340.   max-width: 100%; /* 1 */
    341.   padding: 0; /* 3 */
    342.   white-space: normal; /* 1 */
    343. }
    344.  
    345. /**
    346.  * 1. Add the correct display in IE 9-.
    347.  * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
    348.  */
    350. progress {
    351.   display: inline-block; /* 1 */
    352.   vertical-align: baseline; /* 2 */
    353. }
    354.  
    355. /**
    356.  * Remove the default vertical scrollbar in IE.
    357.  */
    359. textarea {
    360.   overflow: auto;
    361. }
    362.  
    363. /**
    364.  * 1. Add the correct box sizing in IE 10-.
    365.  * 2. Remove the padding in IE 10-.
    366.  */
    368. [type="checkbox"],
    369. [type="radio"] {
    370.   box-sizing: border-box; /* 1 */
    371.   padding: 0; /* 2 */
    372. }
    373.  
    374. /**
    375.  * Correct the cursor style of increment and decrement buttons in Chrome.
    376.  */
    378. [type="number"]::-webkit-inner-spin-button,
    379. [type="number"]::-webkit-outer-spin-button {
    380.   height: auto;
    381. }
    382.  
    383. /**
    384.  * 1. Correct the odd appearance in Chrome and Safari.
    385.  * 2. Correct the outline style in Safari.
    386.  */
    388. [type="search"] {
    389.   -webkit-appearance: textfield; /* 1 */
    390.   outline-offset: -2px; /* 2 */
    391. }
    392.  
    393. /**
    394.  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
    395.  */
    397. [type="search"]::-webkit-search-cancel-button,
    398. [type="search"]::-webkit-search-decoration {
    399.   -webkit-appearance: none;
    400. }
    401.  
    402. /**
    403.  * 1. Correct the inability to style clickable types in iOS and Safari.
    404.  * 2. Change font properties to `inherit` in Safari.
    405.  */
    407. ::-webkit-file-upload-button {
    408.   -webkit-appearance: button; /* 1 */
    409.   font: inherit; /* 2 */
    410. }
    411.  
    412. /* Interactive
    413.    ========================================================================== */
    414.  
    415. /*
    416.  * Add the correct display in IE 9-.
    417.  * 1. Add the correct display in Edge, IE, and Firefox.
    418.  */
    420. details, /* 1 */
    421. menu {
    422.   display: block;
    423. }
    424.  
    425. /*
    426.  * Add the correct display in all browsers.
    427.  */
    429. summary {
    430.   display: list-item;
    431. }
    432.  
    433. /* Scripting
    434.    ========================================================================== */
    435.  
    436. /**
    437.  * Add the correct display in IE 9-.
    438.  */
    440. canvas {
    441.   display: inline-block;
    442. }
    443.  
    444. /**
    445.  * Add the correct display in IE.
    446.  */
    448. template {
    449.   display: none;
    450. }
    451.  
    452. /* Hidden
    453.    ========================================================================== */
    454.  
    455. /**
    456.  * Add the correct display in IE 10-.
    457.  */
    459. [hidden] {
    460.   display: none;
    461. }

  • 相关阅读:
    对于JSP原理以及源码的深入剖析与理解心得
    校招C#面试题整理—Unity客户端
    计算机组成原理 | 中央处理器
    服务器环境搭建
    Unity的OnOpenAsset：深入解析与实用案例
    【历史上的今天】8 月 15 日：苹果推出初代 iMac；谷歌收购摩托罗拉移动；Fuchsia 首次发布
    java计算机毕业设计基于安卓Android的升降式停车场管理系统APP
    JavaSE | 顺序表练习
    102.二叉树的层序遍历
    Python爬虫_某宝网案例
  • 原文地址：https://blog.csdn.net/weixin_72322475/article/details/126934729