移动web开发

最新推荐文章于 2022-10-08 22:53:40 发布
最新推荐文章于 2022-10-08 22:53:40 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： 移动web开发 文章标签： 移动端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43236850/article/details/102981533
版权

H5移动web开发

2D转换

坐标系

在开发过程中，平面中的X轴和Y轴的方向跟平常数学中的方向不一样，一般情况下：

  • X轴正方向：水平向右
  • Y轴正方向：垂直向下

移动

  • 语法：
    • transform 转换；
    • translate :移动固定的px值或者相对于自身宽度或者高度的百分数；
<style>

    /* 单独使用 */
    /* 固定的PX值：正值，向右移动； */
    /* transform: translateX(100px); */
    /* 百分数：相对于自身宽高 */
    /* transform: translateX(200%); */
    /* transform: translateY(100%);
    
    /* 合起来写 */
    /* transform: translate(100px, 100px); */
    /* transform: translate(-100px, -100px); */
    /* transform: translate(-50%, -50%); */
    /* transform: translate(50px, 100%); */
</style>
  • 与定位的区别:
    • 定位的元素会脱离标准流，在页面中不占据位置，有可能会影响页面中其他盒子的位置布局。
    • transform:translate()不会脱离标准流，对其他盒子不会产生影响，可以用来微调页面中的盒子。
    • 定位会使行内元素变为块级元素。
    • transform:translate()对行内元素完全不起作用。

用移动实现盒子的居中

  • 核心思想：用定位实现盒子居中的时候不用考虑盒子本身的宽高
    • 代码
<style>
   .father {
       position: relative;
       margin: 50px auto;
       width: 800px;
       height: 600px;
       background-color: cyan;
   }
   .son {
       position: absolute;
       top: 50%;
       left: 50%;
       /* 不用再去计算子盒子的宽高 */
       transform: translate(-50%, -50%);
       width: 309px;
       height: 253px;
       background-color: darkorange;
   }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

​ 效果

在这里插入图片描述

旋转

  • 语法：
transform:rotate(度数)  单位是deg,正值是顺时针；
  • 特点：中心点默认在盒子中间

旋转的中心点设置

  • 语法：可以影响旋转的效果；一般情况下不设置该属性，使用默认值；
      /* 中心点位置：改变距离原点的位置 */
      /* 一般情况下：不动 */
      /* transform-origin: 100px 100px; */
      /* 相对于：自身宽高的来说 */
      /* transform-origin: 100% 100%; */
      /* 方位名词 */
      /* transform-origin: left bottom; */
      /* 用处：根据场景改变中心点位置 */

旋转—下拉三角案例

  • 核心思想：鼠标点击下拉三角按钮时，由角度向下的按钮旋转至角度向上的按钮。
  • 样式需求：

在这里插入图片描述

  • 代码：
<style>
   .box {
       position: relative;
       margin: 50px auto;
       width: 300px;
       height: 40px;
       background-color: #cccccc;
   }

   .box span {
       display: block;
       position: absolute;
       top: 10px;
       right: 10px;
       transform: rotate(45deg);
       width: 15px;
       height: 15px;
       border-right: 2px solid #222222;
       border-bottom: 2px solid #222222;
       transition: all 0.3s;
   }

   .box span:active {
       /* 225= 45+180 */
       /* 旋转：相对于一开始的状态 45deg */
       /* 旋转是基于上一个状态值进行旋转； */
       /* 也就是说旋转是基于最开始的状态进行旋转,
       如过以上一个旋转的状态作为参考,
       旋转的度数要加上上一个状态旋转的度数  */
       transform: rotate(225deg);
    }
</style>
</head>

<body>
    <div class="box">
        <span></span>
    </div>
</body>

缩放

  • 语法：
/* 长度、宽度方向 缩放比 没有单位 */
transform:scale(2,3);

/* 长度、宽度方向 缩放为同一个比例*/
transform:scale(2);
transform:scale(0.5);
  • 特点：
    • transform: 后面所有的属性都不会影响其他盒子的位置，不会影响整个布局；
    • 缩放：会使下面的文字，CSS属性，子元素都会被跟着缩放

2D转换的综合写法

  • 核心思想：不能上下写，因为会覆盖层叠
 /* 移动、旋转、缩放 写在一起 */


 /* CSS样式层叠 */
 /* transform: translateX(800px); */
 /* 样式层叠： 下面会把上面 层叠掉*/
 /* transform: rotate(90deg)

 /* 先写的是移动，再次是旋转 一般用这个*/
 /* transform: translateX(800px) rotate(90deg) scale(1.5)
 /* 特点：旋转写在移动前面，旋转会改变盒子初始化的轴向，X轴方向就会被改变；不常用*/
 transform: rotate(90deg) translateX(800px) scale(1.5);

动画

定义

  • 语法:@keyframes:动画名称 {}
  • 一个动画的执行过程：在CSS样式中定义动画，执行动画的元素调用动画的名称，给定动画的执行时间。
/* 声明动画、定义动画  动画名称*/
@keyframes dong_h {
    /* 写错单词了 这个状态不生效，从div初始化样式开始生效 */
    form {
        /* CSS 代码 */
        width: 200px;
        height: 200px;
        background-color: red;
        transform: translateX(0);
    }
    to {
        width: 300px;
        height: 300px;
        background-color: blue;
        transform: translateX(800px);
    }
}
/* 2.调用 给谁调用 */
div {
    width: 200px;
    height: 200px;
    background-color: red;
    /* 名称、时间 */
    animation-name: dong_h;
    animation-duration: 2s;
}

序列

  • 语法：时间节点，设置这个节点下的CSS状态。
<style>
 /* 1.定义动画 */
    
    @keyframes dh {
      /* 使用% ：动画序列，时间节点的CSS状态设置 */
      0% {
        transform: translate(0, 0);
        background-color: #ccc;
      }
      50% {
        transform: translate(800px, 0);
        background-color: red
      }
      100% {
        /* 使用transform 各自属性的设置，一定是基于上一个状态的变化  */
        transform: translate(800px, 600px);
        background-color: blue
      }
    }
    /* 2.调用和时间设置 */
    
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      animation-name: dh;
      animation-duration: 3s;
    }
</style>

属性

  • 各个属性的定义
/* ----------------------------------------------速度曲线【重点】 */
/* 1.速度曲线 默认值ease: 慢-快-慢*/
/* linear：匀速 速度一直不变 常用*/
/* 连续动画 */
/* animation-timing-function: linear; */
/* 不连续的，一小步一小步在跳，使用场景： UI给我们是分帧图，格子图；*/
/* animation-timing-function: steps(8); */
/* -----------------------------------------------动画延迟 */
/*animation-delay: 2s;*/
/* -----------------------------------------------动画次数*/
/* 设置具体次数 */
/* animation-iteration-count: infinite; *//*infinite(无限循环)*/
/* ---------------------------------------------- 动画方向:不常用*/
/* animation-direction: normal; */
/* reverse:100-0  */
/* animation-direction: reverse; */
/* alternate:轮次 0-100-0-100... 至少执行两次动画*/
/* animation-direction: alternate; */
/* -----------------------------------------------动画等待状态 或结束状态的位置 【重点】*/
/* 不需要设置等待 */
/* forwards：向前0---->100%;  */
/* 设置后：控制动画结束的时候，停留在100% 状态 */
/* 不设置：动画停在初始化状态 */
/* animation-fill-mode: forwards; */
/* ========================================== */
/* 需要设置等待 delay */
/* backwards：向后0；*/
/* 不设置的作用：动画等待，在初始化位置等待 */
/* 设置后的作用：控制元素在哪等待，在0%等待,不是初始化状态 */
/* animation-fill-mode: backwards; */
/* ========================================== */
/* both: forwards+backwards*/
/* 停：100% */
/* 等：0% */
/* animation-fill-mode: both; */

简写

  • 语法
<style>
animation: name duration timing-function delay iteration-count direction fill-mode;
/* 各个位置上描述单词：看到简写上的单词知道啥意思即可 */
/* 特点：有某个属性设置，就设置；没有的话，就不设置 */
/* fill-mode:动画最后停在哪？开始等在哪？ */
/* animation: dongh 2s linear reverse; */
</style>

案例-大数据热点图

  • 效果

在这里插入图片描述

  • 步骤：
    • 第一步：布局；
      • 整体地图布局；
      • 点的布局：父级，点的子盒子，一个圈(绝对居中！)；
  • 第二步：分析动画；先要完成一个圈的扩散动画；
    • 第一印象，感觉是缩放，缩放的特点（CSS设置属性跟着缩放，阴影就会变大，变粗，第一印象）
      • 思考：缩放看起来是变大了，还有什么可以设置变大？直接改变圈的大小 （width/height）
      • 动画序列 CSS样式设置：如何控制大小：怎么变化？
        • 大小：从小变大；5px --15px–25px–35px–>45px ：width/height
        • 透明度：看不见---->看到见----->看不见：opacity：0~1；
      • 动画属性：animation: name duration timing-function delay iteration-count direction fill-mode;
    • 第三步：三个圈的动画就完成了；
      • 考虑如何形成波纹状？每个全需要延迟的时间不一样；delay
    • 如何设置延迟？目的是想让圈显示均匀的分步，延迟设置得均匀；有几个圈，就总时间/ 个数；
      • CSS设置：单独每个设置；
  • 代码
