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

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

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

动画自动滚动div：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin: 0px;

padding: 0px;

}

#banner{

100%;

height: 500px;

overflow: hidden;

}

#banner_in{

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>

<div id="banner">

<div id="banner_in">

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

</div>

</div>

</body>

</html>

原理图：

新知识

PPI：

viewport：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>





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



<meta name="format-detection"content="telephone=no,email=no"/>



<meta name="apple-mobile-web-app-title" content="我的第一个WebAPP">



<link rel="apple-touch-icon-precomposed" href="http://st.360buyimg.com/m/images/apple-touch-icon.png?v=jd201703162005" />



<meta name="apple-mobile-web-app-capable" content="yes" />



<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">



<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>



<meta http-equiv="Expires" content="-1">

<meta http-equiv="Cache-Control" content="no-cache">

<meta http-equiv="Pragma" content="no-cache">

<style type="text/css">

*{

margin: 0px;

padding: 0px;

}

.div1{

100%;

height: 68px;

-we

}

</style>

</head>

<body>

<div class="div1">

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{

100%;

height: 68px;

}

</style>

</head>

<body>

<div class="div1">

13181621008

哈哈

jianghao@jerei.com

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

<img src="img/icon.png" />

<input type="text" placeholder="11111" />



<a href="tel:0535-10086">

打电话给:0535-10086

</a>

<a href="sms:10086">发短信给: 10086</a>

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

</div>

</body>

</html>

制作第一个JD 手机APP：

做手机APP页；

京东手机站

我临摹的网页：

html代码如下：

<html>

<head>

<meta charset="UTF-8"/>

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

<meta name="author" content="m.jd.com" />

<meta name="keywords" content="京东商城,京东,网购" />

<meta name="description" content="京东商城是一款网上购物的WebApp，但是被淘宝干的不要不要的，最后被杰瑞教育收购了。" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

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

<meta name="apple-mobile-web-app-title" content="京东商城——网上购物首选APP" />

<link rel="apple-touch-icon-precomposed" href="http://st.360buyimg.com/m/images/apple-touch-icon.png?v=jd201703162005" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<meta name="format-detection" content="telephone=no,email=no"/>

<link rel="icon" href="http://st.360buyimg.com/m/images/apple-touch-icon.png?v=jd201703162005" />

<link rel="stylesheet" href="css/index.css" />

</head>

<body>

<div id="body">

<div id="search">

<div class="input">

<input type="text" placeholder="运动户外超极品类日跨店铺299减40" />

</div>

<div class="logo">

<img src="img/logo.png" />

</div>

<div class="btn">

登录

</div>

</div>

<div id="banner">

<div class="banner_in">

<img src="img/58ca54a0N565f385e.jpg" /><img src="img/58cb3f81N62420bc9.jpg" /><img src="img/58cb9493Nf8791d6a.jpg!q70.jpg" /><img src="img/58cb9cbdN0653ddf1.jpg!q70.jpg" /><img src="img/58ca54a0N565f385e.jpg" />

</div>

</div>

<div id="adv">

<img src="img/58cfacb1Na8d31170.jpg!q70.jpg" />

</div>

<nav id="nav">

<div>

<img src="img/57fdae81Ne7ddbab9.png" />

<br />

京东超市

</div>

<div>

<img src="img/57d53f16Nf3431cbd.png" />

<br />

全球购

</div>

<div>

<img src="img/57d5407cN0d6adf20.png" />

<br />

服装城

</div>

<div>

<img src="img/57de58ecN0eede46f.png" />

<br />

生鲜

</div>

<div>

<img src="img/57d9443eN68c52b40.png" />

<br />

火车票

</div>

<div>

<img src="img/58d080b3Ne98a0488.png" />

<br />

充值中心

</div>

<div>

<img src="img/58096edbNcd05f66b.png" />

<br />

惠赚钱

</div>

<div>

<img src="img/57d542e9N71c56086.png" />

<br />

领券

</div>

<div>

<img src="img/57d54364Needc47cd.png" />

<br />

物流查询

</div>

<div>

<img src="img/57d543ebN25337ef2.png" />

<br />

我的关注

</div>

</nav>

<section id="kuaibo">

<div class="bo">

<img src="img/jd-news-tit.png"/>

<div class="gun">

<div ><span>热</span>全民健身，跨店满299减40！</div>

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

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

<div ><span>热</span>全民健身，跨店满299减40！</div>

