动画自动滚动div/像素基础知识/手机端样式选择/

大体上和原网页差不多，一个主页和一个子页面

动画自动滚动div：

<!DOCTYPE html>

<html>

<head>

margin: 0px;

padding: 0px;

}

#banner{

width: 100%;

height: 500px;

overflow: hidden;

}

#banner_in{

width: 7680px;

height: 500px;

position: relative;

-webkit-animation: banner 8s ease infinite;

}

@-webkit-keyframes banner{

/*0%{

left:0px

}

33%{

left: -1920px;

}

66%{

left: -3840px;

}

100%{

left: -5760px;

}*/

0%{

left: 0px;

}

10%{

left: 0px;

}

30%{

left: -1920px;

}

40%{

left: -1920px;

}

70%{

left: -3840px;

}

80%{

left: -3840px;

}

100%{

left: -5760px;

}

</style>

</head>

<body>

<img src="../img/banner1.png" /><!--

--><img src="../img/banner2.png" /><!--

--><img src="../img/banner3.png" /><img src="../img/banner1.png" />

</div>

</body>

</html>

原理图：

新知识

PPI：

viewport：

<!DOCTYPE html>

<html>

<head>

<!--[了解像素基础知识]

① 设备物理像素：设备上一个像素点

② 设备无关像素：可以与物理像素通过dpr转换。（当dpr为1时，设备无关像素=设备物理像素）

③ CSS像素：CSS中使用的抽象概念。当页面没有缩放时，CSS像素=设备无关像素。

设备像素比dpr = 物理像素/设备无关像素

-->

<!--[重点 viewport]

设置布局viewport的各种信息：

width=device-width：布局viewport宽度等于设备宽度

initial-scale=1.0：默认缩放比为1(目的：让CSS像素=设备无关像素)

maximum-scale=1：最大缩放比为1

minimum-scale=1：最小缩放比为1

user-scalable=no：用户禁止缩放(iOS10中的sarifi浏览器失效)

-->

<!--

禁止设备将疑似手机号/邮箱,进行识别。取消点击拨打电话等事件

-->

<!--

iOS 添加到主屏幕时，WebAPP的标题

-->

<!--

iOS 添加到主屏幕时，WebAPP的icon图标

-->

<!--

iOS 添加到主屏幕时，启用WebAPP全屏模式，删除顶端地址栏和底部工具栏

-->

<!--

iOS 添加到主屏幕时，WebAPP顶部状态的样式

可选值：

black：黑色

default：默认白色

black-translucent(半透明)：网页内容充满整个屏幕，顶部状态栏会遮挡网页头部。

-->

<!--

设置浏览器，时候最新的IE和chrome去编译

>>> 不是手机端专用，PC网页一般也需要设置

-->

<!-- 其他几个meta标签，了解即可

① 设置浏览器过期时间，-1表示时刻过期，及每次刷新都要请求最新数据

② 是否设置浏览器缓存，否

③ 是否从本机读取缓存文件，否

-->

margin: 0px;

padding: 0px;

}

.div1{

width: 100%;

height: 68px;

-we

}

</style>

</head>

<body>

1231231231313

adsda@sdad.com

</div>

</body>

</html>

学习新知识：

margin: 0px;

padding: 0px;

/* 【手机端样式选择】

* 1、一般手机均不支持微软雅黑，中文字体无需设置，使用手机默认即可；

* 2、英文字体，一般选择font-family:Helvetica;

font-family:"宋体",Helvetica,sans-serif;

/* 禁止选中文本(如无文本选中需求,此为必选项)

* 1、手机端禁止长按选中；

* 2、电脑端禁止鼠标选择；

-webkit-user-select: none;

-moz-user-select: none;

/* 去除表单默认外观

* 手机、电脑均可使用；

-webkit-appearance:none;

-moz-appearance: none;

appearance: none;

}

/* 禁止长按链接与图片弹出菜单 */

a, img {

-webkit-touch-callout: none;

}

/* 修改input的placeholder默认样式

* 修改input获得焦点时placeholder样式

/*谷歌*/

input::-webkit-input-placeholder{color:red;}

input:focus::-webkit-input-placeholder{color:green;}

/*火狐19+*/

input::-moz-placeholder{color:red;}

