文章目录

• 【移动Web开发之综合案例】前端小抄(19)
• • 黑马面面布局开发
  • • 一、目的
    • • 1.1 技术方案
      • 1.2 代码规范
      • 1.2 目录规范
    • 二、流程开发
    • • 2.1 蓝湖/摹客协作平台
      • 2.2 适配方案
      • 2.3 初始化文件
      • 2.4 布局模块
      • 2.5 swiper 插件使用
      • 2.6 图标字体上传下载
      • 2.7 上传码云并发布部署静态网站

【移动Web开发之综合案例】前端小抄(19)

本学习笔记是个人对 Pink 老师课程的总结归纳，转载请注明出处！

黑马面面布局开发

一、目的

1. 了解移动端页面开发流程
2. 掌握移动端常见布局思路

1.1 技术方案

1. 弹性盒子 + rem + LESS 
4. 最小适配设备为 iphone5 320px，最大设配设备为 iphone8plus（ipad 能正常查看内容即可）

1.2 代码规范

1. 类名语义化，尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接
2. 类名嵌套层次尽量不超过三层
3. 尽量避免直接使用元素选择器
4. 属性书写顺序
   布局定位属性：display / position / float / clear / visibility / overflow
   尺寸属性：width / height / margin / padding / border / background
   文本属性：color / font / text-decoration / text-align / vertical-align
   其他属性（CSS3）：content / cursor / border-radius / Box-shadow / text-shadow
5. 避免使用 id 选择器
6. 避免使用通配符 * 和 !important

1.2 目录规范

项目文件夹：heimamm
	样式文件夹：css
	业务类图片文件夹：images
	样式类图片文件夹：icons
	字体类文件夹：fonts

二、流程开发

2.1 蓝湖/摹客协作平台

• UI 设计师将 psd 效果图完成后，会上传到蓝湖、摹客里面，同时会拉前端工程师进入开发
• 大部分情况下，UI 会把图片按照前端设计要求给切好
• UI 设计师上传蓝湖到或者/摹客（了解）

1. 摹客官网地址：https://www.mockplus.cn/  注册一个账号
2. 下载 moke ps 插件 
3. PS 安装 摹客/蓝湖 插件
3. 打开 PS 摹客/蓝湖 插件
4. 上传（需要切图，需要先标注切图）
5. 查看项目
6. 邀请成员进入（分享按钮，链接地址）

• 前端设计师可以直接 摹客/蓝湖 测量取值

2.2 适配方案

• flex 布局
• 百分比布局
• rem 布局
• vw/vh 布局
• 响应式布局
• 本次案例 flex + rem + flexible.js + LESS

2.3 初始化文件

• 引入 normalize.css

• less 中初始化 body 样式

• 约束范围

  @media screen and (min-width: 750px) {
      html {
        font-size: 37.5px !important;
      }
   }
  

2.4 布局模块

1. 头部模块 .header 高度为 80px

2. nav 模块制作多用 flex

3. 充电学习 阴影

   Box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1)
   

2.5 swiper 插件使用

官网地址：https://www.swiper.com.cn/

• 下载需要的 css 和 js 文件 html 页面中引入相关文件
• 官网找到类似案例，复制 html 结构，css 样式 js 语法
• 根据需求定制修改模块

2.6 图标字体上传下载

上传步骤：

1. 让 UI 美工准备好图标字体（必须是 svg 格式）

2. 点上传按钮（保留颜色并提交）

3. 生成之后加入购物车即可

4. 点击下载 — 下载代码

小技巧：如何批量下载全部字体图标呢？

var span = document.querySelectorAll('.icon-cover');
for (var i = 0, len = span.length; i < len; i++) {
     console.log(span[i].querySelector('span').click());
}

2.7 上传码云并发布部署静态网站

准备工作：需要下载 git 软件，需要码云注册账号

git 可以把我们的本地网站提交上传到远程仓库（码云 gitee）里面，类似以前的 ftp

码云：就是远程仓库，类似服务器

1. 码云创建新的仓库：heimamm

