Contenu informatif du développement réactif H5 (1)

Mise en page du contenu des informations

Contenu informatif

Nous présentons d'abord la navigation et le bas de la page d'accueil.

<!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>

Nous ajoutons un arrière-plan d'image à la page de contenu.

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

Nous utilisons la fonctionnalité jumbotron.

Jumbotron. Comme son nom l'indique, ce composant augmente la taille du titre et ajoute plus de marge au contenu de la page de destination. Les étapes pour utiliser Jumbotron sont les suivantes :

Créez un conteneur <div> En plus du <h1> plus grand, le poids de la police est réduit à 200 px.

Utilisez la balise <hgroup> à l'intérieur du conteneur. Cette balise est une nouvelle balise ajoutée à H5 et est utilisée pour regrouper les titres de pages ou de sections Web.

Contrôlez ensuite le style et ajoutez des images.

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;
}

Difficultés de ce chapitre

Utilisation étendue de la méthode bootstrap
Selon à différentes distinctions Évaluez différents paramètres de taille de police

section suivante

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Plein écran