</div>

<div class="bo3">丨更多</div>

</div>

</section>

<div id="miaosha">

<div class="content">

<div class="top">

<div class="top1">

<img src="img/57fdff2eNb7cd186f.png"/>

<strong>16点场</strong>



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

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

<div class="time1">54</div>



</div>

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

</div>

<div class="tu">

<ul class="list">

<li>

<div><img src="img/58855ed7N94da0aae.jpg!q70.jpg"/>

<span class="span1">直播购</span>

</div>

<span>￥79.9</span>

<s>￥199.9</s>

</li>

<li>

<div><img src="img/57b12ac6N61374a75.jpg"/>

<span class="span1 span2">大牌秒</span>

</div>

<span>￥8988</span>

<s>￥9255</s>

</li>

<li>

<div><img src="img/5450420aN4886b7ea.jpg!q70.jpg"/>

</div>

<span>￥259</span>

<s>￥299</s>

</li>

<li>

<div><img src="img/57e0a5ceN801d4390.jpg"/>

</div>

<span>￥79.9</span>

<s>￥199.9</s>

</li>

</ul>

</div>

</div>

</div>

<img src="img/58cbd79aN67fae51e.jpg!q70.jpg" class="tu1" />

<div id="tu2">

<div class="tu2"><img src='img/58cf796aNe6c2315b.jpg'/></div>

<div class="tu2"><img src='img/58cf3995Ncc8a4996.jpg'/></div>

<div class="tu2"><img src='img/58cbdc2bNebee526b.jpg'/></div>

<div class="tu2"><img src='img/58cbdc5bN77b08df1.jpg'/></div>



</div>



<div class="row">

<div class="col2">

<strong class="strong">

排行榜

</strong><br />

<p class="p">

好货大赏

</p><br />

<img src="img/58806ba0Nf975c799.jpg" />

</div>

<div class="col2">

<strong class="strong">

闪购

</strong><br />

<p class="p">

品牌限时特卖

</p><br />

<img src="img/58b55231N25cf4ae9.jpg" />

</div>

</div>



<div id="floor-tit">

<img src="img/578de36bNae7bb54a.png" />

</div>

<div class="row">

<div class="col2">

<strong class="strong">

玩3C

</strong><br />

<p class="p">

C5Pro 放量抢

</p><br />

<img src="img/58cfe2a1N29c457f2.jpg" />

</div>

<div class="col2">

<strong class="strong">

京东家电

</strong><br />

<p class="p">

满1000减150

</p><br />

<span class="span">上不封顶</span>

<img src="img/589972c0Nd045fb62.jpg" />

</div>

</div>

<div class="row">

<div class="col2">

<strong class="strong">

京东超市

</strong><br />

<p class="p">

限量一元抢

</p><br />

<span class="span">满199减100</span>

<img src="img/58cbe644Nd399811f.jpg" />

</div>

<div class="col2">

<strong class="strong">

爱家

</strong><br />

<p class="p">

家纺满599-150

</p><br />

<img src="img/58cbb360N1f55d310.jpg" />

</div>

</div>

<div class="row">

<div class="col4">

<strong class="strong">

爱宝宝

</strong><br />

<p class="p">

低至两件8元

</p><br />

<img src="img/58cf519cN45ab5b59.png" />

</div>

<div class="col4">

<strong class="strong">

爱美丽

</strong><br />

<p class="p">

粉色小羊皮

</p><br />

<span class="span4 span6">纪梵希</span>

<img src="img/58bf77daN609913ed.jpg" />

</div>

<div class="col4">

<strong class="strong">

爱吃

</strong><br />

<p class="p">

满99减5元

</p><br />

<img src="img/58cbc126N478bb439.jpg" />

</div>

<div class="col4">

<strong class="strong">

爱逛

</strong><br />

<p class="p">

运动99-150

</p><br />

<span class="span4 span6">品类日</span>

<img src="img/58cfb809Nfb92eee3.jpg" />

</div>

</div>

<div class="tu1"><img class="tu8" src="img/58cf92cbN9f58dbf5.jpg"/></div>



<div id="floor-tit">

<img src="img/586c5dfdNe496351a.png"/>

</div>

<div class="row">

<div class="col2">

<strong class="strong">

全球尖货

</strong><br />

<p class="p">

全球自营好货

</p><br />

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

<img src="img/58ca3695Nd1ef907a.jpg" />