2. 利用 git 提交把本地网站提交到码云新建的仓库里面

   • 在网站根目录右键-- Git Bash Here

   • 如果是第一次利用 git 提交，请配置好全局选项

     git config --global user.name "用户名"
     git config --global user.email "你的邮箱地址"
     

   • 初始化仓库

     git init
     

   • 把本地文件放到暂存区

     git add .
     

   • 把本地文件放到本地仓库里面

     git commit -m '提交黑马面面网站'
     

   • 链接远程仓库

     git remote add origin 你新建的仓库地址
     

   • 把本地仓库的文件推送到远程仓库 push

     git push -u origin master
     

3. 码云部署发布静态网站

   • 在当前仓库中，点击“服务”菜单

   • 选择 Gitee Pages

   • 选择“启动”按钮

   • 稍等之后，会拿到地址，就可以利用这个地址来预览网页了

   • 当然你也可以利用 草料二维码 生成二维码 https://cli.im/

最后：如果提交网站，你不愿意用git 提交， 可以直接找到仓库，里面有文件，选择上传本地文件即可。

但是，1个小时内，只能上传 20 个以内的文件， 前端人员 git 必备技能

【案例代码】

• 项目结构

• index.less

body {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
  background-color: #f2f4f7;
}

a {
  text-decoration: none;
  color: #707070;
}

// 约束当屏幕大于 750px 的时候，html字体大小就不不变化了
@media screen and (min-width: 750px) {
  html {
    font-size: 37.5px !important;
  }
}

.warp {
  background-color: #fff;
  padding-bottom: 1.146667rem;
}

.header {
  height: 2.133333rem;
  border-bottom: 1px solid #eaeaea;
  text-align: center;
  line-height: 2.133333rem;
  font-size: 0.933333rem;
  color: #1c1c1c;
}

.nav {
  display: flex;
  // 显示不开就换行
  flex-wrap: wrap;
  padding: 1.2rem 0 1.6rem 0;

  .item {
    display: flex;
    width: 33.33%;
    // 纵向显示
    flex-direction: column;
    // 水平居中
    align-items: center;

    img {
      width: 3.706667rem;
      height: 3.706667rem;
    }

    span {
      font-size: 0.666667rem;
      color: #707070;
    }

    // 选择前面三个 -n + 3 选择前3个
    &:nth-child(-n + 3) {
      margin-bottom: 1.653333rem;
    }
  }
}

.go {
  margin: 0 0.266667rem 0 0.48rem;
}

.content {
  padding: 1.066667rem 0.64rem;
  background-color: #fff;
  margin-top: 0.266667rem;

  .con-hd {
    display: flex;
    justify-content: space-between;
    height: 1.013333rem;
    line-height: 1.013333rem;
    margin-bottom: 0.906667rem;

    h4 {
      margin: 0;
      font-size: 0.746667rem;
      color: #333333;

      .icon {
        display: inline-block;
        width: 1.013333rem;
        height: 1.013333rem;
        // 添加这个代码，可以让后面的文字垂直居中
        vertical-align: middle;
      }
    }

    .more {
      font-size: 0.586667rem;
      color: #999999;
    }
  }
}

.get_job_focus {
  position: relative;

  .swiper-container {
    // width: 100%;
    height: 100%;
    // 根据需求把宽度定位 540px
    width: 14.4rem;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-Box;
    display: -ms-flexBox;
    display: -webkit-flex;
    display: flex;
    // 竖向显示
    flex-direction: column;
    /* Center slide text vertically */
    display: -webkit-Box;
    display: -ms-flexBox;
    display: -webkit-flex;
    display: flex;
    -webkit-Box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-Box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    // 其余的兄弟是 0.8
    transform: scale(0.8);
    opacity: 0.4;

    a {
      width: 9.013333rem;
      height: 10.026667rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    p {
      width: 9.013333rem;
      font-size: 0.666667rem;
      margin-top: 0.64rem;
      color: #333;
    }
  }

  // 当前选中的 slide   中间那个
  .swiper-slide-active,
  .swiper-slide-duplicate-active {
    transform: scale(1);
    z-index: 999;
    opacity: 1;
  }

  .swiper-button-next,
  .swiper-button-prev {
    outline: none;

    &:after {
      font-size: 1.066667rem;
      color: #333;
    }
  }
}

.study_con {
  padding-bottom: 3.733333rem;
}

// 学习模块的轮播图
.study {
  .study_fo {
    padding: 0.266667rem;
  }

  .swiper-slide {
    font-size: 18px;
    background: #fff;
    width: 7.733333rem;
    height: 9.066667rem;
    background-color: #fff;
    border-radius: 0.266667rem;
    Box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);

    h5 {
      font-size: 0.693333rem;
      margin: 0.533333rem 0;
      font-weight: 400;
      padding: 0 0.266667rem;
    }

    p {
      font-size: 0.693333rem;
      color: #ff4400;
      padding: 0 0.266667rem;
    }
  }
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 2.933333rem;
  width: 100%;

  z-index: 99999;
  display: flex;
  padding: 0.533333rem;
  background-color: #fff;
  border-top: 1px solid #ccc;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 1.04rem;
      height: 1.093333rem;
    }

    p {
      font-size: 0.586667rem;
      color: #666666;
      margin-top: 0.266667rem;
    }
  }
}

