02-移动WEB

网站 favicon 图标

制作 favicon 图标
- 把图标切成 png 图片
- 把 png 图片转换为 ico 图标 , 借助第三方平台转换网站如 https://www.bitbug.net/
favicon 图标放到网站根目录下
HTML 页面引入 favicon 图标 . <link rel="shortcut icon" href="/favicon.ico">

视口

视口 ( viewport ) 就是浏览器显示页面内容的屏幕区域 . 视口分为布局视口 , 视觉视口和理想视口

理想视口 ideal viewport

需要手动添写 meta 视口标签通知浏览器操作
meat 视口标签作用 : 布局视口的宽度应该与理想视口的宽度一致 , 简单理解是设备有多宽 , 我们布局的视口就多多宽
让网页的宽度和设备的宽度一样
没有视口标签移动端默认的宽度是980px

meta 视口标签

<meta  name="viewport" content="width=device-width,user-scalable=1,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0">

属性	解释说明
width	设置的是视口的宽度 , 可以设置 `device -width` , 视口的宽度等于设备的宽度
initial-scale	视口默认缩放比 1.0
user-scalable	不允许用户缩放 , no /yes 1 / 0
maximum-scale	最大允许的缩放比例
minimum-scale	最小允许的缩放比例

标准的 viewport 设置

视口宽度和设备保持一致
视口默认缩放比例 1.0
不允许用户自行缩放
最大允许的缩放比例 1.0
最小允许的缩放比例 1.0

一般设计稿 750px

二倍图 @2x、@3x，解决图片放大失真的问题。

移动端技术解决方案

webkit 内核 , 可以放心使用 H5 标签和 CSS3 样式
css 初始化 normalize.css
盒子模型 box-sizing

特殊样式

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
* {-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,
a {-webkit-touch-callout: none;
}
div {/* css3 盒子模型 */box-sizing: border-box;
}

移动端技术选型

单独制作移动端页面 (主流 )
1. 流式布局 ( 百分比布局 ) 宽度自适应 , 高度固定
2. flex 弹性布局 ( 强烈推荐 ) 是一种浏览器提倡的布局模型(代替浮动)
3. less + rem + 媒体查询布局
4. 混合布局
响应式页面兼容移动端 ( 其次 )
1. 媒体查询
2. bootstarp

查看选用技术支持哪个版本浏览器

流式布局 ( 百分比布局 ) 了解

通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩 , 不受像素的限制 , 内容向两侧填充
移动布局方式是移动 web 开发使用的比较常见的布局方式
max-width: 990px; 最大宽度
min-width: 400px; 最小宽度

      section {width: 100%;max-width: 990px;min-width: 400px;margin: 0 auto;}

案例 - 京东移动端首页

京东移动端首页准备工作

1 . 技术选型

方案 : 单独制作移动端页面

技术 : 布局采用流式布局

2 . 搭建相关文件夹结构

3 . 设置视口标签以及引入初始化样式

设置视口标签 :

<meta  name="viewport" content="width=device-width,user-scalable=1,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0">

引入 css 初始化样式 normalize.css

4 . body 设置

body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;font-family: -apple-system, Helvetica, sans-serif;font-size: 14px;color: #666;line-height: 1.5;
}

`app` 内容填充

    <header class="app"><ul><li><img src="./images/close.png" alt=""></li><li><img src="./images/logo.png" alt=""></li><li>打开京东APP,购物更轻松</li><li>立即打开</li></ul></header>

清除 ul 的内外边距

ul  {margin: 0;padding: 0;list-style: none;
}

注意 :

图片会放大 , 单独设置图片大小
图片默认和文字底部对齐 , 需要设置 vertical-align: middle;

ul {margin: 0;padding: 0;list-style: none;
}
.app {height: 45px;background-color: pink;
}
ul li {float: left;height: 45px;line-height: 45px;text-align: center;background-color: #333;color: #fff;
}.app ul li:nth-child(1) {width: 8%;
}
.app ul li:nth-child(1) img {width: 10px;
}
.app ul li:nth-child(2) {width: 10%;
}
.app ul li:nth-child(2) img {width: 30px;/* 图片和文字中线对齐 */vertical-align: middle;
}
.app ul li:nth-child(3) {width: 57%;
}
.app ul li:nth-child(4) {width: 25%;background-color: #f63535;
}

搜索模块布局

大盒子里放三个盒子 , 父盒子给高度标准流
左右两个盒子设置定位 , 不占位置给宽高
中间的盒子标准流 , 宽度 100% . 给高度 , 设置左右 margin 可以自适应

    <div class="search-wrap"><div class="search-btn"></div><div class="search"></div><div class="search-login"></div></div>

.search-wrap {overflow: hidden;position: relative;height: 44px;
}
.search-btn {position: absolute;top: 0;left: 0;width: 40px;height: 44px;background-color: pink;
}
.search {height: 30px;margin: 0 50px;background-color: green;border-radius: 15px;margin-top: 7px;
}
.search-login {position: absolute;top: 0;right: 0;width: 40px;height: 44px;background-color: blue;
}

二倍精灵图的做法

在画图软件里把精灵图等比缩放为原来的一半
之后根据大小测量缩放后的坐标
代码里的 backgroun-size 也要写 : 精灵图原来的一半

.suo {position: absolute;top: 8px;left: 50px;width: 18px;height: 15px;background: url(./../images/jd-sprites.png) no-repeat -81px 0;background-size: 200px auto;
}

焦点图制作

给盒子里插入焦点图 , 宽度 100%
给搜索模块改为固定定位 , 宽度 100% , 设置最大宽度和最小宽度

平牌日模块制作

大盒子里放三个小盒子 , 大盒子宽度 100%
小盒子宽度 33.33% , 里面的图片宽度 100%
给大盒子设置圆角边框 , 设置 overflow : hidden
焦点图和品牌日模块中间会有空隙 , 是因为图片底部会有空隙 , 设置 vertical-align: middle;

导航栏 `nav` 做法

nav盒子里 10 个浮动的 a
a 的宽度 20% ,里面放图片和文字
给 a 设置 text-align:centen

新闻快报模块

盒子一宽度 50% , 盒子二三25 % . 盒子二三加个边框 , 需药给 a 设置盒子模型 box-sizing: border-box;
盒子二三设宽加左边框用结构选择器

.news a {float: left;box-sizing: border-box;
}

.news a:nth-child(n + 2) {width: 25%;border-left: 1px solid #ccc;
}

遗留问题 : 新闻模块和导航栏没有高度

代码演示

`html` 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,user-scalable=1,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0" /><!-- 引入初始化css --><link rel="stylesheet" href="./css/normalize.css" /><!-- 引入首页的css --><link rel="stylesheet" href="./css/index.css" /><title>Document</title></head><body><!-- 顶部 --><header class="app"><ul><li><img src="./images/close.png" alt="" /></li><li><img src="./images/logo.png" alt="" /></li><li>打开京东APP,购物更轻松</li><li>立即打开</li></ul></header><!-- 搜索 --><div class="search-wrap"><div class="search-btn"></div><div class="search"><div class="jd-icon"></div><div class="suo"></div></div><div class="search-login">登录</div></div><!-- 主体部分 --><div class="main-content"><!-- 滑动图 --><div class="slider"><img src="./upload/banner.dpg" alt="" /></div><!-- 品牌日 --><div class="brand"><div><a href="#"><img src="./upload/pic11.dpg" alt="" /></a></div><div><a href="#"><img src="./upload/pic22.dpg" alt="" /></a></div><div><a href="#"><img src="./upload/pic33.dpg" alt="" /></a></div></div><!-- 导航栏 --><nav><a href="#"><img src="./upload/nav1.webp" alt="" /><span>京东超市</span></a><a href="#"><img src="./upload/nav3.webp" alt="" /><span>京东超市</span></a><a href="#"><img src="./upload/nav2.webp" alt="" /><span>京东超市</span></a><a href="#"><img src="./upload/nav2.webp" alt="" /><span>京东超市</span></a><a href="#"><img src="./upload/nav1.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/nav1.webp" alt="" /><span>京东超市</span></a><a href="#"><img src="./upload/nav3.webp" alt="" /><span>京东超市</span></a></nav><!-- 新闻快报模块 --><div class="news"><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></div></div></body>
</html>

`css` 代码