</div>

<div class="col2">

<strong class="strong">

东京精选

</strong><br />

<p class="p">

热销护肤排行

</p><br />

<img src="img/58cb6dd1Nb82e70b0.jpg" />

</div>

</div>

<div class="row">

<div class="col2">

<strong class="strong">

京东体育

</strong><br />

<p class="p">

跨店299减40

</p><br />

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

<img src="img/58cf92d9N5cdfa055.jpg" />

</div>

<div class="col2">

<strong class="strong">

奢侈大牌

</strong><br />

<p class="p">

每满1000减100

</p><br />

<img src="img/58ca6787N71096e66.jpg" />

</div>

</div>

<div class="row">

<div class="col4">

<strong class="strong">

环球时尚

</strong><br />

<p class="p">

299减100

</p><br />

<span class="span4 span5">美炸天</span>

<img src="img/58bfaf86N86dbf595.jpg" />

</div>

<div class="col4">

<strong class="strong">

珠宝首饰

</strong><br />

<p class="p">

新品首发

</p><br />

<img src="img/58cb7c27Nb99a04cf.jpg" />

</div>

<div class="col4">

<strong class="strong">

设计师

</strong><br />

<p class="p">

潮流设计精选

</p><br />

<img src="img/58ca3909N75599386.jpg" />

</div>

<div class="col4">

<strong class="strong">

达人精选

</strong><br />

<p class="p">

运动潮买指南

</p><br />

<img src="img/58cbbbf7N326452de.jpg" />

</div>

</div>

<div class="tu1"><img class="tu8" src="img/58ca3188N0cfc7d8b.jpg" class="tu1"/></div>



<div id="floor-tit">

<img src="img/578de6d1N9e38b8e5.png"/>

</div>

<div class="row">

<div class="col2">

<strong class="strong">

智能生活

</strong><br />

<p class="p">

低至1元

</p><br />

<img src="img/58d07ba1N42a9ab42.jpg" />

</div>

<div class="col4">

<strong class="strong">

京东众筹

</strong><br />

<p class="p">

碳纤维骑行车

</p><br />

<img src="img/58cfc24dN18b8364e.jpg" />

</div>

<div class="col4">

<strong class="strong">

京东旅行

</strong><br />

<p class="p">

9.9秒杀

</p><br />

<span class="span4">清仓甩</span>

<img src="img/58cb7493Naa1b29c7.jpg" />

</div>

<div class="row">

<div class="col2">

<strong class="strong">

白条商城

</strong><br />

<p class="p">

最高12期免息

</p><br />

<img src="img/58c7f157N12abd0c3.jpg" />

</div>

<div class="col4">

<strong class="strong">

爱车生活

</strong><br />

<p class="p">

优惠1500元

</p><br />

<span class="span4">限时惠</span>

<img src="img/58ca2d6eN86507c63.jpg" />

</div>

<div class="col4">

<strong class="strong">

电影娱乐

</strong><br />

<p class="p">

1元赢4999！

</p><br />

<img src="img/58cbeea5Na8c1dd38.jpg" />

</div>

</div>

</div>

<div class="row">

<div class="col4">

<strong class="strong">

清仓二手

</strong><br />

<p class="p">

iphone 6秒杀

</p><br />

<span class="span4">手慢无</span>

<img src="img/58acf800N0ced20ff.jpg" />

</div>

<div class="col4">

<strong class="strong">

大药房

</strong><br />

<p class="p">

孕妇叶酸

</p><br />

<img src="img/58c8e6baN9d036e7d.jpg" />

</div>

<div class="col4">

<strong class="strong">

陪伴宝宝

</strong><br />

<p class="p">

一元秒好货

</p><br />

<span class="span4">抢好货</span>

<img src="img/58c90207N16aa5aac.png" />

</div>

<div class="col4">

<strong class="strong">

京东拍卖

</strong><br />

<p class="p">

匠心工艺典藏

</p><br />

<img src="img/58b55796Neec9efb8.jpg" />

</div>

</div>

<div class="tu1"><img class="tu8" src="img/58cf92cbN9f58dbf5.jpg" class="tu1"/></div>



<div id="floor-tit">

<img src="img/578de9fcNb59b6153.png"/>

</div>

<div class="row">

<div class="col2">

<strong class="strong">

手机数码

</strong><br />

<p class="p">

Surface超低价

</p><br />

<span class="span3">爆款直降</span>

