# 今日学习任务
[ ] 01-移动Web入门
- [ ] a.知道如何使用谷歌浏览器打开移动Web网页
- [ ] b.知道
meta标签的作用是设置移动端视口 - [ ] c.知道移动端图片通常使用二倍图
- [ ] d.了解物理像素与css逻辑像素的区别
[ ] 02-流式布局
- [ ] a.流式布局：宽度使用百分比，高度使用px
- [ ] b.border-box属性介绍
[ ] 03-案例：京东首页
# 01-移动Web入门
# 1.1-移动Web初体验
| 学习目标 | 学习总结 |
|---|---|
| 什么是移动Web | Web:网页 移动：移动设备（手机，平板等） 移动web ： 运行在移动设备上的网页 |
| ==如何运行移动Web== | 1. 按F12打开开发者工具 2.点击左下角 PC/移动设备 切换图标 3.刷新网页 |
| 如何模拟手指缩放 | ALT+SHIFT+鼠标拖拽 |
# 1.1.1 移动Web的概念介绍
- 1.什么是移动Web
- 运行在移动设备的网页(web)，称之为移动端网页(移动web)。所谓的移动设备泛指：手机，平板。
- 2.如何调试移动web网页
- a.真机调试：现阶段由于没有学习服务器相关知识，所以暂时不接触真机调试
- b.chrome浏览器调试：和PC端网页一样，首先按F12打开开发者工具，然后点击做下表手机图标即可(见下图)
- 移动端网址特点：以m开头
- 例如：PC端的京东首页是<www.jd.com>,那么移动端京东首页就是<www.m.jd.com>
小技巧：在PC端进入任何网页之后，切换到移动web页面刷新网页，就会自动打开移动端网页
- 移动端网址特点：以m开头
- 3.移动Web的发展历史
从2014年HTML5正式定稿后移动web就迎来了飞速的发展 因为使用HTML5技术可以更方便 更快捷的开发现代web应用程序
而移动端的手机浏览器都是比较新的 HTML5在移动端的浏览器支持情况都比较好
所以HTML5主要应用就是在移动端 移动web
直到2015 - 2016 - 2017 - 至今 移动web已经发展了很多年 各方面的技术都比较成熟稳定 网上的教程也比较完整成熟 所以现在的web已经到全民移动web的时代了
# 1.2.1-移动端布局特点介绍(暂时了解)
- 1.移动端网页与PC端网页区别
- (1)
多机型适配- pc端布局无需考虑机型适配，但是移动设备(手机,平板)机型尺寸种类特别多，需要考虑不同的机型尺寸适配
- (2)
页面结构简单- 相比而言，由于移动设备的屏幕远小于PC端的屏幕，所以移动Web的页面结构比PC端简单
- 手机性能有限，所以网页一般不会做的太复杂
- 常见的移动Web页面结构(从上往下)：广告栏banner、搜索栏、轮播图、导航栏、商品列表、底部tabbar
- 手机性能有限，所以网页一般不会做的太复杂
- 相比而言，由于移动设备的屏幕远小于PC端的屏幕，所以移动Web的页面结构比PC端简单
- (1)
- ==2.移动Web布局核心思想==
1.不允许网页出现横向滚动- 移动端一般只适配宽度盛满整个屏幕，高度从上往下滚动
- pc端布局一般都是使用固定宽度，水平居中且两边留白的方式来布局，所以pc端不用考虑显示屏的宽度，而移动端布局是采用全屏的方式布局，既然是全屏，就要考虑屏幕的适配，因为不同的手机的屏幕宽度是不一样的
- 移动端一般只适配宽度盛满整个屏幕，高度从上往下滚动
- 2.页面盛满屏幕，盒子宽度与屏幕一致 100%
- 3.让盒子的内容宽高width/height包含padding与border，避免出现横向滚动条
- 3.移动Web布局方式介绍
(1)流式布局(百分比布局)- px不写死，使用%百分比实现比例布局
(2)flex伸缩布局(弹性布局)(3)rem布局- 以html元素字体大小作为单位. 1rem = html字体大小
(4)响应式布局- ==注意：以上的布局方式不是每种页面只能使用一种，而是根据实际需求灵活搭配，只要能实现产品经理的需求，使用任何方式都可以(不管黑猫白猫，抓到老鼠就是好猫)==
每种布局方式没有优劣之分，只是各自特点不同，所适用的场景不同而已- 例如：能使用百分比就使用百分比，如果百分比不能用，就使用rem，如果rem不能用，就使用固定宽高，总之怎么舒服怎么来。
# 1.3-课后了解：移动端私有前缀
1.什么是私有前缀
- 浏览器厂商通常都是在属性名称前添加厂商的私有前缀，来测试这些尚未成为标准的特性。 因此，可以借助私有前缀，来解决浏览器对CSS3的兼容性问题。
- 在移动端，仅有四个独立的浏览器内核，分别为微软的Trident、火狐的Gecko、开源内核Webkit、Opera的Presto。 目前微软的Trident在移动终端上主要为WP7、8系统内置浏览器。Opera的Presto内核主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版。Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、谷歌Chrome(Android4.0使用) 都是基于Webkit开源内核开发的。
- UC、Android内置、Chrome、Safari、QQ Browser都是webkit内核，从图上看占了绝大部分的市场份额。 所以一定要伺候好-webkit-。 有的公司干脆只兼容-webkit-，别的兼容比如-ms-都不写
内核 前缀 主要浏览器 Trident -ms- Internet Explorer Gecko -moz- Firefox Webkit -webkit-Chrome、Opera、Safari、Android Presto -o- 早期Opera .box{ -webkit-transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; transition:all 1s; }
# 1.2-视口属性介绍
| 学习目标 | 学习总结 |
|---|---|
| 1.什么是视口？ | 视口 ： 手机网页的大小 |
| 2.如何设置视口 | <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> |
| 3.视口属性的作用 | content="width=device-width" : 设置网页大小与当前手机设备屏幕一致 initial-scale=1.0：设置视口初始化缩放为1（不缩放） user-scalable=no：设置视口不允许用户缩放（绝大多数手机网页都是不能缩放的） |
视口：手机网页的大小
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">- name：要设置的属性，viewport表示视口
- content：要设置的内容
- width=device-width：设置视口宽度与设备宽度一致
- initial-scale=1.0：设置视口初始化缩放为1（不缩放）
- user-scalable=no：设置视口不允许用户缩放（绝大多数手机网页都是不能缩放的）
- 其他属性介绍
- maximum-scale=5.0：设置视口最大缩放比例为5，如果禁止缩放该属性设置无效
- m-scale=0.5：设置视口最小缩放比例为0.5
- 小技巧: 在vscode中设置视口快捷键
meta:vp + tab键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 兼容IE浏览器 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--
1.pc端网页大小 ： 可以随意改变
2.移动端网页大小： 不能改变，取决于手机屏幕大小
3.视口：移动端网页布局大小
name:viewport 视口
content：视口内容属性
width=device-width：让移动端网页宽度和当前手机屏幕一致
initial-scale=1.0 ： 设置视口默认不缩放
user-scalable=no : 设置不允许缩放
-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 小技巧：在vscode中输入： meat:vp 然后tab键可以快速设置移动端视口 -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document</title>
<style>
body{
margin: 0px;
padding: 0px;
}
.box{
width: 320px;
height: 375px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">班长</div>
</body>
</html>
# 视口单位vh与vw介绍(课外了解)
- vh与vm与我们第四天将要学习的rem作用非常类似，最大的区别是vh与vm的浏览器兼容性不如rem，所以实际开发中还是rem使用较多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
height: 300px;
}
div{
background-color: red;
/* 1.百分比：参照父元素 */
/* width: 100%;
height: 100%; */
/* 2.视口单位
vw : 视口宽度百分之一 1vm = %1视口宽度
vh : 视口高度百分之一 1vh = 1%视口高度
vmin: 视口最小值的百分之一
vmax：视口最大值百分之一
竖屏： 1vmin = 1vw 1vmax = 1vh
横屏: 1vim = 1vh 1vmax = 1vw
*/
/* 盒子宽高与屏幕宽高一致
width: 100vw;
height: 100vh;
*/
/* 盒子宽高相等 = 屏幕宽度
width: 100vw;
height: 100vw;
*/
width: 50vmin;
height: 50vmax;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
# 1.3-高清屏图像适配(2倍图)
| 学习目标 | 学习总结 |
|---|---|
| 1. 了解分辨率指的是手机屏幕发光点数量 | |
| 2. 了解图片的尺寸单位是分辨率 | |
| ==3. 了解移动端 DPr = 2 （1px = 2发光点）== | 解释： 图片大小为200*200，代码应该写 100px * 100px 总结 ： 移动端图片尺寸（分辨率）需要除以2 |
# 1.2-屏幕像素介绍(了解)
- 1.手机屏幕尺寸及ppi
- 手机屏幕的尺寸一般是采取手机对角线的长度(单位是英寸，1英寸=2.54厘米)作为手机屏幕的尺寸，手机还有一个ppi的参数指的是手机每英寸包含的像素点，这个像素指的是物理像素，ppi越大，手机的像素密度越高。
- 2.物理像素(设备像素Device Pixel、分辨率)
- 指的是手机屏幕设备的像素点，可以理解成手机屏幕上的一个发光点，无数的发光点组成了手机屏幕
- 3.逻辑像素(设备独立像素Device Independent Pixel、css像素)
代表可以通过程序控制使用的虚拟像素- css像素:逻辑像素也可以叫做css像素，它指的是组成图像的最小单位，我们知道，图像是由不同颜色像素点组成的。而图像要在屏幕上显示出来，需要通过屏幕的物理像素点显示，在一般的屏幕，一个物理像素点刚好显示一个图像上的css像素，但是，如果是ppi很高的屏幕，那就是多个物理像素显示一个css像素。
- 4.手机分辨率、开发尺寸、倍率(设备像素比)
- 手机分辨率：指的就是手机在水平和垂直方向的物理像素点个数
- 例如iphone5的分辨率为
640*1136，表示屏幕水平方向有640个发光点，垂直方向有1136个发光点这是设备出厂就已经确定的，无法更改，也不能用代码来控制
- 例如iphone5的分辨率为
- 开发尺寸:指的是手机在水平和垂直方向的显示逻辑像素的个数
- 例如iphone逻辑像素为
320*568,表示如果我使用代码设置一个元素的宽度为320px，则元素宽度与屏幕宽度位置（前提是网页视口与设备宽高一致，否则渲染视口的时候会自动缩放）
- 例如iphone逻辑像素为
- 倍率DPR(devicePixelRatio)： 手机分辨率（物理像素）/开发尺寸(逻辑像素)
- 课后了解，js代码获取当前设备倍率:
window.devicePixelRatio - 普通屏幕: DPR为1，表示代码1px对应屏幕上面1个发光点
- 高清屏幕:DPR为2，表示代码1px对应屏幕上面4个发光点
- 如果一个设备的ppi超过300，那么此时人的肉眼无法观察到物理像素发光点，所以这种屏幕又称之为retina屏幕 (视网膜高清屏)
- 课后了解，js代码获取当前设备倍率:
- 手机分辨率：指的就是手机在水平和垂直方向的物理像素点个数
需求：在页面展示一张200px*140px的图片
当DRP为1的普通屏幕：由于一个逻辑像素(css像素，图像最小单位)对应一个设备像素(屏幕发光点)，此时可以正常显示
当DPR为2的高清屏：由于一个css像素对应4个设备像素，所以图片像素首先会被拉伸放大(
造成图像失真)，然后加载到手机屏幕，就会导致图像变得模糊。- ==图片从小到大会模糊失真，但是由大到小不会==
- 课后了解，js代码获取当前设备倍率:
window.devicePixelRatio
解决方案:如果设备DPR为2，则将图片做成清晰的2倍图
400px*280px,然后设置img标签宽高为200px*140px,这样就不会失真- DPR为3：同理，正规公司UI会切3倍图，但是由于人的肉眼无法观察，所以很多小公司仍然使用2倍图来适配DPR为2的高清屏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
1.分辨率（物理像素）：手机屏幕的发光点，代码无法控制
2.css像素(逻辑像素)： 1px = 1css像素
3.dpr: 屏幕发光点（分辨率）/ 屏幕尺寸(css像素) 像素比
devicePixelRatio：1 1px屏幕会有1个发光点
devicePixelRatio：2 1px屏幕会有2个发光点
devicePixelRatio：3 1px屏幕会有3个发光点
4.图片的 1像素 = 屏幕1发光点(物理像素)
* pc端： 由于dpr固定为1. 所以 图片是多大，css尺寸就写多大
* 移动端： 大多数手机dpr为2. 所以 图片是多大，css尺寸就应该除以2
思考题： 假设UI妹子想要显示一个图标 是200px * 200px,她应该切一张多大的图片？
* 400 * 400
-->
<style>
img{
/* img标签设置宽度，高度会自动等比例缩放 */
width: 200px;
}
</style>
</head>
<body>
<img src="images/pic.png" alt="">
<img src="images/pic_2x.png" alt="">
<!-- 图片大小 400 280， 对应css像素 应该是 200px * 140px -->
</body>
</html>
<script>
console.log(window.devicePixelRatio);
</script>
# 1.4-移动端布局注意点
- 学习目标1 ： 移动端布局注意点
1.水平方向不能出现滚动条
a. 禁止用户缩放
b. 元素宽度不能超过视口宽度
2.只适配宽度（使用百分比单位），高度使用固定px
* 百分比布局（流式布局）：水平方向使用百分比单位，高度使用固定px
3.盒子宽度不能受到padding和margin影响（避免出现滚动条）
* 解决方案：设置内减盒子 box-sizing: border-box;
学习目标2 ： 内减盒子
box-sizing: border-box;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 视口：移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--移动端布局核心
1.水平方向不能出现滚动条
a. 禁止用户缩放
b. 元素宽度不能超过视口宽度
2.只适配宽度（使用百分比单位），高度使用固定px
* 百分比布局（流式布局）：水平方向使用百分比单位，高度使用固定px
3.盒子宽度不能受到padding和margin影响（避免出现滚动条）
* 解决方案：设置内减盒子 box-sizing: border-box;
-->
<style>
body{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 50px;
background-color: red;
border: 10px solid green;
padding: 50px;
/* box-sizing ：盒子真实尺寸 = content + padding + border
1.pc端默认值： content-box width = content
* 外扩盒子 ： 盒子宽度受padding和border的影响。
2.移动端一般设置：border-box width = content + padding + border
* 内减盒子 盒子宽度不受padding和border的影响。content会自动内减
*/
box-sizing: border-box;/* */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- 3.流式布局经典案例： 两端固定，中间伸缩
- 思路介绍
- a.父盒子father，宽度为100%，铺满屏幕，且box-sizing为box-border
- b.设置父盒子的左右padding为60px
- c.中间center子盒子宽度为100%
子元素的宽度百分比是相对于父元素的内容(width-padding)- 如果不设置center的盒子宽度，思考一下它的默认宽度是多少？
- 块元素的宽度默认等于父级的宽度减去padding
- 如果不设置center的盒子宽度，思考一下它的默认宽度是多少？
- d.左右两边盒子通过绝对定位来实现
子元素绝对定位相对于父元素的内边框左上角
- 思路介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
padding: 0;
margin: 0;
}
.father {
width: 100%;
height: 50px;
background-color: pink;
/* border: 10px solid red; */
padding: 0px 60px;
box-sizing: border-box;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 50px;
background-color: red;
}
.center {
/* 块元素的宽度默认等于父级的宽度减去padding */
width: 100%;
height: 50px;
background-color: yellow;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
# 02-案例：京东首页（流式布局）
# 1.1-移动端初始化css
- 移动端初始化css与pc端基本一致，不同点如下
- a.移动端需要设置所有的元素为内减模型(避免padding和border导致出现滚动条)
- b.移动端字体大小一般为12px
- pc端默认是16px
- c.移动端默认a标签点击背景有蓝色高亮，需要取消
* {
margin: 0px;
padding: 0px;
/* 1.内减盒子 */
box-sizing: border-box;
}
body {
/* 2.移动端默认字体一般是12px */
font-size: 12px;
}
li {
list-style: none;
}
img{
vertical-align: middle;/* 图片居中 */
}
a {
color: #000;
/* 取消a标签默认下划线 */
text-decoration: none;
/* 3.移动端点击a链接出现蓝色背景问题解决 */
-webkit-tap-highlight-color: transparent;
}
input {
border: 0 none;
outline-style: none; /*取消轮廓线*/
}
/* 清除浮动 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.celarfix {
zoom: 1;
}
# 1.2-布局思路分析
- 思路分析（盒子模型，最外部版心盒子container）
- 1.搜索栏:search_bar
流式布局核心：宽度使用百分比，高度尽量使用内容自动撑开- 左右两个a标签可以使用padding+绝对定位来实现
- 精灵图也需要注意二倍图适配，设置background-size为图片的一半
- 2.banner栏
图片一般只设置宽度，高度自动根据视口大小缩放
- 3.导航栏:nav_bar
设置li元素浮动之后，别忘记清除ul的浮动。否则ul没有高度文字居中可以使用text-align:center图片居中，可以利用快级元素的margin属性- 先设置图片display为block
- 然后设置margin：0 auto;
- 4.京东快报:jd_news
背景精灵图可以通过设置偏移来模拟padding效果
- 5.活动广告:adv_show
- 三个li元素宽度分别为 50% 25% 25%
- img宽度100%，display为block
- 间隔线可以设置border-left: 1px solid #e0e0e0
- 6.商品列表：good_list
- 7.底部栏：bottom_bar
- 注意清除ul的浮动
- 思考：固定定位脱标之后遮挡了标准流的元素内容如何解决？
- 1.搜索栏:search_bar
# 1.3-布局技巧总结
/* css书写顺序1.定位属性 ： position float display left top 2.盒子模型 ： width/height padding border margin background 3.文字属性 ： color font-size 4.文字样式： text-align line-height 5.css3新增样式： border-radius */
1.宽度适配技巧
- div宽度使用百分比，高度使用px或者由内容撑开
- 图片设置宽度为百分比,高度自动等比例缩放
2.子元素浮动之后千万不要忘记清除父元素浮动
3.居中技巧
- 快级元素:
margin:0 auto - 行内元素水下居中:
display:blockmargin:0 auto - 文字水平居中:
text-align:center
- 快级元素:
# 1.4-开发流程
# 1-搜索栏
<!-- 1-搜索栏 -->
<div class="top-bar">
<a href="" class="menu"></a>
<input type="text" placeholder="商品名称">
<a href="" class="login">登录</a>
</div>
/* 1-搜索栏 */
.top-bar{
position: fixed;
top:0;
width: 100%;
height: 44px;
background-color: #E72E27;
padding: 0px 50px;
}
.top-bar .menu{
position: absolute;
left: 14px;
top:14px;
width: 20px;
height: 18px;
background: url(../images/jd_icons.png) no-repeat;
background-size: 250px 200px;
}
.top-bar input{
width: 100%;
height: 30px;
margin-top: 7px;
padding-left: 10px;
border-radius: 15px;
}
.top-bar .login{
position: absolute;
top: 14px;
right: 14px;
color: #fff;
}
# 2-banner栏
<!-- 2.banner栏 -->
<div class="banner">
<img src="images/slide.png" alt="">
</div>
/* 2-banner栏 */
.banner{
width: 100%;
/* 注意点：固定定位fixed会脱标
解决方案：设置元素margin撑开脱标的高度
*/
margin-top: 44px;
}
.banner img{
width: 100%;
}
# 3-导航栏
<!-- 3.导航栏 -->
<div class="nav_bar">
<ul class="clearfix">
<li><a><img src="images/nav01.png" alt=""><span>京东超市</span></a></li>
<li><a><img src="images/nav02.png" alt=""><span>京东超市</span></a></li>
<li><a><img src="images/nav03.png" alt=""><span>京东超市</span></a></li>
<li><a><img src="images/nav04.png" alt=""><span>京东超市</span></a></li>
<li><a><img src="images/nav05.png" alt=""><span>京东超市</span></a></li>
<li><a><img src="images/nav06.png" alt=""><span>京东超市</span></a></li>
<li><a><img src="images/nav07.png" alt=""><span>京东超市</span></a></li>
<li><a><img src="images/nav08.png" alt=""><span>京东超市</span></a></li>
<li><a><img src="images/nav09.png" alt=""><span>京东超市</span></a></li>
<li><a><img src="images/nav10.png" alt=""><span>京东超市</span></a></li>
</ul>
</div>
/* 3.导航栏 */
.nav-bar{
width: 100%;
height: 175px;
}
.nav-bar ul{
width: 100%;
}
.nav-bar ul>li{
float: left;
width: 20%;
text-align: center;
}
.nav-bar ul>li img{
display: block;
width: 40px;
height: 40px;
margin: 10px auto 5px;
}
# 3-京东快报
<!-- 4.京东快报 -->
<div class="jd-news">
<span><span>热门 </span>价格太贵买不起</span>
<a href="">更多</a>
</div>
/* 4.京东快报 */
.jd-news{
width: 100%;
height: 16px;
background: url(../images/jd_icons.png) no-repeat 8px -22px;
background-size: 250px 200px;
text-align: center;
}
.jd-news>span>span{
color: red;
}
.jd-news a{
float: right;
padding: 0px 5px;
border-left: 1px solid #E0E0E0;
}
# 5-活动广告
<!-- 5.活动列表 -->
<div class="adv-list clearfix">
<a href=""><img src="images/adv01.jpg" alt=""></a>
<a href=""><img src="images/adv02.jpg" alt=""></a>
<a href=""><img src="images/adv03.jpg" alt=""></a>
</div>
/* 5.活动列表 */
.adv-list{
width: 100%;
margin: 10px 0px;
}
.adv-list a{
display: block;
float: left;
width: 50%;
padding: 0px 5px;
}
.adv-list a:nth-child(n+2){
width: 25%;
border-left: 1px solid #e0e0e0;
}
.adv-list a img{
width: 100%;
}
# 6-商品列表
<!-- 6.商品列表 -->
<div class="good-list">
<div class="good-title"><img src="images/goods_title.jpg" alt=""></div>
<div class="good-list01 clearfix">
<a href="" class="clearfix">
<span>二手寻宝</span>
<span>跳蚤市场逛一逛</span>
<img src="images/goods.jpg" alt="">
<img src="images/goods.jpg" alt="">
</a>
<a href="" class="clearfix">
<span>二手寻宝</span>
<span>跳蚤市场逛一逛</span>
<img src="images/goods.jpg" alt="">
<img src="images/goods.jpg" alt="">
</a>
</div>
<div class="good-list02 clearfix">
<a href="">
<span>爱是一道光</span>
<span>绿到你发慌</span>
<img src="images/goods.jpg" alt="">
</a>
<a href="">
<span>爱是一道光</span>
<span>绿到你发慌</span>
<img src="images/goods.jpg" alt="">
</a>
<a href="">
<span>爱是一道光</span>
<span>绿到你发慌</span>
<img src="images/goods.jpg" alt="">
</a>
<a href="">
<span>爱是一道光</span>
<span>绿到你发慌</span>
<img src="images/goods.jpg" alt="">
</a>
</div>
</div>
/* 6.商品列表 */
.good-list{
width: 100%;
/* 解决底部栏固定定位脱标问题 */
margin-bottom: 44px;
}
/* 商品头部 */
.good-list .good-title{
width: 100%;
height: 35px;
background-color: #F5F5F5;
}
.good-list .good-title img{
display: block;
height: 100%;
margin: 0 auto;
}
/* 商品列表01 */
.good-list .good-list01{
width: 100%;
}
.good-list .good-list01 a{
display: block;
float: left;
width: 50%;
text-align: center;
}
.good-list .good-list01 a:nth-child(2){
border-left: 1px solid #e0e0e0;
}
.good-list .good-list01 a span{
display: block;
}
.good-list .good-list01 a span:nth-child(1){
font-size: 16px;
}
.good-list .good-list01 a span:nth-child(2){
color: #779CFF;
}
.good-list .good-list01 a img{
float: left;
width: 50%;
padding: 5px;
}
/* 商品列表02 */
.good-list .good-list02{
width: 100%;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.good-list .good-list02 a{
display: block;
float: left;
width: 25%;
text-align: left;
padding: 5px;
}
.good-list .good-list02 a:nth-child(n+2){
border-left: 1px solid #e0e0e0;
}
.good-list .good-list02 a span{
display: block;
}
.good-list .good-list02 a span:nth-child(1){
font-size: 16px;
}
.good-list .good-list02 a span:nth-child(2){
color: green;
}
.good-list .good-list02 a img{
width: 100%;
}
# 7-底部栏
<!-- 7.底部栏 -->
<div class="bottom-bar clearfix">
<a href=""><img src="images/icon_index.png" alt=""></a>
<a href=""><img src="images/icon_category.png" alt=""></a>
<a href=""><img src="images/icon_center.png" alt=""></a>
<a href=""><img src="images/icon_shopping.png" alt=""></a>
<a href=""><img src="images/icon_mime.png" alt=""></a>
</div>
/* 7.底部栏 */
.bottom-bar{
position: fixed;
bottom: 0px;
width: 100%;
height: 44px;
background-color: #fff;
}
.bottom-bar a{
float: left;
width: 20%;
}
.bottom-bar a img{
width: 44px;
height: 44px;
display: block;
margin: 0 auto;
}
# 完整的html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 移动端视口适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京东首页</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 版心容器 -->
<div class="container">
<!-- 1-搜索栏 -->
<div class="top-bar">
<a href="" class="menu"></a>
<input type="text" placeholder="商品名称">
<a href="" class="login">登录</a>
</div>
<!-- 2-banner栏 -->
<div class="banner">
<img src="images/slide.png" alt="">
</div>
<!-- 3.导航栏 -->
<div class="nav-bar">
<ul class="clearfix">
<li><a href=""><img src="images/nav01.png" alt=""><span>京东超市</span></a></li>
<li><a href=""><img src="images/nav02.png" alt=""><span>京东超市</span></a></li>
<li><a href=""><img src="images/nav03.png" alt=""><span>京东超市</span></a></li>
<li><a href=""><img src="images/nav04.png" alt=""><span>京东超市</span></a></li>
<li><a href=""><img src="images/nav05.png" alt=""><span>京东超市</span></a></li>
<li><a href=""><img src="images/nav06.png" alt=""><span>京东超市</span></a></li>
<li><a href=""><img src="images/nav07.png" alt=""><span>京东超市</span></a></li>
<li><a href=""><img src="images/nav08.png" alt=""><span>京东超市</span></a></li>
<li><a href=""><img src="images/nav09.png" alt=""><span>京东超市</span></a></li>
<li><a href=""><img src="images/nav10.png" alt=""><span>京东超市</span></a></li>
</ul>
</div>
<!-- 4.京东快报 -->
<div class="jd-news">
<span><span>热门 </span>价格太贵买不起</span>
<a href="">更多</a>
</div>
<!-- 5.活动列表 -->
<div class="adv-list clearfix">
<a href=""><img src="images/adv01.jpg" alt=""></a>
<a href=""><img src="images/adv02.jpg" alt=""></a>
<a href=""><img src="images/adv03.jpg" alt=""></a>
</div>
<!-- 6.商品列表 -->
<div class="good-list">
<div class="good-title"><img src="images/goods_title.jpg" alt=""></div>
<div class="good-list01 clearfix">
<a href="" class="clearfix">
<span>二手寻宝</span>
<span>跳蚤市场逛一逛</span>
<img src="images/goods.jpg" alt="">
<img src="images/goods.jpg" alt="">
</a>
<a href="" class="clearfix">
<span>二手寻宝</span>
<span>跳蚤市场逛一逛</span>
<img src="images/goods.jpg" alt="">
<img src="images/goods.jpg" alt="">
</a>
</div>
<div class="good-list02 clearfix">
<a href="">
<span>爱是一道光</span>
<span>绿到你发慌</span>
<img src="images/goods.jpg" alt="">
</a>
<a href="">
<span>爱是一道光</span>
<span>绿到你发慌</span>
<img src="images/goods.jpg" alt="">
</a>
<a href="">
<span>爱是一道光</span>
<span>绿到你发慌</span>
<img src="images/goods.jpg" alt="">
</a>
<a href="">
<span>爱是一道光</span>
<span>绿到你发慌</span>
<img src="images/goods.jpg" alt="">
</a>
</div>
</div>
<!-- 7.底部栏 -->
<div class="bottom-bar clearfix">
<a href=""><img src="images/icon_index.png" alt=""></a>
<a href=""><img src="images/icon_category.png" alt=""></a>
<a href=""><img src="images/icon_center.png" alt=""></a>
<a href=""><img src="images/icon_shopping.png" alt=""></a>
<a href=""><img src="images/icon_mime.png" alt=""></a>
</div>
</div>
</body>
</html>
# 完整的CSS代码
/* 版心 */
.container{
width: 100%;
/* 限制pc端版心范围 */
min-width: 320px;
max-width: 750px;
margin: 0 auto;
}
/* 1-搜索栏 */
.top-bar{
/* 固定定位相对于页面，想要居中显示也要限制版心范围 */
min-width: 320px;
max-width: 750px;
position: fixed;
top:0;
width: 100%;
height: 44px;
background-color: #E72E27;
padding: 0px 50px;
}
.top-bar .menu{
position: absolute;
left: 14px;
top:14px;
width: 20px;
height: 18px;
background: url(../images/jd_icons.png) no-repeat;
background-size: 250px 200px;
}
.top-bar input{
width: 100%;
height: 30px;
margin-top: 7px;
padding-left: 10px;
border-radius: 15px;
}
.top-bar .login{
position: absolute;
top: 14px;
right: 14px;
color: #fff;
}
/* 2-banner栏 */
.banner{
width: 100%;
/* 注意点：固定定位fixed会脱标
解决方案：设置元素margin撑开脱标的高度
*/
margin-top: 44px;
}
.banner img{
width: 100%;
}
/* 3.导航栏 */
.nav-bar{
width: 100%;
height: 175px;
}
.nav-bar ul{
width: 100%;
}
.nav-bar ul>li{
float: left;
width: 20%;
text-align: center;
}
.nav-bar ul>li img{
display: block;
width: 40px;
height: 40px;
margin: 10px auto 5px;
}
/* 4.京东快报 */
.jd-news{
width: 100%;
height: 16px;
background: url(../images/jd_icons.png) no-repeat 8px -22px;
background-size: 250px 200px;
text-align: center;
}
.jd-news>span>span{
color: red;
}
.jd-news a{
float: right;
padding: 0px 5px;
border-left: 1px solid #E0E0E0;
}
/* 5.活动列表 */
.adv-list{
width: 100%;
margin: 10px 0px;
}
.adv-list a{
display: block;
float: left;
width: 50%;
padding: 0px 5px;
}
.adv-list a:nth-child(n+2){
width: 25%;
border-left: 1px solid #e0e0e0;
}
.adv-list a img{
width: 100%;
}
/* 6.商品列表 */
.good-list{
width: 100%;
/* 解决底部栏固定定位脱标问题 */
margin-bottom: 44px;
}
/* 商品头部 */
.good-list .good-title{
width: 100%;
height: 35px;
background-color: #F5F5F5;
}
.good-list .good-title img{
display: block;
height: 100%;
margin: 0 auto;
}
/* 商品列表01 */
.good-list .good-list01{
width: 100%;
}
.good-list .good-list01 a{
display: block;
float: left;
width: 50%;
text-align: center;
}
.good-list .good-list01 a:nth-child(2){
border-left: 1px solid #e0e0e0;
}
.good-list .good-list01 a span{
display: block;
}
.good-list .good-list01 a span:nth-child(1){
font-size: 16px;
}
.good-list .good-list01 a span:nth-child(2){
color: #779CFF;
}
.good-list .good-list01 a img{
float: left;
width: 50%;
padding: 5px;
}
/* 商品列表02 */
.good-list .good-list02{
width: 100%;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.good-list .good-list02 a{
display: block;
float: left;
width: 25%;
text-align: left;
padding: 5px;
}
.good-list .good-list02 a:nth-child(n+2){
border-left: 1px solid #e0e0e0;
}
.good-list .good-list02 a span{
display: block;
}
.good-list .good-list02 a span:nth-child(1){
font-size: 16px;
}
.good-list .good-list02 a span:nth-child(2){
color: green;
}
.good-list .good-list02 a img{
width: 100%;
}
/* 7.底部栏 */
.bottom-bar{
position: fixed;
bottom: 0px;
width: 100%;
height: 44px;
background-color: #fff;
}
.bottom-bar a{
float: left;
width: 20%;
}
.bottom-bar a img{
width: 44px;
height: 44px;
display: block;
margin: 0 auto;
}
# 今日学习任务
- [ ] 01-flex伸缩布局
- [ ] 主轴方向flex-direction
- [ ] 主轴排列方式justify-content
- [ ] 次轴排列方式align-items
- [ ] 主轴换行方式aflex-wrap
- [ ] 多行排列方式:align-content
- [ ] 02-案例：携程网
# 01-flex伸缩布局
课外学习传送门:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool (opens new window)
以下这些属性是给父盒子设置属性 语法 描述 flex display:flex 让 父盒子成为伸缩盒子(加buff，变得比以前的盒子更牛逼)flex-direction flex-direction：cloumn (排列方式)让 子盒子垂直方向排列（默认水平）==justify-content== justify-content：center (对齐方式)让 子盒子主轴方向居中对齐（主轴默认水平）==align-items== align-items：center (对齐方式)让 子盒子次轴方向居中对齐（次轴默认垂直）==flex-wrap== flex-wrap：wrap 当子盒子总宽度>父盒子宽度，允许换行(默认不会换行，而是自动按比例分配) align-content align-content:center (对齐方式)每一行垂直方向居中对齐(只对多行有效，一行是无效的) 以下这些属性是给子盒子设置
| 属性 | 语法 | 描述 |
|---|---|---|
| aligin-self | aligin-self:center | 单独设置某一个子盒子的次轴对齐(vip特殊化) |
| order | order:1 | 单独设置子盒子的排列顺序（数字越大越靠后，默认都是0） |
| flex | flex:1 | 设置子盒子主轴方向尺寸 (1flex = 父元素宽度 / 子元素总flex。 类似于几个人切蛋糕，我要几份的意思。如果某个子元素设置了独立的width，则父盒子分蛋糕会先减去这个width) |
# 1.1-flex伸缩盒子布局介绍
1.什么是伸缩布局(弹性布局
Flexible Boxes)- Flexible意为可伸缩的，Boxes意为盒子。是CSS3中一种新的盒子模型-
伸缩盒子模型，由CSS3规范 (opens new window)提出，这是在原有的大家非常熟悉的block,inline-block,inline的基础上延伸出的新一代布局模式display:flex:让一个盒子变成伸缩盒子，这种布局方式叫做伸缩布局- 说人话：给一个盒子增加buff，让它功能变得更加强大
- Flexible意为可伸缩的，Boxes意为盒子。是CSS3中一种新的盒子模型-
2.伸缩布局特点
a.伸缩盒子最大的特点(优点)就是把空间以最合理高效的方式分配给每一个子盒子- ps：人人都有房子住，不会让你暴露街头(而overflow会让这个盒子多余的部分隐藏)
b.当伸缩盒子中所有的子元素总宽高大于flex伸缩盒子宽高时，子元素并不会超出 flex盒子，flex盒子会自动按照每一个子元素的宽高比例合理分配
需求：父盒子中有三个子盒子，这三个子盒子的宽度为父元素的三分之一
- 1.设置父盒子的
display:flex,变成伸缩盒子 - 2.设置三个子元素的
flex:1，表示盒子在排列方向尺寸比例为1
- 1.设置父盒子的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap{
width: 600px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
/* 设置父盒子为伸缩(弹性)盒子 */
display: flex;
/* 1.伸缩盒子最大的特点(优点)就是把空间以最合理高效的方式分配给每一个子盒子
* ps：人人都有房子住，不会让你暴露街头(overflow)
2.当伸缩盒子中所有的子元素总宽高大于flex伸缩盒子宽高时，子元素并不会超出
flex盒子，flex盒子会自动按照每一个子元素的宽高比例合理分配。
*/
}
.wrap>div{
/* 盒子在排列方向尺寸比例为1 */
flex: 1;
}
.box1{
background-color: red;
}
.box2{
background-color: yellow;
}
.box3{
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
# 1.2-flex伸缩盒子组成部分介绍
第一眼接触
伸缩盒子的时候，会觉得很多概念名词和属性特别多，难以理解和记忆- 这一切都在老师意料之中，所以我们换一种方式来介绍flex伸缩盒子的内容
1.有一个好人坤哥在深圳买了一套公寓楼(
flex伸缩盒子)分给哪些无家可归的人来居住，带阳台的大单间。（脑部一下我们自己住的公寓楼）- ==伸缩盒子三要素==
- 子盒子item：住户的房间
- 主轴main axis：房间的排列方向
- 次轴(交叉轴)cross axis:房间阳台的排列方向
- ==注意点:主轴和次轴一定是垂直的==
- ==伸缩盒子三要素==
2.坤哥的能力有限，只能买得起
1000*200(父盒子大小)平米的公寓楼,但是我也不确定住户有多少，不管怎么样大家都不容易，如果住的人少那每个人分的空间多一些，剩下的作为公摊面积，如果住的人多那每个人分的空间少一些，原则是：来了就是深圳人，来了就有房子住- ==伸缩盒子最大特点:按照比例合理分配==
在主轴方向上，如果子元素的总宽高超过父元素宽高时，并不会超出。而是父元素（flex伸缩盒子）会按照比例合理分配。- 例如：坤哥的公寓只有1000*200，住进来了三个人，1号房间班长，2号房间副班长，3号房间班花
- a.班长要住100 x 50平米盒子，副班长要住100 x 50平米盒子,班花要住100 x 50平米盒子
- 坤哥的1000 x 200公寓楼够他们住，多出来的部分就作为公摊面积，所以最终结果
1班长100*50，2副班长100*50，3班花100*50
- 坤哥的1000 x 200公寓楼够他们住，多出来的部分就作为公摊面积，所以最终结果
- b.班长要住800 x 500的房子，副班长要住800 x 300房子,班花要住400 x 100房子。
- 坤哥发现班长和副班长房子宽度一致，都是班花的两倍，于是将我那1000分成5份，班长占2份，副班长占2份，班花占1份。而高度虽然我的房子只有200，但是我可以把阳台改长一点尽量满足住户，于是最终结果是
1班长400*500，2副班长400*300，3班花200*100
- 坤哥发现班长和副班长房子宽度一致，都是班花的两倍，于是将我那1000分成5份，班长占2份，副班长占2份，班花占1份。而高度虽然我的房子只有200，但是我可以把阳台改长一点尽量满足住户，于是最终结果是
- a.班长要住100 x 50平米盒子，副班长要住100 x 50平米盒子,班花要住100 x 50平米盒子
- 例如：坤哥的公寓只有1000*200，住进来了三个人，1号房间班长，2号房间副班长，3号房间班花
- ==伸缩盒子最大特点:按照比例合理分配==
- 3.flex伸缩盒子常用属性
- (1)有住户投诉，房间朝向不好，住的不舒服
- 设置主轴方向:
flex-direction- 注意：主轴和次轴一定是垂直的，例如设置主轴为水平方向，次轴就是垂直方向。设置主轴垂直方向，次轴就是水平方向
- 设置主轴方向:
- (2)有住户投诉，房间挨得太近，没有隐私空间(希望调整房间排列方式)
- 设置主轴排列方式:
justify-content
- 设置主轴排列方式:
- (3)有住户投诉，阳台位置不合理，看不到外面风景(希望调整阳台排列方式)
- 设置次轴排列方式：
align-items
- 设置次轴排列方式：
- (4)有住户投诉，一排的房间太多了，住的不爽（希望能多排住）
- 设置主轴换行方式：
flex-wrap
- 设置主轴换行方式：
- (5)有住户请苏哥洗脚，希望能住上VIP房间(房间排列特殊化)
- 某个子元素单独设置对齐方式:
align-self
- 某个子元素单独设置对齐方式:
- (1)有住户投诉，房间朝向不好，住的不舒服
# 1.3-flex主轴与次轴flex-direction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap{
width: 600px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
/* 设置父盒子为伸缩(弹性)盒子 */
display: flex;
/*1.默认情况下，html中的块级元素排列方向为垂直方向，行内元素排列方向为水平方向
2.在flex伸缩布局中，可以通过flex-direction属性来设置元素排列方向
* 不想默认水平从左往右分房，想换个方向分房子就可以用这个属性
*/
/* a.默认：主轴方向为： 水平方向，从左往右 （此时垂直方向是次轴）*/
/* flex-direction: row; */
/* b.主轴方向为： 水平方向，从右往左 */
/* flex-direction: row-reverse; */
/* c.主轴方向为： 垂直方向，从上往下 （此时水平方向是次轴）*/
/* flex-direction: column; */
/* d.主轴方向为： 垂直方向，从下往上 */
flex-direction: column-reverse;
}
.wrap>div{
/* 盒子在排列方向尺寸比例为1 */
flex: 1;
}
.box1{
background-color: red;
}
.box2{
background-color: yellow;
}
.box3{
background-color: green;
}
.box4{
background-color: purple;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>
</body>
</html>
# ==1.4-flex主轴排列方式justify-content==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap{
width: 600px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
/* 1.设置父盒子为伸缩(弹性)盒子 */
display: flex;
/* 2.默认：主轴方向为： 水平方向，从左往右 （此时垂直方向是次轴）*/
flex-direction: row;
/*
3.justify-contents:设置子盒子在主轴方向的对齐方式
* 默认flex会按照比例分配把大房子全部挤满，毫无隐私。
如果希望房子定额分配（固定面积），多出来的部分作为公共区域则可以使用这个属性
* 如果设置了父盒子这个属性，则子元素不能设置flex属性，否则会失效
*/
/* start:主轴起始方向 end：主轴结束方向 */
/* a.默认：左对齐 */
/* justify-content: flex-start; */
/* b.右对齐 */
/* justify-content: flex-end; */
/* c.居中 */
/* justify-content: center; */
/* d.两端对齐，元素间隔相等 */
/* justify-content:space-between; */
/* e.每个元素左右两边间隔相等（中间元素就是两倍间隔） */
justify-content: space-around;
}
.wrap>div{
width: 100px;
height: 50px;
}
.box1{
background-color: red;
}
.box2{
background-color: yellow;
}
.box3{
background-color: green;
}
.box4{
background-color: purple;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>
</body>
</html>
# ==1.5-flex次轴排列方式align-items==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap{
width: 600px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
/* 1.设置父盒子为伸缩(弹性)盒子 */
display: flex;
/* 2.默认：主轴方向为： 水平方向，从左往右 （此时垂直方向是次轴）*/
flex-direction: row;
/*3.justify-contents:设置子盒子在主轴方向的对齐方式*/
/* 两端对齐，元素间隔相等 */
justify-content: space-between;
/*4.align-items:设置子盒子在次轴方向的对齐方式
*/
/* a.默认值：作用是如果子盒子没有设置高度则拉伸至父盒子高度 */
/* align-items: stretch; */
/* b.从次轴起始方向对齐，默认顶部 */
align-items: flex-start;
/* c.从次轴结束方向对齐，默认底部 */
align-items: flex-end;
/* d.中心对齐 */
align-items: center;
/* e.第一行文字基线对齐（了解即可） */
align-items: baseline;
}
.wrap>div{
width: 100px;
height: 50px;
}
.box1{
background-color: red;
}
.box2{
background-color: yellow;
}
.box3{
background-color: green;
}
.box4{
background-color: purple;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>
</body>
</html>
# ==1.6-flex主轴换行方式flex-wrap==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap{
width: 600px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
/* 1.设置父盒子为伸缩(弹性)盒子 */
display: flex;
/* 2.默认：主轴方向为： 水平方向，从左往右 （此时垂直方向是次轴）*/
flex-direction: row;
/*3.justify-contents:设置子盒子在主轴方向的对齐方式*/
justify-content: flex-start;
/*4.align-items:设置子盒子在次轴方向的对齐方式 */
align-items: stretch;
/* 5.flex-wrap:设置子盒子在主轴方向的对齐方式
* 设置flex-wrap换行后，每个子元素上下会有默认间距
* 解决方案：设置父盒子高度 = 子盒子高度 * 行数
*/
/* a.默认值：子盒子强制一行显示 */
flex-wrap: nowrap;
/* b.wrap:换行，第一行在上方 */
flex-wrap: wrap;
/* c.wrap-reverse:换行，第一行在下方 */
flex-wrap: wrap-reverse;
}
.wrap>div{
width: 100px;
height: 150px;
}
.box{
background-color: green;
border: 2px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
</body>
</html>
# 1.7-flex多行排列方式align-content
该属性只对多行子元素起作用，如果只有一行则设置无效
# 1.8-flex其他属性介绍(aligen-self、order)
align-self与order属性都不是给flex盒子设置的，而是给它的子盒子- align-self:设置单个子元素在次轴方向的对齐方式，作用是覆盖父元素的align-items
- order:设置子元素的排序方式，默认值都是0，从小到大排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap{
width: 600px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
/* 1.设置父盒子为伸缩(弹性)盒子 */
display: flex;
/* 2.默认：主轴方向为： 水平方向，从左往右 （此时垂直方向是次轴）*/
flex-direction: row;
/*3.justify-contents:设置子盒子在主轴方向的对齐方式*/
justify-content: flex-start;
/*4.align-items:设置子盒子在次轴方向的对齐方式 */
align-items: stretch;
/* 5.flex-wrap:设置子盒子在主轴方向的对齐方式*/
flex-wrap: wrap;
/* 6.align-content:设置多行子盒子在次轴方向的对齐方式 */
align-content: stretch;
/* 7.align-self:设置单个子元素对齐方式
* 改属性不是给flex盒子设置的，而是给子元素设置
* 作用：覆盖父元素的对齐方式align-items
*/
/* 8.order:用于子元素的排序
规则：默认都是0，从小到大排序
这个属性也是给子元素设置的
*/
}
.wrap>div{
width: 100px;
height: 50px;
}
.box{
background-color: green;
border: 2px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box" style="order:2">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box" style="order:1">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box" style="align-self:flex-end">10</div>
</div>
</body>
</html>
# 1.9-子盒子flex属性介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrap{
width: 1000px;
height: 300px;
border: 1px solid red;
margin: 100px auto;
/* 1.伸缩布局： 本质就是给盒子加buff，专治不服：百分比+浮动实现比较麻烦的需求
如何使用： 设置盒子display 为flex
2.伸缩布局三要素
子元素：住户
主轴：住户排列方式（默认水平）
次轴：阳台方向
*/
display: flex;
}
.box1{
/* 1flex = 父元素宽度 / 子元素总flex
注意：设置了flex，设置宽度没用
*/
background-color: red;
flex: 2;/* 子元素宽度比例：切蛋糕 */
}
.box2{
background-color: green;
flex: 1;
width: 100px;/* 无效 */
}
.box3{
background-color: hotpink;
width: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
# 02-伸缩布局案例：携程首页
# 1.1-background-size属性详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a{
width: 180px;
height: 180px;
display: block;
border: 1px solid black;
background: url(hotal.png) no-repeat center bottom ;
/* contain:图片都不会拉伸，会等比例缩放(图片一定会全部显示，但是盒子会有空白)
盒子尺寸 < 图片尺寸： 图片等比缩小
盒子尺寸 > 图片尺寸： 图片等比放大
常用
*/
background-size: contain;
/* corver:图片都不会拉伸，会等比例缩放(图片一定会铺满盒子，但是图片部分区域不可见) */
/* background-size: cover; */
}
</style>
</head>
<body>
<a href=""></a>
</body>
</html>
# 1.2-携程首页
# 完整html代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/index.css"></head><body> <div class="container"> <!-- 1-搜索栏 --> <div class="top-bar"> <div> <i class="icon-search"></i> <input type="text" placeholder="搜索：目的地"> </div> <a href=""> <i class="icon-user"></i> <span>我的</span> </a> </div> <!-- 2.banner栏 --> <div class="banner"> <a href=""><img src="images/banner.png" alt=""></a> </div> <!-- 3.导航栏 --> <div class="nav-bar"> <a href=""> <span class="icon"></span> <span>一日游</span> </a> <a href=""> <span class="icon"></span> <span>一日游</span> </a> <a href=""> <span class="icon"></span> <span>一日游</span> </a> <a href=""> <span class="icon"></span> <span>一日游</span> </a> <a href=""> <span class="icon"></span> <span>一日游</span> </a> </div> <!-- 4.网格栏 --> <div class="grid"> <div class="item"> <div class="left"> <a href="">酒店</a> </div> <div class="right"> <a href="">酒店</a> <a href="">酒店</a> </div> <div class="right"> <a href="">酒店</a> <a href="">酒店</a> </div> </div> <div class="item"> <div class="left"> <a href="">酒店</a> </div> <div class="right"> <a href="">酒店</a> <a href="">酒店</a> </div> <div class="right"> <a href="">酒店</a> <a href="">酒店</a> </div> </div> <div class="item"> <div class="left"> <a href="">酒店</a> </div> <div class="right"> <a href="">酒店</a> <a href="">酒店</a> </div> <div class="right"> <a href="">酒店</a> <a href="">酒店</a> </div> </div> </div> <!-- 5.热门活动 --> <div class="adv-list"> <a href=""><img src="images/1.jpg" alt=""></a> <a href=""><img src="images/2.jpg" alt=""></a> <a href=""><img src="images/3.jpg" alt=""></a> <a href=""><img src="images/4.jpg" alt=""></a> </div> </div></body></html>
# 完整css代码
.container{ width: 100%;}/* 1.顶部搜索栏 */.top-bar{ position: fixed; top: 0px; width: 100%; height: 44px; background-color: #eee; padding: 5px; /* 设置父元素为伸缩盒子 */ display: flex;}.top-bar div{ flex: 1; background-color: #fff; border-radius: 22px; padding-left: 10px;}.top-bar input{ /* 细节：input有一个默认宽度，一般会设置父元素的90%(不能超过圆角)*/ width: 90%; height: 100%;}.top-bar a{ width: 50px; display: block; /* 文字水平居中 */ text-align: center;}.top-bar a>i{ background-color: #2eaae0; border-radius: 12px; font-size: 24px; color: #fff;}.top-bar span{ display: block; color: #2eaae0;}/* 2-banner栏 */.banner{ width: 100%;}.banner img{ width: 100%;}/* 3.导航栏 */.nav-bar{ width: 100%; /* 设置父元素为伸缩盒子 */ display: flex;}.nav-bar a{ display: block; flex: 1; text-align: center;}.nav-bar a .icon{ width: 32px; height: 32px; display: block; margin: 10px auto 5px; background: url(../images/nav_local.png) no-repeat; background-size: 32px 160px;}/* 选中第二个a元素 中的 icon */.nav-bar a:nth-child(2) .icon{ background-position-y: -32px;}.nav-bar a:nth-child(3) .icon{ background-position-y: -64px;}.nav-bar a:nth-child(4) .icon{ background-position-y: -96px;}.nav-bar a:nth-child(5) .icon{ background-position-y: -128px;}/* 4-网格栏 */.grid{ width: 100%; padding: 10px; }.grid .item{ width: 100%; height: 88px; background: linear-gradient(to right,#fa5956,#fa9b4d); display: flex;}.grid .item div{ /* 宽度方向等分 */ flex: 1; height: 100%; }.grid .item div a{ height: 50%; display: block; text-align: center; color: #fff; line-height: 44px;}.grid .item .left{ background: url(../images/hotel.png) no-repeat center bottom; background-size: contain; }.grid .item div:nth-child(1) a{ height: 100%; display: block;}.grid .item div:nth-child(n+2) a{ border-left: 1px solid #fff; border-bottom: 1px solid #fff;}/* 下面两个item */.grid .item:nth-child(2){ background: linear-gradient(to right,#4b8fe6,#53bced); margin-top: 5px;}.grid .item:nth-child(2) .left{ background: url(../images/flight.png) no-repeat center bottom; background-size: contain;}.grid .item:nth-child(3){ margin-top: 5px; background: linear-gradient(to right,#34c2aa,#6cd557);}.grid .item:nth-child(3) .left{ background: url(../images/travel.png) no-repeat center bottom; background-size: contain;}/* 5.热门活动 */.adv-list{ width: 100%; /* 设置父盒子为伸缩盒子 */ display: flex; /* 1.发现问题 ： 每一个a标签宽度50%失效 2.分析问题 ： 伸缩盒子子元素总宽度 > 父元素宽度，会合理分配（挤一挤） 3.解决方案： 设置 flex-wrap允许换行 */ flex-wrap: wrap;}.adv-list a{ display: block; width: 50%;}.adv-list a img{ width: 100%;}
# 今日任务
# 网页布局 - 第5天
以 UI 设计稿为参考，基于媒体查询和长度单位相关知识编写适应多种屏幕尺寸的网页，样式编写中应用预处理器提升开发效率降低维护成本。
- 能够利用媒体查询动态调整页面样式
- 知道 CSS 中常见的长度单及特征
- 能够结合媒体查询和长度单位归纳适配方案
- 掌握 Less 的基础语法及使用
# 一、媒体查询
了解媒体查询的基本特征，能利用媒体查询的特征编写响应式网页样式
所谓的媒体查询本质上是有条件的执行 CSS 样式，条件满足则执行 CSS 样式，否则不会被执行。
# 1.1 术语
- 媒体类型
媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。
| 类型名称 | 值 | 描述 |
|---|---|---|
| 屏幕 | screen | 带屏幕的设备 |
| 打印预览 | 打印预览模式 | |
| 阅读器 | speech | 屏幕阅读模式 |
| 不区分类型 | all | 默认值，包括以上3种情形 |
- 媒体特性
媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。
| 特性名称 | 属性 | 值 |
|---|---|---|
| 视口的宽和高 | width、height | 数值 |
| 视口最大宽或高 | max-width、max-height | 数值 |
| 视口最小宽或高 | min-width、min-height | 数值 |
| 屏幕方向 | orientation | portrait 或 landscape |
- 逻辑符
连接媒体和媒体特性的固定词语，分别为 not、only、and。
# 1.2 语法
通过 @media 来定义媒体查询的条件：
/* 媒体查询完整语法 */
@media 逻辑词 媒体类型 and (媒体特性) and (媒体特性) {
/* 任意 css 样式 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询 - 语法</title>
<style>
/*
这段代码的含义是：
媒体类型只能为 screen
并且视口的宽度为 640px
body 的背景色为粉色
*/
@media only screen and (width: 640px) {
body {
background-color: pink;
}
}
/*
这段代码的含义是：
媒体类型除了 screen
并且视口的宽度为 640px
body 的背景色为粉色
*/
@media not screen and (width: 640px) {
body {
background-color: pink;
}
}
/* not 和 only 可以被省略！！！ */
/* 媒体类型可以被省略 */
@media (width: 640px) {
body {
background-color: pink;
}
}
</style>
</head>
<body>
</body>
</html>
- 检测视口的宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询 - 语法</title>
<style>
/*
这段代码的含义是：
当视口宽度为 640px 且 高度为 720px，body 的背景色为蓝色
*/
@media only screen and (width: 640px) and (height: 720px) {
body {
background-color: blue;
}
/* 在些还可以更多其它任意的 css */
}
/* only screen 可以被省略 */
/* 在移动端使用时，注意视口默认的宽度为 980px */
/* 要满足媒体查询条件需要设置适合的视口 */
</style>
</head>
<body>
</body>
</html>
- 检测视口的最大宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询 - 视口的最大宽度和高度</title>
<style>
/*
这段代码的含义是：
当视口宽度小于等于 640px 且 高度小于等于 720px，body 的背景色为蓝色
*/
@media only screen and (max-width: 640px) and (max-height: 720px) {
body {
background-color: blue;
}
/* 在些还可以更多其它任意的 css */
}
/* only screen 可以被省略 */
/* 在移动端使用时，注意视口默认的宽度为 980px */
/* 要满足媒体查询条件需要设置适合的视口 */
</style>
</head>
<body>
</body>
</html>
- 检测视口的最小宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询 - 视口的最小宽度和高度</title>
<style>
/*
这段代码的含义是：
当视口宽度大于等于 640px 且 高度大于等于 720px，body 的背景色为蓝色
*/
@media only screen and (min-width: 640px) and (min-height: 720px) {
body {
background-color: blue;
}
/* 在些还可以更多其它任意的 css */
}
/* only screen 可以被省略 */
/* 在移动端使用时，注意视口默认的宽度为 980px */
/* 要满足媒体查询条件需要设置适合的视口 */
</style>
</head>
<body>
</body>
</html>
- 检测屏幕的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询 - 视口的最小宽度高度</title>
<style>
/*
这段代码的含义是：
当屏幕坚屏状态时，背景色为蓝色
*/
@media only screen and (orientation: portrait) {
body {
background-color: blue;
}
/* 在些还可以更多其它任意的 css */
}
/*
这段代码的含义是：
当屏幕横屏状态时，背景色为红色
*/
@media only screen and (orientation: landscape) {
body {
background-color: red;
}
/* 在些还可以更多其它任意的 css */
}
/* only screen 可以被省略 */
</style>
</head>
<body>
</body>
</html>
注：实际应用中大部分情况只需要检测视口的宽度，检测高度的情形比较少，另外检测视口最大宽和最小宽比直接检测宽度更灵活。
# 二、长度单位
了解 CSS 中不同长度单位的特征，基于 rem 长度单位的特征结合媒体查询归纳移动屏幕适配方案。
CSS 中提供了许多长度的单位，如 px、em、rem、vw、vh等。
# 2.1 em
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长度单位 - em</title>
<style>
.em {
width: 10em;
height: 5em;
padding: 0.5em;
background-color: pink;
font-size: 18px;
}
</style>
</head>
<body>
<h4>长度单位 em</h4>
<div class="em">em长度单位参考当前元素字号的大小</div>
</body>
</html>
特征：em 长度单位大小参照当前元素字号的大小。
# 2.2 rem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>长度单位 - rem</title>
<style>
.rem {
width: 10rem;
height: 4rem;
padding: 1rem;
background-color: pink;
}
</style>
</head>
<body>
<h4>长度单位 rem</h4>
<div class="rem">rem长度单位始始参考html写号的大小</div>
</body>
</html>
特征：rem 长度单位大小始终参照 html 元素字号的大小。
# 2.3 vw/vh
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>长度单位 - vw/vh</title> <style> .vw { width: 50vw; height: 2vw; padding: 1vw; background-color: pink; } .vh { width: 60vh; height: 3vh; padding: 1vh; background-color: pink; } </style></head><body> <h4>长度单位 vw</h4> <div class="vw">vw 相对于当前视口宽度的百分之一。</div> <h4>长度单位 vh</h4> <div class="vh">vh 相对于当前视口高度的百分之一。</div></body></html>
特征：vw 、vh 长度单位分别参照视口的宽度和高度。
# 2.4 移动适配
开发中 UI 会提供某个固定尺寸的设计稿，前端人员基于这个设计稿编写网页，保证网页在不同的尺寸屏幕下显示的比例关系一致！
rem 长度单位始终以 html 字号大小为参考，结合媒体查询为不同视口宽度的屏幕指定不同的字号大小，这样便可以保证网页元素依据视口的变化而自动切换大小尺寸了，如下代码所示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>移动适配</title> <style> /* 结合媒体查询 为不同大小的视口设置不同的字号 */ @media (min-width: 320px) { html { font-size: 20px; } } @media (min-width: 375px) { html { font-size: 24px; } } @media (min-width: 414px) { html { font-size: 28px; } } @media (min-width: 750px) { html { font-size: 32px; } } .box { width: 10rem; height: 10rem; padding: 1rem; background-color: pink; } </style></head><body> <h3>移动适配</h3> <p>结合媒体查询和长度单位归纳总结手机适配方案，保证网页根据手机屏幕大小自动调整元素的尺寸。</p> <!-- 在模拟器切换手机型号，此盒子大小会自动调整 --> <div class="box"></div></body></html>
总结：
- 为了保证移动设备网页正常显示必须设置
viewport - 屏幕适配基本的原则是大屏幕的
html设置较大的字号，小屏幕的html设置较小的字号 - 基于固定尺寸的设计稿确定比例系数，然后基于该系数计算
rem的值 - 企业开发中移动端 UI 设计稿尺寸以 750px 为标准
注：vw 长度单位的大小依据视口的宽度，实际上 vw = rem + 媒体查询。
# 三、css预处理器
学习预处理器的基本语法及使用，为 CSS 扩展处理逻辑的能力，提升开发效率。
预处理器能够为 CSS 提供创建变量以及运算、嵌套、混入等逻辑处理的能力，能够提升 CSS 的开发效率，降低维护成本，常见的预处理器有 less、sass，我们本次课以 less 为重点展开学习。
Less 是 CSS 预处理器的一种，要编写 Less 只需创建以 .less 的文件即可。
# 3.1 编译
浏览器并不能直接识别 .less 文件中的 css 代码，在使用 less 之前必须先将 .less 文件转换为 .css 文件，这需要借助于 VS Code 插件实现。
- 创建
.less结尾的文件 - 在 VS Code 中安装 Easy LESS 插件
- 简单配置 Easy Less 插件
# 3.2 变量 存储数据
在 Less 中创建变量能够提高样式编写的灵活度。
// 创建变量@color: 'red';@width: 100px;body { // 引用变量 color: @color;}.box { // 基于变量的运算 width: @width * 2; height: 100 / 2px; border: 1px solid @color;}
总结：
@是 Less 中创建变量的标识- Less 中能够支持加减乘除的运算
- Less 中百分百支持原生 CSS
- Less 中 // 为注释符号
# 3.3 嵌套
在 Less 中依据 CSS 选择器的层级关系进行嵌套，明确样式编写的结构性，降低码的维护成本。
.nav { width: 400px; height: 40px; a { text-decoration: none; color: #333; &:hover { color: #000; } }}
总结：
- 以 CSS 选择器的层级关系为依据确定 Less 中的嵌套关系
&符号特指当前层级的选择器
# 3.4 混合
LESS 中的混合允许将样式代码进行封装。
// 混合.box-radius(@radius: 5px) { -webkit-border-radius: @radius; -ms-border-radius: @radius; border-radius: @radius;}.panel { width: 600px; height: 30px; border: 1px solid #ccc; .box-radius(10px);}
总结：
- 混入可根据需要封装任何样式代码
- 使用混入时允许传参数
# 3.5 导入
@import 关键字导入公共独立的 .less 文件。
@import './base.less';@import './adapter.less';
扩展：Sass 也是预处理器的一种，Sass 的基本语法与 Less 类似。
# 四. 动态修改html字体大小为屏幕 1/10
在实际开发中，一般公司都会设置 1rem = 1/10屏幕宽度也有的公司会设置1rem = 1/20屏幕宽度
也有的公司会设置1rem = 1/100 屏幕宽度
这个rem的值无论是多少，都不影响它本身的作用：同时适配宽度和高度。所以还是那句话，怎么舒服怎么来
这里是淘宝内部解释为什么淘宝的开发团队将rem设置为 1/10 屏幕宽度(其实是为了以后能够兼容vw和vh)
- https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
rem布局注意点
- a.一般使用rem布局，都需要设置html字体大小
- b.实际开发中，一般设置 html字体大小 = 1/10 屏幕宽度
也就是说，通过动态设置html字体大小，实现 1rem = 1/10 屏幕宽度
- c.动态设置html字体大小为手机当前屏幕 1/10的两种方式
- 1.使用js代码（推荐）
- 2.使用css媒体查询
- 由于实际开发中一般使用js代码来动态设置html字体大小，实现1rem = 1/10 屏幕宽度，
- 由于暂时未接触js语言，所以这里老师提前写好一个js文件，我们开发时只需要导入即可
- 由于实际开发中一般使用js代码来动态设置html字体大小，实现1rem = 1/10 屏幕宽度，
# 今日学习任务
- [ ] 01-响应式布局
- [ ] 响应式布局原理
- [ ] 媒体查询
- [ ] 练习：媒体查询实现响应式布局
- [ ] 02-案例：Bootstrap官网
- [ ] 响应式布局思路
# 01-响应式布局与媒体查询
1.响应式布局介绍 ：一个HTML页面适配多个不同的设备（手机，ipad,PC）
优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）
缺点 ： 不便于维护（响应式布局其实是把多个页面的css写在了一个HTML中，造成css代码冗余）
2.响应式布局核心原理 ： 使用媒体查询技术 根据不同的设备尺寸 加载不同的样式
3.媒体查询语法
a.标准语法 : @media screen and (设备尺寸){ css样式 }
简写: @media(设备尺寸){ css样式 }
b.区间查询
设备尺寸>=区间 ： @media(min-width:1200px){ css样式 }
设备尺寸<=区间 ： @media(max-width:1200px){ css样式 }
c.常见的四种设备尺寸
大PC >=1200px body红色
小pc/ipad pro 992-1200px body橙色
平板(ipad) 768-992 body黄色
手机(iphne) <768 body绿色
4.响应式布局应用场景 ：
a. 页面复杂 : 不推荐使用响应式 （电商类）
b. 页面简单 ： 推荐使用响应式 （技术博客类 bootstrap官网）
5.实际开发响应式布局流程 ：
（1）先写1200px的默认样式 （响应式布局以PC端为准）
（2）使用媒体查询根据设备尺寸覆盖默认样式
# 1.1-响应式布局介绍
1.响应式布局：一个页面适配多个不同终端（pc、移动端、平板端）
2.响应式布局核心原理：
根据不同的屏幕尺寸加载不同的样式- 25个经典的响应式布局网站:http://www.daqianduan.com/4614.html?tdsourcetag=s_pcqq_aiomsg (opens new window)
- 国内最经典的响应式布局网站：http://www.bootcss.com/ (opens new window)
- bootstrap是国内一流的响应式布局框架，也是本阶段的一个核心知识点
3.响应式布局的优缺点及适用场景
- 优缺点
- 优点：
全适配:可以制作全适配的网页，就是一个网页可以同时适配PC端和移动端，而不同写两套页面。 - 缺点：
不便于维护:需要写大量的css代码，相当于把PC端和移动端的css代码写到一个文件中，然后根据屏幕尺寸加载对应的代码。
- 优点：
- 适用场景
- 适合：
网页结构简单:通常是专题类网站，例如一些播客专题类https://www.csdn.net/ (opens new window)，技术专题类http://www.bootcss.com/ (opens new window) - 不适合：
网页结构复杂:比如电商类(京东、淘宝、天猫)，这些网站由于结构很复杂，使用响应式开发维护起来特别麻烦，反而是做两套页面分别适配PC端与移动端更方便
- 适合：
- 如何区分一个网站是否使用了响应式布局：
谷歌控制台切换到移动端，然后刷新网页- 如果PC端和移动端网址一样：说明使用了响应式布局
- 如果PC端和移动端网址不一样：说明没有使用响应式布局，而是做两套页面匹配PC端和移动端
- 优缺点
# 媒体查询
- 1.
作用：媒体查询@media是css3中新增的功能，它的作用是可以针对不同的媒体类型定义不同的样式 - 2.语法：
@media 媒体类型 and (媒体特征){ css样式代码 }- 例如：
@media screen and (width:700px){ css样式代码}- 意思： 如果屏幕的宽度是700px，就加载大括号里面的css样式
- 例如：
@media screen and (max-width:700px){ css样式代码}- 意思：如果屏幕的最大宽度不超过700px（言外之意就是屏幕宽度 <= 700px）,就加载大括号里面的css样式
- 例如：
@media screen and (min-width:1000px) and (max-width:1200px){ css样式代码}- 意思：如果屏幕宽度范围 在[1000到1200]之间，就加载大括号里面的样式
- 例如：
- 3.语法注意点:==and左右两边的空格不能省略==
- 媒体类型：具体可查询w3c文档，实际开发最最最常用的就是screen，表示屏幕
- all：所有设备
- print：打印设备，用于打印机以及打印预览
- screen：用于电脑，平板电脑，手机的屏幕
- 媒体特征：非常的多，但是常用的就下面这2个
max-width:宽度值- 意思：屏幕的宽度不超过设置的宽度值，也就是说 屏幕宽度 <= 宽度值
min-width:宽度值- 意思：屏幕的宽度不小于设置的宽度值，也就是说 屏幕宽度 >= 宽度值
- 如果不设置媒体类型，则默认为screen，所以上面的语法可以简写成
@media(max-width:700px){ css样式代码 }
- 媒体类型：具体可查询w3c文档，实际开发最最最常用的就是screen，表示屏幕
- 1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
1.流式布局 ： 宽度适用百分比，高度使用px
应用场景 ： 只适配宽度
2.伸缩布局 ： display:flex
应用场景 ： 多列布局（浮动+百分比搞不定）
3.rem布局 ：同时适配宽度 + 高度
应用场景 ： 需要适配高度 + 文字大小
4.响应式布局 ：一个HTML页面适配多个不同的设备（手机，PC）
-->
<!--
1.响应式布局介绍 ：一个HTML页面适配多个不同的设备（手机，PC）
优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）
缺点 ： 不便于维护（响应式布局其实是把多个页面的css写在了一个HTML中，造成css代码冗余）
2.响应式布局核心原理 ： 使用媒体查询技术 根据不同的设备尺寸 加载不同的样式
3.媒体查询语法
a.标准语法 : @media screen and (设备尺寸){ css样式 }
简写城市: @media(设备尺寸){ css样式 }
b.区间查询
@media(min-width:尺寸){ >=尺寸 }
@media(max-width:尺寸){ <=尺寸 }
c.常见的四种设备尺寸
4.响应式布局应用场景 ：
a. 页面复杂 : 不推荐使用响应式 （电商类）
b. 页面简单 ： 推荐使用响应式 （技术博客类 bootstrap官网）
5.实际开发响应式布局流程 ：
-->
<style>
/* 标准语法 */
/* 当设备宽度 = 1200px时，大括号中的样式生效 */
@media screen and (width:1200px){
/* css样式 */
body{
background-color: red;
}
}
/* 简写语法 */
@media(width:1200px){
/* css样式 */
body{
background-color: green;
}
}
</style>
</head>
<body>
</body>
</html>
# 1.2-媒体查询语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
1.流式布局 ： 宽度适用百分比，高度使用px
应用场景 ： 只适配宽度
2.伸缩布局 ： display:flex
应用场景 ： 多列布局（浮动+百分比搞不定）
3.rem布局 ：同时适配宽度 + 高度
应用场景 ： 需要适配高度 + 文字大小
-->
<!--
1.响应式布局介绍 ：一个HTML页面适配多个不同的设备（手机，PC）
优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）
缺点 ： 不便于维护（响应式布局其实是把多个页面的css写在了一个HTML中，造成css代码冗余）
2.响应式布局核心原理 ： 使用媒体查询技术 根据不同的设备尺寸 加载不同的样式
3.媒体查询语法
a.标准语法 : @media screen and (设备尺寸){ css样式 }
简写城市: @media(设备尺寸){ css样式 }
b.区间查询
设备尺寸>=区间 ： @media(min-width:1200px){ css样式 }
设备尺寸<=区间 ： @media(max-width:1200px){ css样式 }
c.常见的四种设备尺寸
4.响应式布局应用场景 ：
a. 页面复杂 : 不推荐使用响应式 （电商类）
b. 页面简单 ： 推荐使用响应式 （技术博客类 bootstrap官网）
5.实际开发响应式布局流程 ：
-->
<style>
/* a. 标准语法 */
/* 当设备宽度 = 1200px时，大括号中的样式生效 */
@media screen and (width:1200px){
/* css样式 */
body{
background-color: red;
}
}
/* b. 简写语法 */
@media(width:1200px){
/* css样式 */
body{
background-color: green;
}
}
/* c.区间查询语法
@media(min-width:1200px){ css样式 }:设备宽度最小值不小于1200px的时候生效（说人话：设备宽度>=1200px）
@media(max-width:1200px){ css样式}: 设备宽度最大值不大于1200px的时候生效（说人话： 设备宽度<=1200px）
*/
@media(min-width: 1200px){
body{
background-color: pink;
}
}
@media(max-width:1200px){
body{
background-color: skyblue;
}
}
</style>
</head>
<body>
</body>
</html>
# 1.3-媒体查询练习
- 常见的媒体尺寸见下图(了解即可):实际开发以产品需求为准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 实体开发中媒体查询的区别分别对应的是四种设备
设备 屏幕范围 媒体查询语法 需求
大pc（台式机） >= 1200px 红色
小pc(笔记本，ipadPro) 992px-1200px 橙色
平板(ipad) 768px-992px 黄色
手机(ihone) <=768px 绿色
*/
/* >= 1200px */
@media(min-width:1200px){
body{
background-color: red;
}
}
/* 992-1200 */
@media(min-width:992px) and (max-width:1200px){
body{
background-color: orange;
}
}
/* 768-992 */
@media(min-width:768px) and (max-width:992px){
body{
background-color: yellow;
}
}
/* <= 768 */
@media(max-width:768px){
body{
background-color: green;
}
}
</style>
</head>
<body>
</body>
</html>
# 1.4-响应式布局场景1：多列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
1.响应式布局介绍 ：一个HTML页面适配多个不同的设备（手机，ipad,PC）
优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）
缺点 ： 不便于维护（响应式布局其实是把多个页面的css写在了一个HTML中，造成css代码冗余）
2.响应式布局核心原理 ： 使用媒体查询技术 根据不同的设备尺寸 加载不同的样式
3.媒体查询语法
a.标准语法 : @media screen and (设备尺寸){ css样式 }
简写城市: @media(设备尺寸){ css样式 }
b.区间查询
设备尺寸>=区间 ： @media(min-width:1200px){ css样式 }
设备尺寸<=区间 ： @media(max-width:1200px){ css样式 }
c.常见的四种设备尺寸
大PC >=1200px body红色
小pc/ipad pro 992-1200px body橙色
平板(ipad) 768-992 body黄色
手机(iphne) <768 body绿色
4.响应式布局应用场景 ：
a. 页面复杂 : 不推荐使用响应式 （电商类）
b. 页面简单 ： 推荐使用响应式 （技术博客类 bootstrap官网）
5.实际开发响应式布局流程 ：
（1）先写1200px的默认样式 （响应式布局以PC端为准）
（2）使用媒体查询根据设备尺寸覆盖默认样式
-->
<style>
.container {
width: 100%;
}
.container .box {
float: left;
width: 23%;
height: 200px;
margin: 50px 1%;
background-color: green;
}
/* 992-1200 */
/* 只要小于1200px : 3列
注意点：
(1)媒体查询覆盖样式 ： 只需要覆盖不同的样式， 如果是一样的样式就不用覆盖
(2)覆盖样式 ： 需要注意权重问题
*/
@media(max-width:1200px) {
.container .box {
width: 31.33%;
background-color: orange;
}
}
/* 768-992 */
@media(max-width:992px){
.container .box{
width: 48%;
background-color: yellow;
}
}
/* <768 */
@media(max-width:768px){
.container .box{
width: 60%;
margin: 50px 20%;
background-color: pink;
}
}
</style>
</head>
<body>
<!-- 需求 ：
>1200px 4列
992-1200 3列
768-992 2列
<768 1列
-->
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
# 1.5-响应式布局场景2 ： 双版心布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
1.响应式布局介绍 ：一个HTML页面适配多个不同的设备（手机，ipad,PC）
优点 ： 全适配 （一个HTML文件就可以适配所有的屏幕 ）
缺点 ： 不便于维护（响应式布局其实是把多个页面的css写在了一个HTML中，造成css代码冗余）
2.响应式布局核心原理 ： 使用媒体查询技术 根据不同的设备尺寸 加载不同的样式
3.媒体查询语法
a.标准语法 : @media screen and (设备尺寸){ css样式 }
简写城市: @media(设备尺寸){ css样式 }
b.区间查询
设备尺寸>=区间 ： @media(min-width:1200px){ css样式 }
设备尺寸<=区间 ： @media(max-width:1200px){ css样式 }
c.常见的四种设备尺寸
大PC >=1200px body红色
小pc/ipad pro 992-1200px body橙色
平板(ipad) 768-992 body黄色
手机(iphne) <768 body绿色
4.响应式布局应用场景 ：
a. 页面复杂 : 不推荐使用响应式 （电商类）
b. 页面简单 ： 推荐使用响应式 （技术博客类 bootstrap官网）
5.实际开发响应式布局流程 ：
（1）先写1200px的默认样式 （响应式布局以PC端为准）
（2）使用媒体查询根据设备尺寸覆盖默认样式
a. 只需要覆盖 不同的样式 （一样的样式不需要）
b. 覆盖样式需要注意权重问题
-->
<style>
/* 先写1200px公共样式 */
.container{
width: 100%;
}
.left{
float: left;
width: 30%;
height: 2000px;
background-color: red;
}
.right{
float: left;
width: 70%;
height: 2000px;
background-color: green;
}
/* 媒体查询覆盖样式 */
@media(max-width:992px){
/* 隐藏左边的版心 */
.left{
display: none;
}
.right{
width: 100%;
}
}
</style>
</head>
<body>
<!-- 需求： （1）设备尺寸>992 显示左右两个版心 （2）设备尺寸<=992 显示一个版心 -->
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
# 02-案例：Bootstrap官网
1.小技巧:
- 背景与与渐变颜色共存:注意两个属性之间用逗号隔开
*background*:url(../imgs/bs.png) repeat center,linear-gradient(45deg, #100a34, #5d2b4c) ;
- 解决margin塌陷的三种方式
- 1.border
- 2.overflow: hidden
- 3.padding
- 背景与与渐变颜色共存:注意两个属性之间用逗号隔开
2.实际开发中响应式布局思路
1.先写 1200px pc端的公共样式(不使用媒体查询，在任何尺寸屏幕下样式生效)
2.使用媒体查询@metia来适配其他的三个样式
992 <= 大平板/小屏电脑 < 1200
768 <= 平板 < 992
手机 < 768
# 1-先写1200px的样式
# 2-通过媒体查询适配992<=屏幕<1200样式
1.版心宽度变成970px
2.顶部top_bar的ul列表中隐藏第二个li元素
3.底部商品列表宽高变成300*350
由于使用了伸缩盒子且允许换行，所以当父盒子宽度变小之后，子盒子会自动换行(970/300 取整得到3)
/* 媒体查询实现响应式布局 */
@media(min-width: 992px) and (max-width:1200px){
.container{
width: 970px;
margin: 0 auto;
}
.top-bar ul li:nth-child(2){
display: none;
}
.project-list .item a{
width: 300px;
height: 350px;
}
}
# 3-通过媒体查询适配768<=屏幕<992样式
1.版心宽度变成750px
2.顶部top_bar的ul列表中隐藏第一个li元素和第二个li元素
3.顶部top_bar隐藏右边的关于按钮
4.底部商品列表宽高变成300*350
由于使用了伸缩盒子且允许换行，所以当父盒子宽度变小之后，子盒子会自动换行(750px/300 取整得到2)
@media(min-width: 768px) and (max-width:992px){
.container{
width: 750px;
margin: 0 auto;
}
.top-bar ul li:nth-child(1){
display: none;
}
.top-bar ul li:nth-child(2){
display: none;
}
.top-bar ul .about{
display: none;
}
.project-list .item a{
width: 300px;
height: 350px;
}
}
# 4-通过媒体查询适配 屏幕<768样式
1.版心宽度变成100%(手机端水平铺满)
2.顶部top_bar
只显示ul列表第一个li，其他隐藏
关于按钮隐藏，显示menu菜单图标
注意：默认menu使用行内属性设置隐藏display：none
如果在css中想要覆盖行内属性，则可以使用顶级权重 !
@media(max-width:768px){
.container{
width: 100%;
margin: 0 auto;
padding: 0px 5px;
}
.top-bar ul li:nth-child(n+2){
display: none;
}
.top-bar ul .menu{
display: block !important;
float: right;
margin-right: 0px;
}
.project-list .item a{
width: 300px;
height: 350px;
}
}
# 完整HTML代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/index.css"></head><body> <!-- 1.顶部栏 --> <div class="top-bar"> <div class="container"> <ul class="clearfix"> <li><a href="">Bootstrap中文网</a></li> <li><a href="">Bootstrap2中文文档</a></li> <li><a href="">Bootstrap3中文文档</a></li> <li><a href="">Bootstrap4中文文档</a></li> <li><a href="">Less 教程</a></li> <li><a href="">jQuery API</a></li> <li><a href="">网站实例</a></li> <li class="about"><a href="">关于</a></li> <li class="menu" style="display: none"><a href=""><img src="./imgs/menu.jpg" alt=""></a></li> </ul> </div> </div> <!-- 2.banner栏 --> <div class="banner"> <div class="container"> <h1>Bootstrap</h1> <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单</h2> <a href="">Bootstrap3中文文档</a> </div> </div> <!-- 3.列表栏 --> <div class="list"> <div class="container"> <div class="item"> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> <a href=""> <img src="./imgs/nodejs.png" alt=""> <span>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</span> </a> </div> </div> </div></body></html>
# 完整css代码
/* 一：响应式布局流程 1.先写1200px公共样式 2.使用媒体查询 根据不同设备 覆盖样式*//* 响应式布局 四种尺寸 设备名称 设备尺寸 版心 大pc 1200 1170px 小pc 992-1200 970px 平板 768-992 750 手机 <768 100%*/.container{ width: 1170px; margin: 0 auto;}/* 1.顶部栏 */.top-bar{ width: 100%; height: 44px; background-color: #222222; border-bottom: 2px solid black;}.top-bar ul{ width: 100%;}.top-bar ul li{ /* 细节：子元素浮动，父元素清除浮动 */ float: left; margin-right: 30px;}.top-bar ul .about{ float: right;}/* 选中第一个li元素中的a标签 */.top-bar ul li:nth-child(1) a{ font-size: 20px;}.top-bar ul li a{ /* 文字水平居中 */ text-align: center; /* 文字垂直居中 */ line-height: 44px; /* 文字颜色 */ color: #888;}/* 2.banner栏 */.banner{ width: 100%; height: 470px; /* 背景图与渐变颜色共存 */ /* 1.发现问题 ： 只能看到渐变颜色，不能看到背景图 2.分析问题 ： 相同的属性，后者覆盖前者（背景图与背景渐变都是background） 3.解决方案 ： 第一种（非常简单，但是百度没有） ： 属性连接 ：background : 背景图(先),渐变颜色(后) 第二种（稍微复杂，百度上面比较多的方案）：使用伪元素 */ /* background : 背景图(先),渐变颜色(后) */ background: url(../imgs/bs.png) repeat center,linear-gradient(45deg,#020031,#6d3353); /* 方案二：伪元素 */ /* background: linear-gradient(45deg,#020031,#6d3353); */ /* 子绝父相 */ /* position: relative; */ /* 解决margin塌陷三种方式 1.border 2.padding 3.overflow:hidden */ overflow: hidden;}/* 伪元素一定要设置content属性需要定位*//* .banner::after{ content: ''; position: absolute; width: 100%; height: 100%; background: url(../imgs/bs.png) repeat center;} */.banner h1{ margin-top: 100px; font-size: 90px; color: #fff; text-align: center;}.banner h2{ margin-top: 20px; font-size: 30px; color: #fff; text-align: center;}.banner a{ display: block; width: 290px; height: 50px; margin: 35px auto; background-color:#337AB7 ; font-size: 20px; text-align: center; line-height: 50px; color: #fff; /* 圆角 */ border-radius: 8px; /* 阴影 */ box-shadow: 5px 5px 2px #222222;}/* 3.列表栏 */.list{ width: 100%;}.list .item{ width: 100%; /* 伸缩布局 */ display: flex; /* 允许换行 */ flex-wrap: wrap; /* 主轴排列方式：水平方向对齐方式 */ justify-content: space-between;}.list .item a{ /* 伸缩布局：默认会把行内子元素变成行内块（与浮动类似的） */ width: 260px; height: 330px; border: 1px solid red; padding: 5px; margin-top: 10px;}.list .item a img{ width: 100%;}/* 响应式布局第二步：使用媒体查询覆盖样式 *//* 992-1200 a. 顶部栏第二个li元素隐藏 b. 列表尺寸 290*330*/@media(max-width:1200px){ .container{ width: 970px; } .top-bar ul>li:nth-child(2){ display: none; } .list .item a{ width: 290px; height: 330px; }}/* 768-992 a.顶部栏 第一个 第二个 第八个隐藏 b.列表尺寸 310*360*/@media(max-width:992px){ .container{ width: 750px; } .top-bar ul>li:nth-child(1){ display: none; } .top-bar ul>li:nth-child(2){ display: none; } .top-bar ul>li:nth-child(8){ display: none; } .list .item a{ width: 310px; height: 360px; }}/* 手机： <768 a.顶部栏：只显示第一个li ，后面7个li元素隐藏 b.顶部栏最右边显示一个图表（菜单） 思路1：给一个li元素（放图片，默认一直隐藏） 思路2：<768的时候显示即可（注意点： 使用顶级权重!important才能覆盖行内样式） c.列表栏居中显示*/@media(max-width:768px){ .container{ width: 100%; } .top-bar ul>li:nth-child(1){ display: block; margin-left: 10px; } /* n从0开始 */ .top-bar ul>li:nth-child(n+2){ display: none; } /* 列表栏居中 */ .list .item a{ width: 60%; margin: 10px 20%; } /* 显示menu菜单栏 细节：默认隐藏是行内权重，需要使用顶级权重 */ .top-bar ul>li.menu{ display: block !important; float: right; }}
# 今日学习任务
- [ ] 01-bootstrap第三方框架学习
- [ ] 1.bootstrap介绍
- [ ] 2.bootstrap初始化模板
- [ ] ==3.bootstrap全局CSS样式==
- [ ] ==4.bootstrap组件==
- [ ] ==5.bootstrap栅格系统==
- [ ] 02-bootstrap案例：boostrap官网制作
# 01-bootstrap响应式布局框架学习
# 1.1-bootstrap介绍
1.什么是Bootstrap：Bootstrap是一个响应式布局的框架
- Bootstrap作用场景：做响应式布局网页
- 框架：就是别人提前写好的css和js文件。
- 框架作用：提高开发人员的工作效率（ctrl + c/v 复制粘贴即可）
2.如何使用Bootstrap框架（该流程适用于所有的第三方框架）
- a.进官网:http://www.bootcss.com/ (opens new window)
下载别人写好的代码，然后在我们自己的文件导入
- b.查文档(三大核心技术)：
- bootstrap全局css样式:https://v3.bootcss.com/css/ (opens new window)
- bootstrap组件:https://v3.bootcss.com/components/ (opens new window)
- 组件：由多个html元素组成的一个独立的小功能
- 例如：下拉菜单组件 由 div + button + ul + li元素组成
- 例如：进度条组件 由 div + span元素组成
- 组件：由多个html元素组成的一个独立的小功能
- bootstrap栅格系统：https://v3.bootcss.com/css/#grid (opens new window)
- boostrap的核心技术（实现响应式布局的核心技术）
- 将屏幕以表格的形式划分为不同的区域(行row+列column)，在不同的屏幕下显示不同的区域
- boostrap的核心技术（实现响应式布局的核心技术）
- c.复制粘贴
- ==本阶段所有代码均来自官网复制粘贴，所以千万不要死记硬背==
课堂上老师只会介绍我们以后常用的一些功能，剩下的功能有个印象即可，以后用到了来官网复制粘贴即可(授人以鱼不如授人以渔)
- a.进官网:http://www.bootcss.com/ (opens new window)
3.bootstrap环境配置
- 目前bootstrap有三个版本，分别是 2.x、3.x、4.x，2.x是旧的版本，3.x是新的稳定版本，4.x还在完善中，所以我们目前使用的是3.x版本。 这个框架就是别人已经写好的css和JavaScript，我们要使用它，首先需要把这些样式和javascript相关文件下载下来，然后在我们的页面中引用这些文件就可以使用这个框架了，直接在这个网站下载，下载地址为：https://v3.bootcss.com/getting-started/#download。 (opens new window)
- 下载之后，会得到一个安装包，我们只需要将安装包中的
cssfontjs这三个文件夹放到项目目录即可 下载jquery:由于bootstrap这个框架里面的js代码使用的是一个js框架叫做jquery，所以我们还需要单独下载jquery，它的下载地址是：https://code.jquery.com/jquery-1.12.4.min.js (opens new window)
# 1.2-bootstrap初始化html模板
所有的第三方框架在使用时都需要导入依赖包
- 类似于字体图标一样，使用时需要导入
style.css
- 类似于字体图标一样，使用时需要导入
bootstrap需要导入三个依赖包
<script src="js/jquery-1.12.4.min.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/bootstrap.min.css">
初始化模板：就是官网里面教你在创建html的时候需要导入哪些依赖包
bootstrao官方模板：不推荐使用，太过于冗余，有些用不上的也写上了自定义bootstrap模板：推荐使用，简洁明了
官方模板
<!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>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
- 自定义模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 要使用bootstrap，需要导入三个文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!-- 官网复制粘贴一段代码测试一下模板是否生效 -->
<div class="h1">你好，世界</div>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0"
aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</body>
</html>
{
"Bootstrap template": {
"prefix": "boot",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Bootstrap Template</title>",
"\t<!-- 使用bootstrap需要导入三个文件 -->",
"\t<script src=\"js/jquery-1.12.4.min.js\"></script>",
"\t<script src=\"js/bootstrap.min.js\"></script>",
"\t<link href=\"css/bootstrap.min.css\" rel=\"stylesheet\">",
"</head>",
"<body>",
"\t$1\n",
"</body>",
"</html>"
],
"description": "Bootstrap template"
}
}
# ==1.3-bootstrap全局CSS样式==
记住bootstrap中几个经典的类名后缀对应的颜色
default:默认 纯白色link:链接 a标签默认颜色success: 淡绿色(成功/确定) #dff0d8
info:天蓝色(信息) #5bc0de
warning:橘橙色(提示/警告) #f0ad4e
danger:酒红色(失败/错误) #d9534f
primary:青色(重要) #337ab7
记住bootstrap中几个经典的尺寸类名后缀
lg: 大尺寸，对应大屏pc ,在栅格系统响应式布局中对应的屏幕是 >= 1200pxmd：中尺寸，对应大屏平板ipadPro和小屏pc,在栅格系统响应式布局中对应的屏幕是 [992,1200)sm:小尺寸，对应平板ipad,在栅格系统响应式布局中对应的屏幕是 [768,992)xs:超小尺寸,对应手机移动端，在栅格系统响应式布局中对应的屏幕是<= 768
# 1-按钮button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 要使用bootstrap，需要导入三个文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 这个是未压缩版的bootstrap源码，学习的时候建议导入这个可以查看源码 -->
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<a class="btn btn-default btn-sm" href="#" role="button">a标签</a>
<button class="btn btn-default btn-lg btn-primary" type="submit">button标签</button>
<button class="btn btn-default btn-lg btn-success" type="submit">button标签</button>
<button class="btn btn-default btn-lg btn-info" type="submit">button标签</button>
<input class="btn btn-default btn-xs btn-warning" type="button" value="Input标签">
<input class="btn btn-default btn-danger" type="submit" value="Submit标签">
</body>
</html>
# 2-表格table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 要使用bootstrap，需要导入三个文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<table class="table table-bordered table-condensed table-hover">
<thead>
<tr>
<th >姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td class="primary">1</td>
<td class="info">11</td>
<td class="success">111</td>
</tr>
<tr class="danger">
<td>2</td>
<td>22</td>
<td>222</td>
</tr>
<tr>
<td>3</td>
<td>33</td>
<td>333</td>
</tr>
<tr>
<td>4</td>
<td>44</td>
<td>444</td>
</tr>
<tr>
<td>5</td>
<td>55</td>
<td>555</td>
</tr>
</tbody>
</table>
</body>
</html>
# 3-表单form/input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 要使用bootstrap，需要导入三个文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form>
<div class="container">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
# ==1.4-bootstrap组件==
# 1.字体图标
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Template</title>
<!-- 使用bootstrap需要导入三个文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 官网代码 -->
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
<!-- 其实字体图标就是一个span标签，想要哪个字体图标官网复制粘贴对应类名即可 -->
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</body>
</html>
# 2-按钮组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 要使用bootstrap，需要导入三个文件 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!-- 按钮组 -->
<h3>按钮组</h3>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default"><<</button>
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">>></button>
</div>
<!-- 下拉菜单 -->
<h3>下拉菜单</h3>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
商品分类 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<a href="#"><button type="button" class="btn btn-success btn-block">手机</button></a>
<li><a href="#">平板</a></li>
<li><a href="#">笔记本</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">其他</a></li>
</ul>
</div>
</body>
</html>
# 3-进度条
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Bootstrap Template</title> <!-- 使用bootstrap需要导入三个文件 --> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> .box{ width: 500px; height: 10px; margin: 0 auto; } </style></head><body> <!-- bootstrap所有的样式都是通过类名来实现 --> <div class="box"> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> 40% </div> </div> </div> <h3>堆叠进度条</h3> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div> </div></body></html>
# ==1.5-bootstrap栅格系统(响应式布局)==
# 1-栅格系统介绍
- 1.什么叫什么系统：以table表格的形式划分页面空间，从而实现布局。
- 2.栅格的组成部分：
- a.
版心容器container（相当于html页面的container版心，相当于table表格）- b.
row(相当于html页面的父盒子模型,相当于table中的tr)- c.
col(相当于html页面的子盒子模型，相当于table中的tr)
- c.
- b.
- a.
- 3.栅格样式的核心原理
- a.版心容器（container是响应式版心，container-fluid是流式版心）
- 他们两者唯一的区别是
- container尺寸是固定的（1170,970,750,100%）
- container-fluid的尺寸是铺满全屏: 100%
- 他们两者唯一的区别是
- b.row:行
- 默认没有高度，背景色、边框
- 默认宽度为100%
继承版心的宽度
- 默认左右margin为 -15px （作用是抵消container左右的padding）
- c.列col： 类名遵循固定的格式
col-s-x- s(screen):表示屏幕尺寸，他们有四个可选值
lg:大栅格，这种栅格在屏幕宽度大于等于1200时可以排成一行，小于1200时每个栅格独占一行md:中栅格,这种栅格在屏幕宽度大于等于992时可以排成一行，小于992时每个栅格独占一行sm:小栅格,这种栅格在屏幕宽度大于等于768时可以排成一行，小于768时每个栅格独占一行xs:超小栅格,这种栅格所有屏幕宽度下都会排成一行
- x(1-12之间的数字，尺寸比例)：bootstrap将水平方向分为12份，每一份表示row宽度的 1/12
- ==col列需要写在行row标签中，每一行的栅格整体宽度占据12份，大于12份就会换行==
- s(screen):表示屏幕尺寸，他们有四个可选值
- 示例：（详细效果请参考下图与真实代码演示）
col-设备类型-数字（宽度比例 1 = 屏幕 1/12）col-lg-6:表示该栅格在屏幕宽度大于等于1200时，占的宽度比例是6份( 6/12 = 0.5 相当于width:50%)。一旦屏幕宽度小于1200，单独一行(x的尺寸直接失效)col-lg-3:表示该栅格在屏幕宽度大于等于1200时，占的宽度比例是3份( 3/12 = 0.25 相当于width:25%)。一旦屏幕宽度小于1200，单独一行(x的尺寸直接失效)col-md-4:表示该栅格在屏幕宽度大于等于992时，占的宽度比例是4份( 4/12 = 0.33 相当于width:33.3% 三分之一)。一旦屏幕宽度小于992，单独一行(x的尺寸直接失效)col-sm-2:表示该栅格在屏幕宽度大于等于768时，占的宽度比例是2份( 2/12 = 0.167 相当于width:16.7%，六分之一)。一旦屏幕宽度小于768，单独一行(x的尺寸直接失效)col-xs-8:表示该栅格在任何屏幕下，占的宽度比例是8份( 8/12 = 0.667 相当于width:66.7%，三分之二)。col-lg-3 col-md-4:(1)表示该栅格在屏幕宽度 >= 1200时，占3份(宽度四分之一)，(2)在992<=屏幕宽度<1200时，占4份(宽度三分之一),(3) <=992 直接显示一行col-lg-3 col-md-4 col-sm-6:(1)表示该栅格在屏幕宽度 >= 1200时，(2)占3份(宽度四分之一)，(3)在992<=屏幕宽度<1200时，占4份(宽度三分之一), <=992,(4)在 768<= 屏幕宽度 < 992时，占6份(二分之一),(5) <768,直接显示一行
- a.版心容器（container是响应式版心，container-fluid是流式版心）
# 2-版心容器container
- bootstrap中有两种版心容器可供使用者选择
- container：
响应式版心容器- 默认样式：
- 没有高度、边框、颜色
- 左右15px的padding
- 宽度是响应式
- 屏幕宽度 < 768 宽度100%
- 768 <= 屏幕宽度 < 992 宽度750
- 992 <= 屏幕宽度 < 1200 宽度970
- 1200 <= 屏幕宽度 < 1200 宽度1170
- 默认样式：
- container-fluid：
流式版心容器- 默认样式：
- 没有高度、边框、颜色
- 左右15px的padding
- 宽度100%
- 默认样式：
- container：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 导入bootstrap --> <!-- 1.jquery.js --> <script src="./bootstrap/js/jquery-1.12.4.min.js"></script> <!-- 2.bootsrap.js --> <script src="./bootstrap/js/bootstrap.js"></script> <!-- 3.bootstrap.css --> <link rel="stylesheet" href="./bootstrap/css/bootstrap.css"> <!-- 1.栅格系统 ： 以表格形式 来 布局 网页结构 2.栅格系统三要素（重点） a. 版心 ： container (相当于之前的版心) b. 行 : row (相当于之前的父盒子 top-bar nav-bar) c. 列 : col- (相当于之前的子盒子 li a item) 3.栅格系统其它功能（了解） --> <!-- (1)栅格系统 版心 ： container 版心默认样式： 没有高度，左右有15px padding a. 流式版心（网站不做响应式） ：container-fluid * 宽度：100% b. 响应式版心（网站做响应式） : container * >12000px(PC) : 1170px * 992-1200 : 970px * 768-992 : 750px * <768(手机) : 100% (2)栅格系统 行 ： row (3)栅格系统 列 ： col- --> <style> .container-fluid{ height: 100px; background-color: red } .container{ height: 100px; background-color: green; } /* 需求: 产品经理要求的版心与默认版心不一致？ （1）>1200 要求版心1100 （2）600 - 800之间 要求版心700 解决方案：使用媒体查询覆盖默认的版心 */ @media(min-width:1200px){ .container{ width: 1100px; } } @media(min-width:600px) and (max-width:800px){ .container{ width: 700px; } } </style></head><body> <!-- 版心 --> <div class="container-fluid"></div> <div class="container"></div></body></html>
# 3-行row
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 导入bootstrap --> <!-- 1.jquery.js --> <script src="./bootstrap/js/jquery-1.12.4.min.js"></script> <!-- 2.bootsrap.js --> <script src="./bootstrap/js/bootstrap.js"></script> <!-- 3.bootstrap.css --> <link rel="stylesheet" href="./bootstrap/css/bootstrap.css"> <!-- 1.栅格系统 ： 以表格形式 来 布局 网页结构 2.栅格系统三要素（重点） a. 版心 ： container (相当于之前的版心) b. 行 : row (相当于之前的父盒子 top-bar nav-bar) c. 列 : col- (相当于之前的子盒子 li a item) 3.栅格系统其它功能（了解） --> <!-- (1)栅格系统 版心 ： container 版心默认样式： 没有高度，左右有15px padding a. 流式版心（网站不做响应式） ：container-fluid * 宽度：100% b. 响应式版心（网站做响应式） : container * >12000px(PC) : 1170px * 992-1200 : 970px * 768-992 : 750px * <768(手机) : 100% (2)栅格系统 行 ： row 默认样式： 没有高度，宽度100%， 左右-15px margin(目的：抵消版心的padding) (3)栅格系统 列 ： col- --> <style> /* 版心 */ .container-fluid{ background-color: pink } /* 行:row */ .row{ height: 100px; margin-top: 10px; background-color: green; } </style></head><body> <!-- 版心 --> <div class="container-fluid"> <!-- 行：父元素（top-bar banner nav-bar list） --> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div></body></html>
# 4-列col
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 导入bootstrap --> <!-- 1.jquery.js --> <script src="./bootstrap/js/jquery-1.12.4.min.js"></script> <!-- 2.bootsrap.js --> <script src="./bootstrap/js/bootstrap.js"></script> <!-- 3.bootstrap.css --> <link rel="stylesheet" href="./bootstrap/css/bootstrap.css"> <!-- 1.栅格系统 ： 以表格形式 来 布局 网页结构 2.栅格系统三要素（重点） a. 版心 ： container (相当于之前的版心) b. 行 : row (相当于之前的父盒子 top-bar nav-bar) c. 列 : col- (相当于之前的子盒子 li a item) 3.栅格系统其它功能（了解） --> <!-- (1)栅格系统 版心 ： container 版心默认样式： 没有高度，左右有15px padding a. 流式版心（网站不做响应式） ：container-fluid * 宽度：100% b. 响应式版心（网站做响应式） : container * >12000px(PC) : 1170px * 992-1200 : 970px * 768-992 : 750px * <768(手机) : 100% (2)栅格系统 行 ： row 默认样式： 没有高度，宽度100%， 左右-15px margin(目的：抵消版心的padding) (3)栅格系统 列 ： col- --> <style> /* 版心 */ .container-fluid{ background-color: pink } /* 行:row */ .row{ /* 父盒子高度一般被内容撑开 */ } /* 列： col-尺寸-比例 ( bootstrap将屏幕分为12份， 1 = 1/12 ) lg: 尺寸 >1200px 6 : 宽度比例 1 = 屏幕1/12 6 * 1/12 = 50% (1) col-lg-6 ： 当屏幕宽度>1200px, 宽度比例生效。 否则不生效（100%） (2) col-md-3 : 当屏幕尺寸>992px,宽度比例生效。 否则不生效（100%） (3) col-sm-2 : 当屏幕尺寸>768px,宽度比例生效。 否则不生效（100%） (4) col-xs-4 : 任何屏幕尺寸， 宽度比例都会生效 */ /* div[] : 属性选择器 class*="col-lg" : 类名只要包含 col-lg */ div[class*="col-lg"]{ height: 50px; background-color: red; border: 1px solid black; } div[class*="col-md"]{ height: 50px; background-color: orange; border: 1px solid black; } div[class*="col-sm"]{ height: 50px; background-color: yellow; border: 1px solid black; } div[class*="col-xs"]{ height: 50px; background-color: green; border: 1px solid black; } </style></head><body> <!-- 版心 --> <div class="container-fluid"> <!-- 行：父元素（top-bar banner nav-bar list） --> <div class="row"> <!-- 列：子元素 --> <div class="col-lg-6">屏幕一半</div> <div class="col-lg-3">屏幕四分之一</div> <div class="col-lg-3">屏幕四分之一</div> </div> <!-- 父元素 --> <div class="row"> <!-- 列：子元素 --> <div class="col-md-3">四分之一</div> <div class="col-md-3">四分之一</div> <div class="col-md-3">四分之一</div> <div class="col-md-3">四分之一</div> </div> <!-- 父元素 --> <div class="row"> <!-- 列：子元素 --> <div class="col-sm-2">六分之一</div> <div class="col-sm-2">六分之一</div> <div class="col-sm-2">六分之一</div> <div class="col-sm-2">六分之一</div> <div class="col-sm-2">六分之一</div> <div class="col-sm-2">六分之一</div> </div> <!-- 父元素 --> <div class="row"> <!-- 列：子元素 --> <div class="col-xs-4">三分之一</div> <div class="col-xs-4">三分之一</div> <div class="col-xs-4">三分之一</div> </div> </div></body></html>
# 5-栅格系统练习
需求：
1.pc端，屏幕尺寸>=1200,一行显示四个盒子
2.大屏平板： 屏幕尺寸 992-1200，一行显示三个盒子
3.平板： 屏幕尺寸768-992，一行显示两个盒子
4.手机： 屏幕尺寸<768,一行显示一个盒子
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Bootstrap Template</title> <!-- 使用bootstrap需要导入三个文件 --> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> div[class*="col-"] { height: 100px; /* padding: 20px; */ /* 通过padding来控制栅格之间的间距 */ /* padding: 10px; */ } .box{ border: 1px solid black; width: 100%; height: 100%; margin: 0 auto; background-color: green; box-sizing: border-box; } </style></head><body> <div class="container-fulid"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="box"></div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="box "></div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="box"></div> </div> <div class="col-lg-3 col-md-4 col-sm-6"> <div class="box"></div> </div> </div> </div></body></html>
# 6-栅格偏移
栅格默认是左浮动的，所有栅格默认是靠左对齐的，但是栅格在排列时也可以往右偏移一段距离，通过偏移的样式类就可以了，偏移的样式类和栅格一样，也分为四种
1、
.col-lg-offset-xx代表1~12的数字，它表示栅格偏移的宽度份数，在屏幕宽度大于等于1200起作用 2、.col-md-offset-x在屏幕宽度大于等于992起作用 3、.col-sm-offset-x在屏幕宽度大于等于768起作用 4、.col-xs-offset-x在屏幕宽度小于768起作用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 导入bootstrap --> <!-- 1.jquery.js --> <script src="./bootstrap/js/jquery-1.12.4.min.js"></script> <!-- 2.bootsrap.js --> <script src="./bootstrap/js/bootstrap.js"></script> <!-- 3.bootstrap.css --> <link rel="stylesheet" href="./bootstrap/css/bootstrap.css"> <!-- 1.栅格系统 ： 以表格形式 来 布局 网页结构 2.栅格系统三要素（重点） a. 版心 ： container (相当于之前的版心) b. 行 : row (相当于之前的父盒子 top-bar nav-bar) c. 列 : col- (相当于之前的子盒子 li a item) 3.栅格系统其它功能（了解） 栅格偏移 : col-尺寸-offset-比例 栅格隐藏 --> <!-- (1)栅格系统 版心 ： container 版心默认样式： 没有高度，左右有15px padding a. 流式版心（网站不做响应式） ：container-fluid * 宽度：100% b. 响应式版心（网站做响应式） : container * >12000px(PC) : 1170px * 992-1200 : 970px * 768-992 : 750px * <768(手机) : 100% (2)栅格系统 行 ： row 默认样式： 没有高度，宽度100%， 左右-15px margin(目的：抵消版心的padding) (3)栅格系统 列 ： col- col-尺寸-比例 ( bootstrap将屏幕分为12份， 1 = 1/12 ) lg: 尺寸 >1200px 6 : 宽度比例 1 = 屏幕1/12 6 * 1/12 = 50% (1) col-lg-6 ： 当屏幕宽度>1200px, 宽度比例生效。 否则不生效（100%） (2) col-md-3 : 当屏幕尺寸>992px,宽度比例生效。 否则不生效（100%） (3) col-sm-2 : 当屏幕尺寸>768px,宽度比例生效。 否则不生效（100%） (4) col-xs-4 : 任何屏幕尺寸， 宽度比例都会生效 --> <style> /* 版心 */ .container-fluid{ background-color: pink } div[class*="col-lg"]{ height: 50px; background-color: red; border: 1px solid black; } div[class*="col-md"]{ height: 50px; background-color: orange; border: 1px solid black; } div[class*="col-sm"]{ height: 50px; background-color: yellow; border: 1px solid black; } div[class*="col-xs"]{ height: 50px; background-color: green; border: 1px solid black; } </style></head><body> <!-- 版心 --> <div class="container-fluid"> <!-- 行：父元素（top-bar banner nav-bar list） --> <div class="row"> <!-- 列：子元素 --> <div class="col-lg-6 col-lg-offset-3">屏幕一半</div> </div> <!-- 父元素 --> <div class="row"> <!-- 列：子元素 --> <div class="col-md-3 col-md-offset-2">四分之一</div> <div class="col-md-3 col-md-offset-2">四分之一</div> </div> <!-- 父元素 --> <div class="row"> <!-- 列：子元素 --> <div class="col-sm-2">六分之一</div> <div class="col-sm-2 col-sm-offset-3">六分之一</div> <div class="col-sm-2 col-sm-offset-3">六分之一</div> </div> <!-- 父元素 --> <div class="row"> <!-- 列：子元素 --> <div class="col-xs-4">三分之一</div> <div class="col-xs-4 col-xs-offset-4">三分之一</div> </div> </div></body></html>
# 7-栅格隐藏
在某个查询区间，将栅格隐藏，可以用隐藏的样式，这个样式包括四个： 1、.hidden-xs 在屏幕小于768时将栅格隐藏 2、.hidden-sm 在屏幕大于等于768小于992时将栅格隐藏 3、.hidden-md 在屏幕大于等于992小于1200时将栅格隐藏 4、.hidden-lg 在屏幕大于等于1200时将栅格隐藏
注意点
a：如果设置一个栅格隐藏样式为hidden-md:表示该栅格只会在 768 <= 屏幕尺寸 <992区间隐藏，如果屏幕尺寸 <= 768，则又会显示
b.如果希望一个栅格在屏幕尺寸 <= 992时隐藏，可以设置栅格隐藏样式为:hidden-sm hidden-xs
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Bootstrap Template</title> <!-- 使用bootstrap需要导入三个文件 --> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"></head><body> <style> /* 选择所有class名称包含“col-”的div标签 */ div[class*="col-"] { height: 50px; background-color: yellowgreen; border: 1px solid #000; } </style> <!-- 第三个栅格在宽度小于768时隐藏 --> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-6">.col-lg-4</div> <div class="col-lg-4 col-md-4 col-sm-6">.col-lg-4</div> <div class="col-lg-4 col-md-4 hidden-sm hidden-xs">.col-lg-4</div> </div></body></html>
# 02-今日课后练习
欢迎大家通过百度，来解决各种遇到的问题
第一题 ： 栅格系统实现双版心布局
<!-- 页面结构 ： 两个版心 左边 ： 3 右边： 9 需求： <768px 隐藏左边版心 -->
- 第二题 ： 栅格系统实现七列等分布局
