<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style> body { font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; color: #666; } .jumbotron { background-image: url(img/bg.jpg); margin: 50px 0 0 0; color: #ccc; } .jumbotron h1 { font-size: 26px; padding: 0 0 0 20px; } .jumbotron h4 { font-size: 15px; padding: 0 0 0 20px; } #about { background-color: #eee; padding: 40px 15px; } #about a { color: #0059b2; } #about .about { background-color: #fff; box-shadow: 2px 2px 3px #ccc; } #about h3 { color: #333; font-size: 18px; border-bottom: 1px solid #eee; padding: 20px 0; margin: 0 0 10px 0; } #about p { line-height: 2; font-size: 13px; } #footer { background-color: #666; border-top: 1px solid #ccc; padding: 20px; text-align: center; color: #eee; } /*没有小于768px,是因为Bootstrap3以移动端优先设计*/ /* 小屏幕(平板,大于等于768px) */ @media (min-width: 768px) { #about h3 { font-size: 19px; } #about p { font-size: 14px; } } /* 中等屏幕(桌面显示器,大于等于992px) */ @media (min-width: 992px) { #about h3 { font-size: 20px; } #about p { font-size: 15px; } } /* 大屏幕(大桌面显示器,大于等于1200px) */ @media (min-width: 1200px) { #about h3 { font-size: 22px; } #about p { font-size: 16px; } } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand" style="padding: 0;"><img src="img/logo.png" alt="标志"></a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav navbar-right" style="margin-top: 0;"> <li><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li> <li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li> <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li> <li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li> </ul> </div> </div> </nav> <div class="jumbotron"> <div class="container"> <hgroup> <h1>一站式共享网络</h1> <h4>阅谁问君诵,水落清香浮。</h4> </hgroup> </div> </div> <div id="about"> <div class="container"> <div class="row"> <div class="col-md-3 hidden-sm hidden-xs"> <div class="list-group"> <a class="list-group-item" href="#1">1.机构介绍</a> <a class="list-group-item" href="#2">2.加入我们</a> <a class="list-group-item" href="#3">3.联系方式</a> </div> </div> <div class="col-md-9 about"> <a name="1"></a> <h3>机构简介</h3> <p>...</p> <a name="2"></a> <h3>加入我们</h3> <p>...</p> <p>...</p> <a name="3"></a> <h3>联系方式</h3> <p>地址:无</p> <p>邮编:111111</p> <p>电话:151-88888888</p> <p>传真:151-88666666</p> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <p>分享最有用的资料,为用户建最有体验度的网站</p> <p>互联网知识共享资料 版权所有 粤ICP备15052347号</p> </div> </footer> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图: