下载iPhone版 
下载Android版 
手把手教你做APP官网网站（带动画效果，插入百度地图）
本文共 15380 字，大约阅读时间需要 51 分钟。
下载地址：
首页html文件
Document
首页CSS 文件
* { margin: 0px; padding: 0px;}ul li { list-style: none;}body { min-width: 1200px; overflow-x: hidden;}.main-box { font-family: "微软雅黑"; width: 100%;}/*********************header*************************/.header { width: 1200px; margin: 0 auto; height: 100px; border: 1px solid red;}.header .logo { float: left;}.header .logo img { margin: 25px 0 0 80px;}.header ul.nav { margin: 40px 110px 0 0; font-size: 18px; list-style: none; float: right;}.header ul.nav li { float: left;}.header ul.nav li+li { border-left: 1px dotted #ff8f60;}.header ul.nav li a { display: block; margin: 0 26px; color: #ff8f60; text-decoration: none;}/********************banner**********************/.banner { width: 100%; overflow: hidden; min-height: 600px; height: 600px; background: url(images/banner.jpg) no-repeat #ff9f77;}.banner .banner-box { width: 1200px; position: relative; height: 100%; border: 1px solid red; margin: 0 auto;}.banner .banner-box .title { position: absolute; top: 21.818%; left: 115px;}.banner .banner-box .link { position: absolute; top: 63.503649%; left: 80px;}.banner .banner-box .link a { text-decoration: none;}.banner .banner-box .link ul { float: left;}.banner .banner-box .link ul li { list-style: none;}.banner .banner-box .link ul li a { display: block; color: #fff; border: 3px solid #fff; padding: 0 22px; height: 51px; line-height: 51px; margin-bottom: 28px; border-radius: 30px;}.banner .banner-box .link ul li a img { vertical-align: middle;}.banner .banner-box .download_code { float: left; margin-left: 33px; border: 2px solid #ffd0bc;}.banner .banner-box .download_code img { width: 130px; height: 130px; padding: 8px;}.banner .banner-box img.phone { position: absolute; right: 5.58333%; bottom: 0; height: 83.6363636363636%;}/*********************download*************************/.download { height: 60px; width: 1200px; border: 1px solid red; margin: 0 auto;}.download .logo2 { float: left; border: 1px solid red; margin: 5px 0 5px 90px;}.download .logo2 img { height: 50px; width: auto;}.download .download_btn { float: right; color: #fff; font-size: 15px; border-radius: 20px; background: #2fca89; padding: 7px 15px; margin: 15px 68px 0 0; cursor: pointer;}#down { width: 100%; background: #fff; opacity: 0.9; height: 60px; z-index: 1000; /*这个非常重要,只要有重叠，都应该定义z-index*/}.fixed { position: fixed; top: 0px; left: 0px;}/******************main***********************/.main { min-width: 1200px; height: auto;}.main .main-1 { margin: 0 auto; width: 1200px; height: 467px; border: 1px solid red; position: relative;}.main .main-1 img.title { top: 144px; position: absolute; right: 130px;}.main .main-1 .text { border: 1px solid red; position: absolute; left: 115px; top: 16.085106%; width: 42.5%; height: 75%;}.main .main-1 .text .text_1 { left: 30px; position: absolute; top: 0%;}.main .main-1 .text .text_1 { left: 330px; position: absolute; top: 0;}.main .main-1 .text .text_2 { left: 0; position: absolute; top: 21px;}.main .main-1 .text .text_3 { left: 261px; position: absolute; top: 76px;}.main .main-1 .text .text_4 { top: 84px; position: absolute; left: 36px;}.main .main-1 .text .text_5 { top: 143px; position: absolute; left: 66px;}.main .main-1 .text .text_6 { top: 203px; position: absolute; left: 391px;}.main .main-1 .text .text_7 { top: 222px; position: absolute; left: 47px;}.main .main-1 .text .text_8 { top: 241px; position: absolute; left: 240px;}.main .main-1 .text .text_9 { top: 286px; position: absolute; left: 62px;}/*///DIV 分割/*/.main img.div-div { display: block; border: 1px solid red; margin: 0 auto;}/*///DIV 分割/*/.main .main-2 { margin: 0 auto; width: 1200px; height: 523px; border: 1px solid red; position: relative;}.main .main-2 .title { position: absolute; left: 65px; top: 190px; border: 1px solid red;}.main .main-2 .func_1 { position: absolute; border: 1px solid red; left: 452px; top: 38px;}.main .main-2 .func_2 { position: absolute; border: 1px solid red; left: 660px; top: 100px;}.main .main-2 .func_3 { position: absolute; border: 1px solid red; left: 655px; top: 333px;}.main .main-2 .func_4 { position: absolute; border: 1px solid red; left: 502px; top: 333px;}.main .main-3 { margin: 0 auto; width: 1200px; height: 532px; border: 1px solid red; position: relative;}.main .main-3 .title { position: absolute; left: 740px; top: 178px;}.main .main-3 .nurse_1 { position: absolute; left: 91px; top: 60px;}.main .main-3 .nurse_2 { position: absolute; left: 95px; top: 163px;}.main .main-4 { margin: 0 auto; width: 1200px; height: 532px; border: 1px solid red; position: relative;}.main .main-4 .title { margin-top: 100px; text-align: center; color: #4a4a4a; border: 1px solid red; font-size: 30px; font-weight: 100; height: 30px; line-height: 30px;}.main .main-4 ul.dwn { width: 833px; height: 245px; margin: 70px auto;}.main .main-4 li a { float: left; display: block; margin: 0px 15px; text-decoration: none; height: 245px; width: 245px; border: 1px solid red;}.main .main-4 li a:hover { background-color: #ff8f60; box-shadow: 5px 5px 10px black;}.main .main-4 li a .android-bg { width: 44px; height: 53px; margin: 75px auto 0px; border: 1px solid red; background: url(images/phone_icon.png) -77px 0px;}.main .main-4 li a:hover .android-bg { width: 44px; height: 53px; margin: 75px auto 0px; border: 1px solid red; background: url(images/andraid_icon.png) 1px 0px;}.main .main-4 li a .android-bg-1 { text-align: center; border: 1px solid red;}.main .main-4 li a:hover .android-bg-1 { text-align: center; border: 1px solid red; color: #CC5522;}.main .main-4 li a .iphone-bg { width: 44px; height: 53px; margin: 75px auto 0px; border: 1px solid red; background: url(images/phone_icon.png) 1px 0px;}.main .main-4 li a:hover .iphone-bg { width: 44px; height: 53px; margin: 75px auto 0px; border: 1px solid red; background: url(images/iphone_icon.png) 1px 0px;}.main .main-4 li a .iphone-bg-1 { text-align: center; border: 1px solid red;}.main .main-4 li a:hover .iphone-bg-1 { text-align: center; border: 1px solid red; color: #CC5522;}.main .main-4 ul.dwn img.img-1 { margin: 55px auto 0px; display: block;}/******************************************/.footer { width: 100%; height: 85px; background-color: #e5e5e5;}.footer .container { width: 1200px; height: 85px; margin: 0 auto; text-align: center;}.footer .container p { padding-top: 10px; height: 30px; line-height: 30px; color: #4A4A4A;}/**********************动画 *************************/.banner .title { animation: linkWord 0.7s ease-out 3 0s normal;}@keyframes linkWord { from { top: -300px; left: -300px; opacity: 0; } to { opacity: 1; }}.banner .phone { animation: textAni 0.7s ease-out 3 0s normal;}@keyframes textAni { from { right: -300px; opacity: 0; } to { opacity: 1; }}.text img:hover { animation: imgJump 0.7s ease-out infinite 0s alternate;}@keyframes imgJump { to { transform: scale(1.05); }} 插入百度地图方法
百度地图API自定义地图
联系我们
- 地址：中华人民共和国
- 邮编：110
- 电话：13501317537
- 邮箱：1010305129@qq.com
CSS 文件
.main { position: relative;}.main .bg { min-width: 1200px;}.main .bg img { width: 100%;}.main .container { position: absolute; width: 100%; min-width: 1200px; height: 100%; left: 0; top: 0; border: 1px solid red;}.main .contact_way { color: #fff; font-size: 16px; line-height: 2em; position: absolute; bottom: 15%; left: 10%; border: 1px solid red;}.main .map { position: absolute; right: 5.5%; top: 100px; width: 42.8333333333%; height: 56.019191977%; border: 1px solid red;}.main .anchorBL { display: none;} 关于我们
你们是什么？菜鸟。你们的名字谁给的？老鸟。老鸟为什么叫你们菜鸟？因为我们笨，因为我们蠢。因为我们没脑子，因为我们缺根弦！你们是什么？狼牙。你们的名字谁给的？敌人。敌人为什么叫你们狼牙？因为我们准，因为我们狠，因为我们不怕死，因为我们敢去死！如果深入敌后，你的战友受伤了，无法随队继续前行，你会怎么办？ 我会留下来陪他，要死一起死！ 给他足够的水和食物，帮助他隐藏起来。如果我还活着，我会回来接他！ 我会劝他等待我们，如果等不到，我会劝他自杀！ 我会改变行动方案，留下一个人保护他，直到我们回来！ 那我就背着他，跟他死在一起！ 我会治好他，治不好，那我就和他一条命！只有强者当中的强者，才能成为特种兵。强者的概念，不光是体能，更重要的是智商。特种部队要的，不是超级战士，不是兰博，而是——智商和体能、聪明和智慧、忠诚和狡诈等一系列的完美结合，加上严格的训练和精良的装备，所以称之为——特种兵。
CSS 文件
.main{ position:relative;}.main .bg{ min-width:1200px;}.main .bg img{ width:100%;}.main .container{ position:absolute; left:0; top:10%; width:100%;}.main .article{ width:1200px; margin:50px auto; border: 1px solid red;}.main .article .cont{ font-size:16px; color:#fff; line-height:2em; text-indent:2em; width:1000px; margin:0 auto; padding:10px 0;} # 我的 CSS 初始化文件#
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{ margin:0;padding:0;border:0;vertical-align:baseline;}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}ol,ul{ list-style:none;margin:0px;padding:0px;}blockquote,q{ quotes:none;}blockquote:before,blockquote:after,q:before,q:after{ content:'';content:none;}table{ border-collapse:collapse;border-spacing:0;}/* start editing from here */a{ text-decoration:none;}.txt-rt{ text-align:right;}/* text align right */.txt-lt{ text-align:left;}/* text align left */.txt-center{ text-align:center;}/* text align center */.float-rt{ float:right;}/* float right */.float-lt{ float:left;}/* float left */.clear{ clear:both;}/* clear float */.pos-relative{ position:relative;}/* Position Relative */.pos-absolute{ position:absolute;}/* Position Absolute */.vertical-base{ vertical-align:baseline;}/* vertical align baseline */.vertical-top{ vertical-align:top;}/* vertical align top */nav.vertical ul li{ display:block;}/* vertical menu */nav.horizontal ul li{ display: inline-block;}/* horizontal menu */img{ vertical-align:top}body{ font-size:14px; font-family:微软雅黑;}.clearfix:after,.clearfix:before{ clear: both; content: ""; display:block; line-height: 0;}
你可能感兴趣的文章
《基于ArcGIS的Python编程秘笈（第2版）》——2.5 限制图层列表
查看>>
GNOME 地图 3.20 加入更多新特性 可用性得到加强
查看>>
《代码整洁之道：程序员的职业素养》导读
查看>>
《计算复杂性：现代方法》——习题
查看>>
Mozilla 释出更新修复中间人攻击漏洞
查看>>
思科表态反对网络中立
查看>>
《HTML5+CSS3网页设计入门必读》——1.5 利用多种Web浏览器执行测试
查看>>
Velocity官方指南-容器
查看>>
国家为何如此重视石墨烯？
查看>>
《Python和Pygame游戏开发指南》——1.14 配套网站上的更多信息
查看>>
利用mybatis查询两级树形菜单
查看>>
《慕客网：IOS基础入门之Foundation框架初体验》学习笔记 <一>
查看>>
Spring声明式事务管理之二：核心接口API
查看>>
LNMP环境安装（二）
查看>>
MFC对话框编程-图片控件
查看>>
nodejs启动webserver服务
查看>>
小偷被抓叫嚣：我不偷警察没饭吃
查看>>
python初学—-实现excel里面读数据进行排序
查看>>
用户体验升级后 “谁行谁上”让百度Q4财报更有底气
查看>>
直播相关学习链接
查看>>