Information content of H5 responsive development (1)

Information content page layout

##Information content

First we introduce the navigation and bottom of the homepage.

<!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中文网</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
   
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a href="index.html" class="navbar-brand logo" ><img src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" height="50" alt="PHP中文网"></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="index.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
                <li><a href="information.html"><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> 关于我们</a></li>
            </ul>
        </div>
    </div>
</nav>
<footer id="footer">
    <div class="container">
        <p>自学路线 | 合作相关 | 投诉建议</p>
        <p> 2016 PHP中文网企业网站.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"></script>
</body>
</html>

We add a picture background to the content page.

<div class=" jumbotron">
     <div class="container">
         <hgroup>
             <h1>资讯</h1>
             <h4>PHP中文网的最新动态，资源.....</h4>
         </hgroup>
     </div>
 </div>

We use the jumbotron feature.

Jumbotron. As the name suggests, this component increases the size of the title and adds more margin to the landing page content. The steps to use Jumbotron are as follows:

Create a container <div> with class .jumbotron. In addition to the larger <h1>, the font-weight is reduced to 200px.

Use the <hgroup> tag in the container. This tag is a new tag added to H5 and is used to combine the titles of web pages or sections.

Then control the style and add pictures.

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;
}
.jumbotron{
    background-image: url(https://img.php.cn/upload/course/000/000/004/581af31542837558.jpg);
    margin: 50px 0 0;
    color: #ccc;
}
.jumbotron h1{
    font-size: 26px;
    padding:  0 0 0 20px;
}
.jumbotron h4{
    font-size: 15px;
    padding:  0 0 0 20px;
}
/*小屏幕 大于等于768px*/
@media (min-width: 768px) {
    .tab-h2{
        font-size: 26px;
    }
    .tab-p{
        font-size: 16px;
    }
    .text h3{
        font-size: 22px;
    }
    .text p{
        font-size: 16px;
    }
    .jumbotron h1{
        font-size: 30px;
    }
    .jumbotron h4{
        font-size: 16px;
    }
}
/*中等屏幕 大于等于992px*/
@media (min-width: 992px) {
    .tab-h2{
        font-size: 28px;
    }
    .tab-p{
        font-size: 17px;
    }
    .text h3{
        font-size: 24px;
    }
    .text p{
        font-size: 18px;
    }
    .jumbotron h1{
        font-size: 32px;
        padding:  0 0 0 20px;
    }
    .jumbotron h4{
        font-size: 17px;
        padding:  0 0 0 20px;
    }
}
/*大屏幕 大于等于1200px*/
@media (min-width: 1200px) {
    .tab-h2{
        font-size: 30px;
    }
    .tab-p{
        font-size: 18px;
    }
    .text h3{
        font-size: 26px;
    }
    .text p{
        font-size: 19px;
    }
}
#footer{
    color: white;
    background-color: #000000;
    padding: 20px;
    text-align: center;
}

Difficulties in this chapter

Extended use of bootstrap method
Distinguish according to different Rate different font size settings

Next Section

new file

<!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中文网</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;
 }
 .jumbotron{
 background-image: url(https://img.php.cn/upload/course/000/000/004/581af31542837558.jpg);
 margin: 50px 0 0;
 color: #ccc;
 }
 .jumbotron h1{
 font-size: 26px;
 padding: 0 0 0 20px;
 }
 .jumbotron h4{
 font-size: 15px;
 padding: 0 0 0 20px;
 }
 /*小屏幕 大于等于768px*/
 @media (min-width: 768px) {
 .tab-h2{
 font-size: 26px;
 }
 .tab-p{
 font-size: 16px;
 }
 .text h3{
 font-size: 22px;
 }
 .text p{
 font-size: 16px;
 }
 .jumbotron h1{
 font-size: 30px;
 }
 .jumbotron h4{
 font-size: 16px;
 }
 }

 /*中等屏幕 大于等于992px*/
 @media (min-width: 992px) {
 .tab-h2{
 font-size: 28px;
 }
 .tab-p{
 font-size: 17px;
 }
 .text h3{
 font-size: 24px;
 }
 .text p{
 font-size: 18px;
 }
 .jumbotron h1{
 font-size: 32px;
 padding: 0 0 0 20px;
 }
 .jumbotron h4{
 font-size: 17px;
 padding: 0 0 0 20px;
 }
 }
 /*大屏幕 大于等于1200px*/
 @media (min-width: 1200px) {
 .tab-h2{
 font-size: 30px;
 }
 .tab-p{
 font-size: 18px;
 }
 .text h3{
 font-size: 26px;
 }
 .text p{
 font-size: 19px;
 }
 }

 #footer{
 color: white;
 background-color: #000000;

 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="index.html" class="navbar-brand logo" ><img src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" height="50" alt="PHP中文网"></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="index.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
 <li><a href="information.html"><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> 关于我们</a></li>
 </ul>
 </div>

 </div>
</nav>
<div class=" jumbotron">
 <div class="container">
 <hgroup>
 <h1>资讯</h1>
 <h4>PHP中文网的最新动态，资源.....</h4>
 </hgroup>
 </div>
</div>
<footer id="footer">
 <div class="container">
 <p>自学路线 | 合作相关 | 投诉建议</p>
 <p> 2016 PHP中文网企业网站.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"></script>

</body>
</html>

submit Reset Code

Automatic operation

Full Screen