移动端开发2（前端二）

Day14

1.视口：浏览器显示内容的屏幕区域

< meta name=“viewport”//视图标签 content=“width”//设备宽度 initial-scale=1.0//最初缩放比 maximum-scale:1.0//最大缩放比

minimum-scale:1.0//最小缩放比 user-scaleable=yes/no//用户是否缩放>

2.二倍图

手机端物理像素（分辨率）与开发像素不尽相同 不同手机物理像素各不相同

retina(视网膜屏幕)—>提高屏幕显示的细腻程度

3.图片拉伸（背景图片大小）

background-size:图片宽度 图片高度;(只写一个默认为宽度)

cover（完全覆盖）

contain（将其扩大至最大尺寸）

百分比（相对于父盒子来讲）

4.css3盒子模型

-webkit-box-sizing: border-box;//不管加padding还是border盒子都不会被撑大

…-tap-hightlight-color: transparent;//移动端链接背景不再有高亮效果

…-appearance: none;//ios中button去掉土效果

…-touch-cauout: none;//禁用长按页面时的弹出菜单

5.移动端技术选项

单独制作页面：（主流）

流式布局（百分比布局）、flex弹性布局（强力推荐）、lesstremet+媒体查询布局、混合布局

响应式页面兼容移动端

媒体查询、bootstarp

附练习代码：

❌

打开京东，购物更轻松

立即打开

潮牌快买

潮牌快买

潮牌快买

潮牌快买

潮牌快买

潮牌快买

潮牌快买

潮牌快买

潮牌快买

潮牌快买

大牌手机

限时促销

大牌手机

限时促销

大牌手机

限时促销

大牌手机

限时促销

大牌手机

限时促销

大牌手机

限时促销

大牌手机

限时促销

大牌手机

限时促销

body {

/* 流式布局写移动端页面（针对iphone678），即body中用百分比布局 */

width: 100%;

height: 2000px;

min-width: 320px;

max-width: 640px;

margin: 0 auto;

font-size: 14px;

font-family: -apple-system, Helvetica, sans-serif;

/*苹果默认的字体 */

color: #666;

line-height: 1.5;

}

• {

margin: 0;

padding: 0;

}

.app {

height: 45px;

text-align: center;

line-height: 45px;

}

.app ul li {

float: left;

height: 45px;

background-color: #333;

list-style: none;

color: #fff;

}

.app ul li:nth-child(1) {

width: 8%;

}

.app ul li:nth-child(2) {

width: 10%;

}

.app ul li:nth-child(2) img {

width: 30px;

/* 使图片垂直居中 */

vertical-align: middle;

}

.app ul li:nth-child(3) {

width: 57%;

}

.app ul li:nth-child(4) {

width: 25%;

background-color: red;

}

/* 搜索框 */

.search {

/* 子盒子用margin会把父亲带下来，父亲用overflow:hidden拒绝 */

overflow: hidden;

position: fixed;

height: 44px;

max-width: 640px;

min-width: 320px;

/* 固定定位一定要有盒子宽度 */

width: 100%;

}

.search-btn {

position: absolute;

top: 0;

left: 0;

background-color: pink;

background: url(…/images/timg.jfif) no-repeat;

background-size: 35px;

margin: 7px 0 0 5px;

width: 40px;

height: 44px;

}

.search-search {

position: relative;

margin: 0 50px;

height: 30px;

border-radius: 15px;

background-color: #ccc;

margin-top: 7px;

}

.jd-icon {

float: left;

font-size: 20px;

color: red;

margin: 1px 7px;

}

.jd-after {

float: left;

width: 1px;

height: 15px;

margin-left: 5px;

margin-top: 6px;

color: purple;

line-height: 15px;

}

.content {

float: left;

color: deeppink;

margin-left: 20px;

margin-top: 6px;

font-size: 12px;

}

.search-login {

position: absolute;

top: 0;

right: 0;

margin-right: 5px;

color: orange;

width: 40px;

height: 44px;

text-align: center;

line-height: 44px;

}

.search-login a {

text-decoration: none;

color: deeppink;

}