input:focus::-moz-placeholder{color:green;}

/*IE 10+*/

input::-ms-input-placeholder{color:red;}

input:focus::-ms-input-placeholder{color:green;}

.div1{

width: 100%;

height: 68px;

}

</style>

</head>

<body>

13181621008

哈哈

jianghao@jerei.com

<a href="index.html">哈哈哈哈哈哈</a>

<!--

打电话/发短信/发邮件

-->

打电话给:0535-10086

</a>

<a href="mailto:jianghao@jerei.com">发邮件给: jianghao@jerei.com</a>

</div>

</body>

</html>

制作第一个JD 手机APP：

做手机APP页；

京东手机站

我临摹的网页：

html代码如下：

<html>

<head>

<title>京东商城——被杰瑞教育收购了</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

<div>

<br />

京东超市

</div>

<div>

<br />

全球购

</div>

<div>

<br />

服装城

</div>

<div>

<br />

生鲜

</div>

<div>

<br />

火车票

</div>

<div>

<br />

充值中心

</div>

<div>

<br />

惠赚钱

</div>

<div>

<br />

领券

</div>

<div>

<br />

物流查询

</div>

<div>

<br />

我的关注

</div>

</nav>

<div ><span>热</span>酷玩3C，爆品低至五折</div>

<div ><span>热</span>荣耀超级战单倒计时1天</div>

</div>

</div>

</section>

<div class="time1">01</div>:

<div class="time1">23</div>:

</div>

<div class="top2">遇见直播愈见美好</div>

</div>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

<!--<div class="tu2 bai">

</div>

</div>

<p>品牌限购特卖</p>

</div>

</div>-->

</div>

<!--<div id=ai>

</div>

-->

排行榜

</strong><br />

好货大赏

</p><br />

</div>

闪购

</strong><br />

品牌限时特卖

</p><br />

</div>

</div>

玩3C

</strong><br />

C5Pro 放量抢

</p><br />

</div>

京东家电

</strong><br />

满1000减150

</p><br />

</div>

京东超市

</strong><br />

限量一元抢

</p><br />

</div>

爱家

</strong><br />

家纺满599-150

</p><br />

</div>

爱宝宝

</strong><br />

低至两件8元

</p><br />

</div>

爱美丽

</strong><br />

粉色小羊皮

</p><br />

</div>

爱吃

</strong><br />

满99减5元

</p><br />

</div>

爱逛

</strong><br />

运动99-150

</p><br />

</div>

</div>

全球尖货

</strong><br />

全球自营好货

</p><br />

<span class="span3">尤妮佳低至79</span>

</div>

东京精选

</strong><br />

热销护肤排行

</p><br />

</div>

京东体育

</strong><br />

跨店299减40

</p><br />

<span class="span3">领超值优惠券</span>

</div>

奢侈大牌

</strong><br />

每满1000减100

</p><br />

</div>

环球时尚

</strong><br />

299减100

</p><br />

</div>

珠宝首饰

</strong><br />

新品首发

</p><br />

</div>

设计师

</strong><br />

潮流设计精选

</p><br />

</div>

达人精选

</strong><br />

运动潮买指南

</p><br />

</div>

</div>

智能生活

</strong><br />

低至1元

</p><br />

</div>

京东众筹

</strong><br />

碳纤维骑行车

</p><br />

</div>

京东旅行

</strong><br />

9.9秒杀

</p><br />

</div>

白条商城

</strong><br />

最高12期免息

</p><br />

</div>

爱车生活

</strong><br />

优惠1500元

</p><br />

</div>

电影娱乐

</strong><br />

1元赢4999！

</p><br />

</div>

清仓二手

</strong><br />

iphone 6秒杀

</p><br />

</div>

大药房

</strong><br />

孕妇叶酸

</p><br />

</div>

陪伴宝宝

</strong><br />

一元秒好货

</p><br />

</div>

京东拍卖

</strong><br />

匠心工艺典藏

</p><br />

</div>

</div>

手机数码

</strong><br />

Surface超低价

</p><br />

</div>

时尚馆

</strong><br />

满299减100

</p><br />

</div>

中外名酒

</strong><br />

买二付一

</p><br />

</div>

大家电馆

</strong><br />

满1000减少100

</p><br />

</div>

母婴馆

</strong><br />

抽券199减100

</p><br />

</div>

电脑办公

</strong><br />

尊享3重好礼

</p><br />

</div>

鞋靴箱包

</strong><br />

满299减少20

</p><br />

</div>

小家电馆

</strong><br />

白条6期免息

</p><br />

</div>

生鲜

</strong><br />

一件包邮

</p><br />

</div>

运动户外

</strong><br />

满299减40

</p><br />

</div>

图书音海

</strong><br />

满199减100

</p><br />

</div>

美食城

</strong><br />

买1送1

</p><br />

</div>

</div>

精选

</strong>

20家好店为你精心推荐

</p>

<p class="p2">HeyJuice官方旗舰店</p>

</div>

精选

</strong>

20家好

</p>

<p class="p2">森马自营旗舰店</p>

</div>

</div>

自拍不够美？自拍达人必备高像素

</strong>

<div>

</div>

让音乐伴你晨跑，运动蓝牙耳机推荐

</strong>

<div>

</div>

</div>

精彩现场

</strong>

杨迪带你揭秘热水器极限恒温的小秘密

</p>

</div>

<div>

</div>

运动空间

</strong>

逆袭女神告诉你为什么瘦不下来的小秘密

</p>

</div>

<div>

</div>

</div>

</div>

</div>

</div>

<ul>

<li>

<span>Bolaw伯劳狼牙棒强光防身远射手电筒棒球棒户外棍式灯 BZ21 升级款 51cm 电池+充电器

</span>

</div>

￥<span class="big">105</span><span class="small">.00</span><span class="bian">看相似</span>

</span>

</li>

<li>

<span>【京东超市】富居(FOOJO)珊瑚绒地垫厨卫入门垫40*60cm七彩羽叶

</span>

</div>

￥<span class="big">15</span><span class="small">.90</span><span class="bian">看相似</span>

</span>

</li>

<li>

<span>果力娃儿童装男女童春秋装品牌运动套装2017新款中大童春季长袖金丝绒卫衣学生校服两件套黑色M标 150码建议身高145cm左右

</span>

</div>

￥<span class="big">105</span><span class="small">.00</span><span class="bian">看相似</span>

</span>

</li>

<li>

<span>米妮班尼童装女童套装春装2017新款儿童长袖运动两件套韩版中大童春秋季休闲服宝宝衣服 A款黑色 130码建议身高120cm左右

</span>

</div>

￥<span class="big">79</span><span class="small">.00</span><span class="bian">看相似</span>

</span>

</li>

<li>

<span>南极人2017夏季小背心女白色内搭打底衫工字多色修身女装外穿吊带背心女ML15 白色 M/160

</span>

</div>

￥<span class="big">49</span><span class="small">.00</span><span class="bian">看相似</span>

</span>

</li>

</ul>

</div>

</ul>

</div>

</ul>

<br />

</div>

<br />

</div>

<!--<div><span><img src="img/a-home.png"/></span></div>

<ul>

</ul>

</div>

</footer>

</body>

</html>

css代码如下：

margin: 0px;

padding: 0px;

font-family: "微软雅黑",helvetica,sans-serif;

-moz-user-select: none;

-webkit-user-select: none;

-webkit-touch-callout: none;

transition: all .3s ease;

}

body{

min-width: 300px;

margin: 0 auto;

}

* 页面主体

#body{

min-width: 300px;

max-width: 640px;

margin: 0 auto;

height: 5710px;

}

/*头部*/

#body #search{

width: 100%;

height: 40px;

position: fixed;

max-width: 640px;

z-index: 10;

}

#body #search .input{

margin-left: 66px;

margin-right: 46px;

height: 40px;

}

#body #search .input input{

width: 100%;

height: 30px;

border-radius: 15px;

border: hidden;

margin-top: 5px;

background-repeat: no-repeat;

background-position: 5px center;

padding-left: 30px;

outline: none;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

#body #search .logo{

width: 56px;

position: absolute;

top: 11px;

left: 5px;

}

#body #search .btn{

width: 46px;

height: 40px;

position: absolute;

right: 0px;

top: 0px;

line-height: 40px;

text-align: center;

color: white;

font-size: 15px;

}

* Banner

#banner{

width: 100%;

overflow: hidden;

}

#banner .banner_in{

width: 500%;

position: relative;

-webkit-animation: banner 10s ease infinite;

}

#banner .banner_in img{

width: 20%;

}

* Banner下广告图

#adv img{

width: 100%;

}

* Nav 导航区

#nav{

width: 100%;

margin-top: 10px;

margin-bottom: 10px;

position: relative;

min-height: 127px;

}

#nav div{

width: 20%;

float: left;

text-align: center;

font-size: 14px;

margin-bottom: 10px;

}

#nav div img{

width: 50%;

}

#kuaibo{clear: all;

width: 100%;

padding-bottom: 10px;

padding-top: 10px;

}

#kuaibo .bo{width: 90%;

margin-left:auto;

margin-right: auto;

height: 30px;

position: relative;

font-size: 12px;

border-radius: 6px;

overflow: hidden;}

#kuaibo .bo img{

width:73px;

height: 16px;

position: absolute;

top:7px;

left: 8px;

display: block;

}

#kuaibo .bo .gun{position: relative;

line-height: 30px;

margin: 0 42px 0 80px;

height: 300%;

-webkit-animation: gun 3s ease infinite;

/*width: 100%;*/}

@-webkit-keyframes gun{

0%{top: 0%;}

20%{top: 0% ;}

30%{top: -100%;}

50%{top:-100%}

60%{top:-200%}

80%{top:-200%}

90%{top:-300%}

100%{top:-300%}

}

#kuaibo .bo .gun span{color: red;margin-right: 5px;}

#kuaibo .bo .bo3{position: absolute;

right:8px;top:7px;color: black;

}

#miaosha{font-size: 12;

width: 100%;

position: relative;

}

#miaosha .content{box-shadow: 0 1px 1px #f2f2f2;

}

#miaosha .content .top{

width:100%;height: 34px;line-height: 34px;/*overflow: hidden;*/

padding-bottom: 6px;}

#miaosha .content .top .top1{display: inline-block;width: 68%;}

#miaosha .content .top .top1 img{float: left;

display: inline-block;width: 69px;height: 27px;margin-top: 4px;

margin-right: 6px;}

#miaosha .content .top .top1 strong{font-size: 12px;

color: #232326;

font-weight: bold;

display: inline-block;}

#miaosha .content .top .top1 .time1{

display: inline-block;

width: 19px;

height: 17px;

border: 1px solid #F3F3F3;

line-height: 17px;

text-align: center;

font-size: 9px;margin-right: 3px;}

#miaosha .content .top .top2{width: 32%;height: 34px;overflow: hidden;

display: inline-block;line-height: 34px;padding: 0px 10px;

color: #f23030;font-size: 10px;position:absolute;

box-sizing: border-box;

/*padding-right: 22px;*/}

#miaosha .content .tupian{width: 100%;

height: 100%;

overflow: hidden;

font-size: 0px;}

#miaosha .tu{

width: 100%;overflow: hidden;

}

#miaosha .list {width: 120%;

list-style: none;}

#miaosha .list li{

float: left;

width: 25%;

/*height: 50px;*/

/**/

text-align: center;

font-size: 12px;

color: #6f6a78;

padding-bottom: 11px;

}

#miaosha .list li div{width: 100%;

padding: 0 10px;

border-right: 1px solid #F7F7F7;

box-sizing: border-box;position: relative;}

#miaosha .list li div img{

width: 100%;

}

#miaosha .list li div span{

position: absolute;

font-size: 9px;

color: white;

left: 10px;bottom: 0px;

}

#miaosha .list li div .span2{}

#miaosha .list li>span{display: block;font-size: 16px;

color: red;font-weight: bold;height: 16px;line-height: 16px;margin-top: 11px;

margin-bottom: 1px;

}

.tu1{width: 100%;overflow: hidden;text-align: center;box-sizing: border-box;

padding-top:10px}

.tu8{width: 90%;}

#tu2{width: 100%;overflow: hidden;}

#tu2 .tu2{width: 50%;float: left;

/*position: relative;*/

/*border-right: 1px solid #F23030;*/}

#tu2 .tu2 img{width: 100%;}

#tu2 .bai{}

#tu2 .tu2 .zi1{width: 55%;float: left;box-sizing: border-box;

padding: 8px 4px 0 8px; }

#tu2 .tu2 .zi1 strong{font-size: 12px;line-height: 20px;height: 20px;

color: #181818;}

#tu2 .tu2 .zi1 p{color: #686868;

font-size: 11px;line-height: 15px;height: 15px;margin-bottom: 2px;}

#tu2 .tu2 .tu3{width: 45%;box-sizing: border-box;

padding-top: 13px;

float: right;

padding-right: 5px;}

#tu2 .tu2 .tu3 img{width: 100%;

}

#ai{width: 100%;clear:both;}

#ai .ai-top{width: 100%; position: relative;}

#ai .ai-top img{width: 100%;}

#ai .ai-top span{position: absolute;left: 0;

right: 0;top: 7px;bottom: 0;height: 73.6%;

margin: auto;display: block;overflow: hidden;}

#ai .ai-top span img{display: block;

max-height: 100%;width: auto;

margin: 0 auto;}

#ai .tu{width: 100%;}

.di-top{width: 100%;position: relative;text-align: center;margin-top: 10px;}

.di-top span{display: block;font-size: 12px;color: #D4D5D5;

font-size:;position: relative;left: 50%;margin-left: -15%;width: 30%;z-index: 1;}

.di-top span>img{width: 13px;height: 13px;display: block;margin-right: 10px;position: absolute;

left: 5%;top: 50%;margin-top: -6px;}

.xian{width: 90%;height: 1px;position: absolute;top: 50%;

left: 5%;}

#tu2 ul{overflow: hidden;margin-top:15px;}

#tu2 ul li{list-style: none;overflow: hidden;}

#tu2 ul li{float: left;width: 50%;box-sizing: border-box;padding-bottom: 2px;position: relative;padding-right: 2px;}

#tu2 ul li .tu0{padding-bottom: 6px;}

#tu2 ul li .tu0 img{width: 100%;display: block;}

#tu2 ul li .tu0 span{height: 33px;font-size: 13px;overflow: hidden;text-overflow: ellipsis;

-webkit-box-orient: vertical;-webkit-line-clamp: 2;

display: -webkit-box;color: #232326;margin-top:5px;line-height: 17px;margin-bottom: 3px;

padding: 0 4px;}

#tu2 ul li .hot{color: #F23030;font-size: 13px;display: block;padding: 0 4px;

position: relative;top:1px;height: 25px; line-height: 25px;}

#tu2 ul li .hot .big{font-size: 19px;}

#tu2 ul li .hot .bian{display: block;position: absolute;top: 0;right: 8px;

text-align: center;color: #686868;font-size: 12px;width: 49px;height: 20px;

line-height: 16px;border: 1px solid #bfbfbf;border-radius: 2px;}

* 各种通用样式

.strong{

font-size: 18px;

line-height: 24px;

color: #181818;

}

.p{

height: 20px;

font-size: 14px;

line-height: 20px;

float: left;

width: 50%;

color: #686868;

overflow: hidden;

}

.nowrap{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.span{

font-size: 12px;

color: white;

padding: 1px 4px;

float: left;

}

.span3{

font-size: 12px;

color: white;

padding: 1px 4px;}

.row{

width: 100%;

overflow: hidden;

border-bottom: 1px solid #F7F7F7;

}

.row2{width: 100%;margin-top: 15px;

box-sizing: border-box;padding-bottom: 10px;

background-size: 100% auto;

background-repeat: no-repeat;

overflow:hidden;}

.row2 .jia{box-sizing: border-box;margin-bottom: 5px;

padding-top: 4px;padding-bottom: 4px;text-align: center;opacity: 0;}

.tu9{width: 65%;}

.left{width: 50%;float: left;}

.left>img{width: 100%;}

.yonghu{overflow: hidden;

width: 100%;height: auto;}

.right{box-sizing: border-box;padding-left: 1px;

width: 50%;float: left;}

.right div{

box-sizing: border-box;padding: 0px 5px 5px 0px;}

.right div>img{width: 100%;}

.row .col2{

float: left;

width: 50%;

box-sizing: border-box;

border-right: 1px solid #F7F7F7;

padding: 10px;

overflow: hidden;

}

.row .col3{

float: left;

width: 50%;

box-sizing: border-box;

border-right: 1px solid #F7F7F7;

/*padding: 10px;*/

/*overflow: hidden;*/

}

.row .col3 .zi-top{box-sizing: border-box;padding: 10px;}

.row .col3 .pian{width: 100%;position: relative;}

.row .col3 .pian>div{height: 40%;width: 100%;

position: absolute;top: 60%;background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.9));}