body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;font-family: -apple-system, Helvetica, sans-serif;font-size: 14px;color: #666;line-height: 1.5;
}
/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
* {-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,
a {-webkit-touch-callout: none;
}
div {/* css3 盒子模型 */box-sizing: border-box;
}
img {/* 默认图片底部有空格 */vertical-align: middle;
}
a {color: #666;text-decoration: none;
}
/* 顶部 */
ul {margin: 0;padding: 0;list-style: none;
}
.app {height: 45px;background-color: pink;
}
ul li {float: left;height: 45px;line-height: 45px;text-align: center;background-color: #333;color: #fff;
}.app ul li:nth-child(1) {width: 8%;
}
.app ul li:nth-child(1) img {width: 10px;
}
.app ul li:nth-child(2) {width: 10%;
}
.app ul li:nth-child(2) img {width: 30px;/* 图片和文字中线对齐 */vertical-align: middle;
}
.app ul li:nth-child(3) {width: 57%;
}
.app ul li:nth-child(4) {width: 25%;background-color: #f63535;
}
/* 搜索 */
.search-wrap {overflow: hidden;position: fixed;width: 100%;height: 44px;min-width: 320px;max-width: 640px;
}
.search-btn {position: absolute;top: 0;left: 0;width: 40px;height: 44px;
}
.search-btn::before {content: "";display: block;width: 20px;height: 18px;background: url(./../images/s-btn.png) no-repeat;background-size: 20px 18px;margin: 14px 0 0 15px;
}
.search {position: relative;height: 30px;margin: 0 50px;background-color: #fff;border-radius: 15px;margin-top: 7px;
}
.jd-icon {position: absolute;width: 20px;height: 15px;background-color: antiquewhite;top: 8px;left: 13px;background: url(./../images/jd.png) no-repeat;background-size: 20px 15px;
}
.jd-icon::after {content: "";position: absolute;display: block;top: 0;right: -8px;width: 1px;height: 15px;background-color: #ccc;
}
.suo {position: absolute;top: 8px;left: 50px;width: 18px;height: 15px;background: url(./../images/jd-sprites.png) no-repeat -81px 0;background-size: 200px auto;
}
.search-login {position: absolute;top: 0;right: 0;width: 40px;height: 44px;line-height: 44px;text-align: center;color: #fff;
}
/* 主体区 */
.slider img {width: 100%;
}
/* 品牌区 */
.brand {overflow: hidden;border-radius: 10px 10px 0 0;
}
.brand div {float: left;width: 33.33%;
}
.brand div img {width: 100%;
}
/* 导航栏 */
nav {padding-top: 5px;
}
nav a {float: left;width: 20%;text-align: center;
}
nav a img {width: 40px;margin: 10px;
}
nav a span {display: block;
}
/* 新闻快报模块 */
.news {margin-top: 20px;/* margin-top: 175px;overflow: hidden; */width: 100%;
}
.news a {float: left;box-sizing: border-box;
}
.news a img {width: 100%;
}
.news a:first-child {width: 50%;
}
.news a:nth-child(n + 2) {width: 25%;border-left: 1px solid #ccc;
}

flex 弹性布局★★★

flex布局教程-阮一峰

MDN

布局网页更简单 ,灵活
避免浮动脱标的问题
加载渲染快
PC 端浏览器支持情况较差
IE 6-9 不兼容

建议 :

如果是 PC 端布局页面 , 用传统布局
如果是移动端或者不考虑兼容性问题的 PC 端页面布局 , 我们还是使用 flex 弹性布局

布局原理

布局中 div 就是 container “容器” , span 是 item 项目

原理 : 通过给父盒子添加 flex 属性 , 来控制子盒子的位置和排列方式

弹性容器(父元素)
弹性盒子(子元素)
主轴与侧轴
display:flex 加给父盒子(亲爸爸)

flex 布局父项常见属性

1. flex-direction 设置主轴方向

主轴与侧轴

默认主轴就是 x 轴方向 , 水平向右
默认侧轴就是 y 轴方向 , 水平向下

属性值

flex-direction 属性决定主轴的方向

reverse 翻转

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

        /* 给父级添加 flex 属性 */display: flex;flex-direction: row;flex-direction: row-reverse;/* 元素主轴方向是 y 轴 */flex-direction: column;flex-direction: column-reverse;

2 . justify-content 设置主轴上的子元素排列方式

注意：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值是从头部开始 , 如果主轴是 x 轴 ,则从左到右
flex-end	从尾部开始
center	在主轴居中对齐 ( 如果主轴是 x 轴则水平居中 , 如果主轴是 y 轴则垂直居中 )
space-around	平分剩余空间
space-between	先贴边再平分剩余空间 ⭐️
space- evenly	所有地方的间距都相等

        /* 主轴上的子元素排列方式 从头到尾 */justify-content: flex-start;/* 主轴上的子元素排列方式 从尾到头 */justify-content: flex-end;justify-content: center;/* 平分剩余空间 */justify-content: space-around;/* 先贴边再平分 */justify-content: space-between;

3 . flex-wrap 元素是否换行

flex 布局中 , 默认子元素是不换行的 , 如果装不开 , 会缩小子元素的宽度 , 放到父盒子里面

属性值	说明
nowrap	默认值 , 不换行
wrap	换行

        flex-wrap: wrap;flex-wrap: nowrap;

4 . align-items 设置侧轴上的子元素排列方式 ( 单行 )

该属性是控制子项在侧轴 ( 默认是 y 轴 ) 上的排列方式 , 在子项为单项的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸 ( 默认值 )

        align-items: center;align-items: flex-start;align-items: flex-end;/* 拉伸 , 子盒子不能设置高度 */align-items: stretch;

注意 : 设置拉伸时子盒子不能给高度 , 给了高度或宽度就没办法拉伸了

5 . align-content 设置侧轴上的子元素的排列方式 ( 多行 )

设置子项在侧轴上的排列方式 , 并且只能用于子项出现换行的情况下 ( 多行 ) , 在单行下是没有效果的

属性值	说明
flex-start	默认值是从头部开始 , 如果主轴是 x 轴 ,则从左到右
flex-end	从尾部开始
center	在主轴居中对齐 ( 如果主轴是 x 轴则水平居中 , 如果主轴是 y 轴则垂直居中 )
space-around	平分剩余空间
space-between	先贴边再平分剩余空间 ⭐️
space-evenly	所有地方的间距都相等
stretch	设置子项元素高度平分父元素高度

在线演示地址

https://www.runoob.com/try/playit.php?f=playcss_align-items&preval=stretch

align-content 和 align-items 区别

alig-items 适用于单行情况下 , 只有上对齐 , 下对齐 , 居中和拉升
align-content 适用于多行 ( 换行 ) 的情况下 ( 单行情况下无效 ) , 可以拉升居中平分等
总结 : 单行找 align-items , 多行找 align-content

6 . 总结

flex-flow 复合写法

        flex-direction: row;flex-wrap: wrap;/* 沿 x 轴设置主轴方向 , 换行 */flex-flow: row wrap;

flex-direction : 设置主轴方向
justify-content : 设置主轴上的子元素排列方式
flex-wrap : 设置子元素是否换行
align-content : 设置侧轴上的子元素排列方式 ( 多行 )
align-items : 设置侧轴上的子元素排列方式 ( 单行 )
flex-flow : 复合属性 , 相当于同事设置了 flex-direction 和 flex-wrap

flex 布局子项常见属性

1 . flex 伸缩比

占用父级剩余尺寸的份数

场景举例：左右固定宽度，中间填充满剩余宽度。(圣杯)

/* 用 flex 表示占多少份 */
flex: 1;

2 . align-self 控制子项目自己在侧轴上的排列方式

align - self 属性允许单个项目有与其他项目不一样的对齐方式 , 可覆盖 align - items 属性

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸

      /* 第二个盒子 设置自己在侧轴上的排列方式 */div span:nth-child(2) {align-self: flex-end;}

3 . order属性定义项目的排列属性

数值越小 , 排列越靠前 , 默认为 0 ; 和 z-index 不一样

      div span:nth-child(2) {align-self: flex-end;/* 项目的排列顺序 */order: -1;}

overflow:auto 没出现滚动条

原因1：需要滚动的盒子没给高度(宽高用 0 撑开可以显示滚动条)

overflow：auto的用法

overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。

display: flex;
flex-direction: column; 主轴为垂直方向，起点在上沿

overflow和flex布局搭配使用

    <style type="text/css">html,body {/* 一定要给html和body给宽度和高度100%； */width: 100%;height: 100%;}.container {width: 100%;height: 100%;display: flex;flex-direction: column;overflow: auto;}.header {width: 100%;height: 100px;background: #f99;}.content {/* 中间的content给定flex：1，并且加上我们的主角overflow：auto；超出的内容自动裁剪。 */width: 100%;height: 100%;overflow: auto;background: yellow;flex: 1;}.footer {width: 100%;height: 100px;background: #99f;}</style>

小兔鲜-确认订单页面-项目经验

1、移动端布局：上下结构、上中下，可以使用绝对定位来完成 (宽高用 0 撑开可以显示滚动条)

上下结构

      .top {position: absolute;left: 0;right: 0;top: 0;bottom: 80px;background-color: hotpink;overflow: auto;}.bottom {position: absolute;height: 80px;right: 0px;left: 0px;bottom: 0px;background-color: green;}

上中下结构

      .top {position: absolute;left: 0;right: 0;top: 0;height: 50px;background-color: hotpink;overflow: auto;}.middle {position: absolute;left: 0;right: 0;top: 50px;bottom: 80px;background-color: yellow;}.bottom {position: absolute;height: 80px;right: 0px;left: 0px;bottom: 0px;background-color: green;}

要想哪个盒子有滚动条 , 哪个盒子就需要设置 overflow: auto
高度也要设置 , 或者用 top 和 bottom 撑开

1、项目中个人信息，姓名和电话结构，可以给姓名设置max-width，超出最大宽度则省略号显示

h5 {/* 给盒子设置一个最大宽度让超出部分用省略号代替 */max-width: 80px;margin-right: 15px;/* 超出部分隐藏 */overflow: hidden;/* 强制不换行 */white-space: nowrap;/* 超出部分用省略号代替 */text-overflow: ellipsis;
}

动态数据需要用标签包裹起来 , 方便后期维护更新

修改主轴方向实现水平垂直居中效果

小兔鲜PC-个人中心-项目经验

布局小技巧：flex: 1;width: 0

解释：

1、如果没有设置width:

当内部元素的内容大小超过平均分配的剩余空间时,元素的宽度等于内容大小

2、设置了width

如果设置了width并且这个width小于剩余空间大小时,取分配的剩余空间;

如果设置了width并且这个width大于剩余空间大小时,取设置width宽度;

总结： flex剩余空间和设置的width谁大取谁

另外一个盒子需要设置宽度 , 不设置宽度另外一个盒子宽度变大他就会被拉升因为是弹性布局 , 所以两个盒子得设置宽度

    <div class="box"><div class="left"></div><div class="right">我是很多文字</div></div><style>.box {display: flex;width: 500px;height: 500px;border: 1px solid black;}.box .left {width: 300px;height: 300px;background-color: pink;}.box .right {flex: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}</style>

width: 0px; 小于0,取剩余空间 , 不会拉伸盒子

/* 省略号 父盒子 */
.content .goods .txt {flex: 1;width: 0px; // 小于0,取剩余空间
}
/* 省略号 */
.content .goods h5 {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

案例 - 携程网移动端首页

携程网移动端首页准备工作

1 . 技术选型

方案 : 单独制作移动端页面

技术 : 布局采用 flex 弹性布局

2 . 搭建相关文件夹结构

3 . 设置视口标签以及引入初始化样式

设置视口标签 :

<meta  name="viewport" content="width=device-width,user-scalable=1,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0">

引入 css 初始化样式 normalize.css

4 . body设置

body {color: #000;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);overflow-x: hidden;min-width: 320px;max-width: 540px;margin: 0 auto;background: #f2f2f2;font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, Microsoft Yahei, STXihei, hei;
}

搜索模块

固定定位的盒子要给一个宽度 , 给一个最大宽度和最小宽度限定死 , 固定定位到屏幕中央 , left:50% , transform: translateX(-50%)

右边盒子大小固定死 ,左边盒子给 flex : 1
右边盒子里插的是二倍精灵图 , 用伪元素插入的

.search-index {display: flex;position: fixed;top: 0;left: 50%;/*定位的盒子居中 */transform: translateX(-50%);/* 固定盒子应该有宽度 */width: 100%;min-width: 320px;max-width: 540px;height: 44px;background-color: blue;
}
.search {flex: 1;
}
.usesr::before {content: "";display: block;width: 23px;height: 23px;background: url(./../images/sprite.png) no-repeat -59px -194px;background-size: 104px auto;margin: 4px auto 0;
}
.usesr {/* 父亲固定定位后可以修改子盒子宽高 */width: 44px;height: 44px;background-color: purple;font-size: 12px;text-align: center;text-decoration: none;color: #2eaae0;
}

给搜索框设置高度边框圆角边框
搜索框里面插入二倍伪元素放大镜精灵图
文字垂直居中会把边框算进去 , 行高应该把两个边框减去

父盒子添加圆角 , margin 把左右边距挤开 ,里面 li 各占一份

局部导航栏

布局思路 :

默认主轴是沿 X 轴的 , 把主轴设置为 Y 轴 flex-direction:column
把侧轴设置成居中对齐 align-items
图片名字 @2x 二倍图 , @3x 三倍图

.local-nav a {/* flex 布局 */display: flex;/* 主轴方向沿 y 轴 */flex-direction: column;/* 侧轴居中对齐 */align-items: center;
}
.local-nav-icom {width: 32px;height: 32px;background-color: pink;margin-top: 8px;
}

利用属性选择器更换背景图片

把以相同类名开头的元素用属性选择器选出来
再单独更改每个背景图片的位置 , 减少代码冗余

          <span class="local-nav-icom-icom1"></span><span class="local-nav-icom-icom2"></span><span class="local-nav-icom-icom3"></span><span class="local-nav-icom-icom4"></span><span class="local-nav-icom-icom5"></span>

/* 属性选择器选出以 "local-nav-icom" 开头的*/
.local-nav li [class^="local-nav-icom"] {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-icom-icom2 {background-position: 0 -32px;
}
.local-nav li .local-nav-icom-icom3 {background-position: 0 -64px;
}
.local-nav li .local-nav-icom-icom4 {background-position: 0 -96px;
}
.local-nav li .local-nav-icom-icom5 {background-position: 0 -128px;
}

`nav` 导航栏外观布局

新建 nav 一个大盒子 , 里面放三个小盒子
用 flex=1 把三个小盒子平分
白色边框做法 : 前两个小盒子加一个右边框

.nav-common {/* flex 布局 */display: flex;height: 88px;background-color: pink;
}
.nav-common:nth-child(2) {margin: 3px 0px;
}
.nav-items {/* 三个小盒子平分 */flex: 1;
}
/* 前两个盒子加一个右边框 */
.nav-items:nth-child(-n + 2) {border-right: 1px solid #fff;
}

`nav` 导航栏里面的小盒子布局

每一列放两个 a , flex=1 每个占 1 份
每个里面的第一个 a 需要一个下边框
第一个里面的 a 不需要下边框 , 背景图是三倍图

.nav-items {/* 三个小盒子平分 */flex: 1;/* 不冲突 */display: flex;flex-direction: column;
}
/* 前两个盒子加一个右边框 */
.nav-items:nth-child(-n + 2) {border-right: 1px solid #fff;
}
.nav-items > a {flex: 1;text-align: center;line-height: 44px;color: #fff;font-size: 14px;text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}
.nav-items > a:nth-child(1) {border-bottom: 1px solid #fff;
}
/* 第一列下的 a 不需要下边框 */
.nav-items:nth-child(1) a {border: 0;background: url(./../images/hotel.png) no-repeat bottom center;background-size: 121px auto;
}

`subnac-entry` 侧导航栏

两行显示 flex=20% 可以写百分号
把主轴设置为 y 然后居中对齐

/* 测导航栏 */
.subnav-entry {display: flex;flex-wrap: wrap;border: 8px;background-color: #fff;margin: 0 4px;padding: 5px 0;
}
.subnav-entry li {/* 里面的盒子可以写 % ,是现对于父亲来说 */flex: 20%;
}
.subnav-entry a {display: flex;flex-direction: column;align-items: center;margin-top: 10px;
}
.subnav-entry-iocn {width: 28px;height: 28px;background-color: green;background: url(./../images/subnav-bg.png) no-repeat;background-size: 28px;
}

sales-box 销售模块

给一个 box 大盒子 , 里面放一个 hd 盒子和 bd 盒子
box 盒子设置下边框 , hd 盒子设置上边框
hd 盒子做搜索引擎优化 , 里面放 h2 标题 , 背景图用伪元素插入
a 不给宽高用内容撑起来 . 设置圆角 , 背景渐变色 , 上下左右 padding
后面的三角用 css 写伪元素插入 , 旋转 45 度 , 用定位移动

/* 销售模块 */
.sales-box {border-top: 1px solid #bbb;background-color: #fff;margin: 4px;
}
.sales-hd {position: relative;height: 44px;border-bottom: 1px solid #ccc;
}
.sales-hd h2 {position: relative;text-indent: -999px;overflow: hidden;
}
.sales-hd h2::after {position: absolute;top: 8px;left: 20px;content: "";width: 79px;height: 15px;background-color: pink;background: url(./../images/hot.png) no-repeat 0 -20px;background-size: 79px auto;
}
.more {position: absolute;top: 0px;right: 5px;background: -webkit-linear-gradient(left, #ff506c, #ff6bc6);border-radius: 15px;padding: 3px 20px 3px 10px;color: #fff;
}
.more::after {content: "";position: absolute;top: 9px;right: 9px;height: 7px;width: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);
}

sales-bd 模块

给 a 设置下边框 , 给第一个 a 设置右边框
图片的宽度等于 a 的宽度

.row {display: flex;
}
.row a {flex: 1;/* 下边框 */border-bottom: 1px solid #eee;
}
/* 第一个a 加右边框 */
.row a:nth-child(1) {border-right: 1px solid #eee;
}
/* 让图片的宽度和 a 一样宽 */
.row a img {width: 100%;
}

代码演示

`CSS` 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>携程在手说走就走</title><link rel="stylesheet" href="./css/normalize.css" /><link rel="stylesheet" href="./css/index.css" /></head><body><!-- 搜索模块 --><div class="search-index"><div class="search">搜索:目的地/酒店/航班号</div><a href="#" class="usesr">我 的</a></div><!-- 焦点图模块 --><div class="focus"><img src="./upload/focus.jpg" alt="" /></div><!-- 局部导航栏 --><ul class="local-nav"><li><a href="#" title="景点·玩乐"><span class="local-nav-icom-icom1"></span><span>景点·玩乐</span></a></li><li><a href="#" title="景点·玩乐"><span class="local-nav-icom-icom2"></span><span>景点·玩乐</span></a></li><li><a href="#" title="景点·玩乐"><span class="local-nav-icom-icom3"></span><span>景点·玩乐</span></a></li><li><a href="#" title="景点·玩乐"><span class="local-nav-icom-icom4"></span><span>景点·玩乐</span></a></li><li><a href="#" title="景点·玩乐"><span class="local-nav-icom-icom5"></span><span>景点·玩乐</span></a></li></ul><!-- 主导航栏 --><nav><div class="nav-common"><div class="nav-items"><a href="">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div></div><div class="nav-common"><div class="nav-items"><a href="">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div></div><div class="nav-common"><div class="nav-items"><a href="">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div></div></nav><!-- 测导航栏 --><ul class="subnav-entry"><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-iocn"></span><span>电话费</span></a></li></ul><!-- 销售模块 --><div class="sales-box"><div class="sales-hd"><h2>热门活动</h2><a href="#" class="more">获取更多福利</a></div><div class="sales-bd"><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><!-- 底部 --></div></body>
</html>

`html` 代码

body {color: #000;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);overflow-x: hidden;min-width: 320px;max-width: 540px;margin: 0 auto;background: #f2f2f2;font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, Microsoft Yahei, STXihei, hei;
}
ul {list-style: none;margin: 0;padding: 0;
}
a {text-decoration: none;color: #222;
}
div {box-sizing: border-box;
}
.search-index {display: flex;position: fixed;top: 0;left: 50%;/*定位的盒子居中 */transform: translateX(-50%);/* 固定盒子应该有宽度 */width: 100%;min-width: 320px;max-width: 540px;height: 44px;background-color: #f6f6f6;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;
}
.search {position: relative;flex: 1;height: 26px;line-height: 24px;border: 1px solid #ccc;margin: 9px 10px;border-radius: 5px;padding-left: 20px;color: #666;box-shadow: 0 2px 4px rgba(0, 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;
}
.usesr::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;
}
.usesr {/* 父亲固定定位后可以修改子盒子宽高 */width: 44px;height: 44px;/* background-color: purple; */font-size: 12px;text-align: center;text-decoration: none;color: #2eaae0;
}/* 焦点图 */
.focus {padding-top: 44px;
}
.focus img {width: 100%;
}
/* 局部导航栏 */
.local-nav {display: flex;height: 64px;background-color: #fff;border-radius: 8px;margin: 3px 4px;
}
.local-nav li {flex: 1;/* flex-direction: column; */
}
.local-nav a {/* flex 布局 */display: flex;/* 主轴方向沿 y 轴 */flex-direction: column;/* 侧轴居中对齐 */align-items: center;font-size: 12px;
}
/* 属性选择器选出以 "local-nav-icom" 开头的*/
.local-nav li [class^="local-nav-icom"] {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-icom-icom2 {background-position: 0 -32px;
}
.local-nav li .local-nav-icom-icom3 {background-position: 0 -64px;
}
.local-nav li .local-nav-icom-icom4 {background-position: 0 -96px;
}
.local-nav li .local-nav-icom-icom5 {background-position: 0 -128px;
}
/* 主导航栏 */
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 0px;
}
.nav-items {/* 三个小盒子平分 */flex: 1;/* 不冲突 */display: flex;flex-direction: column;
}
/* 前两个盒子加一个右边框 */
.nav-items:nth-child(-n + 2) {border-right: 1px solid #fff;
}
.nav-items > a {flex: 1;text-align: center;line-height: 44px;color: #fff;font-size: 14px;text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}
.nav-items > a:nth-child(1) {border-bottom: 1px solid #fff;
}
/* 第一列下的 a 不需要下边框 */
.nav-items:nth-child(1) a {border: 0;background: url(./../images/hotel.png) no-repeat bottom center;background-size: 121px auto;
}.nav-common:nth-child(1) {background: -webkit-linear-gradient(left, #fa5a55, #fa994d);
}
.nav-common:nth-child(2) {background: -webkit-linear-gradient(left, #4b90ed, #53bced);
}
.nav-common:nth-child(3) {background: -webkit-linear-gradient(left, #34c2a9, #6cd559);
}
/* 测导航栏 */
.subnav-entry {display: flex;flex-wrap: wrap;border: 8px;background-color: #fff;margin: 0 4px;padding: 5px 0;/* box-shadow: 0 4px 28px gray; */
}
.subnav-entry li {/* 里面的盒子可以写 % ,是现对于父亲来说 */flex: 20%;
}
.subnav-entry a {display: flex;flex-direction: column;align-items: center;margin-top: 10px;
}
.subnav-entry-iocn {width: 28px;height: 28px;background-color: green;background: url(./../images/subnav-bg.png) no-repeat;background-size: 28px;
}
/* 销售模块 */
.sales-box {border-top: 1px solid #bbb;background-color: #fff;margin: 4px;
}
.sales-hd {position: relative;height: 44px;border-bottom: 1px solid #ccc;
}
.sales-hd h2 {position: relative;text-indent: -999px;overflow: hidden;
}
.sales-hd h2::after {position: absolute;top: 8px;left: 20px;content: "";width: 79px;height: 15px;background-color: pink;background: url(./../images/hot.png) no-repeat 0 -20px;background-size: 79px auto;
}
.more {position: absolute;top: 0px;right: 5px;background: -webkit-linear-gradient(left, #ff506c, #ff6bc6);border-radius: 15px;padding: 3px 20px 3px 10px;color: #fff;
}
.more::after {content: "";position: absolute;top: 9px;right: 9px;height: 7px;width: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);
}.row {display: flex;
}
.row a {flex: 1;/* 下边框 */border-bottom: 1px solid #eee;
}
/* 第一个a 加又边框 */
.row a:nth-child(1) {border-right: 1px solid #eee;
}
/* 让图片的宽度和 a 一样宽 */
.row a img {width: 100%;
}

移动web-rem布局

rem 单位

em 相对于父元素的字体大小来说的
rem 相对于 html 元素字体大小来说的
优点 : 可以通过修改 html 里面的文字大小来改变页面中元素的大小 , 可以整体控制

      /* 1rem=14px , 30rem*14=420px*/div {width: 30rem;height: 30rem;background-color: green;}p {width: 10rem;height: 10rem;background-color: red;}

媒体查询 media

媒体查询的作用 ⭐️

作用 : 根据不同的分辨率为标签设置不同的样式

什么是媒体查询

媒体查询（Media Query）是CSS3新语法。

使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

媒体查询语法规范

语法 :

      /* 意思: 在我们屏幕上 并且 最大的宽度是500px,设置我们想要的样式 *//* max-width 小于等于500px */@media screen and (max-width: 500px) {div {background-color: red;}}

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕 , 平板电脑 , 智能手机

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

注意他们要加小括号包含

值	解释说明
width	定义输出设备中页面可见区域宽度
min-width	定义输出设备中页面最小可见区域宽度
max-width	定义输出设备中页面最大可见区域宽度

媒体查询书写规则

注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

根据 CSS 层叠性 , 第三档会覆盖掉第二档冲突大于等于 970 的那一部分

向上兼容 , 向下覆盖

如果屏幕宽度在801-900之间使用该样式

@media (min-width: 801px) and (max-width: 900px) { div {width: 400px;height: 400px;background-color: green;}
}

案例-媒体查询背景变色颜色

      * {padding: 0;margin: 0;}/*小于540 背景色红色 */@media screen and (max-width: 539px) {body {background-color: red;}}/*540~969背景色粉色   可以省略 简写*//* @media screen and (min-width: 540px) and (max-width: 969px) {body {background-color: pink;}} *//* 简写: css 会把后面的档位给层叠 */@media screen and (min-width: 540px) {body {background-color: pink;}}/*大于等于970 背景色蓝色 */@media screen and (min-width: 970px) {body {background-color: blue;}}

案例-媒体查询+rem动态大小变化

      * {padding: 0;margin: 0;}@media screen and (min-width: 320px) {html {font-size: 50px;}}@media screen and (min-width: 640px) {html {font-size: 100px;}}.top {/* height: 100px; */height: 1rem;/* font-size: 50px; */font-size: 0.5rem;text-align: center;/* line-height: 100px; */line-height: 1rem;color: #fff;background-color: green;}

媒体查询引入资源

引入资源 : 针对于不同的屏幕尺寸 , 调用不同的 css 文件

建议 : 媒体查询最好的方法是从小到大

    <!-- 屏幕小于640 一行显示一个盒子 --><!-- 屏幕大于640 一行显示两个盒子 --><link rel="stylesheet" href="./style320.css" media="(min-width:320px)" /><link rel="stylesheet" href="./style640.css" media="(min-width:640px)" />

less 基础

维护 `css` 弊端

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
Less中文网址：http://lesscss.cn/
一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。

`VSCode`插件安装——`EasyLess`

Easy LESS 插件用来把less文件编译为CSS文件

安装完毕插件，重新加载下 vscode。

只要保存一下Less文件，会自动生成 CSS 文件。

变量的定义和使用

定义格式 @变量名:值; 变量名用纯英文

使用格式 width:@变量名;

Less 变量名的语法规范

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感

代码演示

// 定义变量
@font14: 14px;
@red: red;
// 使用变量
div {font-size: @font14;color: @red;
}
// 使用变量
a {color: @red;
}

less 嵌套

经常用的选择器的嵌套

#nav .logo {color: green;
}

less 嵌套写法

#nav {.logo {color: green;}
}

如有伪类 . 伪元素 . 交集选择器 , 我们内层选择器要加 &

& 表示当前元素，就是 & 所在的大括号

内层选择器的前面没有 & 符号 , 则它被解析为父选择器的后代
如果有 & , 它就被解析为父元素自身或父元素的伪类

css 写法 :

.header a:hover {color: yellow;
}

less 嵌套写法

.header {a {color: red;&:hover {div {color: yellow;  }     }}
}

less 嵌套案例

@fontSize: 24px;
// 标签和标签之前的嵌套关系能够完美体现在less结构中
.big {display: flex;justify-content: space-between;width: 300px;height: 300px;border: 1px solid black;border-radius: 30px;span {width: 80px;height: 80px;border-radius: 50%;background-color: orange;// &表示当前元素，就是&所在的大括号，这里是span，后面跟:nth-child(2) 表示第二个span//生成 .big span:nth-child(2){}&:nth-child(2) {align-self: center;//这个代码是硬凑的，移动到第二个span变色：生成 .big span:nth-child(2):hover{}&:hover {background-color: orangered;}}&:nth-child(3) {align-self: flex-end;}}
}

lees 运算⭐️

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

代码演示 :

/*Less 里面写*/
@witdh: 10px + 5;
div {border: @witdh solid red;
}
/*生成的css*/
div {border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;

注意 :

除法运算要加==（）==,比如width: (100rem / @fontSize); ⭐️⭐️⭐️
运算符的左边和右边需要有空格
:如果参与运算的两个数据都有单位以第一个为准
如果两个值之间只有一个值有单位，则运算结果就取该单位

less 引入less文件

// 在index.less 中导入 common.less 文件 , 可以不加后缀
@import "./base.less";
@import "./normalize.less";

less 导出css文件

// out: false         第一行 禁止导出
// out: ./456/456.css 第一行 导出文件当前文件夹并改名字
// out: ./123/        导出文件到当前文件夹

rem 和em 区别

网页的根标签是html

px 是绝对定位
rem 是相对单位相对于 html 的文字大小 ;
em 是相对单位 , 相对于父元素的文字大小 .
vh / vw 相对单位 , 相对视口的尺寸计算结果

基本使用：

1、先设置根标签html的font-size

2、设置元素的尺寸 rem作为单位

rem 适配方案

适配原理📝

用rem在不同分辨率下为html设置不同字体大小
rem是一个相对单位，1rem等于html元素上字体设置的大小。可以修改根字号的大小，就可以改变rem所代表的大小

rem值 = 页面元素值（px） / html font-size 字体大小

rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

如: 将一个尺寸为 750px 的设计稿划分为十等分 , 每一等分为75px 就是当前屏幕下的根字号大小 (1rem=75px) , 再把 px 转换成rem ,用页面元素值（px） / html font-size 字体大小

如 : 一个盒子宽150px / 75 =2 rem

利用媒体查询把屏幕划分成十等分 , 让html在不同屏幕下的字体大小不一样 (等比缩放)

rem 作用 : 在不同分辨率屏幕上为 html 设置不同的跟字体大小

媒体查询 : 监测用户视口大小 , 根据不同的分辨率为标签设置不同的样式

1.让一些不能等比自适应的元素，达到当设备尺寸发生改变的时候，等比例适配当前设备。

2.使用媒体查询根据不同设备尺寸按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

技术方案

flexible.js 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

rem + 媒体查询 + less
rem + flexible.js

总结：两种方案现在都存在。方案2 更简单

rem 适配方案 1

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是 21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100100像素的页面元素在 750屏幕下，就是 100/ 50 转换为rem 是 2rem2rem 比例是1比1

⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果

总结 :

①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）

②屏幕宽度/划分的份数就是 html 中 font-size 的大小

③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小

案例 - 苏宁网移动首页-1

苏宁网移动端首页准备工作

1 . 技术选型

方案 : 单独制作移动端页面

技术 : 布局采用 rem 适配布局 ( less + rem + 媒体查询 )

2 . 搭建相关文件夹结构

3 . 设置视口标签以及引入初始化样式

设置视口标签 :

<meta  name="viewport" content="width=device-width,user-scalable=1,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0">

引入 css 初始化样式 normalize.css

4 . 设置公共 `common.less` 文件

不止首页使用这些样式, 列表页详情页也需要使用公共样式 所以需要单独设置公共样式

因为 PC 端也可以打开苏宁移动首页 , PC 端屏幕比较大 , 我们默认 html 字体大小为 50px , 这句话写到最上面程序从上往下执行

// 一定要写最上面 , 程序是从上往下执行 , pc端打开页面是最大的大小
html {font-size: 50px;
}

5 . 新建 `index.less` 文件

新建 index.less 文件这里写首页的样式
将刚才写好的 common .less 引入到 index.less 里面语法如下
```
// 在index.less 中导入 common.less 文件
@import "common";
```
生成 index.css 引入到 index.html 里面

@import 和 link 区别 📝

@import 导入的意思 , 可以把一个样式导入到另外一个样式的文件里面 , common样式导入到 index 样式里面
link 是把一个样式文件引入到 html 页面中
权重不同 , link 权重大于 import
执行顺序不同先执行 link 在执行 import

6 . body 设置

body 最大宽度写 rem 单位 , 可以自适应

body {min-width: 320px;/* 宽度自适应设置 */width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, STHeiTi, sans-serif;background: #f2f2f2;
}

`search-content` 模块布局

给一个 rem 的高度
固定定位的盒子要有宽度用 rem
定义了一个变量

// 页面元素rem 计算公式: 页面元素的px / html 字体大小 50
// 定义变量
@baseFint: 50;
.search-content {position: absolute;top: 0;left: 50%;transform: translateX(-50%);// 固定的盒子必须有宽度width: 15rem;height: (88rem / @baseFint);background-color: #ffc001;
}

`search-content` 内容布局

flex 布局 , 左边盒子一个固定大小 , 右边盒子一个固定大小 , 中间盒子自适应 flex=1
三栏布局，左右两侧固定，中间自适应，并且中间内容需要优先加载子元素使用 order: -1; 排列靠前

// 特点：三栏布局，左右两侧固定，中间自适应，并且中间内容需要优先加载// 左边的盒子.classify {// 排列靠前order: -1;width: (44rem / @baseFint);height: (70rem / @baseFint);background-color: pink;margin: (11rem / @baseFint) (25rem / @baseFint) (7rem / @baseFint) (24rem / @baseFint);}// 中间的盒子.search {// 宽和高自适应flex: 1;background-color: purple;}//右边的盒子.login {width: (75rem / @baseFint);height: (70rem / @baseFint);background-color: blue;margin: (10rem / @baseFint);}

search 模块制作

左边背景图的大小和盒子大小一样 , 右边文字大小 font-size: (25rem / @baseFint);
去掉输入框默认边框 border=0 , 去掉聚焦轮廓线 outline;none

  // 特点：三栏布局，左右两侧固定，中间自适应，并且中间内容需要优先加载// 左边的盒子.classify {// 排列靠前order: -1;width: (44rem / @baseFint);height: (70rem / @baseFint);background: url(./../images/classify.png) no-repeat;background-size: (44rem / @baseFint) (70rem / @baseFint);margin: (11rem / @baseFint) (25rem / @baseFint) (7rem / @baseFint) (24rem / @baseFint);}// 中间的盒子.search {// 宽和高自适应flex: 1;background-color: purple;input {// 聚焦去掉默认轮廓线outline: none;// 去掉输入框默认边框border: 0;height: (66rem / @baseFint);border-radius: (33rem / @baseFint);background-color: #fff2cc;margin-top: (12rem / @baseFint);font-size: (25rem / @baseFint);padding-left: (55rem / @baseFint);color: #757575;}}//右边的盒子.login {width: (75rem / @baseFint);height: (70rem / @baseFint);line-height: (70rem / @baseFint);margin: (10rem / @baseFint);font-size: (25rem / @baseFint);color: #fff;text-align: center;}

`banner` 和广告模块制作

banner 盒子给宽高 , 里面的图片设置 100%
广告里面放三个 a flex=1;各占一份 , a 里面图片宽度 100%

// banner 模块
.banner {width: (750rem / @baseFint);height: (368rem / @baseFint);// 和 banner 一样大img {width: 100%;height: 100%;}
}
// 广告模块
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}

nav 部分模块制作

nav 给一个宽度 , 里面的 a 给宽高 , 设置下外边距拉开和下面一排 a 的距离
img 设置宽高 , 转换为块级元素可以让块级元素左右居中

// nav 模块
.nav {width: (750rem / @baseFint);a {float: left;width: (150rem / @baseFint);height: (140rem / @baseFint);text-align: center;// 下边距拉开和 下面一排 a 的距离margin-bottom: (10rem / @baseFint);img {// 图片装换为块元素才可以设置 margin 左右居中display: block;width: (82rem / @baseFint);height: (82rem / @baseFint);margin: (10rem / @baseFint) auto 0;}span {font-size: (25rem / @baseFint);color: #333;}}
}

代码演示

`html` 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,user-scalable=1,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0" /><link rel="stylesheet" href="./css/normalize.css" /><link rel="stylesheet" href="./css/index.css" /><title>苏宁首页</title></head><body><!-- 顶部搜索框 --><div class="search-content"><div class="search"><form action="#"><input type="search" name="" id="" value="厨卫保暖季 大大大" /></form></div><a href="#" class="classify"></a><a href="#" class="login">登录</a></div><!-- banner 模块 --><div class="banner"><img src="./uploade/banner.gif" alt="" /></div><!-- 广告模块 --><div class="ad"><a href="#"><img src="./uploade/ad1.gif" alt="" /></a><a href="#"><img src="./uploade/ad2.gif" alt="" /></a><a href="#"><img src="./uploade/ad3.gif" alt="" /></a></div><!-- nav部分 --><div class="nav"><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a><a href="#"><img src="./uploade/nav1.png" alt="" /><span>爆款手机</span></a></div></body>
</html>

`css` 代码

// 在index.less 中导入 common.less 文件
@import "common";
body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, STHeiTi, sans-serif;background: #f2f2f2;
}
// search-content
// 页面元素rem 计算公式: 页面元素的px / html 字体大小 50
// 定义变量
@baseFint: 50;
.search-content {display: flex;position: absolute;top: 0;left: 50%;transform: translateX(-50%);// 固定的盒子必须有宽度width: 15rem;height: (88rem / @baseFint);background-color: #ffc001;// 特点：三栏布局，左右两侧固定，中间自适应，并且中间内容需要优先加载// 左边的盒子.classify {// 排列靠前order: -1;width: (44rem / @baseFint);height: (70rem / @baseFint);background: url(./../images/classify.png) no-repeat;background-size: (44rem / @baseFint) (70rem / @baseFint);margin: (11rem / @baseFint) (25rem / @baseFint) (7rem / @baseFint) (24rem / @baseFint);}// 中间的盒子.search {// 宽和高自适应flex: 1;background-color: purple;input {// 聚焦去掉默认边框outline: none;// 去掉输入框默认边框border: 0;width: 100%;height: (66rem / @baseFint);border-radius: (33rem / @baseFint);background-color: #fff2cc;margin-top: (12rem / @baseFint);font-size: (25rem / @baseFint);padding-left: (55rem / @baseFint);color: #757575;}}//右边的盒子.login {width: (75rem / @baseFint);height: (70rem / @baseFint);line-height: (70rem / @baseFint);margin: (10rem / @baseFint);font-size: (25rem / @baseFint);color: #fff;text-align: center;}
}// banner 模块
.banner {width: (750rem / @baseFint);height: (368rem / @baseFint);// 和 banner 一样大img {width: 100%;height: 100%;}
}
// 广告模块
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}
// nav 模块
.nav {width: (750rem / @baseFint);a {float: left;width: (150rem / @baseFint);height: (140rem / @baseFint);text-align: center;// 下边距拉开和 下面一排 a 的距离margin-bottom: (10rem / @baseFint);img {// 图片装换为块元素才可以设置 margin 左右居中display: block;width: (82rem / @baseFint);height: (82rem / @baseFint);margin: (10rem / @baseFint) auto 0;}span {font-size: (25rem / @baseFint);color: #333;}}
}

rem 适配方案 2

相比较适配方案1的优势

适配方案 1 需要手动写媒体查询，在不同的分辨率上给html标签设置不同的字体大小。媒体查询程阶梯式的，不能做到很精确，比如在320 , 360分辨率上使用的是同样大的字体可能，如果要在320 , 360分辨率上分别显示不同大小的字体，手动实现几乎不可能，但是适配方案2可以实现。

它的原理是把当前设备划分为N(默认10)等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值：页面元素的px 值 / 75
剩余的，让flexible.js来去算

Github地址：https://github.com/amfe/lib-flexible

flexible.js 原理

根据不同的视口宽度给网页中html根节点设置不同的font-size

使用Flexible.js完成REM布局技术点总结

因为flexible是默认将屏幕分为10等分

但是当屏幕大于750的时候希望不要再去重置html字体了

所以要自己通过媒体查询设置一下

并且要把权重提到最高

VSCode px 转换rem 插件 cssrem

因为cssrem中css自动转化为rem是参照默认插件的16转换的所以需要自己配置

适配方案 2 使用步骤

第一步 : 为`vscode`安装并配置插件

安装 cssrem 插件

配置插件

比如原型图750，页面分成10份。那么1REM=75PX 。则填写75即可

第二步:引入`flexible.js`到当前项目

在页面使用 script 标签引入 js

<script src="./flexible.js"></script>

点击下载

第三步:引入`normalize.css,reset.css`

normalize.css 点击下载

reset.css

/*点击高亮我们需要清除清除  设置为transparent 完成透明*/
* {-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,
a {-webkit-touch-callout: none;
}
a {color: #666;text-decoration: none;
}
ul {margin: 0;padding: 0;list-style: none;
}
img {vertical-align: middle;
}
div {/* css3 盒子模型 */box-sizing: border-box;
}
.clearfix:after {content: "";display: block;line-height: 0;visibility: hidden;height: 0;clear: both;
}

第四步:适配最小和最大分辨率,并且为body标签设置最小和最大宽度

编写媒体查询的作用：适配最小和最大分辨率。比如要适配的最小分辨率320PX，最大分辨率750PX，分辨率小于320，页面内容就不能再继续缩小；分辨率大于750，页面内容就不能再继续放大。

新建common.css

/* 适配最大分辨率，如果页面超过750PX则设置html文字大小为75px。表示页面内容不能再放大了 */
@media screen and (min-width: 750px){html {font-size: 75px !important;}
}/* 适配最小分辨率：如果页面小于320px则设置文字大小32px。表示页面内容不能再缩小了。其实最小的手机也就是320，所以320分辨率以下的手机不存在，不适配也可以
提升权重 */
@media screen and (max-width: 320px){html {font-size: 32px !important;}
}body {/*width写10rem的原因:1.flexible中默认分成10等分，这里写10rem即可2.原型图为750PX，所以页面的宽度应该为750PX，但是页面要缩放，不能写死，所以单位应该用REM。*/width: 10rem;min-width: 320px;max-width: 750px;/*在PC上显示居中*/margin:0 auto;font: 14px/1.5 -apple-system, Helvetica, sans-serif;color: #666;background-color:#f2f2f2;
}

最终的 `html` 引代码入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 1.引入flexible.js,帮我们自动计算设置不同分辨率下font-size的值 --><script src="./js/flexible.js"></script><!-- 2.引入normalize.css --><link rel="stylesheet" href="./css/normalize.css" /><!-- 3.引入reset.css --><link rel="stylesheet" href="./css/reset.css" /><!-- 4.引入common.css --><link rel="stylesheet" href="./css/common.css" /></head><body></body>
</html>

案例 - 苏宁网移动首页-2⭐️

苏宁网移动端首页准备工作

1 . 技术选型

方案 : 单独制作移动端页面

技术 : 布局采用 rem 适配布局 2 ( rem + lflexible.js )

设计图 : 本设计图采用750px 设计尺寸

2 . 搭建相关文件夹结构

3 . 设置视口标签以及引入初始化样式还有 `js` 文件

设置视口标签 :

<meta  name="viewport" content="width=device-width,user-scalable=1,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0">

引入 css 初始化样式 normalize.css common.css 和 js 文件

    <link rel="stylesheet" href="./css/normalize.css" /><link rel="stylesheet" href="./css/index.css" /><!-- 引入flexble.js 文件 --><script src="./js/flexible.js"></script>

4 . body 设置

检查设置是否生效 :　查看整个屏幕的字体大小是不是屏幕的十分之一

问题 :为什么方案 1 不用设置最大宽度

给 body 设置最大宽度
修改 body 的宽度 width: 10rem;
- 750 / 75 = 10rem 页面宽度 / html字体大小
- html字体大小 = 页面宽度 / 划分的分数 750/10=75px
- flexible 给我们划分了十等份

body {min-width: 320px;max-width: 750px;/* 页面宽度/html字体大小  750/75=10rem *//* html字体大小=页面宽度/划分的分数 750/10=75px *//* flexible 给我们划分了十等份 */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, STHeiTi, sans-serif;background: #f2f2f2;
}

检测一下是否设置正确 75px = 1em

修改 flexible 默认字体大小 , 限定最大最小宽度

也可以写到公共样式 common .css 中 , 因位有首页列表也都需要按照这个设计稿来设置

/* 如果屏幕超过了 750 就按750 设置来走 ,不让字体继续放大 */
/* 需要加 !important 来提权重 */
@media screen and (min-width: 750px) {html {font-size: 75px !important;}
}
@media screen and (max-width: 320px) {html {font-size: 32px !important;}
}

代码演示

`html` 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width,user-scalable=1,initial-scale=no,maximum-scale=1.0,minimum-scale=1.0" /><link rel="stylesheet" href="./css/normalize.css" /><link rel="stylesheet" href="./css/index.css" /><!-- 引入flexble.js 文件 --><script src="./js/flexible.js"></script><title>Document</title></head><body><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action="#"><input type="search" value="rem适配方案很好用" /></form></div><a href="#" class="login">登录</a></div></body>
</html>

css 代码

/* 如果屏幕超过了 750 就按750 设置来走 ,不让字体继续放大 */
/* 需要加 !important 来提权重 */
@media screen and (min-width: 750px) {html {font-size: 75px !important;}
}
@media screen and (max-width: 320px) {html {font-size: 32px !important;}
}
a {text-decoration: none;font-size: 0.333333rem;
}
body {min-width: 320px;max-width: 750px;/* 页面宽度/html字体大小  750/75=10rem *//* html字体大小=页面宽度/划分的分数 750/10=75px *//* flexible  给我们划分了十等份 */width: 10rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica, STHeiTi, sans-serif;background: #f2f2f2;
}
.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 10rem;height: 1.173333rem;background-color: #ffc001;
}
.classify {width: 0.586667rem;height: 0.933333rem;margin: 0.146667rem 0.333333rem 0.133333rem;background: url(./../images/classify.png) no-repeat;background-size: 0.586667rem 0.933333rem;
}
.search {flex: 1;
}
.search input {/* 去掉轮廓线 */outline: none;/* input 边框去掉 */border: 0;width: 100%;height: 0.88rem;font-size: 0.33333rem;background-color: #fff2cc;margin-top: 0.133333rem;border-radius: 0.44rem;padding-left: 0.733333rem;color: #757575;
}
.login {width: 1rem;height: 0.933333rem;margin: 0.133333rem;color: #fff;text-align: center;line-height: 0.933333rem;font-size: 0.333333rem;
}

3、rem + 媒体查询

1、先通过媒体查询，去设置不同视口下的根标签的html字号大小（一般设置视口的十分之一）

2、确定设计稿的尺寸

3、px转为rem

@media (width: 320px) {html {font-size: 32px;}
}
@media (width: 640px) {html {font-size: 64px;}
}
@media (width: 750px) {html {font-size: 75px;}
}// px转换 60px * 100px  设计稿为375px
div {width: （60 / 37.5 rem）；height: （100 / 37.5 rem）；
}

4、rem + flexible.js(淘宝做法)

1、引入flexible.js（代替我们自己去写媒体查询）

2、确定设计稿的尺寸

3、px转为rem （除以设计稿尺寸的十分之一即可）

<script src="./flexible.js"></script>  // 代替我们自己去写媒体查询// 设计稿为375px  转换 60px * 100px  为 rem单位
div {width: （60 / 37.5 rem）；height: （100 / 37.5 rem）；
}// 设计稿为750px  px转换 120px * 200px  
div {width: （120 / 75 rem）；height: （200 / 75 rem）；
}

5、扩展：

网易做法：假设1rem = 100px

可参考：https://www.cnblogs.com/lyzg/p/4877277.html

（1）先拿设计稿竖着的横向分辨率除以100得到body元素的宽度（rem单位）：

如果设计稿基于iphone6，横向分辨率为750，body的width为750 / 100 = 7.5rem

（2）在页面加载好以后，通过以下代码设置html的font-size:

把实时的页面宽度划分成 7.5份

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

解释： 1rem（即html根标签的字号）= 实际视口 / （设计稿的横向分辨率（750px）/ 100 ）

（3）布局时，设计图标注的尺寸除以100得到css中的尺寸

vw / vh 适配方案

.box {width: (50 / 3.75vw);height: (100 /3.75vw);background-color: aqua;
}

相对单位 , 相对视口的尺寸计算结果
vw：viewport width
- 1vw = 1/100视口宽度
vh：viewport height
- 1vh = 1/100视口高度

实际开发中直接使用 vw 单位

vw 和 vh 不能混合使用 , 全面屏下会大小不一样

使用 vw 不用引入js , 这个单位就带自动平分100的功能

vw单位尺寸

确定设计稿对应的vw尺寸（1/100视口宽度）
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）
vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

10vw = 37.5px / (375 / 100)

37.5px = 10 vw* 3.75 vw

vw适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

实际开发中 vw和 vh 不能混用 , vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

B 站-项目经验

头部和底部实现方式一 fixed

头部

header {position: fixed;z-index: 1;top: 0;left: 0;width: 100%;height: 22.4vw;background: #fff;
}

底部

.video_content {position: absolute;top: 22.4vw;left: 0;right: 0;bottom: 0;padding: 0 1.33333333vw;
}

头部设置固定定位 , 左右用left , right 撑开高度根据设计稿来写 , 设置背景色
头部设置 z-index , 定位的盒子有层叠性 , 后面的会居上
中间内容设置固定定位 , 左右用方位词撑开 top 值至少是头部的高度

头部和底部实现方式二 absolute

头部

header{position: absolute;top: 0;left: 0;right: 0;height: (84 / @vw);
}

底部

section{position: absolute;top: (84 / @vw);left: 0;right: 0;bottom: 0; // 必须设置 要不然头部会卷去内容滚动条会延伸到头部padding: 0 (5 / @vw);overflow: auto;
}`

头部设置绝对定位 , 顶部贴边 , 左右撑开盒子 , 高度根据设计稿填写
内容 , (底部)设置绝对定位 top值最少设置头部高度的值 ,
需要滚动的盒子需要给高度 , overflow:auto 才可以生效
bottom 必须设置 , 要不然头部会卷去内容滚动条会延伸到头部

交集选择器巧用

.active.off { }

&.off {}

必须是 active类同时有off类实现图片替换 , 用 js 动态修改类名 ( tab栏切换 )

<li><a href="#" class="comun">首页</a></li>.active {
url(./../images/status_active.png);background-size: contain;&.off {background-image: url(./../images/status_default.png);}}

section 间距

给大盒子设置左右padding
给小盒子设置左右上下 padding

优点 : 不用给单个盒子设置间距

响应式开发原理⭐️

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备的划分情况：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

响应式布局容器

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分
宽度设置的比设备宽度小一点是为了缩小后左右两边留有一些空隙好看一些

代码演示

      .container {height: 150px;background-color: green;margin: 0 auto;}/* 1.超小屏幕 小于768px 容器宽度为100% */@media screen and (max-width: 767px) {.container {width: 100%;}}/* 2.小屏幕 大于等于768px 容器宽度为750px */@media screen and (min-width: 768px) {.container {width: 750px;}}/* 3.中等屏幕 大于等于992px 容器宽度为 970px */@media screen and (min-width: 992px) {.container {width: 970px;}}/* 4.大屏幕 大于等于1200px 宽度设置为 1170px */@media screen and (min-width: 1200px) {.container {width: 1170px;}}

Bootstrap 的介绍

Bootstrap简介

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

中文网官网推荐网站

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

bootstrap优点

标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率

Bootstrap 使用步骤

1 . 创建文件夹结构

下载 bootstrap 文件 , 改名字后放到项目文件夹下面

2 . 创建 html 骨架结构

<!-- 要求当前网页使用 ie 浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
视口标签
<meta name="viewport" content="width=device-width, initial-scale=1">

    <!--[if lt IE 9]>解决 ie9 以下浏览器对 html5 新增标签的不识别<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>解决 ie9 以下浏览器对 css3 Media Query (媒体查询)的不识别  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]-->

代码演示

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!--[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]--><!-- 引入自己的 Bootstrap --><link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css" /></head><body><h1>你好，世界！</h1></body>
</html>

3 . 引入相关样式

主要引入 bootstrap 样式 , 不用引入normal 样式 , bootstrap 样式里面有

    <!-- 引入 bootstrap 样式文件 --><link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" /><!-- 引入我们自己首页样式文件 --><link rel="stylesheet" href="./css/index.css" />

4 . 书写内容

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式，注意权重问题

学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

可以给样式增加类名 , 修改样式

    <style>/* 增加一个类名 , 修改样式 */.yellow {height: 50px;width: 150px;background-color: orangered;}</style></head><body><button type="button" class="btn btn-warning yellow">（默认样式）</button><button type="button" class="btn btn-success">成功</button><div class="btn btn-danger">失败</div><button type="button" class="btn btn-primary">首选项</button></body>

Bootstrap 布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用处的类。

.container

响应式布局的容器固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)

.container-fluid

流式布局容器百分百宽度
占据全部视口（viewport）的容器。

Bootstrap 栅格系统

Bootstrap 栅格系统布局原理 📝

rem 适配是将整个屏幕划成等分

栅格化是指将整个网页的宽度分成若干等份

原理 : 将页面布局划分为等宽的列 , bootstrap 将 container 划分成 12 等分 , container 不同每一列的宽度也不同 , 页面的内容会随着宽度的变化而发生相应的变化

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

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

按照不同屏幕划分为1~12 等份:
行（row）可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class=”col-md-4 col-sm-6”
盒子一行排列是子盒子使用浮动 , 兼容性好

栅格选项参数

    <div class="container"><div class="row"><div class="col-lg-3">1</div><div class="col-lg-3">2</div><div class="col-lg-3">3</div><div class="col-lg-3">4</div></div>

如果孩子的份数相加等于12 , 则孩子能占满整个 container 的宽度
如果孩子的份数相加小于12 , 则孩子占不满整个 container 的宽度 , 会留有空白

如果孩子的份数相加大于12 , 多余的那一列会另起一行显示

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>

栅格嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

列嵌套最好加 1 个行 row , 这样就可以取消父元素的 padding , 而已高度和父元素一样高

          <!-- 列嵌套最好加 1 个行 row , 这样就可以取消父元素的 padding , 而已高度和父元素一样高 --><div class="row"><div class="col-md-4">小列4</div><div class="col-md-8">小列8</div></div>

列偏移 offset

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

     <div class="row"><div class="col-md-3">左侧</div><div class="col-md-3 col-md-offset-6">右侧</div></div><div class="row"><div class="col-md-6 col-md-offset-3">中间</div></div>

列排序

通过使用推 .col-md-push-* 和 .col-md-pull-拉* 类就可以很容易的改变列（column）的顺序。

列排序的使用目的就是把左边的列放到右变，右边的列放到左边。实现互换。

    <div class="container"><div class="row"><!-- 推 --><div class="col-md-3 col-md-push-9">左侧</div><!-- 拉 --><div class="col-md-9 col-md-pull-3">右侧</div></div></div>

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

与之相反的是 , visible-xs visible-sm visible-md visible-lg 是显示页面内容

    <div class="container"><div class="row"><!-- 超大屏显示 --><div class="col-xs-3"><span class="visible-lg">我在超大屏显示</span></div><div class="col-xs-3">2</div><!-- 中屏隐藏 超小屏隐藏 --><div class="col-xs-3 hidden-md hidden-xs">我会隐藏</div><div class="col-xs-3">4</div></div></div>

案例-阿里百秀首页需求分析

技术选型

方案 : 我们采取响应式页面开发方案

技术 : bootstrap 框架

设计图 : 本设计图采用 1280px 设计尺寸

布局分析

一个超大的 container 把整个盒子包裹着一个行
行里面分为三大列 : nav 2 份 article 7 份 aside 3份

阿里百秀前期准备工作

Bootstrap 使用四部曲 : 1 . 创建文件夹结构创建 2 . html 骨架结构 3 .引入相关样式 4 . 书写内容

主要引入 bootstrap 样式 , 不用引入normal 样式 , bootstrap 样式里面有

  <head><meta charset="UTF-8" /><!-- 要求当前网页使用 ie 浏览器最高版本的内核来渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--[if lt IE 9]>解决 ie9 以下浏览器对 html5 新增标签的不识别<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>解决 ie9 以下浏览器对 css3 Media Query (媒体查询)的不识别<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--><!-- 引入 bootstrap 样式文件 --><link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" /><!-- 引入我们自己首页样式文件 --><link rel="stylesheet" href="./css/index.css" /><title>阿里百秀</title></head>

container 宽度修改

因为本效果图采取 1280 的宽度 , 而 bootstrap 里面container 最大宽度为 1170px , 因此需要手动改下 container 宽度 .

/* 修改屏幕大于等于1280时 container 最大宽度为1280 根据设计稿走的  */
@media screen and (min-width: 1280px) {.container {width: 1280px;}
}

小技巧

利用 container 内边距给盒子加左右边距

案例-阿里百秀

logo 制作

左侧的 header 可以划分为 logo 和 nav 模块
给 header 去除左边框 , 注意权重 , 可以给 header 加多类名和 !important
logo 里面的图片宽度要随着屏幕缩小而缩小 , 宽度设置 100%

/* 去掉header 左内边距 注意权重 , 通过加多类名和!important 来提权*/
/* header {padding-left: 0 !important;
} */
.header {padding-left: 0;
}
.logo {background-color: #429ad9;
}
.logo img {width: 100%;
}

nav > li*4 > a

          <div class="nav"><ul><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-picture">自然会</a></li><li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li><li><a href="#" class="glyphicon glyphicon-triangle-bottom">奇趣事</a></li><li><a href="#" class="glyphicon glyphicon-triangle-top">美食街</a></li></ul></div>

a 转为块元素设置一个高度宽度默认是父元素的 100% , 设置鼠标经过添加背景颜色
去 a 的下划线需要去两次 , 一次正常的 , 一次鼠标经过时的
给 a 设置一个类名为 bootstarp 里的字体图标类名
bootstarp 是给每个 a 加一个 ::beafore 来实现的需要手动修改

        <article class="col-md-7"><!-- 新闻 --><div class="news"></div><!-- 发表 --><div class="publish"></div>

news 制作

新闻模块 ul 里面 5 个 li , 集体设置 li 的宽度 25% , 设置右内边距 , 里面的 a 宽度 100% 就可以达到右侧留有空隙的效果 ,
在单独设置第一个 li 宽度 50% , 给固定宽度
li 里面插入 a , 转为块元素设置宽高 100% 让里面的图片宽高 100% 撑开
a 里面插入 p 宽度 100% , 设置高度背景透明色 , 绝定定位它的的父元素相对定位

总结 : 给所有 li 设置下外边距会留有空隙在栅格系统中要给每列加空隙 , 不能设置 margin

为第三个盒子会掉下来 , 给每个列指定一个 paddin-left , 在给每个列里面放一个宽高为 100% 的小盒子 , 因为列设置的有内边距 , 会空下一个小缝隙

publish 模块

使用超小屏 col-sm- 使在小屏下比例是不变的
给新闻模块 news 设置一个下边框 , 注意 news 没有高度 , 加了下边框看不出来 , 因为里面的 li 浮动了 , 需要给类名后加一个 clearflx 清除浮动
里面的标题和段落样式可以直接使用 bootstrap 里面 全局css样式 中的排版和辅助类样式
右侧的小图片可以单独给他设置一个 margin-top , 给它的父亲添加多类名设置
可以给 row 设置一个下边框和 padding

aside 模块

aside 模块里面放两个 a , 第一个 banner a 里面插入 banner 图片 , 宽度设置为 100%
第二个 hot a 转为块元素 , 设置边框上外边距和内边距
里面的文字可以添加标签使用 bootstrap 里面的 全局 css 样式 按钮也可以单独去掉圆角

logo 响应式制作

图片到了小屏不需要缩放 , 设置 max-width :100% ，转为块元素让他缩放后居中
进入超小屏后让图片隐藏 , 显示"阿里百秀"四个字有宽度 , 运用 “响应式工具” 中 hidden-xs 隐藏
准好好一个盒子 , 平时是影藏的 , 只有在超小屏幕下显示 visible-xs"

nav 响应式制作

当进入小屏幕和超小屏幕 , nav 里面的 li 浮动 , 宽度 20% , 用媒体查询
进入超小屏幕里面 a 的字体大小改为 14px , padding-left =0 用媒体查询

/* 进入超小屏幕里面 a 的字体大小改为 14px , 用媒体查询 */
@media screen and (max-width: 767px) {.nav li a {font-size: 14px;padding-left: 2px;}
}

article 响应式制作

当进入小屏和超小屏后给 article 一个margin-top
我们进入超小屏幕 news 第一个 li 宽度为100% ,剩余 li 宽度 50% , 注意权重问题

/* 当进入小屏幕和超小屏幕 , nav 里面的 li 浮动 , 宽度 20% */
@media screen and (max-width: 991px) {.nav li {float: left;width: 20%;}/* 进入超小屏后给 article 添加上边框 */article {margin-top: 10px;}
}
/* 进入超小屏幕里面 a 的字体大小改为 14px , 用媒体查询 */
@media screen and (max-width: 767px) {.nav li a {font-size: 14px;}/* 当我们进入超小屏幕 news 第一个 li 宽度为100% ,剩余 li 宽度 50% */.news li:first-child {width: 100% !important;}.news li:nth-child(n + 2) {width: 50%;}
}

publish 响应式制作

超小屏幕下图片隐藏 hidden-xs
超小屏幕下 p 标签隐藏 , span 标签显示 , h3 文字变小

先做完 pc 端的在回来改移动端的

代码演示

html 代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><!-- 要求当前网页使用 ie 浏览器最高版本的内核来渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--[if lt IE 9]>解决 ie9 以下浏览器对 html5 新增标签的不识别<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>解决 ie9 以下浏览器对 css3 Media Query (媒体查询)的不识别<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--><!-- 引入 bootstrap 样式文件 --><link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" /><!-- 引入我们自己首页样式文件 --><link rel="stylesheet" href="./css/index.css" /><title>阿里百秀</title></head><body><div class="container"><div class="row"><header class="col-md-2 header"><div class="logo"><a href="#"><img src="./images/logo.png" alt="" class="hidden-xs" /><span class="visible-xs">阿里百秀</span></a></div><div class="nav"><ul><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-picture">自然会</a></li><li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li><li><a href="#" class="glyphicon glyphicon-triangle-bottom">奇趣事</a></li><li><a href="#" class="glyphicon glyphicon-triangle-top">美食街</a></li></ul></div></header><article class="col-md-7"><!-- 新闻 --><div class="news clearfix"><ul><li><a href="#"><img src="./upload/lg.png" alt="" /><p>阿里百秀</p></a></li><li><a href="#"><img src="./upload/1.jpg" alt="" /><p>阿里 百秀一小区护卫长得想马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="./upload/2.jpg" alt="" /><p>阿里 百秀一小区护卫长得想马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="./upload/3.jpg" alt="" /><p>阿里 百秀一小区护卫长得想马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="./upload/4.jpg" alt="" /><p>阿里 百秀一小区护卫长得想马云 市民纷纷求合影</p></a></li></ul></div><!-- 发表 --><div class="publish"><div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p><p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted ">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</spanc></p></div><div class="col-sm-3 pic hidden-xs"><img src="./upload/3.jpg" alt="" /></div></div><div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p><p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted ">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</spanc></p></div><div class="col-sm-3 pic hidden-xs"><img src="./upload/3.jpg" alt="" /></div></div>            <div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p><p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted ">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</spanc></p></div><div class="col-sm-3 pic hidden-xs"><img src="./upload/3.jpg" alt="" /></div></div>            <div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p><p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted ">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</spanc></p></div><div class="col-sm-3 pic hidden-xs"><img src="./upload/3.jpg" alt="" /></div></div>            <div class="row"><div class="col-sm-9"><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p><p>指甲是经常容易被人们忽略的身体部位， 事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲里知识吧！</p><p class="text-muted ">阅读(2417)评论(1)赞 (18) <span class="hidden-xs">标签：健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</spanc></p></div><div class="col-sm-3 pic hidden-xs"><img src="./upload/3.jpg" alt="" /></div></div></div></article><aside class="col-md-3"><a href="#" class="banner"><img src="./upload/zgboke.jpg" alt="" /></a><a href="#" class="hot"><span class="btn btn-primary">热搜</span><h4 class="text-primary">欢迎加入中国博客联盟</h4><p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p></a></aside></div></div></body>
</html>

css 代码

ul {list-style: none;margin: 0;padding: 0;
}
a {text-decoration: none;color: #666;
}
body {background-color: #f5f5f5;
}
.container {background-color: #fff;
}
a:hover {text-decoration: none;
}/* 修改屏幕大于等于1280时 container 最大宽度为1280 根据设计稿走的  */
@media screen and (min-width: 1280px) {.container {width: 1280px;}
}
/* header */
/* 去掉header 左内边距 注意权重 , 通过加多类名和!important 来提权*/
/* header {padding-left: 0 !important;
} */
.header {padding-left: 0;
}
.logo {background-color: #429ad9;
}
.logo img {display: block;/* 在小屏下图片不要缩放 */max-width: 100%;/* 缩放后居中 */margin: 0 auto;
}
.logo span {display: block;height: 50px;line-height: 50px;text-align: center;font-size: 18px;color: #fff;
}
.nav {background-color: #eee;border-bottom: 1px solid #ccc;
}
.nav a {display: block;height: 50px;line-height: 50px;padding-left: 30px;font-size: 16px;
}
.nav a:hover {background-color: #fff;color: #333;
}
.nav a::before {vertical-align: middle;padding-right: 5px;
}
/* 当进入小屏幕和超小屏幕 , nav 里面的 li 浮动 , 宽度 20% */
@media screen and (max-width: 991px) {.nav li {float: left;width: 20%;}/* 进入超小屏后给 article 添加上边框 */article {margin-top: 10px;}
}
/* 进入超小屏幕里面 a 的字体大小改为 14px , 用媒体查询 */
@media screen and (max-width: 767px) {.nav li a {font-size: 14px;padding-left: 2px;}/* 当我们进入超小屏幕 news 第一个 li 宽度为100% ,剩余 li 宽度 50% */.news li:first-child {width: 100% !important;}.news li:nth-child(n + 2) {width: 50%;}.publish h3 {font-size: 14px;}
}
.news li {width: 25%;float: left;height: 128px;padding-right: 10px;margin-bottom: 10px;
}
.news li:first-child {width: 50%;height: 266px;
}.news li:first-child p {line-height: 41px;font-size: 20px;padding: 0 10px;
}
.news li a {position: relative;display: block;width: 100%;height: 100%;
}
.news li a img {width: 100%;height: 100%;
}
.news li a p {position: absolute;bottom: 0;left: 0;width: 100%;height: 41px;padding: 3px 10px;background: rgba(0, 0, 0, 0.5);color: #fff;margin-bottom: 0;
}.publish {border-top: 1px solid #ccc;
}
.publish .row {border-bottom: 1px solid #ccc;padding: 10px 0;
}
.pic {margin-top: 10px;
}
.pic img {width: 100%;
}
.banner img {width: 100%;
}
.hot {display: block;margin-top: 20px;border: 1px solid #ccc;padding: 0 20px 20px;
}
.hot span {border-radius: 0;margin-bottom: 20px;
}
.hot p {font-size: 12px;
}