<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #222;
        }

        @keyframes dh {
            0% {
                opacity: 0;
                width: 5px;
                height: 5px;
            }

            25% {
                opacity: 0.5;
                width: 15px;
                height: 15px;
            }

            50% {
                opacity: 1;
                width: 25px;
                height: 25px;
            }
            75% {
                opacity: 0.5;
                width: 35px;
                height: 35px;
            }
            100% {
                opacity: 0;
                width: 45px;
                height: 45px;
            }
        }
        .map {
            position: relative;
            margin: 50px auto;
            width: 747px;
            height: 617px;
            background: url(images/map.png);
        }
        .father {
            position: absolute;
            top: 47%;
            left: 56%;
        }
        .parent {
            position: absolute;
            top: 37%;
            left: 75%;
        }
        .grandparent {
            position: absolute;
            top: 87%;
            left: 75%;
        }
        .shanghai {
            position: absolute;
            top: 61%;
            left: 87%;
        }
        .xinjiang {
            position: absolute;
            top: 35%;
            left: 20%;
        }
        .point {
            width: 5px;
            height: 5px;
            background-color: cyan;
            border-radius: 50%;
        }
        .circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 5px;
            height: 5px;
            border-radius: 50%;
            box-shadow: 0 0 5px cyan;
            animation: dh 1.2s linear infinite;
        }
        .quan1 {
            animation-delay: 0s;
        }
        .quan2 {
            animation-delay: 0.4s;
        }
        .quan3 {
            animation-delay: 0.8s;
        }
        .quan4 {
            animation-delay: 1.2s;
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="father">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
        <div class="parent">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
        <div class="grandparent">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
        <div class="shanghai">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
        <div class="xinjiang">
            <div class="point"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan1"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan2"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan3"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
            <div class="circle quan4"></div>
        </div>
    </div>

案例-奔跑的熊

  • 效果

在这里插入图片描述

  • 步骤：

    • 遇到格子图：想到格子与格子之间不连续，使用不连续的播放速度控制 steps(n)
    • 如何把格子设置为一个图片显示？
    • 盒子大小：1600/8=宽度 ；高度和图片一样高；
    • 背景图，超出的部分不显示；
    • 怎么移动？往X负方向，背景图片的位置设置负值；
    • 移动多少？整个图的宽度；-1600p动画：
    • 0%：不移动0；
    • 100%：完全移动出去 1600px;
    • 怎么变化？不连续的变化，速度曲线 steps(n)
    • n?几格图片就设置为多少；
<style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #cccccc;
        }

        @keyframes xqp {
            0% {
                left: 0;
                transform: translate(0);
            }

            100% {
                left: 50%;
                transform: translate(-50%);
            }
        }

        @keyframes zjd {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        div {
            position: absolute;
            margin-top: 200px;
            width: 200px;
            height: 100px;
            background: url(images/bear.png) no-repeat;
            animation: xqp 3s forwards, zjd 0.5s steps(8) infinite;
        }
    </style>
</head>

<body>
    <div></div>
</body>

3D转换

3D坐标系

在这里插入图片描述

移动

  • 语法
/* 移动 自身宽度 */
/* transform: translateX(100%); */
/* 沿着Z轴 +方向 移动100px */
/* transform: translateZ(100px); */
/*  没有厚度，%不生效*/
/* transform: translateZ(100px); */

/* 合起来 */
/* transform: translateX(100%) translateY(100%); */

/* 简写 XYZ轴方向的移动值*/
/* transform: translate3d(100px, 100px, 100px); */

视距

  • 语法：
perspective: 300px;
  • 作用：
    • 近大远小的效果；
  • 设置在哪里：
    • 加在body：以body的视角进行观测下面所有的子元素，形成统一的透视感；【一般加在body上】。
    • 加在各自父亲，以各自父亲的视角进行观测下面的子元素，自己的子元素形成自己的透视感；
  • 值的大小：越小，变化越剧烈；

旋转

  • 左手工具：把大拇指朝向自己眼睛，四个手指弯曲的方向，顺时针方向；
  • 语法：
      /* transform: rotateX(45deg); */
      /* transform: rotateY(45deg); */
      /* transform: rotateZ(45deg); */
      /* 了解 */
      /* transform: rotate3d(1, 1, 0, 45deg); */

3D呈现

  • 语法：
transform-style: preserve-3d;
  • 与视距的区别从两个方面入手：**作用？**加给谁？
    • 视距perspective：
      • 近大远小，透视感；
      • body(一般情况下)、各自父亲会导致观测角度的不同；
    • 3D呈现：
      • 父亲给亲生子元素一个3D空间，子元素做3D转化可呈现出来；
      • 上下级的父亲上加；（你要做什么事情，得经过你父母的同意）；可能会加多个地方；

缩放

  • 语法：
/* 宽 缩放 */
transform: scaleX(1);
/* 高 缩放 */
transform: scaleY(1);

/* 厚度 缩放？没有厚度 */
transform: scaleZ(1);

/* 宽，高 缩放一倍，厚度放大两倍 ,Z轴方向缩放没有效果*/
transform: scale3d(1,1,2)

案例-旋转的立方体

  • 效果
    在这里插入图片描述

  • 代码

<style>
* {
            margin: 0;
            padding: 0;
        }

        @keyframes level_1_box_am {
            0% {
                transform: rotate3d(1, 1, 1, 0deg);
            }

            20% {
                transform: rotate3d(1, 1, 0, 60deg);
            }

            40% {
                transform: rotate3d(1, 0, 0, 120deg);
            }

            60% {
                transform: rotate3d(0, 0, 0, 180deg);
            }

            80% {
                transform: rotate3d(0, 1, 1, 240deg);
            }

            100% {
                transform: rotate3d(0, 0, 1, 300deg);
            }
        }

        body {
            perspective: 800px;
        }

        .p {
            position: relative;
            margin: 200px auto;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transition: all 4s;
            animation: level_1_box_am 5s linear infinite alternate;
        }

        .p div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            font-size: 100px;
            text-align: center;
            line-height: 200px;
            background-color: wheat;
        }

        .p div:nth-child(1) {
            transform: translateZ(100px);
        }

        .p div:nth-child(2) {
            transform: translateX(-100px) rotateY(-90deg);
        }

        .p div:nth-child(3) {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .p div:nth-child(4) {
            transform: translateX(100px) rotateY(90deg);
        }

        .p div:nth-child(5) {
            transform: translateY(-100px) rotateX(90deg);
        }

        .p div:nth-child(6) {
            transform: translateY(100px) rotateX(-90deg);
        }
    </style>
<body>
    <div class="p">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

流式布局

viewport

  • 浏览器（PC、移动端）显示页面内容的屏幕区域；不同的屏幕的大小，我们看到的区域也是不同的；
  • PC端的页面直接放入手机屏显示，不友好。内容原因没有设置viewport；
  • viewport就是为了解决上面问题；
  • 手机浏览器浏览PC端页面：
    • 给HTML默认宽度 980px 移动端，页面初始化时百分百显示；但是页面元素是缩小；
    • 手指缩放，可以正常看见元素，但是内容超出；
  • 原因：HTML默认为980px不是很合适；

在这里插入图片描述

  • 那么设置HTML宽度多少为合适呢？我们眼睛能看到的，屏幕的窗口多大，设置多大就合适；

在这里插入图片描述

  • 语法：

    • 默认：HTML980px；
    • 理想：手机屏幕多大，HTML就设置是多大；
    • meta标签设置：标准写法；
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  • width=device-width：改变HTML默认的980px 为 屏幕的宽度；
  • user-scalable: 是否允许用户缩放屏幕 值：no(0不允许) yes(1允许)；
  • initial-scale：初始化缩放比例；1.0：不缩放；
  • maximum-scale：用户对页面的最大缩放比例；值：比例
  • minimum-scale：用户对页面的最小缩放比例；值：比例

二倍图

屏幕尺寸
  • 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）如下图所示
  • 1英寸 = 2.54cm 绝对单位；（到哪都不会变的值）

在这里插入图片描述

物理像素点

  • 早期的屏幕，物理像素点（客观的小灯泡）都比较大，比如玩游戏的超级玛丽的画面的颗粒感很强：随着技术的进步，物理像素点会被做的越来越小；会被做小；

  • 客观存在。指计算机显示设备中的最小单位，即一个像素点的大小。每一个像素点可以理解为就是屏幕上的一个发光点。每个点可以发一个颜色，就是我们看到的画面。
    在这里插入图片描述

  • 大白话：一个萝卜一个坑：

    • 萝卜：光、颜色；
    • 坑：物理像素点
屏幕分辨率
  • 屏幕分辨率：物理像素点的个数来衡量，表示屏幕水平和垂直方向的物理像素点的个数，”坑“有多少个；
  • iPhone3和iPhone4是同一个屏幕尺寸下，比较分辨率：

在这里插入图片描述

在这里插入图片描述

  • 坑会越做越小：直观感受，画面细腻；
    • Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里；从而达到更高的分辨率，并提高屏幕显示的细腻程度。
  • 坑’特点：越做越小；（iPhone4坑的宽度是iPhone3坑的宽度一半）

在这里插入图片描述

图片分辨率
  • 图片都是有颜色，图片分辨率。图片分辨率就是带着“萝卜”来的；
  • 下图：分辨率640*426 ，提供了多少个色彩发光点（迎合物理像素点）；

在这里插入图片描述

  • 到这，谁提供颜色（图片），谁会提供坑（手机上客观物理像素点）；
  • 假设：有200*200分辨率的图片，展示在宽度分别是320（iphone3）、640(iphone4)分辨率的手机上，展示的效果如下：

在这里插入图片描述

  • 分析
    • 200*200的分辨率的图片：200个颜色发光点。
    • 一个物理像素点发一个颜色：两个屏幕都需要200个物理像素点；
    • 物理像素点的宽度大小：320（1）；640（0.5）；
    • 所以显示为上图。
  • 问题：不同的屏幕下，显示的图片大小是不一样；
    • 宽度：第2个是第1个的0.5倍；
    • 面积：第2个是第1个的1/4倍；
  • 目标：显示一样；
  • 问题：Iphone3 和Iphone 4 显示200*200分辨率的图，显示不一样大；
    • Iphone3 图片显示宽度 是 Iphone 4 图片显示宽度 2倍；
    • 分析：
      • Iphone3准备了 200 x 200物理像素点；Iphone4准备了 200 x 200物理像素点；
      • Iphone3：物理像素点长度1，Iphone4：物理像素点长度0.5
      • 长度：Iphone3 200长度 ；Iphone4:100长度；
    • 解决：
      • 为了显示 Iphone3 200长度 ；Iphone4:200长度；
      • Iphone3：物理像素点长度1，Iphone4：物理像素点长度0.5
      • 数量：Iphone3准备了 200 x 200物理像素点；Iphone4准备了 400x 400物理像素点；
      • UI：Iphone3设计200 x 200 分辨率的图；Iphone4设计400x 400分辨率的图；
      • Iphone4设计400x 400分辨率的图：二倍图；
二倍图的由来及小结
  • CSS：设置宽度200px,在任何手机上显示都是一样的大小；高分辨率手机下，200px宽度，向屏幕要更多的物理像素点，UI按照道理设计更高分辨率的图；
  • 命名：
    • xxxxx@2x.png：二倍图
    • xxxxx@3x.png：三倍图
  • 二倍图怎么使用：
    • 单个图：（一倍、或者二部，无所谓）；
      • img：CSS该怎么设置（来自设计稿测量结果）就这么设置；
      • 背景图：CSS该怎么设置（来自设计稿测量结果）就这么设置；
    • 二倍精灵图：
      • 1在设计稿进行测量，写入代码；
      • 2.操作二倍精灵图：
        • 想要在一倍精灵图进行测量，但是没有一倍精灵图
        • 通过PS FW 等比缩小为原来的一半；
        • 进行测量，写入代码；
      • 3.引入精灵图作为背景图片，控制精灵图大小 background-size 为一倍图大小；
      • 4.关闭软件 ，不要保存图；

background-size

  • 语法：
 /* 两个参数：有可能变形 */
 /* background-size: 500px 100px; */
 /* 设置一个参数：px 等比变化*/
 /* background-size: 500px; */
 /* 设置 % :当前盒子宽度*/
 /* background-size: 50%; */
 /* 关键字 */
 /* cover：覆盖，绝对不留白 */
 /* background-size: cover; */
 /* contain：包含，绝对显示全*/
 /* background-size: contain; */
  • 写页面：设计稿，UI切图；
    • 单个图：
      • img：怎么控制大小？width / height
      • 背景图：background-size
    • 精灵图：
      • 背景图：
        • 位置：background-position:
        • 大小：background-size:

二倍精灵图的使用

  • 如果给你二倍图：
    • 单个二倍图片；设置完CSS宽度高度 px 值，按照我的设置进行显示大小；
    • 二倍精灵图：好多小图标都在上面；
  • 二倍精灵图的使用：
    • 1.在UI设计稿上面 测量出符合设计的要求的页面元素大小；写代码；
    • 2.看图片的是个二倍图精灵图：我想测量在1:1比例上测量；
      • 在FW内：先等比所小图的一半，在缩小的的图内进行图标位置测量；
      • 在代码，引入图，按照刚才的测量，写入图标的坐标；
      • 设置 背景图片大小：按照缩小一半后的宽高 进行 设置的；
    • 3.千万不要保存图片，否则就会改变二倍图的分辨率；
div {
      /* 在UI设计稿上面进行测量 15*15px */
      width: 15px;
      height: 15px;
      /* 背景图引入 二倍图*/
      background: url('./imgs/jd-sprites.png') no-repeat;
      /* 写入测量坐标 在缩小后的图上面进行测量 */
      background-position: -83px 0;
      /* 在FW 缩小后 设置 ,不控制图片的分辨率，显示大小 */
      background-size: 199px;
    }

CSS3盒子模型

  • 语法：盒子总宽 = CSS设置width ,border/padding 向内挤；
/* 宽度固定后，再次增加你的border padding，向外走 */
/* 盒子的总宽= 设置CSS width + border +padding */
/* width: 140px;
   height: 100px;
   background-color: #ccc;
   border-right: 10px solid blue;
   border-left: 10px solid blue;
   padding: 0 20px; */

/* CSS盒子模型: 再次增加你的border padding，向内走*/
/* 盒子的总宽  = 设置的CSSwidth */
/* 场景：调整页面的布局 ，设置padding值和border向内挤；*/
   box-sizing: border-box;/*CSS3盒子模型核心属性*/
   width: 200px;
   height: 100px;
   background-color: #ccc;
   border-right: 10px solid blue;
   border-left: 10px solid blue;
   padding: 0 20px;

圣杯布局

  • 应用场景：（重点掌握）
    • 左侧固定宽度，右侧随意拉伸。
    • 左右固定宽度，中间随意拉伸。
  • 方法一：
    • 左右两边宽度固定，中间通过父盒子的padding值（父盒子左右的padding值一般情况下大于等于左右盒子的宽度）挤出来的，中间盒子的宽度为100%。
/* 左右两边的宽度是固定的 */
    /* 中间区域随意拉伸； */
    .p {
      width: 100%;
      height: 600px;
      position: relative;
      box-sizing: border-box;
      padding: 0 200px;
    }
    
    .p .left {
      width: 200px;
      height: 600px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #222;
    }
    
    .p .right {
      width: 200px;
      height: 600px;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #222;
    }
    
    .p .mid {
      width: 100%;
      height: 100%;
      background-color: #ccc;
    }
  • 方法二：
    • 左右两边宽度固定，中间通过自己的margin值（自己的margin值一般情况下大于等于左右盒子的宽度）挤出来的，并且自己不能设置宽度。
    /* 左右两边的宽度是固定的 */
    /* 中间区域随意拉伸； */
    /* 如果宽度不是通过width设置来，显示有宽度，设置左右margin值，向内挤； */
    /* div {
      width: 100%;
      height: 50px;
      background-color: #ccc;
      margin: 0 100px;
    } */
    
    .p {
      width: 100%;
      height: 600px;
      position: relative;
    }
    
    .p .left {
      width: 200px;
      height: 600px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #222;
    }
    
    .p .right {
      width: 200px;
      height: 600px;
      position: absolute;
      top: 0;
      right: 0;
      background-color: #222;
    }
    
    .p .mid {
      /* 默认宽度100% */
      margin: 0 200px;
      height: 100%;
      background-color: #ccc;
    }
  • 方法三：
    • 左右两边宽度固定，中间是通过flex布局，把主轴上剩余空间 全部占有。
 <style>
    .p {
      width: 100%;
      height: 100px;
      border: 1px solid #000;
      display: flex;
      /* row */
    }
    
    .left {
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
    
    .mid {
      /* 把主轴上剩余空间 全部占有*/
      flex: 2;
      height: 80px;
      background-color: pink;
    }
    
    .right {
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div class="p">
    <span class="left">left</span>
    <span class="mid"></span>
    <span class="right">right</span>
  </div>
</body>

流式布局特点

  • 传统布局（流式布局）：
    • 宽度：使用百分比控制，浮动（清除浮动）
    • 高度：通过子元素撑起来；

案例-京东页面

效果：

在这里插入图片描述

  • HTML页面
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 顶部 start -->
    <header>
        <a href="#">
            <img src="images/close.png" alt="">
        </a>
        <a href="#">
            <img src="images/logo.png" alt="">
        </a>
        <a href="#">打开京东APP，购物更轻松</a>
        <a href="#">立即打开</a>
    </header>
    <!-- 顶部 end -->
    <!-- 广告栏 banner start -->
    <section>
        <div class="search">
            <div class="left">
                <img src="images/s-btn.png" alt="">
            </div>
            <div class="mid">
                <span class="jd">
                    <img src="images/jd.png" alt="">
                </span>
                <span class="liner"></span>
                <span class="fd"></span>
            </div>
            <div class="right">登录</div>
        </div>
        <div class="bannerBg">
            <a href="#"><img src="upload/banner.dpg" alt=""></a>
        </div>
    </section>
    <!-- 广告栏 banner end -->
    <!-- 小家电 start -->
    <section class="jiadian">
        <a href="#">
            <img src="upload/pic11.dpg" alt="">
        </a>
        <a href="#">
            <img src="upload/pic22.dpg" alt="">
        </a>
        <a href="#">
            <img src="upload/pic33.dpg" alt="">
        </a>
    </section>
    <!-- 小家电 end -->
    <!-- 导航栏 start -->
    <nav>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="upload/nav2.webp" alt="">
            <span>全球购</span>
        </a>
        <a href="#">
            <img src="upload/nav3.webp" alt="">
            <span>京东充值</span>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="upload/nav2.webp" alt="">
            <span>全球购</span>
        </a>
        <a href="#">
            <img src="upload/nav3.webp" alt="">
            <span>京东充值</span>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="upload/nav2.webp" alt="">
            <span>全球购</span>
        </a>
        <a href="#">
            <img src="upload/nav3.webp" alt="">
            <span>京东充值</span>
        </a>
        <a href="#">
            <img src="upload/nav1.webp" alt="">
            <span>京东超市</span>
        </a>
    </nav>
    <!-- 导航栏 end -->
    <!-- 抽奖区域 start -->
    <section class="choujiang">
        <a href="#"><img src="upload/new1.dpg" alt=""></a>
        <a href="#"><img src="upload/new2.dpg" alt=""></a>
        <a href="#"><img src="upload/new3.dpg" alt=""></a>
    </section>
    <!-- 抽奖区域 end -->
</body>

</html>
  • CSS代码
/* body的初始化样式 */
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    font-size: 14px;
    background-color: #ccc;
}
a {
    text-decoration: none;
}

/* -----------------顶部------------------------ */
header {
    width: 100%;
    height: 45px;
    background-color: #333;
}
header a {
    float: left;
    line-height: 45px;
    text-align: center;
    color: #fff;
}
header a:nth-child(1) {
    width: 8%;
}
header a:nth-child(1) img {
    width: 10px;
}
header a:nth-child(2) {
    width: 10%;
}
header a:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
    padding-bottom: 4px;
}
header a:nth-child(3) {
    width: 57%;
    height: 45px;
}
header a:nth-child(4) {
    width: 25%;
    height: 45px;
    background-color: #ff3040;
}

/* -------------广告栏banner------------------------ */
.search {
    position: fixed;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    height: 44px;
}
.search .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}
.search .left img{
    margin: 14px 0 0 15px ;
    width: 20px;
}
.search .right {
    position: absolute;
    top: 0;
    right: 5px;
    width: 40px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
}
.search .mid {
    overflow: hidden;
    margin: 7px 50px 0;
    height: 30px;
    background-color: #fff;
    border-radius: 15px;
}
.search .mid .jd{
    display: block;
    float: left;
    margin: 7px 0 0 13px;
    width: 20px;
    height: 15px;
}
.search .mid .jd img {
    width: 20px;
}
.search .mid .liner {
    display: block;
    float: left;
    margin: 7px 0 0 5px;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}
.search .mid .fd {
    display: block;
    float: left;
    margin: 7px 0 0 5px;
    width: 15px;
    height: 15px;
    background: url(../images/jd-sprites.png) no-repeat;
    background-size: 199px;
    background-position: -83px 0;
}
section .bannerBg a {
    display: block;
}
section .bannerBg img {
    width: 100%;
}
/* ---------------------小家电---------------------- */
.jiadian {
    width: 100%;
    overflow: hidden;
}
.jiadian a {
    display: block;
    float: left;
    width: 33.3%;
}
.jiadian a img {
    width: 100%;
}
/* -----------------------导航栏------------------- */
nav {
    margin: 20px 0;
    overflow: hidden;
}
nav a {
    float: left;
    width: 20%;
    margin-top: 10px;
    text-align: center;
}
nav a img {
    margin: 10px 0;
    width: 40px;
}
nav a span {
    display: block;
}
/*-------------------- 抽奖区域 -----------------*/
.choujiang a {
    float: left;
}
.choujiang a img {
    width: 100%;
}
.choujiang a:nth-child(1) {
    width: 50%;
}
.choujiang a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #ccc;
    box-sizing: border-box;
}

flex布局

介绍

  • 对比：
    • 传统布局：
      • 兼容性好；布局繁琐；浮动，清除浮动；
      • 局限性，不能在移动端很好的布局；
    • flex布局：
      • 操作方便，布局极其简单，移动端使用比较广泛；
      • PC端浏览器支持情况比较差：
  • 使用：如果是PC端页面布局，最好采用传统方式；如果是移动端或者是不考虑兼容的pc则采用flex；
  • 特点：flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性操作，
    • 任何一个标签都可以指定使用 flex 布局。
    • 当为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
    • 使用思想上和传统盒子完全不同，不要再想子元素是块级元素、行内元素等，
    • flex通过行和列的思路来控制布局；
  • 面试：flex布局又叫伸缩 布局 、弹性布局 、伸缩盒布局 、弹性盒布局 ；
  • 名称：
    • 采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），父级简称"容器"。
    • 它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6x1RyNhg-1573225537003)(E:\前端学习\自己记录的笔记\images\002.png)]

  • 语法：