• flexible.js

(function flexible(window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    } else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 20
  function setRemunit() {
    var rem = docEl.clientWidth / 20
    docEl.style.fontSize = rem + 'px'
  }

  setRemunit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemunit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemunit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

• index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8" />
  <Meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>黑马面面</title>
  <link rel="stylesheet" href="./css/normalize.css" />
  <!-- 先引入css文件 放到自己css文件的上面 -->
  <link rel="stylesheet" href="./css/swiper.min.css" />
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <section>
    <!-- 头部区域 -->
    <header>黑马面面</header>
    <!-- 导航栏部分 -->
    <nav>
      <a href="#">
        <img src="./icons/icon1.png" alt="" />
        <span>HR面试</span>
      </a>
      <a href="#">
        <img src="./icons/icon2.png" alt="" />
        <span>笔试</span>
      </a>
      <a href="#">
        <img src="./icons/icon3.png" alt="" />
        <span>技术面试</span>
      </a>
      <a href="#">
        <img src="./icons/icon4.png" alt="" />
        <span>模拟面试</span>
      </a>
      <a href="#">
        <img src="./icons/icon5.png" alt="" />
        <span>面试技巧</span>
      </a>
      <a href="#">
        <img src="./icons/icon6.png" alt="" />
        <span>薪资查询</span>
      </a>
    </nav>
    <!-- go模块 -->
    <section>
      <img src="./images/go.png" alt="" />
    </section>
  </section>
  <!-- 就业指导模块 -->
  <section>
    <!-- 头部 -->
    <div>
      <h4>
        <span><img src="./icons/i2.png" alt="" /></span>
        就业指导
      </h4>
      <a href="#">更多>></a>
    </div>
    <!-- 旋转木马轮播图模块 -->
    <div>
      <!-- Swiper -->
      <div>
        <div>
          <div>
            <a href="#"><img src="./images/pic.png" alt="" /></a>
            <p>老师教你应对面试技巧</p>
          </div>
          <div>
            <a href="#"><img src="./images/ldh.jpg" alt="" /></a>
            <p>老师教你应对面试技巧</p>
          </div>
          <div>
            <a href="#"><img src="./images/3.jpg" alt="" /></a>
            <p>老师教你应对面试技巧</p>
          </div>
        </div>
      </div>
      <!-- Add Arrows 根据需求这个代码放到 container外面 添加左右箭头-->
      <div></div>
      <div></div>
    </div>
  </section>
  <!-- 充电学习模块 -->
  <section>
    <!-- 头部 -->
    <div>
      <h4>
        <span><img src="./icons/i2.png" alt="" /></span>
        充电学习
      </h4>
      <a href="#">更多>></a>
    </div>
    <!-- 学习模块轮播图模块 -->
    <div>
      <!-- Swiper -->
      <div>
        <div>
          <div>
            <img src="./images/pic1.png" alt="" />
            <h5>说低调英语，告别中式英语</h5>
            <p>156人学习</p>
          </div>
          <div>
            <img src="./images/pic2.png" alt="" />
            <h5>说低调英语，告别中式英语</h5>
            <p>156人学习</p>
          </div>
          <div>
            <img src="./images/pic1.png" alt="" />
            <h5>说低调英语，告别中式英语</h5>
            <p>156人学习</p>
          </div>
          <div>
            <img src="./images/pic1.png" alt="" />
            <h5>说低调英语，告别中式英语</h5>
            <p>156人学习</p>
          </div>
        </div>
        <!-- Add Pagination -->
        <div></div>
      </div>
    </div>
  </section>
  <footer>
    <a href="#">
      <img src="./icons/home.png" alt="" />
      <p>首页</p>
    </a>
    <a href="#">
      <img src="./icons/ms.png" alt="" />
      <p>模拟面试</p>
    </a>
    <a href="#">
      <img src="./icons/net.png" alt="" />
      <p>技术面试</p>
    </a>
    <a href="#">
      <img src="./icons/user.png" alt="" />
      <p>我的首页</p>
    </a>
  </footer>
  <script src="./js/flexible.js"></script>
  <!-- 比如引入js文件 -->
  <script src="./js/swiper.min.js"></script>
  <script>
    // 第一个函数里面是 就业指导轮播图
    (function () {
      var swiper = new Swiper(".get_job_fo", {
        // 能够显示的 slider的个数
        slidesPerView: 2,
        // 每一个slide之间的距离
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        // 添加左右箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    })();
    // 第二个函数的轮播图
    (function () {
      //  如果有多个轮播图最好修改下 swiper-container
      var swiper = new Swiper(".study_fo", {
        // 我们可以可以看看到的是 2个半
        slidesPerView: 2.2,
        spaceBetween: 20,
      });
    })();
  </script>
</body>

</html>

• 效果图

2-移动web开发之Flex布局

1 Flex基本概念

    先介绍一下Flex布局的布局容器（flex-container）、Flex子项（flex-item）、主轴（main-axis）、侧轴（cross-axis）的概念。

1.1 什么是Flex布局？  

    在PC端页面布局时，我们经常使用传统的文档流（标准流）来进行整体页面的分块布局，然后结合浮动以及定位实现局部的布局处理，即：首先，使用标准流确定基本网页框架；其次，配合浮动和定位对子盒子进行布局。

    而Flex布局（flex box），意为“弹性布局”，用于为盒子模型提供最大的灵活性，该布局模式可以作用于任何一个容器（行内元素/行内块元素均可），都可以将其指定为flex布局。

    要注意的是：当把父盒子设置为flex布局之后，子元素的float、clear和vertical-align属性都将失效 。

1.2 布局容器/Flex容器

    采用flex布局的元素，称之为“Flex容器”，也即布局容器（flex-container）。通常要为其设置如下属性，即：要为父盒子添加display：flex属性，来控制子盒子的位置和排列方式（沿着横轴或纵轴排列）。

.box {
            /* 使用flex布局  */
            display: flex;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: green;
 }

1.3 Flex子项

    被添加了“display:flex”属性的父盒子中，所有的子元素就成为“flex子项（flex-item）”，通常要为子元素添加：flex属性，来控制每一个子元素占父盒子中剩余空间的份数/百分比。

    例如，为一个flex-container添加4个flex-item，并且使得flex具有相同的宽度。CSS代码如下所示，

        /* flex-container */
        .box2 {
            /* 使用flex布局  */
            display: flex;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 1;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            height: 50px;
            /* 设置flex-item之间的外边距 */
            margin: 0px 3px;
            background-color: hotpink;
        }

    显示效果如下所示，

1.4 flex-item在flex-container中的排列方式：横/纵轴

1.4.1 横轴（主轴）

    横轴（main-axis），也叫主轴，可以使得flex-item在flex-container中沿着浏览器窗口的X轴正向顺次排列，这也是flex布局下，flex-item默认的排列方式。从1.3中的例子就可以看出。

1.4.2 纵轴（侧轴）

    纵轴（across-axis），也叫侧轴，可以使得flex-item在flex-container中沿着浏览器窗口的Y轴正向排列。

1.4.3 flex布局：主轴方向的设置flex-direction

    在flex布局中，默认的主轴虽然是沿着浏览器窗口的X轴正向，但是也是可以将其调整为沿着浏览器窗口的Y轴正向顺序排列。对应的CSS属性为flex-direction，该属性的取值如下所示，

    例如，修改1.3中的flex-item在flex-container沿着浏览器的Y轴，逆向排列，CSS代码如下所示，

        /* flex-container */
        .box2 {
            /* 使用flex布局  */
            display: flex;
            /* 设置主轴方向 */
            flex-direction: column-reverse;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 1;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            height: 50px;
            /* 设置flex-item之间的外边距 */
            margin: 3px 3px;
            background-color: hotpink;
        }

    显示效果如下所示，

1.4.4 flex布局：主轴上子元素排列方式的设置justify-content

    在使用flex-direction设置好了flex-container的主轴方向之后，如果对子元素的排列方式不满意，还可以通过为flex-container添加justify-content属性对其进行修改，该属性的取值如下，

    例如，修改1.3中的flex-item垂直居中对齐显示，对应的CSS代码如下所示，

     /* flex-container */
    .box2 {
            /* 使用flex布局  */
            display: flex;
            /* 设置主轴方向 */
            /* flex-direction: column-reverse; */
            /* 设置flex-item在主轴方向上的排列方式 */
            justify-content: center;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 1;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            height: 50px;
            /* 设置flex-item之间的外边距 */
            margin: 3px 3px;
            background-color: hotpink;
        }

    显示效果如下所示，

1.4.5 flex布局：主轴上子元素的换行显示设置flex-wrap

    思考这样一个问题，当将flex-item的flex属性值设置为20%，使其一行只能摆放5个flex-item时，会发现即使放置了6甚至更多的个flex-item，它们仍旧是不换行显示的。

     原因在于 ：Flex布局中，flex-item子盒子默认是不换行的（即使指定了子盒子的宽度，flex布局也会对其进行修改，使之能够在一行内全部放下）。也就是说：如果一行中的所有子盒子的宽度之和大于父盒子，那么会自动调节子盒子的宽度，从而让所有盒子都能够摆放到一行之中。

    此时，为了让flex-item显示出自动换行的效果，就要为flex-container添加flex-wrap属性，使其内部的flex-item可以自动换行显示。该属性的取值有如下两个，

    例如：我们修改1.3中的flex-item的flex属性为25%，然后为flex-container添加第5个flex-item，并使其可以换行显示。CSS代码如下，

      /* flex-container */
        .box2 {
            /* 使用flex布局  */
            display: flex;
            /* 设置主轴方向 */
            /* flex-direction: column-reverse; */
            /* 设置flex-item在主轴方向上的排列方式 */
            justify-content: center;
            /* 设置flex-item默认可以换行显示 */
            flex-wrap: wrap;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 25%;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            height: 50px;
            /* 设置flex-item之间的外边距 */
            /* margin: 3px 3px; */
            background-color: hotpink;
        }

    显示效果如下所示，

1.4.6 flex布局：横/纵轴上整行/列子元素排列方式的设置

    沿着横轴/纵轴排放的flex-item可能是一行，也可能是多行的，就需要用到不用的CSS属性对整行/列的排列方式进行限制。

1.4.6.1 单行/单列的情况：align-items

    对于单行排列方式的控制，可以使用align-items属性，该属性的取值为，

    例如，修改1.3中的显示效果为单列flex-item元素，居中显示，CSS代码如下，

 /* flex-container */
.box2 {
            /* 使用flex布局  */
            display: flex;
            /* 设置主轴方向 */
            flex-direction: column;
            /* 设置flex-item在主轴方向上的排列方式 */
            justify-content: center;
            /* 设置flex-item默认可以换行显示 */
            flex-wrap: wrap;
            /* 设置单行flex-item的排列方式 */
            align-items: center;
            /* 居中显示 */
            margin: 0 auto;
            /* 设置宽度占比 */
            width: 60%;
            background-color: skyblue;
        }
        /* flex-item */
        .box2 span {
            /* 添加flex属性:指定所有flex-container中的flex-item都具有相同的长度 */
            flex: 25%;
            /* 指定flex-item的高度，用于撑开flex-container（这样就不必为flex-container专门设置高度） */
            width: 50px;
            height: 50px;
            /* 设置flex-item之间的外边距 */
            margin: 3px 3px;
            background-color: hotpink;
        }

    显示效果如下所示，

1.4.6.2 多行/多列的情况：align-content

    对于多行排列方式的控制，可以使用align-content属性，该属性的取值同align-items。

※aligin-items和align-content使用总结

1.4.7 flex-flow：复合属性-同时设置了flex-direction和flex-wrap

※flex-****属性总结

    以上介绍的属性，除了flex之外，其它都是针对flex-container容器的属性，总结如下，

1.5 Flex布局：flex-item相关的属性

    接下来主要介绍和flex-item，即：flex子项相关的属性。

1.5.1 flex属性：子项占剩余总空间的份数

    【剩余空间是指：除了通过固定数值n px指定的额外空间】

    作用：将父盒子按照:percent-value来为某一个子盒子指定所占总的剩余空间的份数/权重/百分比，默认值为0。

    例如，如下代码：就定义了一个flex-container中含有2个指定宽度的flex-item、1个flex属性为1的flex-item，CSS代码如下，

 section{
      /* flex布局模式 */
      display: flex;
      /* 居中显示 */
      margin: 0 auto;
      width: 80%;
      height: 150px;
      background-color: blanchedalmond;
    }

    /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。 */
    div:nth-child(1){
      width: 150px;
      height: 100%;
      background-color: greenyellow;
    }
    div:nth-child(2){
      flex: 1;
      /* height: 100%; */
      background-color: blue;
    }
    div:nth-child(3){
      width: 150px;
      height: 100%;
      background-color: plum;
    }

    显示效果如下，

    也可以利用flex属性将flex-container的剩余空间进行平分，CSS代码如下，

p>span{
      /* 将父盒子的空间等分为3分 */
      flex: 1;
    }
    p>span:nth-child(1){
      background-color: rebeccapurple;
    }
    p>span:nth-child(2){
      background-color: greenyellow;
    }
    p>span:nth-child(3){
      background-color: blue;
    }

    显示效果如下，

1.5.2 align-self：控制单个子项在侧轴的排列方式

    控制子盒子集合中的某一个盒子具有与其它盒子不同的对齐方式。可用于覆盖align-items指定的全体子盒子的属性值。属性值：align-self取值同align-items属性的取值。默认值为auto，表示继承父元素的align-items属性，如果没有子盒子，则等同于stretch。     如下代码，使得第3个flex-item按照flex-end的方式进行排列，

    section{
      /* 指定flex布局 */
      display: flex;
      height: 150px;
      background-color: pink;
      justify-content: space-between;
    }

    section>span{
      /* margin: auto 0; */
      width: 150px;
      height: 40%;
    }
    section>span:nth-child(1){
      background-color: rebeccapurple;
    }

    section>span:nth-child(2){
      background-color: green;
    }
  /*将三号子盒子使用flex-end方式排列*/
    section>span:nth-child(3){
      background-color: blue;
      align-self: flex-end;
    }

    显示效果如下，

1.5.3 order：定义单个子项的排列顺序（前后顺序）

    作用：控制子盒子集合中的单个核子的排列方式。该属性值：默认值为0，指定数值，浏览器会按照属性值从小到大的顺序进行排列。

2 携程网首页案例

    最终部分效果如下图所示，

2.1 页面布局分析

2.2 部分模块制作

2.2.1 头部搜索框部分

    头部搜索框部分采用固定定位，使其在页面滚动时，仍旧保持原有的位置；同时，为了保证页面在变化时，搜索框input部分大宽度是可变的，因此，还需要使用到flex布局。

（1）结构代码如下，

 <!-- 顶部搜索 -->
    <div>
        <div>搜索:目的地/酒店/景点/航班号</div>
        <a href="#">我 的</a>
    </div>

（2）样式代码

/* 搜索模块 */

.search-index {
    /* 指定flex-container使用flex布局 */
    display: flex;
    /* 固定定位跟父级没有关系 它以屏幕为准 */
    position: fixed;
    top: 0;
    left: 50%;
    /* 固定的盒子应该有宽度-调整至水平居中显示 */
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* 流式布局：指定父盒子宽度占总宽的100% */
    width: 100%;
    /* 指定flex-container最大最小宽度 */
    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;
    /* 指定input-flex-item部分占据flex-container的全部剩余空间 */
    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 {
    /* 为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;
}

2.2.2 局部导航栏部分

    该部分主要是采用flex布局的方式，指定单个flex-item占宽度为25%；另外，还要为flex容器（flex-container）设置上下边距margin值，以及圆角边框效果（border-radius）。而对于单个flex-item来说，上部的图片和下部的文字也可以再次使用flex布局，并将主轴设置为沿着浏览器的Y轴方向，接着由于是单列摆放，可以使用align-items属性设置它们水平居中显示。

（1）结构代码如下，

 <!-- 局部导航栏 -->
    <ul>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="景点·玩乐">
                <span></span>
                <span>景点·玩乐</span>
            </a>
        </li>

    </ul>

（2）样式代码如下，

/* local-nav */

.local-nav {
    /* 最外边的flex-container */
    display: flex;
    height: 64px;
    margin: 3px 4px;
    background-color: #fff;
    /* 指定圆角边框 */
    border-radius: 8px;
}

.local-nav li {
    /* 指定flex-item自动调整宽度 */
    flex: 1;
}

.local-nav a {
    /* 在li中再次使用flex布局 */
    display: flex;
    /* 调整主轴方向 */
    flex-direction: column;
    /* 侧轴居中对齐 因为是单行 */
    align-items: center;
    font-size: 12px;
}
/* 以下为设置内部flex-item的图片北京 */
.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;
}

2.2.3 主导航栏部分

    主要布局如上图所示，整体分为三行，每一行使用flex布局，将内部拆分为3部分；然后在内部的第2、3部分继续使用flex布局，调整主轴方向，文字显示效果，外边距等，得到上图显示的效果。

（1）结构代码如下，

<!-- 主导航栏 -->
    <nav>
        <div>
            <div>
                <a href="#">海外酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div>
            <div>
                <a href="#">海外酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
        <div>
            <div>
                <a href="#">海外酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
            <div>
                <a href="#">海外酒店</a>
                <a href="#">特价酒店</a>
            </div>
        </div>
    </nav>

（2）样式代码如下，

/* nav */

nav {
    /* 设置溢出隐藏 */
    overflow: hidden;
    border-radius: 8px;
    margin: 0 4px 3px;
}

.nav-common {
    /* 设置flex布局 */
    display: flex;
    height: 88px;
    background-color: pink;
}

.nav-common:nth-child(2) {
    margin: 3px 0;
}

.nav-items {
    /* 不冲突的 */
    flex: 1;
    /* 内部再次使用flex布局 */
    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);
}

    另外，这部分还用到了背景渐变，可以使用背景属性background配合linear-gradient() 函数实现，设置方式可参见菜鸟教程：https://www.runoob.com/cssref/func-linear-gradient.html

html5移动web开发小记

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png"> # iphone4
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png"> # ipad
<link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png"> # android
<link rel="shortcut icon" href="icons/apple-touch-icon.png"> # symbian60

var Metas = document.getElementByTagName("Meta");
var i;
if(navigator.userAgent.match("/iPhone/i)) {
  for(i=0; i<Metas.length; i++) {
    if(Meta[i].name == "viewport") {
      Metas[i].content = "width=device-width,minimum-scale=1.0";
    }
  }
  document.addEventListener("gesturestart",gestureStart,false);
}

function gestureStart() {
  for(i=0; i<Metas.length; i++) {
    if(Meta[i].name == "viewport") {
      Metas[i].content = "width=device-width,maximum-scale=1.6,minimum-scale=0.25";
    }
  }
}

今天关于移动web开发好文章收藏和移动web开发教程的分享就到这里，希望大家有所收获，若想了解更多关于0-移动web开发之概述、19. 【移动Web开发之综合案例】、2-移动web开发之Flex布局、html5移动web开发小记等相关知识，可以在本站进行查询。