.row .col3 .pian>div>p{text-align: center;color: #fff; height: 1em;line-height: 1.1em;position: absolute;bottom:5px;

padding: 0 5px;font-size: 11px;display: block;}

.dian{overflow: hidden;position: relative;}

.row .col2 img{

width: 50%;

float: right;

margin-top: -35px;

}

.p1{clear: both;display:block;width: 100%;

font-size: 11px;line-height: 15px;color: #686868;

}

.strong1{clear: both;display:block;

font-size: 16px;line-height: 22px;color: #181818;width: 100%;}

.grow .col2>div{

width: 100%;overflow: hidden;position: relative;}

.row .col2 div>img{width: 50%;margin: 0;}

.row .col2 div>.tu1{width: 100%;margin: 0;}

.row .col2 div>.p2{font-size: 13px;line-height: 17px;height: 17px;color: #fff;

display: block;width: 100%;text-align: center;

position: absolute;bottom: 0px;left:0px;}

.row .col4{

float: left;

width: 25%;

box-sizing: border-box;

border-right: 1px solid #F7F7F7;

padding: 10px;

overflow: hidden;

position: relative;

}

.span4{position: absolute;bottom: 0px;left: 0px;text-align: center;color: #fff;

padding: 0 3px;font-size: 12px;height: 14px;line-height: 14px;}

.span5{}

.span6{background-color: #FF4A7D;}

.col4 .p{

width: 95%;

}

.row .col4 img{

width: 95%;

}

/*爱生活*/

#floor-tit{

width: 100%;

height: 43px;

background-size: 100% 43px;

text-align: center;

position: relative;}

#floor-tit img{width: auto;

height: 30px;

margin-top: 7px;

}

.jingcai{font-size: 14px;display: block;color: #686868;position: absolute;right: 20px;bottom: 6px;}

#di{color: #848689;font-size: 12px;margin-top: 5px;

text-align: center;padding-bottom: 10px;}

#di .xian2{width: 100%;height: 1px;}

#di .xian1{background-color:#EAEAEA ;width: 100%;height: 1px;}

.denglu{width:100%;overflow: hidden;}

.denglu .ul1{list-style: none;text-align: center;width: 100%;overflow: hidden;}

.denglu .ul1 li{

box-sizing: border-box;display: block;float:left;width: 25%;border-right: 1px solid #E7E7E7;margin:20px 0;}

.kehuduan .ul2{list-style: none;text-align: center;width: 100%;overflow: hidden;}

.kehuduan .ul2 li{

box-sizing: border-box;display: block;float: left;width: 33%;margin-top: 40px;

margin-bottom: 5px;

}

.kehuduan .ul2 .big1{color: #252525;}

.fudong{position: fixed;bottom: 60px;right: 0;width: 50px;height: 50px;}

* 底部

#foot{

width: 100%;

position: fixed;

/*height: 54px;*/

min-width: 300px;

left: 0px;

bottom: 0px;

box-shadow: 0 0 10px 0 rgba(155,143,143,0.6);

}

#font .font{width: 100%;position: absolute;height: 100%;}

#foot .font ul{list-style: none;}

#foot .font ul li{text-align: center;

width: 20%;float: left;height: 100%;}

#foot .font ul li span{width: 70px;display: inline-block;height: 100%;position: relative}

#foot .font ul li span img{max-height: 100%;

max-width: 100%;width: auto;}

