首页手记自己写的响应式Html5加Bootstrap官网代码，...

自己写的响应式Html5加Bootstrap官网代码，仅供参考学习

标签：

Html5 Bootstrap CSS3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title></title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css" >
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico">
</head>

<section id="meet-team" >
    <div class="container">
        <div class="text-center">
            <h2>团队</h2>
            <img class="img-responsive displayed " class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/mainline.png" alt="about">
            <p><strong>我们的团队均为80、90后成员，有热血，有斗志，有梦想，有能力</strong></p>
            <p><strong>我们拥有专业的知识和丰富的经验以及优秀的项目管理经验</strong></p>
            <p><strong>我们秉承诚信，专业，责任，服务的敬业态度</strong></p>
        </div>
        <div class="row teamspace container">
            <div class="col-xs-12 col-sm-12 col-md-3 col-md-offset-1">
                <div class="team-member">
                    <div class="team-img;">
                        <img class="img-responsive" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/meber1.png" alt="">

                    </div>
                    <div class="team-info">
                        <h3></h3>
                        <span>职位：CEO</span>
                    </div>
                    <P>联系电话：</P>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-3">
                <div class="team-member">
                    <div class="team-img;">
                        <img class="img-responsive" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/meber3.png" alt="">
                    </div>
                    <div class="team-info display">
                        <h3></h3>
                        <span>职位：CEO</span>
                    </div>
                    <P>联系电话：</P>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-3">
                <div class="team-member">
                    <div class="team-img;">
                        <img class="img-responsive" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/meber2.png" alt="">
                    </div>
                    <div class="team-info">
                        <h3></h3>
                        <span>职位：CEO</span>
                    </div>
                    <P>联系电话：</P>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-2">
                <div class="team-join " >
                    <a href="#call-us">
                        <div class="team-word">
                            <br><br>
                            <p><strong>来吧！</strong></p>
                            <p><strong>加入我们吧！</strong></p>
                            <div class="team-img ">
                                <img class="img-responsive" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/flay-up.png" alt="">
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="call-us">
    <div class="container">
        <div class="text-center">
            <h2>联系我们</h2>
            <img class="img-responsive displayed " class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/mainline.png" alt="about">
        </div>
        <div class="row teamspace container">
            <div class="col-xs-12 col-sm-12 col-md-5 col-md-offset-1">
                <div class="media">
                    <div class="us-address media-body">
                        <h4 class="media-heading text-left"><a href="#">
                            <img class="media-heading" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/marker.png" >
                        </a>地址：</h4>
                        <p class="text-left">www.jootu.net</p>
                        <p class="text-left"></p>
                        <p class="text-left"></p>
                        <p class="text-left"></p>

                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6">
                <img class="map" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/map.png">
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="container">
                    <p>现在,你可以&nbsp;:&nbsp;<a class="btn btn-primary">浏览团队博客</a>&nbsp;or&nbsp;<a class="btn btn-primary" href="#">返回顶部</a></p>
                </div>
            </div>
        </div>
    </div>
    <a name="call-us"></a>
</section>

<footer id="footer">
    <div class="container">
        <div class="row myfooter">
            <div class="col-sm-6"><div class="pull-left">
                Copyright &copy; 2017. All rights reserved.
            </div></div>
            <div class="col-sm-6">
                <div class="pull-right">Designed by Jiaotu </div>
            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/bootstrap.min.js"></script>

<!-- Portfolio -->
<

</body>
</html>

body { font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; line-height: 1.8; font-size: 16px; color: #555; font-weight: 300; overflow-x: hidden; background: #fff }
img.displayed { display: block; margin-left: auto; margin-right: auto; background-color: transparent; }
html,
body { height: 100%; }
div { text-align: center }
img{margin-left:auto;margin-right:auto; }
a{text-decoration:none;color: #000000;} 
a:hover{ text-decoration:none;color: #000000;}
#meet-team { padding-top: 50px; }
#meet-team div div img {padding-top: 10px;padding-bottom: 5px;}
#meet-team ul { text-align: center; }
#meet-team li { display: inline-block; margin-right: 24px; font-size: 18px; }
#meet-team .teamspace { margin-top: 30px; }
#meet-team .team-member { height: 284px; border: solid 4px #d3d3d3; margin-top: 10px; }
#meet-team .team-member:hover { border: solid 4px #000000; opacity: 1;color:#000000; }
#meet-team .team-join { height: 284px; border: solid 4px #000000; margin-top: 10px;color: #000000; opacity: 0.2; }
#meet-team .team-join:hover { border: solid 5px #000000; opacity: 1; }
#meet-team .team-join .team-img { margin-right: auto; margin-left: auto; }

#call-us { padding-top: 100px; }
#call-us div div a img {padding-top: 10px;padding-bottom: 5px;opacity: 0.7;}
#call-us .us-address{padding-top: 80px;}
#call-us .map{padding-top: 80px;padding-bottom: 50px;width:100%;}

footer {background: #000000;color: #FFFFFF;opacity: 0.7;padding: 10px;margin-top:50px;}

点击查看更多内容