Contenu informatif du développement réactif H5 (2)
Contenu de la consultation
Présentez d'abord la répartition du contenu
<!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;
}
.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中文網(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="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> 實(shí)例</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 關(guān)于我們</a></li>
</ul>
</div>
</div>
</nav>
<div class=" jumbotron">
<div class="container">
<hgroup>
<h1>資訊</h1>
<h4>PHP中文網(wǎng)的最新動(dòng)態(tài)，資源.....</h4>
</hgroup>
</div>
</div>
<div id="information">
<div class="container">
<div class="row">
<div class="col-md-8">
8
</div>
<div class="col-md-4">
4
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container">
<p>自學(xué)路線 | 合作相關(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"></script>
</body>
</html>La page est divisée en deux parties, avec 8 cl?tures sur la gauche. Le c?té droit est divisé en 4 sections. Un c?té est la page de contenu à consulter, et l'autre c?té est la colonne de classement.
Puis travaillez sur la cl?ture.
<div id="information"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="container-fluid" style="padding:0"> <div class="row info-cont "> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="https://img.php.cn/upload/course/000/000/004/581af92e6cec7784.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>小米Note2全球首賣 小米雙11促銷全面開啟</h4> <p class="hidden-xs">今日（11月1日）10點(diǎn)，小米Note2亮黑、冰川銀兩種顏色和三種配置，在小米商城、小米之家正式開售，不同配置及價(jià)格為4G+64G版本2799元、6G+128G版本3299元、6G+128G全球版3499元。</p> <p >用戶 16/11/2 瀏覽數(shù)：</p> </div> </div> <div class="row info-cont "> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="https://img.php.cn/upload/course/000/000/004/581af948944fc836.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>告別單打獨(dú)斗，美國(guó)網(wǎng)件Orbi多路由系統(tǒng)告訴你什么叫走到哪都有網(wǎng)</h4> <p class="hidden-xs">近日，美國(guó)網(wǎng)件公司發(fā)布了Orbi奧秘多路由系統(tǒng)，主要針對(duì)的就是網(wǎng)絡(luò)信號(hào)難以完全覆蓋的別墅家庭</p> <p >用戶 16/11/2 瀏覽數(shù)：</p> </div> </div> <div class="row info-cont "> <div class="col-md-5 col-sm-5 col-xs-5"> <img src="https://img.php.cn/upload/course/000/000/004/581af963316f0570.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>正式登陸中國(guó)的亞馬遜Prime會(huì)員服務(wù)為“定制版”：海淘免運(yùn)費(fèi)</h4> <p class="hidden-xs">“亞馬遜會(huì)員服務(wù)（Amazon Prime）正式登陸中國(guó)”，這是亞馬遜全球高級(jí)副總裁羅素?高（Russell Grandinetti）今天上午在北京宣布的“給中國(guó)消費(fèi)者帶來的驚喜”。</p> <p >用戶 16/11/2 瀏覽數(shù)：</p> </div> </div> </div> </div> <div class="col-md-4"> 4 </div> </div> </div> </div>
Continuez à créer deux zones flexibles dans la colonne de gauche, 5 à gauche sont utilisées pour stocker le contenu de l'image et 7 à droite sont utilisées pour stocker des informations textuelles, ajuster le style et la distance.
L'objet de ce chapitre
La mise en page du contenu de la page est au centre de ce chapitre, comment créer une mise en page flexible.
