H5レスポンシブ開発のホームページコンテンツ(3)

ホームページの下部

H5では、フッターを作成するために新しい<footer>タグが追加されています。htmlのように新しいdivを作成する必要はありません。このタグは引き続きフッター

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<footer id="footer">
  <div class="container">
     <p>自學路線 | 合作相關(guān) | 投訴建議</p>
     <p> 2016 PHP中文網(wǎng)企業(yè)網(wǎng)站.powered by Bootstrap.</p>
  </div>
</footer>
</body>
</html>

を作成し、スタイルを制御するために使用します。

えー

これで下のバーが完成しました

QQ截圖20161103153035.png

學び続ける

新しいファイル

<!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>PHP中文網(wǎng)</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <style> body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } #myCarousel{ margin: 50px 0 0 0; } .logo{ padding: 0; } .daohang{ margin-top: 0; } .carousel-inner img{ margin: 0 auto; } .tab-h2{ font-size: 30px; text-align: center; color: #0059b2; } .tab-p{ font-size: 18px; text-align: center; letter-spacing: 1px; color: #999; margin: 20px 0 40px 0 ; } .tab1{ margin: 30px 0; color: #666; } .tab1 .text-muted{ color: #999; text-decoration: line-through; } .tab1 .media-heading{ margin: 5px 0 20px 0 ; } .tab1 .col{ padding: 20px; } .tab2{ background-color: #eee; padding: 60px 20px; text-align: center; } .tab2 img{ width: 40%; height: 40%; } .tab3{ padding: 40px 0 ; text-align: center; } .tab3 img{ width: 40%; height: 30%; } .text h3{ font-size: 26px; } .tab4{ background-color: #eee; padding: 60px 20px; text-align: center; } .tab4 img{ width: 40%; height: 40%; } .tab5{ padding: 40px 0 ; text-align: center; } .tab5 img{ width: 40%; height: 30%; } .text h4{ font-size: 26px; } .text{ padding-top: 20px; } .text p{ font-size: 18px; } #footer{ color: white; background-color: #000000; border-top: 1px solid #ccc; padding: 20px; text-align: center; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand logo" ><img src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" height="50" alt="PHP中文網(wǎng)"></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 daohang " > <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首頁</a></li> <li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> 資訊</a></li> <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 實例</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 關(guān)于我們</a></li> </ul> </div> </div> </nav> <div id="myCarousel" class="carousel slide">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>  <div class="carousel-inner"> <div class="item active" style="background: #E2DACF"> <img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一張"> </div> <div class="item" style="background: #000000"> <img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二張"> </div> <div class="item" style="background: #FEDF85"> <img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg" alt="第三章"> </div> </div>  <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <div class="tab1"> <div class="container"> <h2 class="tab-h2">為什么選擇在PHP中文網(wǎng)學習編程？</h2> <p class="tab-p">PHP中文網(wǎng)有著海量的編程資源，在線答疑，專人解惑。</p> <div class="row"> <div class="col-md-6 col" > <div> <div class="media-left"> <a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a> </div> <div class="media-body"> <h4 class="media-heading">學習質(zhì)量</h4> <p class="text-muted">其他教育視頻網(wǎng)站的資源雜亂，內(nèi)容缺失，課程不完整，自學難度大。</p> <p>PHP中文網(wǎng)的課程及時的更新，讓我們自學的學員有更好的路線。</p> </div> </div> </div> <div class="col-md-6 col"> <div class="media-left"> <a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a> </div> <div class="media-body"> <h4 class="media-heading">師資力量</h4> <p class="text-muted">其他教育視頻網(wǎng)站的資源雜亂，內(nèi)容缺失，課程不完整，自學難度大。</p> <p>PHP中文網(wǎng)的課程及時的更新，讓我們自學的學員有更好的路線。</p> </div> </div> <div class="col-md-6 col" > <div class="media-left"> <a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a> </div> <div class="media-body"> <h4 class="media-heading">學習安排</h4> <p class="text-muted">其他教育視頻網(wǎng)站的資源雜亂，內(nèi)容缺失，課程不完整，自學難度大。</p> <p>PHP中文網(wǎng)的課程及時的更新，讓我們自學的學員有更好的路線。</p> </div> </div> <div class="col-md-6 col" > <div class="media-left"> <a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a> </div> <div class="media-body"> <h4 class="media-heading">服務團隊</h4> <p class="text-muted">其他教育視頻網(wǎng)站的資源雜亂，內(nèi)容缺失，課程不完整，自學難度大。</p> <p>PHP中文網(wǎng)的課程及時的更新，讓我們自學的學員有更好的路線。</p> </div> </div> </div> </div> </div> <div class="tab2"> <div class="container"> <div class="row"> <div class="text col-md-6 col-sm-6"> <h3>師資力量</h3> <p>PHP中文網(wǎng)的課程及時的更新，讓我們自學的學員有更好的路線。</p> </div> <div class="col-md-6"> <img src="https://img.php.cn/upload/course/000/000/004/581ae02a3af3d343.jpg" class="img-responsive center-block" alt=""> </div> </div> </div> </div> <div class="tab3"> <div class="container"> <div class="row"> <div class="col-md-6 "> <img src="https://img.php.cn/upload/course/000/000/004/581ae2d64702c292.png" class="img-responsive center-block" alt=""> </div> <div class=" text col-md-6 col-sm-6"> <h3>學習體系</h3> <p>PHP中文網(wǎng)的課程及時的更新，讓我們自學的學員有更好的路線。</p> </div> </div> </div> </div> <div class="tab4"> <div class="container"> <div class="row"> <div class="text col-md-6 col-sm-6"> <h3>師資力量</h3> <p>PHP中文網(wǎng)的課程及時的更新，讓我們自學的學員有更好的路線。</p> </div> <div class="col-md-6"> <img src="https://img.php.cn/upload/course/000/000/004/581ae02a3af3d343.jpg" class="img-responsive center-block" alt=""> </div> </div> </div> </div> <div class="tab5"> <div class="container"> <div class="row"> <div class="col-md-6 "> <img src="https://img.php.cn/upload/course/000/000/004/581ae2d64702c292.png" class="img-responsive center-block" alt=""> </div> <div class=" text col-md-6 col-sm-6"> <h3>學習體系</h3> <p>PHP中文網(wǎng)的課程及時的更新，讓我們自學的學員有更好的路線。</p> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <p>自學路線 | 合作相關(guān) | 投訴建議</p> <p> 2016 PHP中文網(wǎng)企業(yè)網(wǎng)站.powered by Bootstrap.</p> </div> </footer> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script type="text/javascript"> $(function () { //輪播自動播放 $('#myCarousel').carousel({ //自動4秒播放 interval : 4000, }); }); </script> </body> </html>

提出するリセットコード

自動運転