<img src="img/58b41fc6N00065432.jpg" />

</div>

<div class="col2">

<strong class="strong">

时尚馆

</strong><br />

<p class="p">

满299减100

</p><br />

<img src="img/58ce881fNf86bf54e.png" />

</div>

</div>

<div class="row">

<div class="col2">

<strong class="strong">

中外名酒

</strong><br />

<p class="p">

买二付一

</p><br />

<img src="img/58c9f986N771be7bb.png" />

</div>

<div class="col2">

<strong class="strong">

大家电馆

</strong><br />

<p class="p">

满1000减少100

</p><br />

<span class="span3">白条免息</span>

<img src="img/5816a49fNc0739648.jpg" />

</div>

</div>

<div class="row">

<div class="col4">

<strong class="strong">

母婴馆

</strong><br />

<p class="p">

抽券199减100

</p><br />

<img src="img/58cbb5edN411f962d.png" />

</div>

<div class="col4">

<strong class="strong">

电脑办公

</strong><br />

<p class="p">

尊享3重好礼

</p><br />

<img src="img/58ca663cN5940fd93.jpg" />

</div>

<div class="col4">

<strong class="strong">

鞋靴箱包

</strong><br />

<p class="p">

满299减少20

</p><br />

<img src="img/58d08d99N95e6cdfc.jpg" />

</div>

<div class="col4">

<strong class="strong">

小家电馆

</strong><br />

<p class="p">

白条6期免息

</p><br />

<img src="img/573acef3N8f94b403.jpg" />

</div>

</div>

<div class="row">

<div class="col4">

<strong class="strong">

生鲜

</strong><br />

<p class="p">

一件包邮

</p><br />

<img src="img/58ca5960Nedbc153a.jpg!q70.jpg" />

</div>

<div class="col4">

<strong class="strong">

运动户外

</strong><br />

<p class="p">

满299减40

</p><br />

<img src="img/58bf77daN609913ed.jpg" />

</div>

<div class="col4">

<strong class="strong">

图书音海

</strong><br />

<p class="p">

满199减100

</p><br />

<img src="img/58c616e2Nc7156468.jpg!q70.jpg" />

</div>

<div class="col4">

<strong class="strong">

美食城

</strong><br />

<p class="p">

买1送1

</p><br />

<img src="img/58cbc126N478bb439.jpg" />

</div>

</div>

<img class="tu1" src="img/58c8e99eNc609b05b.jpg!q70.jpg" class="tu1"/>



<div id="floor-tit">

<img src="img/587c8b2bNec769cc1.png"/>

<span class="jingcai">更多精彩</span>

</div>

<div class="row">

<div class="col2" ;">

<strong class="strong1">

精选

</strong>

<p class="p1">

20家好店为你精心推荐

</p>

<div class="dian">

<img src="img/583eb3a5N390bc932.jpg" />

<img src="img/58c7dd6dN77e88b05.jpg" />

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

</div>

</div>

<div class="col2" ;">

<strong class="strong1">

精选

</strong>

<p class="p1">

20家好

</p>

<div class="dian">

<img src="img/586f16c8N836840f2.jpg" />

<img src="img/57ebc043N95bcd84c.jpg" />

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

</div>

</div>

</div>



<div id="floor-tit">

<img src="img/589a8ce3Nb18b2ded.png"/>

<span class="jingcai">更多精彩</span>

</div>

<div class="row">

<div class="col2" ;">

<strong class="strong1">

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

</strong>

<div>

<img src="img/57d11c72N093250ec.jpg!q70.jpg" />

<img src="img/5825a5a6Nde8ecb75.jpg!q70.jpg" />

</div>

</div>

<div class="col2" ;">

<strong class="strong1">

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

</strong>

<div>

<img src="img/57bad4deN815c3ae5.jpg!q70.jpg" />

<img src="img/580b2f2dNb41198d5.jpg!q70.jpg" />

</div>

</div>

</div>



<div id="floor-tit">

<img src="img/5821896aN934a58f3.png"/>

<span class="jingcai">更多精彩</span>

</div>

<div class="row">

<div class="col3">

<div class="zi-top">

<strong class="strong1">

精彩现场

</strong>

<p class="p1 nowrap">

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

</p>

</div>

<div class="<pian></pian>">

<img class="tu1" src="img/58ca091aN03f3f6bd.jpg!q70.jpg" />

<div>

