手把手教你做APP官网网站（带动画效果，插入百度地图）
来源：互联网 发布：matlab 输出数组 编辑：程序博客网 时间：2024/06/05 19:31
下载地址： http://download.csdn.net/detail/cometwo/9467525
首页html文件
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="wfgw.css" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> </script> <title>Document</title> <script type="text/javascript"> $(function() { $(window).scroll(function() { if ($(window).scrollTop() >= ($(".banner").height() + $(".header").height())) { $('#down').addClass('fixed'); } else { $('#down').removeClass('fixed'); } }); $("#dwn").click(function() { //回到底部 $('html,body').animate({ scrollTop: $(document).height() }, 600) }); $(".logo2").click(function() { //回到顶部 $('html,body').animate({ scrollTop: 0 }, 600) }); }) </script> </head> <body> <div class="main-box"> <div class="header"> <div class="logo"> <img src="images/logo.png" /> </div> <ul class="nav"> <li> <a href="#">首页</a> </li> <li> <a href="#">关于我们</a> </li> <li> <a href="#">联系我们</a> </li> </ul> </div> <div class="banner"> <div class="banner-box"> <img class="title" src="images/banner_tit.png" height="113" width="394" alt="" /> <div class="link"> <ul> <li> <a href=""> <img src="images/iphone_icon.png" alt="" />下载iPhone版 </a> </li> <li> <a href=""> <img src="images/andraid_icon.png" alt="" />下载Android版 </a> </li> </ul> <div class="download_code"> <img src="images/download_code.png" alt="" /> </div> </div> <img src="images/phone.png" alt="" class="phone" /> </div> </div> <div id="down"> <div class="download"> <div class="logo2"><img src="images/logo.png" alt="" /></div> <div id="dwn" class="download_btn">免费下载</div> </div> </div> <div class="main"> <div class="main-1"> <img class="title" src="images/tit_1.png" height="154" width="253" alt="" /> <div class="text"> <img class="text_1" src="images/text_1.png" height="22" width="148" alt="" /> <img class="text_2" src="images/text_2.png" height="37" width="298" alt="" /> <img class="text_3" src="images/text_3.png" height="31" width="239" alt="" /> <img class="text_4" src="images/text_4.png" height="27" width="196" alt="" /> <img class="text_5" src="images/text_5.png" height="50" width="422" alt="" /> <img class="text_6" src="images/text_6.png" height="23" width="117" alt="" /> <img class="text_7" src="images/text_7.png" height="16" width="107" alt="" /> <img class="text_8" src="images/text_8.png" height="26" width="174" alt="" /> <img class="text_9" src="images/text_9.png" height="41" width="290" alt="" /> </div> </div> <img class="div-div" src="images/section_bg.jpg" alt="" /> <div class="main-2"> <img src="images/tit_2.png" height="185" width="311" alt="" class="title" /> <img src="images/func_1.png" height="484" width="680" alt="" class="func_1" /> <img src="images/func_2.png" height="82" width="89" alt="" class="func_2" /> <img src="images/func_3.png" height="107" width="97" alt="" class="func_3" /> <img src="images/func_4.png" height="140" width="77" alt="" class="func_4" /> </div> <img class="div-div" src="images/section_bg.jpg" alt="" /> <div class="main-3"> <img class="title" src="images/tit_3.png" height="215" width="281" alt="" /> <img class="nurse_1" src="images/nurse_1.png" height="451" width="613" alt="" /> <img class="nurse_2" src="images/nurse_2.png" height="339" width="257" alt="" class="nurse_2" /> </div> <img class="div-div" src="images/section_bg.jpg" alt="" /> <div class="main-4"> <div class="title">根据你的手机，选择下载</div> <ul class="dwn"> <li> <a href="#"> <div class="android-bg"></div> <div class="android-bg-1">Android</div> </a> </li> <li> <a href="#"> <div class="iphone-bg"></div> <div class="iphone-bg-1">iPhone</div> </a> </li> <li> <a href="#"><img class="img-1" src="images/download_code.png" alt="" /></a> </li> </ul> </div> </div> <div class="footer"> <div class="container"> <p>©Copyright 1999-2015 www.eyzhs.com All rights reserved 版权所有 北京百医汇健康科技有限公司</p> <p>京ICP备14049723号-1 京公网安备11011402000145号</p> </div> </div> </div> </body></html>首页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); }}插入百度地图方法
<!DOCTYPE HTML><html> <head> <meta charset="utf-8"> <title>百度地图API自定义地图</title> <!--引用百度地图API--> <style type="text/css"> html, body { margin: 0; padding: 0; } .iw_poi_title { color: #CC5522; font-size: 14px; font-weight: bold; overflow: hidden; padding-right: 13px; white-space: nowrap } .iw_poi_content { font: 12px arial, sans-serif; overflow: visible; padding-top: 4px; white-space: -moz-pre-wrap; word-wrap: break-word } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> </head> <body> <!--百度地图容器--> <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div> </body> <script type="text/javascript"> //创建和初始化地图函数： function initMap() { createMap(); //创建地图 setMapEvent(); //设置地图事件 addMapControl(); //向地图添加控件 addMarker(); //向地图中添加marker } //创建地图函数： function createMap() { var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图 var point = new BMap.Point(116.313159, 40.062498); //定义一个中心点坐标 map.centerAndZoom(point, 17); //设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map; //将map变量存储在全局 } //地图事件设置函数： function setMapEvent() { map.enableDragging(); //启用地图拖拽事件，默认启用(可不写) map.enableScrollWheelZoom(); //启用地图滚轮放大缩小 map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写) map.enableKeyboard(); //启用键盘上下左右键移动地图 } //地图控件添加函数： function addMapControl() { //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); } //标注点数组 var markerArr = [{ title: "盈创动力大厦A座北厅601", content: "我的备注", point: "116.310123|40.060572", isOpen: 0, icon: { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5 } }]; //创建marker function addMarker() { for (var i = 0; i < markerArr.length; i++) { var json = markerArr[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new BMap.Point(p0, p1); var iconImg = createIcon(json.icon); var marker = new BMap.Marker(point, { icon: iconImg }); var iw = createInfoWindow(i); var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) }); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor: "#808080", color: "#333", cursor: "pointer" }); (function() { var index = i; var _iw = createInfoWindow(i); var _marker = marker; _marker.addEventListener("click", function() { this.openInfoWindow(_iw); }); _iw.addEventListener("open", function() { _marker.getLabel().hide(); }) _iw.addEventListener("close", function() { _marker.getLabel().show(); }) label.addEventListener("click", function() { _marker.openInfoWindow(_iw); }) if (!!json.isOpen) { label.hide(); _marker.openInfoWindow(_iw); } })() } } //创建InfoWindow function createInfoWindow(i) { var json = markerArr[i]; var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>"); return iw; } //创建一个Icon function createIcon(json) { var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) }) return icon; } initMap(); //创建和初始化地图 </script></html>
联系我们
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/header.css" /> <link rel="stylesheet" href="css/call_us.css" /> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script> </head> <body> <div class="header"> <div class="container clearfix"> <div class="logo"><img src="images/logo.png" alt="" /></div> <ul class="nav"> <li><a href="index.html">首页</a></li> <li><a href="about_us.html">关于我们</a></li> <li class="select"><a href="javascript:;">联系我们</a></li> </ul> </div> </div> <div class="main"> <div class="bg"><img src="images/call_mainbg.jpg"alt=""/></div> <div class="container"> <ul class="contact_way"> <li>地址：中华人民共和国</li> <li>邮编：110</li> <li>电话：13501317537</li> <li>邮箱：1010305129@qq.com</li> </ul> <!--百度地图容器--> <div class="map" id="dituContent"></div> </div> </div> <div class="footer"> <div class="container"> <p>©Copyright 1999-2015 www.eyzhs.com All rights reserved 版权所有 北京百医汇健康科技有限公司</p> <p>京ICP备14049723号-1 京公网安备11011402000145号</p> </div> </div> </body> <script type="text/javascript"> //创建和初始化地图函数： function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } //创建地图函数： function createMap(){ var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 var point = new BMap.Point(116.310655,40.060274);//定义一个中心点坐标 map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map;//将map变量存储在全局 } //地图事件设置函数： function setMapEvent(){ map.enableDragging();//启用地图拖拽事件，默认启用(可不写) map.enableScrollWheelZoom();//启用地图滚轮放大缩小 map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写) map.enableKeyboard();//启用键盘上下左右键移动地图 } //地图控件添加函数： function addMapControl(){ //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); map.addControl(ctrl_sca); } //标注点数组 var markerArr = [{title:"盈创动力园区A座北厅601",content:"我的备注",point:"116.310166|40.060606",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}} ]; //创建marker function addMarker(){ for(var i=0;i<markerArr.length;i++){ var json = markerArr[i]; var p0 = json.point.split("|")[0]; var p1 = json.point.split("|")[1]; var point = new BMap.Point(p0,p1); var iconImg = createIcon(json.icon); var marker = new BMap.Marker(point,{icon:iconImg}); var iw = createInfoWindow(i); var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)}); marker.setLabel(label); map.addOverlay(marker); label.setStyle({ borderColor:"#808080", color:"#333", cursor:"pointer" }); (function(){ var index = i; var _iw = createInfoWindow(i); var _marker = marker; _marker.addEventListener("click",function(){ this.openInfoWindow(_iw); }); _iw.addEventListener("open",function(){ _marker.getLabel().hide(); }) _iw.addEventListener("close",function(){ _marker.getLabel().show(); }) label.addEventListener("click",function(){ _marker.openInfoWindow(_iw); }) if(!!json.isOpen){ label.hide(); _marker.openInfoWindow(_iw); } })() } } //创建InfoWindow function createInfoWindow(i){ var json = markerArr[i]; var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>"); return iw; } //创建一个Icon function createIcon(json){ var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)}) return icon; } initMap();//创建和初始化地图</script></html>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;}关于我们
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/header.css" /> <link rel="stylesheet" href="css/about_us.css" /> </head> <body> <div class="header"> <div class="container clearfix"> <div class="logo"><img src="images/logo.png" alt="" /></div> <ul class="nav"> <li><a href="index.html">首页</a></li> <li class="select"><a href="javascript:;">关于我们</a></li> <li><a href="call_us.html">联系我们</a></li> </ul> </div> </div> <div class="main"> <div class="bg"><img src="images/banner.jpg" alt="" /></div> <div class="container"> <div class="article"> <div class="cont">你们是什么？菜鸟。你们的名字谁给的？老鸟。老鸟为什么叫你们菜鸟？因为我们笨，因为我们蠢。因为我们没脑子，因为我们缺根弦！</div> <div class="cont">你们是什么？狼牙。你们的名字谁给的？敌人。敌人为什么叫你们狼牙？因为我们准，因为我们狠，因为我们不怕死，因为我们敢去死！ </div> <div class="cont"> 如果深入敌后，你的战友受伤了，无法随队继续前行，你会怎么办？ 我会留下来陪他，要死一起死！ 给他足够的水和食物，帮助他隐藏起来。如果我还活着，我会回来接他！ 我会劝他等待我们，如果等不到，我会劝他自杀！ 我会改变行动方案，留下一个人保护他，直到我们回来！ 那我就背着他，跟他死在一起！ 我会治好他，治不好，那我就和他一条命！ </div> <div class="cont"> 只有强者当中的强者，才能成为特种兵。强者的概念，不光是体能，更重要的是智商。特种部队要的，不是超级战士，不是兰博，而是——智商和体能、聪明和智慧、忠诚和狡诈等一系列的完美结合，加上严格的训练和精良的装备，所以称之为——特种兵。</div> </div> </div> </div> <div class="footer"> <div class="container"> <p>©Copyright 1999-2015 www.eyzhs.com All rights reserved 版权所有 北京百医汇健康科技有限公司</p> <p>京ICP备14049723号-1 京公网安备11011402000145号</p> </div> </div> </body></html>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;} 0 0
- 手把手教你做APP官网网站（带动画效果，插入百度地图）
- 手把手教你做安豆计算器（八）－动画效果
- 手把手教你做个人 app
- 手把手教你做网站的步骤
- 【前沿干货】手把手教你做网站！
- android studio 手把手教你搭建百度地图
- 手把手教你如何设置H5页面动画效果
- 手把手教你使用Core animation 做动画(上)
- 手把手教你从零开始做一个好看的 APP
- 手把手教你从零开始做一个好看的 APP
- 手把手教你从零开始做一个好看的 APP
- 手把手带你做一个超炫酷loading成功动画view Android自定义view
- 手把手带你做一个超炫酷loading成功动画view Android自定义view
- 手把手带你做一个超炫酷loading成功动画view Android自定义view
- Javascript手把手教你做商品放大镜效果
- 手把手教你如何搭建一个自己的安卓快速开发框架之带你做自己的APP(二)
- 手把手教你如何搭建一个自己的安卓快速开发框架之带你做自己的APP(三)
- 手把手教你如何搭建一个自己的安卓快速开发框架之带你做自己的APP(四)
- Linux Socket过程详细解释（包括三次握手建立连接，四次握手断开连接）
- Zend Studio教程之设置字体大小和颜色
- DOM事件流、事件处理程序以及事件对象
- 自定义简单的ViewPagerIndicator控件
- JAVA中类的加载过程
- 手把手教你做APP官网网站（带动画效果，插入百度地图）
- Android 判断网络连接
- linux 进程监控
- xcode 返回
- PTA 基础编程题 5-29 删除字符串中的子串 (20分)
- 项目-3随机数应用于游戏
- 再看作品展
- 判断某一天是该年的第几天
- Python学习笔记
