目录
03.2 justify-content 设置主轴子元素排列☆
03.4 align-items 设置侧轴上的子元素的排列方式(单行)
03.5 align-contents 设置侧轴上的子元素的排列方式(多行)
03.6 align-contents和align-items的区别
07.5 苏宁首页search-content内容布局、模块制作
09.1 使用rem适配方案二 ——苏宁首页body样式修改
09.2 使用rem适配方案二 ——vscode插件之cssrem(px to rem & rpx)
09.3 使用rem适配方案二 ——修改flexible默认html字体大小
09.4 使用rem适配方案二 ——search-content内容制作一
09.5 使用rem适配方案二 ——search-content内容制作二
10.Bootstrap列偏移(.col-md-offset-)
05.3 bilibili搜索栏布局(用vw)、logo制作、right制作
学习笔记整理——移动web(黑马的教程)
Day1
00.流式布局
00.1目标
知道web开发现状、写标签viewport、用移动web调试方法、说出移动端常见的布局方案、描述流式布局、独立完成京东移动端首页。
00.2目录
移动端基础、视口、二倍图、移动端调试、移动端技术解决方案、移动端常见开发——流式布局、京东移动首页制作
01.移动端浏览器
兼容移动端主流浏览器,处理webkit内核浏览器即可。
02.视口(layout viewport)
- 布局视口(layout viewport)
- 视觉视口(visual viewport)
- 理想视口(ideal viewport):需要给移动端添加meta视口标签。手机屏幕多宽,视口就多宽。
03.meta视口标签(单标签)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
content="width=device-width":viewport的宽度=设备宽度
initial-scale=1.0:初始缩放比为1,maximum-scale=1.0:最大缩放比为1,
minimum-scale=1.0:最小缩放比为1,user-scalable=no":用户是否可以缩放(yes或no)
04.物理像素&物理像素比
物理像素:即为分辨率。
物理像素比:一个px能显示物理像素点的个数。
【eg:Iphone8:1px开发像素=2个物理像素】
05.二倍图
即:准备的图片比实际需要的图片大小大两倍。
06.背景缩放(background-size)
语法:background-size:图宽 图高
- 只写其中一个参数时,会等比例缩放
- 单位可跟%,相对于父盒子而言的
- cover:等比例拉伸,但是背景图会显示不全
- contain:宽、高等比例拉伸,故可能会有留白区域
07.背景二倍图以及多倍图切图
background:url(...);//插入图片
background-size:...px ...px;//缩放比例50%即可得二倍图
多倍图切图:PS——>cutterman(可一下子切3倍图、2倍图、1倍图原图)
08.移动端开发选择
单独制作移动端页面(主流) | 响应式页面(其次) |
一般情况下,网址域名前加m(mobile)可以打开移动端。通过判断设备,若为移动设备,则可跳转到移动页面。 | 通过判断屏幕宽度来改变样式以适应不同终端。 |
09.移动端技术解决方案
传统模型宽度计算(会撑大盒子) | CSS3盒子模型(不会撑大盒子) |
box-sizing:content-box | box-sizing:border-box |
盒子的宽度 =CSS中设置的width+border+padding |
盒子的宽度 =CSS中设置的width[width里包含了border+padding] |
10.移动端特殊样式
CSS盒子模型 | box-sizing:border-box; -webkit-box-sizing:border-box; |
取消点击时的高亮 | 设置为transparent完成透明 -webkit-tap-highlight-color:transparent; |
在移动端浏览器默认的外观,在ios上加上这个属性才能给按钮和输入框自定义样式 | -webkit-appearance:none |
禁用长按页面时的弹出菜单 | img,a{-webkit-touch-callout:none;} |
11.移动端技术选型
单独制作移动端页面(主流) | 响应式页面(其次) |
一般情况下,网址域名前加m(mobile)可以打开移动端。通过判断设备,若为移动设备,则可跳转到移动页面。 | 通过判断屏幕宽度来改变样式以适应不同终端。 |
|
|
12.流式布局(百分比布局)
- 流式布局,也称为百分比布局,或称为非固定像素布局。
- 是移动web开发使用的比较常见的布局方式。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
- max-width 最大宽度 min-width 最小宽度
- max-height 最大高度 min-height 最小高度
13.京东移动端首页
13.1 准备工作
- 技术选型
方案:采用单独制作移动页面方案
技术:布局采用流式布局
- 移动端,要设置视口标签以及引入初始化样式(如果没有,则需手动添加)
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
引入css文件
<!-- 引入css文件 -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
写入index.css文件中:
body {
width: 100%;
min-width: 320px;
max-width: 1080px;
margin: 0 auto;
font-size: 14px;
font-family: Helvetica, sans-serif;
color: #666;
line-height: 1.5;
}
13.2 App布局——先写顶层Header
- 分析结构布局
先写顶层 header
/*布局*/
<header class="app">
<ul>
<li>8</li>
<li>10</li>
<li>57</li>
<li>25</li>
</ul>
</header>
/*样式*/
.app ul li:nth-child(1) {
width: 8%;
}
.app ul li:nth-child(2) {
width: 10%;
}
.app ul li:nth-child(3) {
width: 57%;
}
.app ul li:nth-child(4) {
width: 25%;
background-color: #F63515;
}
- 13.2.1 App布局内容填充——顶层Header
<body>
<header class="app">
<ul>
<li>
<img src="images/close.png" alt="">
</li>
<li>
<img src="images/QQ图片20220125221525.png" alt="">
</li>
<li>小龙格林商城APP</li>
<li>立即打开</li>
</ul>
</header>
</body>
/* index.css文件 顶部*/
body {
width: 100%;
min-width: 320px;
max-width: 1080px;
margin: 0 auto;
font-size: 14px;
font-family: Helvetica, sans-serif;
color: #666;
line-height: 1.5;
}
.app {
height: 45px;
}
ul {
/* 清除边框,清除ul中的原点 */
margin: 0;
padding: 0;
list-style: none;
}
.app ul li {
float: left;
height: 45px;
line-height: 45px;
text-align: center;
background-color: #333333;
color: #ffff;
}
.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图片和文字需要居中对齐 */
vertical-align: middle;
}
.app ul li:nth-child(3) {
width: 57%;
}
.app ul li:nth-child(4) {
width: 25%;
background-color: #F63515;
}
得到Header样式
13.3 搜索模块布局
类似圣杯布局:左右固定,中间自适应
<!-- 搜索 -->
<div class="search-wrap">
<div class="search-btn"></div>
<div class="search"></div>
<div class="search-login"></div>
</div>
/* index.css文件 搜索 */
.search-wrap {
position: relative;
/* 子盒子添加了一个margin-top,为了不影响自身,则需添加overflow:hidden */
overflow: hidden;
height: 44px;
}
.search-btn {
position: absolute;
top: 0;
left: 0;
background-color: pink;
width: 40px;
height: 44px;
}
.search {
background-color: skyblue;
height: 30px;
border-radius: 15px;
margin: 0 50px;
margin-top: 7px;
}
.search-login {
position: absolute;
top: 0;
right: 0;
background-color: purple;
width: 40px;
color: #ffff;
height: 44px;
}
此时的效果图:
13.4 搜索模块布局内容填充
<!--布局补写 搜索 -->
<div class="search-wrap">
<div class="search-btn"></div>
<div class="search">
<div class="gl-icon"></div>
</div>
<div class="search-login">登录</div>
</div>
/*index.css文件 补写*/
.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
}
.gl-icon {
width: 20px;
height: 15px;
position: absolute;
top: 8px;
left: 13px;
background: url(../images/gl.png) no-repeat;
background-size: 20px 15px;
}
.gl-icon::after {
content: '';
position: absolute;
display: block;
top: 0;
right: -8px;
width: 1px;
height: 15px;
background-color: #ccc;
}
13.5 二倍精灵图的做法
- 遇到需要缩放的精灵图做法:
- 可在firework里将精灵图等比例缩放为原来的一半
- 根据大小测量坐标。但是注意在代码里,background-size也要写:精灵图原来宽度的一半。
精灵图缩放三个步骤:
1.在切图工具中将精灵图缩放为原来的一半大小。
2.量一下缩放后的大小,写代码width和height,得到坐标59px和194px。
3.将精灵图缩放为原大小的一半,background-size: 104px auto
<!-- 搜索 -->
......
<div class="sou"></div>
......
.sou {
position: absolute;
width: 20px;
height: 15px;
top: 8px;
left: 50px;
background-color: pink;
background: url(../images/jd-sprites.png) no-repeat -80px 0;
background-size: 200px auto;
}
13.6 焦点图制作
放入图片,设置好盒子的宽高
<!-- 主体内容部分 -->
<div class="main-content">
<!-- 滑动图 -->
<div class="slider">
<img src="./images/huadong1.jpg" alt="">
</div>
</div>
.slider img {
width: 100%;
}
此时页面展示如下:
应将图片展示在搜索栏下方,所以改动搜索栏的信息,将搜索栏改为固定定位:
- 注:固定定位与父盒子无关,不继承宽度。所以需要再设置宽高。
/* 将 .search-wrap搜索 的样式进行修改 */
.search-wrap {
position: fixed;
/* 子盒子添加了一个margin-top,为了不影响自身,则需添加overflow:hidden */
overflow: hidden;
width: 100%;
height: 44px;
min-width: 320px;
max-width: 1080px;
}
最后展示情况如下:
13.7 品牌日模块制作
品牌日的布局如下,分成三块
<!-- 活动日 -->
<div class="brand">
<div class="b1">
<a href="#">
<img src="./images/20220126.jpg" alt="">
</a>
</div>
<div>
<a href="#">
<img src="./images/20220126-3.jpg" alt="">
</a>
</div>
<div>
<a href="#">
<img src="./images/20220126-2.jpg" alt="">
</a>
</div>
</div>
/* 活动日 */
.brand {
border-radius: 10px 10px 0 0;
overflow: hidden;
}
.brand div {
/* 浮动在一起 */
float: left;
width: 33.33%;
}
.brand div img {
width: 100%;
}
得到展示如下:
发现该层与上一层之间有缝隙。原因:图片默认会有空白缝隙。
解决方法:
/*加入一个样式:*/
img {
vertical-align: top;
}
13.8 补充:行内元素&块元素&行内块元素
- 行内元素:不会独占一行,总是和相邻的行内元素在同一行上(物以类聚);设置宽高无效,水平方向的padding和margin属性可以设置,但是垂直方向上的无效。默认宽度是他自身内容的宽度。行内元素只能容纳其他行内元素或者文本。
eg标签:a、abbr、big、br、em、img、input、label、span、strong、select等
注:文字类的块级元素不能放块元素,例如<p>/<h1>~<h6>/<dt>
- 块元素:独占一行,可以设置其宽度、高度,内外边距。宽度默认为所在容器的100%(即容器宽度)。可以容纳行内元素和其他块元素。
eg标签:div、h1-h6、menu、p、table
注:文字类的块级元素不能放块元素,例如<p>、<h1>~<h6>、<dt>
- 行内块元素:和相邻行内元素在同一行,但是之间会有空白缝隙。默认宽度是他本身内容的宽度。宽度、高度、行高、外边距以及内边距都可以手动设置。
- 模式转换:
- 块元素——>行内元素 : display:inline;
- 行内元素——>块: display:block;
- 块、行内元素——>行内块: display: inline-block;
13.9 导航栏nav模块制作
<!-- nav导航 -->
<nav>
<a href="">
<img src="./images/nav1.jpg" alt="">
<span>超市</span>
</a>
<a href="">
<img src="./images/nav2.jpg" alt="">
<span>电器</span>
</a>
<a href="">
<img src="./images/nav3.jpg" alt="">
<span>服饰</span>
</a>
<a href="">
<img src="./images/nav4.jpg" alt="">
<span>买菜</span>
</a>
<a href="">
<img src="./images/nav5.jpg" alt="">
<span>速达</span>
</a>
<a href="">
<img src="./images/nav6.jpg" alt="">
<span>充值</span>
</a>
<a href="">
<img src="./images/nav7.jpg" alt="">
<span>货运</span>
</a>
<a href="">
<img src="./images/nav8.jpg" alt="">
<span>促销</span>
</a>
<a href="">
<img src="./images/nav9.jpg" alt="">
<span>红包</span>
</a>
<a href="">
<img src="./images/nav10.jpg" alt="">
<span>个人</span>
</a>
</nav>
a {
color: rgb(73, 71, 71);
text-decoration: none;
}
/* nav导航 */
nav a {
/* 有浮动即可不用转化 */
float: left;
width: 20%;
text-align: center;
}
nav a img {
width: 40px;
margin: 10px 0;
}
nav a span {
/* 行内元素转为块元素 */
display: block;
}
得到下面展示:
13.10 新闻模块
<!-- 新闻模块 -->
<div class="news">
<a href="#">
<img src="./images/new1.dpg" alt="">
</a>
<a href="#">
<img src="./images/new2.dpg" alt="">
</a>
<a href="#">
<img src="./images/new3.dpg" alt="">
</a>
</div>
/* news新闻模块 */
.news {
display: inline-block;
margin-top: 15px;
}
.news img {
width: 100%;
}
.news a {
float: left;
/* c3的盒子模型,border可以直接加进去不占像素位置了 */
box-sizing: border-box;
}
.news a:nth-child(1) {
width: 50%;
}
/*
.news a:nth-child(2) {
width: 25%;
}
.news a:nth-child(3) {
width: 25%;
} */
.news a:nth-child(n+2) {
width: 25%;
border-left: 1px solid #fff;
}
- 本小节知识点:
/* c3的盒子模型,border可以直接加进去不占像素位置了 */
/*
.news a:nth-child(2) {width: 25%;}
.news a:nth-child(3) {width: 25%;}
可写成:*/
/* n+2表示从第2个往后面选 */
.news a:nth-child(n+2) {
width: 25%;
border-left: 1px solid #fff;
}
得到展示图:
13.11 商城移动端首页终结
/*css3盒子模型*/
box-sizing:border-box;
-webkit-box-sizing:border-box;
/*点击高亮需清除,将其设置为transparent完成透明*/
*{-webkit-tap-highlight-color:transparent;}
/*在移动端浏览器默认的外观在ios上加这个属性才能给按钮和输入框自定义样式*/
input{-webkit-appearance:none;}
/*禁止长按页面时弹出的菜单*/
img,a{-webkit-touch-callout:none}
此时,Header上方的叉叉按钮偏上,将代码更新为:
img {vertical-align: middle;}
得到这个样子:
Day2
00. 移动WEB开发之flex布局
00.1目标
说出flex盒子的布局原理
使用flex布局常用属性
独立完成携程移动端首页案例
00.2目录
flex布局体验
flex布局原理
flex布局父项常见属性
flex布局子项常见属性
携程网首页案例制作
01.flex布局体验
flex布局体验
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
<style>
div {
/* 给父盒子加上display:flex */
/* 不需要再清除浮动了,功能很多 */
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* flex布局中的方法有很多,举例 */
justify-content: space-around;
}
div span {
width: 150px;
height: 100px;
background-color: blue;
margin-right: 5px;
flex: 1;
}
</style>
02.flex布局原理
原理总结:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
- 任何一个容器都可以指定为flex布局。
- 当父盒子设为flex布局后,子元素的float、clear和vertical-align属性将失效。
- (flex布局=弹性布局=弹性盒布局=伸缩盒布局=伸缩布局)
采用了Flex布局的元素都称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,成为Flex项目(flex item),简称“项目”。
举例:
03.flex布局父项常见属性(6个)
03.1 flex-direction 设置主轴的方向☆
默认的主轴为x轴,则y轴为侧轴。flex-direction:row
也可以设置y轴为主轴,则x轴就为侧轴。flex-direction:column
元素是跟着主轴来排列的。
03.2 justify-content 设置主轴子元素排列☆
默认值为justify-content:flex-start。
03.3 flex-wrap 设置子元素是否换行
默认值为flex-wrap:nowrap。
03.4 align-items 设置侧轴上的子元素的排列方式(单行)
默认主轴依旧为x轴,侧轴为y轴
居中代码直接使用:
align-items:center
justify-content:center
03.5 align-contents 设置侧轴上的子元素的排列方式(多行)
03.6 align-contents和align-items的区别
03.7 flex-flow 设置复合属性
flex-flow属性时flex-direction和flex-wrap属性的复合属性
flex-direction: column;
flex-wrap: wrap;
/* 复合写法,可写为: */
flex-flow: column wrap;
04.flex布局子项常见属性(个)
04.1 flex子项目占的份数
item{
flex:<number>
}
- 可以用于圣杯布局的写法
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
<style>
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: yellow;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: skyblue;
}
</style>
04.2 align-self和order
- align-self
- order
/* 用order来排序 */
div span:nth-child(2) {
/* 默认是0,-1比0小,所以要往前面排序{ */
order: -1;
}
得到图示
05.携程网案例
05.1 准备工作,技术选型
方案:采用单独制作移动端页面方案
技术:布局采用flex布局
自己已制作好的界面链接:格林旅行记
05.2 搜索模块布局
<div class="search-index"></div>
/* 搜索模块 */
.search-index {
/* 固定定位对margin的修改没有作用 */
/* 固定定位是