<p>上海</p>

</div>

</div>

</div>

<div class="col3">

<div class="zi-top">

<strong class="strong1">

运动空间

</strong>

<p class="p1">

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

</p>

</div>

<div class="pian">

<img class="tu1" src="img/58cb83a1Ne6b8550c.jpg!q70.jpg" />

<div>

<p>上海</p>

</div>

</div>

</div>

</div>

<div class="row2 beijing">

<div class="jia tu1">

<img class="tu9" src="img/5796df21N0c6edd4e.png"/>

</div>

<div class="yonghu">

<div class="left"><img src="img/58a6d4b3N69c6e565.jpg!q70.jpg"/></div>

<div class="right">

<div><img src="img/58c9e8b7N4395913d.jpg!q70.jpg"/></div>

<div><img src="img/58cab675N350ce241.jpg!q70.jpg" /></div>

</div>

</div>

</div>

<div class="tu1">

<img class="tu1" src="img/58a6d991Ne9c82f29.jpg!q70.jpg"/>

</div>

<div id="tu2">

<div class="di-top">

<span><img src="img/xiazai.png"/>为您推荐</span>

<div class="xian"></div>

</div>

</div>

<div id="tu2">

<ul>

<li>

<div class="tu0">

<img src="img/58cb9689N2c8e9eac.jpg!q70.jpg"/>

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

</span>

</div>

<span class="hot">

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

</span>

</li>

<li>

<div class="tu0">

<img src="img/57a03c08N7df24417.jpg!q70.jpg"/>

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

</span>

</div>

<span class="hot">

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

</span>

</li>

<li>

<div class="tu0">

<img src="img/58b944c6N5962e14e.jpg!q70.jpg"/>

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

</span>

</div>

<span class="hot">

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

</span>

</li>

<li>

<div class="tu0">

<img src="img/58b14f6eNfe9b916e.jpg!q70.jpg"/>

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

</span>

</div>

<span class="hot">

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

</span>

</li>

<li>

<div class="tu0">

<img src="img/58bcc86aNe213d59f.jpg!q70.jpg"/>

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

</span>

</div>

<span class="hot">

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

</span>

</li>

</ul>

</div>

<div id="di">

<div class="xian2"></div>

<div class="denglu">

<ul class="ul1">

<li>登录</li>

<li>注册</li>

<li>反馈</li>

<li>回到顶部</li>

</ul>

</div>

<div class="xian1"></div>

<div class="kehuduan">

<ul class="ul2">

<li>客户端</li>

<li class="big1"><big>触屏版</big></li>

<li>电脑版</li>

</ul>

<div class="xian1"></div>

<br />

<span>Copyright © 2004-2017 京东JD.com 版权所有</span>

<br />

</div>

</div>

<br />

<br /><br /><br />

</div>

<img class="fudong" src="img/scroll-to-top-icon.png"/>

<footer id="foot">



<div class="font">

<ul>

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

<li><span><img src="img/n-catergry.png"></span></li>

<li><span><img src="img/n-cart.png"/></span></li>

<li><span><img src="img/n-find.png"/></span></li>

<li><span><img src="img/n-me.png"/></span></li>

</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- 300px;

margin: 0 auto;

}

/*

* 页面主体

*/

#body{

min- 300px;

max- 640px;

margin: 0 auto;

height: 5710px;

}

/*头部*/

#body #search{

100%;

height: 40px;

position: fixed;

max- 640px;

z-index: 10;

}

#body #search .input{

margin-left: 66px;

margin-right: 46px;

height: 40px;

}

#body #search .input input{

100%;

height: 30px;

border-radius: 15px;

border: hidden;

margin-top: 5px;

background-image: url(../img/search.png);

background-repeat: no-repeat;

background-position: 5px center;

padding-left: 30px;

outline: none;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

#body #search .logo{

56px;

position: absolute;

top: 11px;

left: 5px;

}

#body #search .btn{

46px;

height: 40px;

position: absolute;

right: 0px;

top: 0px;

line-height: 40px;

text-align: center;

color: white;

font-size: 15px;

}

/*

* Banner

*/

#banner{

100%;

overflow: hidden;

}

#banner .banner_in{

500%;

position: relative;

-webkit-animation: banner 10s ease infinite;

}

#banner .banner_in img{

20%;

}

/*

* Banner下广告图

*/

#adv img{

100%;

}

/*

* Nav 导航区

*/

