手把手教你做APP官网网站（带动画效果，插入百度地图）

最新推荐文章于 2024-08-03 16:53:18 发布

最骚的就是你

最新推荐文章于 2024-08-03 16:53:18 发布

阅读量3.9k

点赞数 1

分类专栏： web前端学习文章标签： html 百度地图动画 app

本文链接：https://blog.csdn.net/libin_1/article/details/50939133

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

这里写图片描述

下载地址： 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>电话：110</li>
                    <li>邮箱：101@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;
}