/* 大图 */

.photo img {

width: 100%;

}

/* nav */

.nav {

margin-top: 20px;

width: 100%;

}

.nav a {

float: left;

text-decoration: none;

width: 20%;

}

.nav a img {

width: 40px;

margin-left: 13px;

}

.nav a p {

font-size: 14px;

margin: 3px 6px;

}

/* News(布局的不清晰，边框问题参考商品盒子) */

.newperson img {

margin-top: 20px;

width: 100%;

}

.newperson a:nth-child(1) {

float: left;

width: 45%;

margin-left: 5px;

}

.newperson a:nth-child(2) {

float: right;

width: 45%;

margin-right: 10px;

}

/* 过渡 */

.guodu {

width: 100%;

}

.guodu img {

/* 必须得让图片转化为block才能让它居中！！！ */

display: block;

width: 50%;

margin: auto;

}

/* 商品盒子 */

.shopping {

margin-top: 20px;

}

.shopping a {

float: left;

text-decoration: none;

width: 25%;

border-right: 1px solid orangered;

border-bottom: 1px solid #ccc;

box-sizing: border-box;

}

.shopping a img {

width: 80%;

}

.shopping a h3 {

color: orange;

margin-left: 5px;

}

.shopping a p {

margin-left: 8px;

}

Day15

1.流式布局（内容两侧可随窗口变化而伸缩）

width宽度用于百分比设定

max/min-width: xxpx;//设定最大最小宽度

2.flex布局（父项属性、子项属性）

display:flex;

当父盒子设定flex布局后，子元素float,clear,vertical-align将失效

伸缩布局=弹性布局=伸缩盒布局=flex布局

3.父项属性

①flex-decoration设置主轴方向

row(默认)：从左到右 row-reverse:从右到左

column:从上到下 colume-reserse:从上到下

②justify-content 设置主轴子元素排列方式

flex-start(默认)

附练习代码：

搜索：目的地/酒店/景点/航班号

登录

攻略景点

攻略景点

攻略景点

攻略景点

攻略景点

酒店

海外酒店

特价酒店

民宿酒店

星级酒店

酒店

海外酒店

特价酒店

民宿酒店

星级酒店

酒店

海外酒店

特价酒店

民宿酒店

星级酒店

电话卡

电话卡

电话卡

电话卡

电话卡

电话卡

电话卡

电话卡

电话卡

电话卡

搜索更多 >

body {

max-width: 540px;

min-width: 320px;

margin: 0 auto;

color: #000;

background: white;

overflow-x: hidden;

-webkit-tap-highlight-color: transparent;

height: 1111px;

}

a {

text-decoration: none;

color: #fff;

}

a:hover {

color: orange;

}

ul {

list-style: none;

padding: 0;

margin: 0;

}

div {

/* Css3智力去边距问题 */

box-sizing: border-box;

}

/* part of header */

.header {

display: flex;

position: fixed;

top: 1px;

left: 50%;

/* 注意固定定位要有宽度 */

max-width: 540px;

min-width: 320px;

height: 44px;

/* background-color: pink; */

/* 已经有定位的盒子不能再用margin，方法:①先left改为50per.②再用translateX（-50per） */

transform: translateX(-50%);

border-bottom: 1px solid s;

width: 100%;

z-index: 999;

/为了让搜索框浮在背景图上边/

}

.search {

position: relative;

height: 26px;

flex: 1;

margin: 6px 20px;

font-size: 12px;

border-radius: 28px;

box-shadow: rgba(0, 0, 0, .8);

background-color: honeydew;

}

.search::before {

content: “”;

display: block;

width: 15px;

height: 15px;

background: url(…/images/[email protected]) no-repeat 0px 0px;

background-size: 21px 123px;

margin: 5px;

}

.search span {

position: absolute;

top: 5px;

left: 25px;

color: grey;

}

.user {

width: 44px;

height: 44px;

/* background-color: purple; */

}

.user a {

font-size: 10px;

margin-left: 10px;

display: block;

margin-bottom: 4px;

color: white;

}