@-webkit-keyframes banner{

0%{

left: 0px;

}

20%{

left: 0px;

}

25%{

left: -100%;

}

45%{

left: -100%;

}

50%{

left: -200%;

}

70%{

left: -200%;

}

75%{

left: -300%;

}

95%{

left: -300%;

}

100%{

left: -400%;

}

学习新知识：

响应式

布局设计-

viewport

media query

流式布局

弹性布局

优点：面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

缺点：兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间长

移动优先：

在设计初期就要考虑页面如何在多终端展示

渐进增强：

充分发挥硬件设备的最大功能

弹性布局：_{^{（转别人的，么么哒）}}

/*【flex 弹性盒布局】

* 1、给父容器添加display：flex/inline-flex；属性

* 2、父容器可以使用的属性值有

* ①flex-direction 属性决定主轴的方向（即项目的排列方向）

* row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

* ②flex-wrap属性：

* 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

* （1）nowrap（默认）：不换行。

* （2）wrap：换行，第一行在上方。

* （3）wrap-reverse：换行，第一行在下方。

* ③flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

* ④justify-content属性定义了项目在主轴上的对齐方式。

* flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

* ⑤align-items属性定义项目在交叉轴上如何对齐。

* flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

* ⑥align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

* flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

* 3、子容器上可以使用的属性：

①order：属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

②flex-grow：

属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

（如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。）

③flex-shrink：

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

（如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。）

*负值对该属性无效。*

④flex-basis：

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

⑤flex：

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

⑥align-self：

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

* row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

* ②flex-wrap属性：

* 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

转载于:https://www.cnblogs.com/zhuanzhibukaixin/p/6624033.html

动画自动滚动div/像素基础知识/手机端样式选择/相关推荐

RGB、YUV像素基础知识及处理数据
RGB.YUV像素基础知识及处理数据目录 RGB YUV RGB.YUV像素数据处理转载自Gemfield的知乎文章:从YUV到RGB 转载自雷神的博客:视音频数据处理入门:RGB.YUV像素数据 ...
跳出弹窗页面禁止滚动（PC端和手机端）
跳出弹窗页面禁止滚动(PC端和手机端) pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可 2.在弹窗的div上设置 @scroll ...
电子入门基础知识之：多路选择开关(MUX)
原文地址::http://www.51hei.com/bbs/dpj-50167-1.html 相关文章 1.电子入门基础知识之:多路选择开关(MUX) ----http://www.picmcu.c ...
mysql自动增长 sql,SQL基础知识V2——自增长列
SQL专栏 SQL数据库基础知识汇总 SQL数据库高级知识汇总自增长列的作用自增长列会在新记录插入表中时生成一个唯一的数字. 我们通常希望在每次插入新记录时自动创建主键字段的值. 我们可以在表中创 ...
html5 自动分享到朋友圈,html5手机端分享微信朋友圈代码
特效描述:html5手机端分享微信朋友圈.html5手机端分享微信朋友圈代码代码结构 1. HTML代码发送给朋友分享到朋友圈 button{width:100%;text-ali ...
东北狼仙：苏宁手机端样式rem+flexible.js
手机端研究了好几天做了手机端,还好基础的程序员生活不是很难,用心做几个项目撸出来就好了,最近学些rem布局挺不错的针对手机端使用比较不错,整个页面都可以自适应解决了字体图片等等的整体变大变小不会让页面 ...
大学计算机基础知识手写笔记,清华学霸手写笔记火了，如同“电脑打印版”，学渣快来“瞻仰”...
学霸作为一群"神秘人",他们大多身影忙碌,行色匆匆,而且不为人知.是我们这些普通学生难以"望其项背"的存在.不过,也有很多人不服气:不就是学习好的学生吗?难道还 ...
datagridview滚动条自动滚动_Win32编程基础之滚动条
(图片来源:游戏<ATRI> 通过使用滚动条,窗口可以显示比它大的文档或图片,用户可以滚动用户区中的数据对象来看到对象超出窗口边界的部分. 如果窗口的用户区比窗口的边框要大,窗口应该使用滚 ...
原码、反码、补码------（计算机基础知识手写笔记系列1）
原码 :最高位是符号位,0代表正数,1代表负数,非符号位为该数字绝对值的二进制. 反码:正数的反码与原码一致,负数的反码是对原码按位取反,只是最高位(符号位)不变. 补码:正数的补码与原码一致,负数 ...

动画自动滚动div/像素基础知识/手机端样式选择/

动画自动滚动div/像素基础知识/手机端样式选择/相关推荐

最新文章

热门文章