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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

cometwo123 2016-03-20 21:53:00 浏览1769
展开阅读全文

这里写图片描述

下载地址: 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/500
评论
cometwo123
+ 关注