display:flex;

容器属性

flex-direction
  • 语法：作用确认主轴的方向，
  • 特点：子元素会在主轴上进行排布，按照主轴选择正方向进行排布；
  • 思想：
    • 不要再想这些元素是块级、行内等（不要用传统的知识解释今天的学习）；
    • 只要父亲设置flex布局，亲生子元素设置宽高就生效；
      /* 1.主轴的选择 */
      /* row:选择水平向右为主轴 默认值*/
      /* 特点：子元素会在主轴上，按照主轴正方向进行排布 */
      /* flex-direction: row; */
      /* 主轴：行，从右到左 */
      /* flex-direction: row-reverse; */
      /* 主轴：列，从上到下  */
      /* flex-direction: column; */
      /* 主轴：列，从下到上  */
      flex-direction: column-reverse;
justify-content
  • 语法：控制子元素在主轴上对齐方式；
  • 特点：如果要使用该属性，先要把主轴的去向决定；
      /* 1.主轴的选择 */
      /* row:主轴：行，选择水平向右 */
      /* justify-content 控制子元素在主轴上  排布方式 */
      /* flex-start：默认值，从主轴头部开始  */
      /* justify-content: flex-start; */
      /* flex-end: 从尾部开始对齐 */
      /* justify-content: flex-end; */
      /* justify-content: center; */
      /* space-around:剩余空间环绕在子元素周围*/
      /* justify-content: space-around; */
      /* justify-content: space-between; */
flex-wrap和flex-flow
  • flex-wrap：控制子元素是否换行，默认不换行，子元素在主轴上进行合理压缩；
/* 默认不换行 */
/* 特点：如果子项目的加起来的总宽超过父亲的宽度，子项目的宽度会被合理的压缩 */
/* wrap：换行*/
flex-wrap: wrap;
  • flex-flow：复合属性，确认主轴方向，控制是否换行。一般不用；
flex-flow: row wrap;
align-items
  • 语法：控制子元素（项目）整体在侧轴上对齐方式；
      /* 主轴的选择 row，侧轴默认：Y轴*/
      /* !!! 控制 子元素 单行 在侧轴上对齐方式 */
      /* flex-start : 侧轴的头部开始对齐 */
      /* align-items: flex-start; */
      /* 侧轴的尾部开始对齐 */
      /* align-items: flex-end; */
      /* 侧轴上居中 */
      align-items: center;
      /* stretch：在侧轴方向上进行拉伸 */
      /* 规则：如果在侧轴方向上进行拉伸，CSS设置子元素不能在侧轴方向有大小的设置 */
      /* 如果子元素在侧轴方向有大小的设置，拉伸不生效 */
      /* align-items: stretch; */
  • 场景:

在这里插入图片描述

  • flex布局：

    • 思想：不要再想这些子元素是块级元素等，flex布局，子元素设置宽高就生效；
    • 观测：子元素是行排布、列排布；决定？确认主轴的方向；
    • 考虑侧轴上对齐方式：center;

  • 语法：

    • 确认主轴方向
    • 主轴上元素的整体在侧轴上对齐方式；

  • 其他

    • 非应用补充知识：
      • 属性align-items：控制的是单行；
      • 设置换行：变为多行；多行下，每一行为单行，控制的是每个的侧轴上的对齐方式；
      • 活动范围：侧轴对齐方式，就以每个单行的范围进行对齐；
    .p {
      width: 800px;
      height: 600px;
      border: 1px solid #000;
      /* 父级：容器 */
      display: flex;
      /* 默认主轴：row */
      /* 默认不换行：元素会被合理的压缩 */
      flex-wrap: wrap;
      /* 侧轴对齐默认值；flex-start 侧轴头部*/
      /* 在侧轴方向 进行拉伸 ，特点：不能设置控制侧轴反向的CSS属性 */
      align-items: stretch;
    }
    
    .son {
      width: 100px;
      /* height: 100px; */
      background-color: #ccc;
    }
align-content
  • 语法：控制子元素（多行）在侧轴上对齐方式
      /* 默认不换行 */
      flex-wrap: wrap;
      /* 侧轴上 单行 默认值：flex-start，看成每个单行 */
      /* align-items: flex-start; */
      /* ------------------------------------------------------- */
      /* align-content: 控制多行对齐方式，把多行看成一个整体*/
      /* 没有默认值 */
      /* align-content: flex-start; */
      /* 侧轴尾部对齐 */
      /* align-content: flex-end; */
      /* align-content: center; */
      /* space-around：剩余空间，环绕 */
      /* 把剩余空间分到两个行之间 */
      /* align-content: space-between; */
      /* 在侧轴上进行拉伸： */
      /* align-content: stretch; */
案例

在这里插入图片描述

  • 整体：行排布，默认row;
  • 局部：
    • 列排布；
    • 侧轴上居中对齐；
  • 特点：整体的flex布局只是对整体下的子元素有flex布局的影响，单独子元素形成新的flex布局，需要重新写display:flex;
  • 代码：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      width: 1000px;
      height: 200px;
      border: 1px solid #000;
      display: flex;
      /* 默认主轴：row */
    }
    /* son要进行flex布局 */
    
    .son {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      /* 单独去管理自己的儿子为flex，单独写； */
      display: flex;
      /* 主轴：列 */
      flex-direction: column;
      /* 侧轴上居中 */
      align-items: center;
    }
    
    .img {
      width: 50px;
      height: 50px;
      margin: 50px 0;
      background-color: #222;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
    <div class="son">
      <span class="img"></span>
      <span class="info">nav-1</span>
    </div>
  </div>
</body>

</html>

项目属性

flex
  • 作用：flex划分主轴上剩余空间给子元素
  • 份数：常规使用，用整数；把所有的子元素的份数加起来N份，剩余空间分成N份，再看每个子元素占有几份；
  • %：常规使用，比较保证加起来是100%；
    .s_1 {
      /* 控制子元素在主轴方向，去占有剩余空间，效果：我们可以直接通过属性flex设置宽度 */
      /* flex：数字（整数） ，占有的份数*/
      /* flex: 百分数，常规操作：保证所有的子元素的百分数加起来为100%，不然会出现问题 */
      flex: 20%;
      /* width: 100px; */
      height: 100px;
      background-color: #ccc;
    }
    
    .s_2 {
      flex: 20%;
      /* width: 100px; */
      height: 100px;
      background-color: #222;
    }
align-self
  • 语法：控制单个项目（子元素）在侧轴上自己的对齐方式；

在这里插入图片描述

  • 默认值为auto的特别之处：
    • 默认值auto，如果父级设置了align-items ，auto继承父级元素上设置侧轴的对齐方式：align-items 属性；
    • 如果父级没有设置align-items 属性，auto默认值会变为strecth；（注意侧轴方向上控制元素大小的CSS设置要注释掉）
    .p {
      width: 800px;
      height: 600px;
      border: 1px solid #000;
      display: flex;
      /* 主轴row */
      /* align-items: center; */
    }
    
    .son {
      /* auto：默认值，如果父亲设置了 align-items，auto会继承父级的设置 */
      /* align-self: auto; */
      /* 规则： 如果没有设置 align-items，那么auto变为 拉伸 stretch*/
      /* 拉伸规则：沿着哪个轴拉伸？侧轴，在侧轴方向不能有CSS控制大小的设置 */
      width: 100px;
      /* height: 100px; */
      background-color: #ccc;
    }
  • 子元素设置flex:1
    .son {
      
      /* width: 100px; */
      /* 主轴:把剩余空间均分掉 */
      flex: 1;
      
      /* align-self: auto; */
      /* 规则： 如果没有设置 align-items，那么auto变为 拉伸 stretch*/
      /* 拉伸规则：沿着哪个轴拉伸？侧轴，在侧轴方向不能有CSS控制大小的设置 */
      background-color: #ccc;
    }
order（了解）
  • 语法：控制子元素的排布顺序，值越小，越前。可以取负值；
  • 可以设置为负数；注意和 z-index 不一样。这里是表示位数；
.item {
    order: <number>;
}

案例-携程页面

  • 效果

在这里插入图片描述

  • html代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 顶部搜索区域 start -->
    <header>
        <div class="left">
            搜索:目的地/酒店/景点/航班号
        </div>
        <div class="right">
            <div class="img"></div>
            <div class="info">我 的</div>
        </div>
    </header>
    <!-- 顶部搜索区域 end -->
    <!-- banner区域 start -->
    <div class="banner">
        <a href="#"><img src="upload/focus.jpg" alt=""></a>
    </div>
    <!-- banner end-->
    <!-- 导航区域1 start -->
    <div class="nav_1">
        <a href="#">
            <span class="img"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img2"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img3"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img4"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img5"></span>
            <span class="info">景点·玩乐</span>
        </a>
    </div>
    <!-- 导航区域1 end -->
    <!-- nav区域 start -->
    <nav>
        <div class="top">
            <span class="box">
                <a href="#">酒店住宿</a>
                <img src="images/hotel.png" alt="">
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
        </div>
        <div class="top">
            <span class="box">
                <a href="#">酒店住宿</a>
                <img src="images/hotel.png" alt="">
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
        </div>
        <div class="top">
            <span class="box">
                <a href="#">酒店住宿</a>
                <img src="images/hotel.png" alt="">
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
            <span class="box">
                <a href="#">酒店住宿</a>
                <a href="#">酒店住宿</a>
            </span>
        </div>
    </nav>
    <!-- nav区域 end -->
    <!-- 导航区域2 start -->
    <div class="nav_2">
        <a href="#">
            <span class="img"></span>
            <span class="info">电话费</span>
        </a>
        <a href="#">
            <span class="img img2"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img3"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img4"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img5"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img6"></span>
            <span class="info">电话费</span>
        </a>
        <a href="#">
            <span class="img img7"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img8"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img9"></span>
            <span class="info">景点·玩乐</span>
        </a>
        <a href="#">
            <span class="img img10"></span>
            <span class="info">景点·玩乐</span>
        </a>
    </div>
    <!-- 导航区域1 end -->
    <!-- 热门活动 start-->
    <div class="hot">
        <h2>
            <a href="#" title="热门活动"></a>
        </h2>
        <div class="right">
            <a href="#">获取更多福利</a>
        </div>
    </div>
    <!-- 热门活动 end-->
    <!-- 产品区域 start -->
    <div class="good">
        <div class="row">
            <a href="#"><img src="upload/pic1.jpg" alt=""></a>
            <a href="#"><img src="upload/pic2.jpg" alt=""></a>
        </div>
        <div class="row">
            <a href="#"><img src="upload/pic3.jpg" alt=""></a>
            <a href="#"><img src="upload/pic4.jpg" alt=""></a>
        </div>
        <div class="row">
            <a href="#"><img src="upload/pic5.jpg" alt=""></a>
            <a href="#"><img src="upload/pic6.jpg" alt=""></a>
        </div>
    </div>
    <!-- 产品区域 end -->
</body>

</html>
  • 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;
  font-size: 14px;
  background: #f2f2f2;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
a {
  text-decoration: none;
}
/* ------------顶部搜索区域 -------------------- */
header {
  position: fixed;
  max-width: 540px;
  min-width: 320px;
  height: 44px;
  width: 100%;
  background-color: #f6f6f6;
  border-bottom: 1px solid #cccccc;
  display: flex;
}
header .left {
  flex: 1;
  position: relative;
  margin: 7px 15px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  line-height: 30px;
  padding-left: 30px;
  background-color: #f6f6f6;
  color: #888888;
}
header .left::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 7px;
  width: 15px;
  height: 15px;
  background: url(../images/sprite.png) no-repeat -58px -278px;
  background-size: 104px;
}
header .right {
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #2eaae0;
  font-size: 12px;
}
header .right .img {
  margin: 3px 0;
  width: 23px;
  height: 23px;
  background: url(../images/sprite.png) no-repeat -59px -194px;
  background-size: 104px;
}
/* -------------------banner区域-------------- */
.banner {
  padding: 45px 0 3px;
}
.banner a img {
  width: 100%;
}
/* -------------------导航区域1------------- */
.nav_1 {
  margin: 3px 5px;
  height: 64px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
}
.nav_1 a {
  flex: 1;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav_1 a .img {
  margin: 5px 0;
  width: 32px;
  height: 32px;
  background: url(../images/localnav_bg.png) no-repeat 0 0;
  background-size: 32px;
}
.nav_1 a .img2 {
  background: url(../images/localnav_bg.png) no-repeat 0 -32px;
  background-size: 32px;
}
.nav_1 a .img3 {
  background: url(../images/localnav_bg.png) no-repeat 0 -64px;
  background-size: 32px;
}
.nav_1 a .img4 {
  background: url(../images/localnav_bg.png) no-repeat 0 -96px;
  background-size: 32px;
}
.nav_1 a .img5 {
  background: url(../images/localnav_bg.png) no-repeat 0 -128px;
  background-size: 32px;
}
.nav_1 a .info {
  color: #666666;
}

/* ----------nav---------- */
nav {
  border-radius: 5px;
  overflow: hidden;
}
nav .top {
  height: 88px;
  display: flex;
  background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}
nav .top:nth-child(2) {
  margin: 5px 0;
  background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}
nav .top:nth-child(3) {
  background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}
nav .top .box {
  flex: 1;
  display: flex;
  flex-direction: column;
}
nav .top .box:nth-child(n+2){
  border-left: 1px solid #fff;
}
nav .top .box img {
  width: 70%;
  padding-left: 25px;
}
nav .top .box a {
  flex: 1;
  text-align: center;
  line-height: 43px;
  color: #fff;
}
nav .top .box a:nth-child(2) {
  border-top: 1px solid #fff;
}
/* -------------------导航区域2------------- */
.nav_2 {
  margin: 3px 5px;
  height: 150px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
}
.nav_2 a {
  flex: 20%;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav_2 a .img {
  margin: 4px 0;
  width: 48px;
  height: 45px;
  background: url(../images/subnav-bg.png) no-repeat 0 2px;
}
.nav_2 a .img2 {
  background: url(../images/subnav-bg.png) no-repeat 0 -50px;
}
.nav_2 a .img3 {
  background: url(../images/subnav-bg.png) no-repeat 0 -108px;
}
.nav_2 a .img4 {
  background: url(../images/subnav-bg.png) no-repeat 0 -170px;
}
.nav_2 a .img5 {
  background: url(../images/subnav-bg.png) no-repeat 0 -224px;
}
.nav_2 a .img6 {
  background: url(../images/subnav-bg.png) no-repeat 0 -280px;
}
.nav_2 a .img7 {
  background: url(../images/subnav-bg.png) no-repeat 0 -338px;
}
.nav_2 a .img8 {
  background: url(../images/subnav-bg.png) no-repeat 0 -396px;
}
.nav_2 a .img9 {
  background: url(../images/subnav-bg.png) no-repeat 0 -444px;
}
.nav_2 a .img10 {
  background: url(../images/subnav-bg.png) no-repeat 0 -495px;
}
.nav_2 a .info {
  color: #666666;
}
/* ---------------热门活动------------- */
.hot {
  padding: 5px 0 0 10px;
  height: 55px;
  background-color: #fff;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}
.hot h2 {
  float: left;
  height: 20px;
  width: 75px;
  background: url(../images/hot.png) no-repeat 0 -18px;
  background-size: 79px;
}
.hot .right {
  float: right;
  position: relative;
  margin: 12px 5px 0 0;
  padding: 5px 0 5px 10px;
  width: 114px;
  background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
  border-radius: 16px;
  box-sizing: border-box;
}
.hot .right::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.hot .right a {
  color: #fff;
}
/* --------------------产品区域---------------- */
.good {
  background-color: #fff;
  margin-bottom: 4px;
}
.good .row {
  /* width: 100%; */
  display: flex;
}
.good .row a {
  flex: 1;
  border-bottom: 1px solid #eee;
}
.good .row a:nth-child(1) {
  border-right: 1px solid #eee;
}
.good .row a img {
  width: 100%;
}
线性渐变
  • 以前只是一个颜色，现在可以出现渐变颜色；
  • 语法：
/* 起始方向，颜色1，颜色2，...*/
background: -webkit-linear-gradient(30deg, red, blue);

/* 1.必须有私有前缀*/
/* 2.起始方向：可以为方向名词left 或 deg度数，默认从上到下*/
/* 3.颜色个数：最少2两个颜色*/

rem 布局

介绍

  • 流式布局、flex布局在宽度上控制的布局，高度基本上靠内部子元素撑起来，内部子元素有高度；
  • rem布局，最为直观的效果，页面全部元素现实等比缩放，包括文字，盒子大小；
  • 实现页面所有元素的等比变化效果；
  • 知识点：
    • 屏幕变化，能感觉到屏幕变了，页面跟着变化；媒体查询：
    • 怎么变？变的是一个根基，只要是和根基有关系的盒子，都会发生改变；rem

媒体查询

  • 作用：感受到屏幕的变化；该可以根据屏幕不同的宽，从而获得不同的样式，然后实现不同的样式显示；

  • 语法：

    • CSS3 新语法，是一个查询屏幕的过程，通过查询当前屏幕尺寸属于哪个范围，从而有哪个范围的样式生效；
    • 感受屏幕变化，屏幕变化就是宽度的变化，通过预设置，当屏幕到了我已经预设置的变化的范围，就会把我提前设置好的样式进行生效；
    • mediatype (media feature) 都是它的查询条件
    @media mediatype and|not|only (media feature) {
    CSS-Code;
}
    • mediatype：媒体类型；查询不同的终端设备 ； screen最为常用：查询当前设置的屏幕；

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXrUtvqT-1573225537006)(E:\前端学习\自己记录的笔记\images\screen.png)]

    • and|not|only：关键字；将多个条件连接在一起共同查询；

      • and：可以将多个媒体特性连接到一起，相当于“且”的意思；最为常用；生活中：“我既要娶白富美，又要走上人生颠覆”；
      • not：排除 某个 媒体类型，相当于“非”的意思，可以省略。生活：“我喜欢看电影，除了恐怖片”；
      • only：指定某个特定的 媒体类型，可以省略。 生活：“我这辈子非你不嫁”；

    • (media feature)：媒体特性；

      • 对于屏幕 screen，屏幕的宽度就是一个特性；

在这里插入图片描述

  • 实例：

    • 查询条件加小括号；
    • min-width/max-width：最小界值，最大界值；查询条件包含等于号；
/* 宽度的最小界值500px，大于等于500px */
@media screen and (min-width:500px) {
    body {
        background-color: red;
    }
}

/* 作用：感受 屏幕 变化 */
    /* @media 定义媒体查询的关键字  */
    /* mediatype： screen 屏幕*/
    /* and: 且 */
    /*  () 语法：不能省略*/
    /* media feature：条件 宽度 */
    /* 当 感受屏幕 当屏幕宽度是500px */
    /*下面设置的 CSS-Code; 会生效  */
    /* @media screen and (width:500px) {
      body {
        background-color: red;
      }
    } */
    /* min-width:最小值；从500px开始  >=500px  */
    /* @media screen and (min-width:500px) {
      body {
        background-color: red;
      }
    } */
    /* max-width：最大致，终点是500px w <=500px*/
    
    @media screen and (max-width:500px) {
      body {
        background-color: red;
      }
    }

档位划分

  • 档位：划分的不同范围
  /* - 档位1：w<540px w<=539px; */
    /*     
    @media screen and (max-width:539px) {
      body {
        background-color: green;
      }
    } */
    /* - 档位2 : 540px<=w and w< 640px; */
    /* @media screen and (min-width:540px) and (max-width:639px) {
      body {
        background-color: blue;
      }
    } */
    /* - 档位3 : 640px<=w */
    /* @media screen and (min-width:640px) {
      body {
        background-color: pink;
      }
    } */
    /* -------------------------------------------优化写法 */
    
    @media screen and (min-width:0px) {
      body {
        background-color: green;
      }
    }
    
    @media screen and (min-width:540px) {
      body {
        background-color: blue;
      }
    }
    
    @media screen and (min-width:640px) {
      body {
        background-color: pink;
      }
    }
  • 特点：为什么要从min-wdith，代码抒写方便，从小到大；
  • 了解：资源 引入
<!-- 320px~640px -->
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<!-- n>=640px -->
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">

rem单位

  • 语法：
/* 媒体查询：感受屏幕的变化，进入我的设置范围，下面的设置就会生效 */
    /* 下面CSS设置就会生效：设置1rem背后代表值； */
    /* 页面中所有的元素都使用px 转化为 rem单位，等比效果 */
    
    @media screen and (min-width:0px) {
      /* 设置1rem=20px */
      html {
        font-size: 20px;
      }
    }
    
    @media screen and (min-width:540px) {
      /* 设置1rem=30px */
      html {
        font-size: 30px;
      }
    }
    
    @media screen and (min-width:640px) {
      /* 设置1rem=40px */
      html {
        font-size: 40px;
      }
    }
    
    div {
      width: 10rem;
      height: 10rem;
      background-color: #ccc;
    }
  • 等比原理：
    • 媒体查询：感受屏幕变化；
    • 变化下设置什么：根基rem ，设置不同档位下1rem 背后代表的 px值；
    • 实现等比变化效果；

Less

介绍
  • less : 让你写更少的代码，实现相同的效果；
  • Less（Leaner Style Sheets 的缩写）是一门 CSS 扩展语言，它扩展了CSS的动态特性。 CSS 预处理言语。
  • 常见的CSS预处理器：Sass、Less、Stylus 。
  • 预处理器是程序中处理输入数据，产生能用来输入到其他程序的数据的程序。
  • Less中文网址：http://lesscss.cn/
安装
  • 在线安装：online 需要联网
    • 搜索 Easy LESS
    • 安装完毕插件，重新加载下 vscode。
    • 测试：保存一下 .less 文件，会自动生成 .css 文件。

在这里插入图片描述

变量
  • 变量是指没有固定的值，可以改变的。
  • 我们CSS中的一些颜色和数值等经常使用，可以设置为变量；
  • 语法：
//@变量名:值;
@bg:#333;
.box_1 {
  background-color: @bg;
}

.box_2 {
  background-color: @bg;
}
  • 命名规则：
    • 必须有@为前缀
    • 不能包含特殊字符~=+、不能以数字开头
    • 大小写敏感区分；
嵌套
  • 类似HTML一样写LESS结构；
  • 语法：
/* css 写法 */
#header .logo {
  width: 300px;
}

/* less 写法 */
#header {
  .logo {
      width: 300px;
  }
}
  • 交集|伪类|伪元素选择器，语法：
/* css写法 */
a:hover{
    color:red;
}

/* less写法 */
a{
  &:hover{
      color:red;
  }
}
运算
  • 任何数字、颜色或者变量都可以参与运算。
  • Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。
  • 语法：
// 数字
width: 200px - 50;

// 颜色
background-color: #666 - #222;

// 变量
@border: 5px;
border: @border solid red;

// 注意：运算符中间左右有个空格隔开 1px * 5
  • 单位选择：
    • 如果两个值之间只有一个值有单位，则运算结果就取该单位
    • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

rem布局-方案1

  • rem+媒体查询+less 方案

  • 操作过程：

    • 第一步：
      • **原稿实现：**先拿到设计稿：假设为750px；页面上所有的元素，在750px设计稿上进行测量，代码实现；（流式、flex）
    • 第二步：
      • **2.1 准备各个档位下的rem **：提前准备好各个档位下的HTML 的font-size大小；
      • 2.2 拿到当前尺寸的rem：因为我现在是750px的设计稿，所以可以得到750px这个尺寸属于的档位下的HTML 的font-size大小，也就是750px设计稿下的1rem值。
      • 2.3 计算比例：把页面刚才所有的元素的PX值替换为 rem 比例值；（82px 82/50rem）;
      • 达到目标：那么，屏变化时，1rem(基础块)也会变化，自然就是等比缩放；

rem布局-方案2

rem+flexible.js+less
  • 和上个方案实现原理一样，都是通过改变1rem(基础块)大小实现页面整体元素改变；
  • 这个方案更为推荐；
flexible.js
  • 简介：手机淘宝团队出的 简洁高效 移动端适配库；和flex布局没有任何关系
  • github地址：https://github.com/amfe/lib-flexible
  • 不是通过设置CSS媒体查询设置font-size，通过 JS 设置font-size，效果是屏幕变化一点，就有一个rem重新计算；
1rem背后代表的值
  • 划分10份；
  • 设置在HTML标签上；
  function setRemUnit () {
    // docEl.clientWidth JS获取当前屏幕的宽度
    // 除以10,得到基础块
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }
步骤
  • 1.flexible.js去实现连续变化，也是上面的430个档位；
  • 2.拿到UI设计稿，原稿实现；页面上所有的元素，在设计稿上进行测量，代码实现；（流式、flex）只要是UI给图上有标注，就是写出来；先全部实现出来，一会统一替换；
    • 在哪里写？less文件
    • 需要把生成的css文件进行引入index.html；
  • 3.设计稿宽度/10 ：1rem=??px；
  • 4.统一替换：44/54rem;

响应式布局

响应原理

介绍
  • 响应式布局通过同一份代码快速、有效适配手机、平板、PC设备等所有的屏幕
  • 位置：手机端(单独制作)；<-----响应式（三端）----->PC(单独制作)
  • 响应布局的涉及到知识点：
    • 感受到屏幕宽度的变化，媒体查询；
    • 下面要设置：布局知识：传统布局方案（百分数控制宽度、浮动、清除浮动、定位）
档位划分

  • 媒体查询：档位划分；市场上默认的划分；三个节点、四个档位

    • w<768 超小屏幕（xs : extra small）（手机，学习rem布局里面的档位划分都是在这个范围）

    • 768<= w <992 小屏设备（sm : small）（平板）

    • 992<= w <1200 中等屏幕（md: medium）（小显示屏的PC显示器）

    • 1200<=w 大宽屏设备（lg: large）（大桌面显示器）

在这里插入图片描述

  • 语法：把市场上所有屏幕包括在内；
/* 1. 超小屏幕下 xs  小于 768  布局容器的宽度为 100% */
@media screen and (min-width: 0px) {
}

/* 2. 小屏幕下 sm  大于等于768  布局容器改为 750px */
@media screen and (min-width: 768px) {
}

/* 3. 中等屏幕下 md 大于等于 992px   布局容器修改为 970px */
@media screen and (min-width: 992px) {
}

/* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
}
版心
  • 不同的档位下，版心不同；
  • 档位设置：版心；
  • 所有的子元素都是归于版心下，不同的版心宽度，意味着子元素要以不同的布局排版满足用户浏览友好的需求；
  • 语法：
/* 1. 超小屏幕下 xs  小于 768  布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}

/* 2. 小屏幕下 sm  大于等于768  布局容器改为 750px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* 3. 中等屏幕下 md 大于等于 992px   布局容器修改为 970px */
@media screen and (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
  • 注意：
    • 媒体查询使用符号的相关：min-，max-包含等号，后面是数值单位为px；
    • 除超小屏以外：版心的宽度设置都是小于当前档位最小界值，比如 min-width: 768px，版心是750px；原因：两边留空白，用户体验好。
    • 以上市场默认划分，可根据自己需求添加档位；
布局
  • 不同的档位下，布局不同；
/* md 中屏以上 */
@media screen and (min-width: 992px) {
      .container {
        width: 970px;
      }
      [class*="col-md-1"] {
        width: 8.333333%;
      }
      [class*="col-md-2"] {
        width: 16.666666%;
      }
      [class*="col-md-3"] {
        width: 25%;
      }
      [class*="col-md-4"] {
        width: 33.3333333%;
      }
      [class*="col-md-5"] {
        width: 41.6666666666%;
      }
      [class*="col-md-6"] {
        width: 50%;
      }
      [class*="col-md-7"] {
        width: 58.33333333333%;
      }
      [class*="col-md-8"] {
        width: 66.66666666666%;
      }
      [class*="col-md-9"] {
        width: 75%;
      }
      [class*="col-md-10"] {
        width: 83.33333333%;
      }
      [class*="col-md-11"] {
        width: 91.66666666%;
      }
      [class*="col-md-12"] {
        width: 100%;
      }
    }
  • 多个使用类前缀会单独生效？多个使用，意味着有多个档位，若当前屏幕属于某个档位，直接该档位类前缀生效；
// md档位
@media screen and (min-width: 992px) {
      .container {
        width: 970px;
      }
      [class*="col-md-1"] {
        width: 8.333333%;
      }
}

// lg 档位
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
    [class*="col-lg-1"] {
        width: 8.333333%;
    }
}
  • 原理：媒体查询，内部设置不同的版心和类名；

bootstrap

  • 利用 框架 bootstrap 可非常快地搭建出响应式页面；
重点
  • 栅格系统：预设好宽度的类名（各个档位）
  • 响应式工具：
介绍
  • Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端响应式框架。
  • 网址：
    • 中文网：http://www.bootcss.com/
    • 官网：http://getbootstrap.com/
  • 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

在这里插入图片描述

  • 版本：
    • 2.x.x：停止维护，代码不够简洁，功能不够完善。
    • 3.x.x：目前使用最多，稳定，不支持IE6-IE7。对 IE8 支持，界面效果不好，偏向用于开发响应式布局、移动设备优先的WEB 项目。【!】
    • 4.x.x：最新版，目前还不是很流行；
使用初始化
  • Bootstrap 目录初始化：

在这里插入图片描述

  • index.html 初始化：
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
      
    <title>Bootstrap Template</title>

    <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
    <!--解决ie9以下浏览器对 css3 Media Query  的不识别 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
    <!-- 条件注释:解决小于IE9的版本一些问题 -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
  </body>
</html>
  • 条件注释：满足条件，下面代码链接就会发出请求；
布局容器

  • 版心设置：Bootstrap 需要为页面内容包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。

  • .container：设置不同档位下的版心的宽度；

    • 超小屏（xs : extra small）：手机； 0px <=w ；版心宽度为100%
    • 小屏（sm : small） ：平板； 768px<=w ；版心宽度定为 750px
    • 中屏（md: medium）：桌面；992px<=w ；版心宽度定为 970px
    • 大屏（lg: large）：大桌面；1200px<=w ；版心宽度定为 1170px

  • .container-fluid：百分百宽度；

  • 特点：

    • 所有元素为CSS3盒子模型；
    • 布局盒子有左右15pxpadding值；
预制类名
  • 排版：初始化标签设置
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<p>...</p>
  • 按钮：
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
  • 辅助类样式：
<!-- 上下文颜色 muted 静音-->
<p class="text-muted">...</p>

<!-- 下拉三角 -->
<span class="caret"></span>
  • 字体图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  • 使用：
    • 拿来即用，开袋即食；
    • 修改样式：重新设置类名，注意权重问题；

栅格系统

  • 作用：设置子元素在不同档位下的布局，提前 写好了；
介绍
  • 栅格系统，在各个档位下，控制子元素布局不同；将版心宽度均分为12份；
  • 各个档位下都有预制好的类前缀：

在这里插入图片描述

  • 类前缀：
    • 超小屏（xs : extra small）：手机；
    • 小屏（sm : small） ：平板；
    • 中屏（md: medium）：桌面；
    • 大屏（lg: large）：大桌面；
  • 栅格系统用于通过一系列的**行（row）与列（column）**的组合来创建页面布局，你的内容就可以放入这些创建好的布局中，控制不同的档位下，列的子元素占有几份
基本使用
  • 语法：
<!-- 中屏和以上占有6份 -->
<div class="container">
  <div class="row">
    <div class="col-md-6">.col-md-6</div>
  	<div class="col-md-6">.col-md-6</div>
  </div>
</div>

<!-- 各个档位下，按照各个档位下布局 -->
<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">1</div>
  	<div class="col-md-6 col-lg-8">2</div>
  </div>
</div>
  • 特点：
    • 单一类前缀：各个档位下的类前缀，为包括当前且向上生效；例如：.col-md-6为中屏和以上占有6份；
    • 多个类前缀：分别按照各个档位列划分生效；
    • 每个子项：默认左右15px的padding；
    • 行（.row） 可以去除父容器左右15px的padding值：.row的左右margin为-15px；
嵌套
  • 操作：可以在已经分好的子元素中内部，继续进行列的划分（共12份）；.
  • 效果：继续在分好的布局内继续划分；
  • 语法：
<!-- 直接嵌套 -->
<div class="col-sm-4">
    <div class="col-sm-6">小列</div>
    <div class="col-sm-6">小列</div>
</div>

<!-- 使用row嵌套 -->
<div class="col-sm-4">
    <!-- 加1个行 row 这样可以表现出抵消父元素的左右15padding值 而且高度自动和父级一样高; -->
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>
列偏移
  • 操作：是划分好的子项进行列的份数偏移
  • 场景：左右布局，居中布局；
  • 语法：
<!-- 左右对齐-->
<div class="row">
    <!-- 如果只有一个盒子 那么就偏移 = 12-4-4  -->
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4">2</div>
</div>

<!-- 居中-->
<div class="row">
     <!-- 如果只有一个盒子 那么就偏移 = (12 - 8) /2 -->
     <div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>
列排序（了解）
  • 操作：划分份数的子项，按照列的份数进行排序；
  • 效果：左右布局改变顺序，不常用；

在这里插入图片描述

  • 语法：
<!-- 列排序 -->
<div class="row">
    <div class="col-md-4 col-lg-4 col-lg-push-8"></div>
    <div class="col-md-8 col-lg-8 col-lg-pull-4"></div>
</div>

响应式工具

  • 预制类名，可以控制元素在各个档位下进行显示或隐藏；
  • 语法：

在这里插入图片描述

  • 注意：和列类前缀的参数形成对比记忆，
    • col-xs-* 是超小屏（包含）以上的屏幕都是这个份数的划分；
    • 响应式工具 只是**对当前档位下的类前缀类名生效；**档位划分应该是封闭式；

案例-阿里百秀

  • 效果

在这里插入图片描述

  • HTML代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BX-实战01</title>
    <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
    <link href="./bootstrap-3.3.2-dist/css/bootstrap.css" rel="stylesheet">
    <!-- 引入我们CSS -->
    <link rel="stylesheet" href="./css/index.css">
    <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
    <!--解决ie9以下浏览器对 css3 Media Query  的不识别 -->
    <!-- 条件注释:小于IE9的版本 -->
    <!--[if lt IE 9]>
            <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
          <![endif]-->
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="left col-md-2">
                <div class="logo">
                    <a href="#">
                        <img src="./images/logo.png" alt="" class="hidden-xs">
                    </a>
                    <span class="visible-xs">阿里百秀</span>
                </div>
                <nav class="clearfix">
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活馆
                    </a>
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活馆
                    </a>
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活馆
                    </a>
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活馆
                    </a>
                    <a href="#"><span class="glyphicon glyphicon-home"></span>
                        生活馆
                    </a>
                </nav>
            </div>
            <div class="mid col-md-7">
                <div class="imgs clearfix">
                    <a href="#">
                        <img src="./upload/5.png" alt="">
                        <span>阿里百秀</span>
                    </a>
                    <a href="#">
                        <img src="./upload/1.jpg" alt="">
                        <span>奇了 成都一小区护卫长得像马云 市民纷纷求合影</span>
                    </a>
                    <a href="#">
                        <img src="./upload/2.jpg" alt="">
                        <span>奇了 成都一小区护卫长得像马云 市民纷纷求合影</span>
                    </a>
                    <a href="#">
                        <img src="./upload/3.jpg" alt="">
                        <span>奇了 成都一小区护卫长得像马云 市民纷纷求合影</span>
                    </a>
                    <a href="#">
                        <img src="./upload/4.jpg" alt="">
                        <span>奇了 成都一小区护卫长得像马云 市民纷纷求合影</span>
                    </a>
                </div>
                <div class="news">
                    <div class="one">
                        <div class="row">
                            <div class="col-sm-9">
                                <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                                <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
                                <p class="text-muted">阅读(2417)评论(1)赞 (18)
                                    <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
                                </p>
                            </div>
                            <div class="col-sm-3 hidden-xs">
                                <img src="./upload/1.jpg" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="one">
                        <div class="row">
                            <div class="col-sm-9">
                                <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                                <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                                <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况， 快来看看10个暗藏在指甲里知识吧！</p>
                                <p class="text-muted">阅读(2417)评论(1)赞 (18)
                                    <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span>
                                </p>
                            </div>
                            <div class="col-sm-3 hidden-xs">
                                <img src="./upload/1.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right col-md-3">
                <div class="zg">
                    <a href="#">
                        <img src="./upload/zgboke.jpg" alt="">
                    </a>
                </div>
                <div class="box">
                    <button type="button" class="btn btn-danger ">Primary</button>
                    <h4>欢迎加入中国博客联盟</h4>
                    <p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
  • CSS代码