.user::before {

content: “”;

/* 得转化为块级元素才有大小 */

display: block;

width: 23px;

height: 23px;

/* 精灵图的位置首先坐标是负值，然后bgs要变原图1/2 ,量取图片的位置量取图片的左上角*/

background: url(…/images/[email protected]) no-repeat 0px -37px;

background-size: 21px 123px;

margin-top: 5px;

margin-left: 10px;

}

/* part of focus */

.focus {

position: relative;

overflow: hidden;

}

.focus img {

width: 100%;

height: 160px;

border-radius: 20px;

}

.focus ul {

width: 500%;

overflow: hidden;

}

.focus ul li {

float: left;

width: 20%;

}

.focus ol {

position: absolute;

width: 50px;

right: 7px;

bottom: 6px;

margin: 0;

}

.focus ol li {

display: inline-block;

width: 5px;

height: 5px;

background-color: white;

border-radius: 2px;

}

.focus ol li.current {

width: 10px;

background-color: #6cd559;

}

/* part of local-nav */

.local-nav {

float: left;

height: 64px;

background-color: #fff;

border-radius: 8px;

margin-left: 20px;

}

.local-nav li {

float: left;

margin-left: 15px;

}

.local-nav a {

/* 使用flex布局 */

display: flex;

/* 因为图字是上下排列，所以要先将排列方式改为y轴排列 */

flex-direction: column;

/* 侧轴需要设置居中对齐(单行) */

align-items: center;

}

.local-nav .local-nav-icon {

font-size: 14px;

margin-top: 8px;

color: #666;

}

.local-nav-icon::before {

content: “”;

display: block;

width: 32px;

height: 32px;

margin-left: 7px;

background: url(…/images/[email protected]) no-repeat 0 0;

background-size: 40px 200px;

}

/* part of mainnav */

.mainnav {

margin-top: 70px;

}

.nav-common {

display: flex;

height: 88px;

background-color: pink;

border-radius: 8px;

}

.nav-item {

flex: 1;

/* 用display: flex是为子类用的 */

display: flex;

flex-direction: column;

border: 1px solid #fff;

}

.nav-item a {

flex: 1;

text-align: center;

line-height: 44px;

font-size: 14px;

}

.nav-item a:nth-child(1) {

border-bottom: 1px solid #fff;

}

.nav-common:nth-child(2) {

margin: 3px 0;

}

.nav-item:nth-child(1) {

background: url(…/images/[email protected]) no-repeat bottom center;

background-size: 103px auto;

}

.nav-common:nth-child(1) {

background: -webkit-linear-gradient(left, #fa5a55, #fa994d);

}

.nav-common:nth-child(2) {

background: -webkit-linear-gradient(left, #4b90ed, #53bced);

}

.nav-common:nth-child(3) {

background: -webkit-linear-gradient(left, #34c2a9, #6cd559);

}

/* part of nav-entry */

.nav-entry {

float: left;

background-color: #fff;

display: flex;

border-radius: 8px;

flex-wrap: wrap;

}

.nav-entry li {

float: left;

margin-left: 30px;

margin-top: 10px;

margin-bottom: 3px;

flex: 20%;

}

.nav-entry li a {

flex-direction: column;

align-items: center;

display: flex;

}

.nav-entry li a span {

color: gray;

}

.nav-entry-icon {

background: url(…/images/[email protected]) no-repeat 0px -207px;

background-size: 25px 250px;

width: 28px;

height: 28px;

}

/* part of sales-box */

.box {

float: left;

background-color: honeydew;

height: 100px;

width: 100%;

margin: 0 4px;

}

.box-hd {

position: relative;

background-color: honeydew;

height: 40px;

right: -50px;

width: 100%;

}

.box-hd a {

position: absolute;

top: 10px;

left: 260px;

background: -webkit-linear-gradient(left, #34c2a9, #6cd559);

border-radius: 16px;

padding: 3px 10px 3px 10px;

}

.boxmain {

float: left;

}

.row {

display: flex;

}

.row a img {

/* 每张图片占每个a链接的百分之百 */

width: 100%;

}