手把手教你做APP官网网站(带动画效果,插入百度地图)

这里写图片描述

下载地址: http://download.csdn.net/detail/cometwo/9467525

首页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>Documenttitle><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">Androiddiv>a>li><li><a href="#"><div class="iphone-bg">div><div class="iphone-bg-1">iPhonediv>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);}
}

插入百度地图方法

这里写图片描述


<html><head><meta charset="utf-8"><title>百度地图API自定义地图title><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}}];//创建markerfunction 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);}})()}}//创建InfoWindowfunction createInfoWindow(i) {var json = markerArr[i];var iw = new BMap.InfoWindow("" + json.title + "" + json.content + "");return iw;}//创建一个Iconfunction 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>

这里写图片描述

联系我们


<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>邮编:110li><li>电话:13501317537li><li>邮箱:1010305129@qq.comli>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}}];//创建markerfunction addMarker(){for(var i=0;ivar 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);}})()}}//创建InfoWindowfunction createInfoWindow(i){var json = markerArr[i];var iw = new BMap.InfoWindow("" + json.title + ""+json.content+"");return iw;}//创建一个Iconfunction 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;
}

关于我们

这里写图片描述


<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;
}


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部