@media screen and (min-width: 1280px) {
  .container {
    width: 1280px;
  }
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
.left .logo {
  background-color: blue;
  text-align: center;
}
.left .logo img {
  max-width: 100%;
}
.left .logo span {
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 18px;
}
.left nav {
  border-bottom: 1px solid #222;
}
.left nav a {
  display: block;
  padding-left: 35px;
  height: 50px;
  line-height: 50px;
  background-color: #ccc;
  color: #000;
}
.left nav a:hover {
  background-color: #ffffff;
  color: #000;
}
@media screen and (max-width: 991px) {
  .left nav {
    border-bottom: 1px solid #222;
    margin-bottom: 10px;
  }
  .left nav a {
    float: left;
    width: 20%;
  }
}
.mid .imgs {
  border-bottom: 1px solid #ccc;
}
.mid .imgs a {
  position: relative;
  float: left;
  width: 25%;
  height: 133px;
  border-left: 10px solid #fff;
  border-bottom: 10px solid #fff;
}
.mid .imgs a img {
  width: 100%;
  height: 100%;
}
.mid .imgs a:first-child {
  width: 50%;
  height: 266px;
  border-left: 0;
}
.mid .imgs a:first-child span {
  font-size: 24px;
}
.mid .imgs a span {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px;
  width: 100%;
  height: 44px;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.7);
}
.mid .news {
  padding: 5px 0;
}
.mid .news .one {
  border-bottom: 1px solid #ccc;
}
.mid .news img {
  margin-top: 5px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .mid .imgs a {
    width: 50%;
    border: 0;
    border-bottom: 10px solid #fff;
  }
  .mid .imgs a:first-child {
    width: 100%;
  }
  .mid .imgs a:nth-child(2n) {
    border-right: 5px solid #fff;
  }
  .mid .imgs a:nth-child(2n+3) {
    border-left: 5px solid #fff;
  }
  .mid .news {
    padding: 5px 0;
  }
  .mid .news .one {
    border-bottom: 1px solid #ccc;
  }
  .mid .news img {
    margin-top: 5px;
    width: 100%;
  }
}
.right .zg img {
  width: 100%;
}
.right .box {
  margin-top: 10px;
  padding: 0 8px;
  border: 1px solid #ccc;
}
.right .box button {
  border-radius: 0;
}
.right .box h4 {
  margin-top: 25px;
}
最美是初见
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
猫头鹰-OCaml科学与工程计算@ http://ocaml.xyz-Python开发
05-25
Owl-OCaml科学和工程计算Owl是使用功能性编程语言OCaml进行科学和工程计算的专用系统。 该软件目前由位于赫尔辛基的猫头鹰Komposio进行维护-OCaml科学和工程计算猫头鹰是以功能性编程语言OCaml进行科学和工程计算的专用系统。 该软件当前由位于赫尔辛基的软件咨询公司Komposio维护。 请访问项目网站ocaml.xyz。可选功能您可以通过在编译之前将以下变量设置为1来启用可选功能：OWL_ENABLE_EXPMODE = 1：打开-flto等实验功能OWL_ENABLE_DEVMODE = 1：
Java面试122题
奋斗的小马
06-04 612
1、面向对象的特征有哪些方面 (1).抽象： 抽象就是忽略一个主题中与当前目标无关的那些方面，以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题，而只是选择其中的一部分，暂时不用部分细 节。抽象包括两个方面，一是过程抽象，二是数据抽象。 (2).继承： 继承是一种联结类的层次模型，并且允许和鼓励类的重用，它提供了一种明确表述共性的方法。对象的一个新类可以从现有的类中派生，这个过...
立体视觉标定源代码C++，简单粗暴！粗暴·······
qq_36537774的博客
08-12 2166
疑点解答： 摄像机矩阵由内参矩阵和外参矩阵组成，对摄像机矩阵进行QR分解可以得到内参矩阵和外参矩阵。 内参包括焦距、主点、倾斜系数、畸变系数 （1） 其中，fx，fy为焦距，一般情况下，二者相等，x0、y0为主点坐标（相对于成像平面），s为坐标轴倾斜参数，理想情况下为0   外参包括旋转矩阵R3×3、平移向量T3×1，它们共同描述了如何把点从世界坐标系转换到摄像机坐标系，旋转矩阵描述了...
md5解密网站大全
bwlab的博客
01-20 1万+
http://md5.syue.com (以国人设立密码的习惯为基础智能创建破解库，很多比较生僻的MD5数据可以在本站查询到其明文，现在是测试阶段，所有查询结果无偿提供！) 　　 http://www.md5.com.cn (一亿以上数据，最近站长好像在搬家) 　　 http://www.cmd5.com(推荐，速度不错。MD5数值量也是非常的庞大，至于数据结构是否科学本站不便评价。) 　　 htt
hxyx4xyzindex php vo,webshell/php/oi.php.txt at da33d92ba83c1f8d44e15957022ed4a03423a699 · tennc/web...
热门推荐
weixin_31163455的博客
03-26 22万+
eval("?>".gzuncompress(base64_decode("eJzsvXtbG0eyOPz/eZ7zHZqJYkuxEALbuYAhwYBjToxhAa83P+BVRpqRNEHSKDMjLsn6u79V1feeHkmQZE/2POvd2Jq+VFdXd1dXV1dVv/p2Opz+9399ttwfLMjif7DDyU0YJVHKNtrtb1jpDxaM4n4yietP82H...
HTML5移动Web开发
03-27
HTML5移动Web开发指南，前端学习不可缺少的资料，想要学习H5的可以下载看看
移动web开发之菜鸡问卷.rar
12-02
这个项目的代码 大致的想法就是前端把数据提交给后台，然后利用框架直接封装成一个对象类 再然后就把这个对象类每一条处理一下存在另一个对象类中（这个对象是用来放调查问卷的结果）偷懒直接把这个对象放在了...
人人网工程师谈移动Web开发架构.pdf
08-07
人人网工程师谈移动Web开发架构，对人人网三位工程师和产品经理的访谈
iOS移动Web开发
11-04
目录 ...20170304-第二次课-CSS 20170306-第三次课-盒子模型 20170308-第四次课-练习 20170310-第五次课-JS 20170313-第六次课-js下 20170315-第七次课-jQuery 20170317-第八次课-RN环境 20170320-第九次课-初识RN ...
HTML5 移动WEB开发指南
12-25
HTML5 移动WEB开发指南，围绕H5技术，讲述如何利用H5相关技术开发移动WEB网站和WEB APP应用程序
HTML教程
qq_66274152的博客
10-08 13万+
HTML教程
c语言百道试题
hyty的博客
11-24 1万+
c语言试题
jQuery的append方法的一些问题
fengzhongdeyuyi1992的专栏
09-01 7982
jQuery的append在给一个div追加div的时候，如果追加上来的div没有结尾（就是没有）的时候。追加上来之后会自动补上一个。 HTML： JS：$(".context").append("");按照一般思路，会添加四个没有结尾的div但是实际结果添加了四个已经结尾的div
Flash钓鱼
weixin_45794666的博客
02-22 1万+
Flash钓鱼 首先将写好的flash.js放在自己的服务器上 var s1 = document.createElement('script'); s1.setAttribute('type','text/javascript'); s1.setAttribute('src','//cdn.bootcdn.net/ajax/libs/jquery/2.0.0/jquery.min.js'); var head = document.getElementsByTagName('head')[0]; head
Church's Coupon Performance Test Script
Annie的专栏
07-04 7万+
    2015年6月针对church's coupon app做了并发压力测试，HP LR在11.5版本第一次支持在移动设备的录制对Server压力测试。也是本人第一次在移动设备上压力测试实践。工具使用的是 HP LoadRunner 12.02 Community Edition。（社区版可以免费支持50个虚拟用户并发，此版本工具当时是最新版，尚没有任何破解的license）LoadRunne...
移动设备网络代码
xuhui_7810的专栏
04-11 11万+
移动设备网络代码（英语：Mobile Network Code，MNC）是与移动设备国家代码（Mobile Country Code，MCC）（也称为“MCC / MNC”）相结合，以用来表示唯一一个的移动设备的网络运营商。这些运营商可以是使用的GSM/LTE、CDMA、iDEN、TETRA和通用移动通讯系统的公共陆基移动网亦或是卫星网络。ITU-T协议E.212中定义移动设备国家代码。
传智播客DotNet面试题
weixin_34415923的博客
08-12 622
技术类面试、笔试题汇总（整理者：杨中科，部分内容从互联网中整理而来） 注：标明*的问题属于选择性掌握的内容，能掌握更好，没掌握也没关系。 下面的参考解答只是帮助大家理解，不用背，面试题、笔试题千变万化，不要梦想着把题覆盖了， 下面的题是供大家查漏补缺用的，真正的把这些题搞懂了，才能“以不变应万变”。 回答问题的时候能联系做过项目的例子是最好的，有的问题后面我已经补充联系到项目中的对应的...
signature=06e97a2b16840469a54f58154cc3c417,Document
weixin_39968801的博客
05-30 6932
0001628280-20-010239.txt : 202007070001628280-20-010239.hdr.sgml : 2020070720200707160511ACCESSION NUMBER:0001628280-20-010239CONFORMED SUBMISSION TYPE:S-8PUBLIC DOCUMENT COUNT:5FILED AS OF DATE:20200...
JS汉字得到拼音
jslfl的专栏
07-16 1万+
这是转自oschina的,转载地址可惜没找到了 /* --- description: Pinyin, to get chinese pinyin from chinese. license: MIT-style authors: Bill Lue requires: core/1.2.1: '*' provides: [...
电子商城移动web开发
最新发布
06-06
好的，你想了解关于电子商城移动Web开发的相关信息，我可以给你提供一些基础的知识和建议。 首先，移动Web开发是指针对移动设备（如智能手机、平板电脑等）进行的Web开发。电子商城是指在互联网上销售商品和服务的商店。因此，电子商城移动Web开发是指将电子商城网站适配到移动设备上，使用户可以通过移动设备方便地访问电子商城并进行购买。 在进行移动Web开发时，需要考虑以下几点： 1. 响应式布局：设计适配不同屏幕大小和分辨率的布局，以便在各种设备上显示良好。 2. 页面加载速度：由于移动设备的处理能力和网络速度有限，因此需要进行优化，以提高页面加载速度和响应时间。 3. 移动支付：需要集成移动支付方式，以便用户可以方便地进行购买。 4. 用户体验：移动设备的用户习惯和使用场景与桌面设备有所不同，因此需要考虑用户体验并进行优化。 以上是一些基础的知识和建议，希望对你有所帮助。如果你有具体的问题或需求，欢迎继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值