#nav{

100%;

margin-top: 10px;

margin-bottom: 10px;

position: relative;

min-height: 127px;

}

#nav div{

20%;

float: left;

text-align: center;

font-size: 14px;

margin-bottom: 10px;

}

#nav div img{

50%;

}

#kuaibo{clear: all;

100%;

padding-bottom: 10px;

padding-top: 10px;

}

#kuaibo .bo{ 90%;

margin-left:auto;

margin-right: auto;

height: 30px;

position: relative;

font-size: 12px;

border-radius: 6px;

overflow: hidden;}

#kuaibo .bo img{

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;

/* 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;

100%;

position: relative;

}

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

}

#miaosha .content .top{

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

padding-bottom: 6px;}

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

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

display: inline-block; 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;

19px;

height: 17px;

border: 1px solid #F3F3F3;

line-height: 17px;

text-align: center;

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

#miaosha .content .top .top2{ 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{ 100%;

height: 100%;

overflow: hidden;

font-size: 0px;}

#miaosha .tu{

100%;overflow: hidden;

}

#miaosha .list { 120%;

list-style: none;}

#miaosha .list li{

float: left;

25%;

/*height: 50px;*/

/**/

text-align: center;

font-size: 12px;

color: #6f6a78;

padding-bottom: 11px;

}

#miaosha .list li div{ 100%;

padding: 0 10px;

border-right: 1px solid #F7F7F7;

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

#miaosha .list li div img{

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{ 100%;overflow: hidden;text-align: center;box-sizing: border-box;

padding-top:10px}

.tu8{ 90%;}

#tu2{ 100%;overflow: hidden;}

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

/*position: relative;*/

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

#tu2 .tu2 img{ 100%;}

#tu2 .bai{}

#tu2 .tu2 .zi1{ 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{ 45%;box-sizing: border-box;

padding-top: 13px;

float: right;

padding-right: 5px;}

#tu2 .tu2 .tu3 img{ 100%;

}

#ai{ 100%;clear:both;}

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

#ai .ai-top img{ 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%; auto;

margin: 0 auto;}

#ai .tu{ 100%;}

.di-top{ 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%; 30%;z-index: 1;}

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

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

.xian{ 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; 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{ 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; 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;

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{

100%;

overflow: hidden;

border-bottom: 1px solid #F7F7F7;

}

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

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

background-image: url(../img/58c24709Nf44579e2.jpg!q70.jpg);

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{ 65%;}

.left{ 50%;float: left;}

.left>img{ 100%;}

.yonghu{overflow: hidden;

100%;height: auto;}

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

50%;float: left;}

.right div{

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

.right div>img{ 100%;}

.row .col2{

float: left;

50%;

box-sizing: border-box;

border-right: 1px solid #F7F7F7;

padding: 10px;

overflow: hidden;

}

.row .col3{

float: left;

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{ 100%;position: relative;}

.row .col3 .pian>div{height: 40%; 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{

50%;

float: right;

margin-top: -35px;

}

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

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

}

.strong1{clear: both;display:block;

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

.grow .col2>div{

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

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

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

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

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

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

.row .col4{

float: left;

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{

95%;

}

.row .col4 img{

95%;

}

/*爱生活*/

#floor-tit{

100%;

height: 43px;

background-image: url(../img/floor-tit.png);

background-size: 100% 43px;

text-align: center;

position: relative;}

#floor-tit img{ 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{ 100%;height: 1px;}

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

.denglu{100%;overflow: hidden;}

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

.denglu .ul1 li{

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

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

.kehuduan .ul2 li{

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

margin-bottom: 5px;

}

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

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

/*

* 底部

*/

#foot{

100%;

position: fixed;

/*height: 54px;*/

min- 300px;

left: 0px;

bottom: 0px;

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

}

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

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

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

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

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

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

max- 100%; 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属性定义，如果一条轴线排不下，如何换行。
相关阅读:
简单的JS控制button颜色随点击更改
 以 “月” 为单位的可以翻页的效果显示为 2016年01月
 荷兰国旗 Flag of the Kingdom of the Netherlands
最大连续子数组以及拓展
 Something Wrong or Something Right
转载文章----十步完全理解SQL
数据库关系代数练习题
 SQL server 2014安装以及解决连接数据库失败问题
 回文判断
 字符串的包含
原文地址：https://www.cnblogs.com/zhuanzhibukaixin/p/6624033.html