Page de contenu de développement réactif H5 (1)
Mise en page de contenu
Page de contenu
Introduire la tête et le bas de la page de consultation préalablement préparée comme mise en page globale.
<!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(/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;
}
#information{
background-color: #EEEEEE;
padding: 40px 0;
}
.info-cont{
background-color: #FFF;
margin: 0 0 20px 0 ;
box-shadow: 2px 2px 3px #ccc;
}
.info-cont img{
margin: 10px 0 10px 0;
}
.info-cont h4{
color: #000000;
padding: 4px 0 ;
font-size: 14px;
}
.info-cont p{
line-height: 1;
color: #888888;
}
/*小屏幕 大于等于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;
}
.info-cont 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;
}
.info-cont h4{
font-size: 18px;
}
.info-cont p{
line-height: 1;
color: #888888;
}
.info-right{
background-color: #fff;
box-shadow: 2px 2px 3px #ccc;
}
.info-right blockquote{
margin: 0px;
padding: 0px;
}
.info-right h2{
font-size: 20px;
color: #333;
padding: 5px;
}
.info-right h4{
color: #333;
font-size: 16px;
padding: 2px 0 0 0;
}
.info-right p{
line-height: 1.6;
}
/*小屏幕 大于等于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;
}
.info-cont 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;
}
.info-cont h4{
font-size: 18px;
}
}
/*大屏幕 大于等于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;
}
.info-cont h4{
font-size: 20px;
}
}
#footer{
color: white;
background-color: #000000;
padding: 20px;
text-align: center;
}
}
/*大屏幕 大于等于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;
}
.info-cont h4{
font-size: 20px;
}
}
#footer{
color: white;
background-color: #000000;
padding: 20px;
text-align: center;
}
.page{
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="/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> 實例</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>內(nèi)容</h1>
<h4>PHP中文網(wǎng)的咨詢內(nèi)容的詳情.....</h4>
</hgroup>
</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>De cette fa?on, nous l'avons introduit avec succès dans la première étape. Nous créons ensuite le corps principal de la page de contenu. Afin d'avoir un style similaire à la page Web précédente, nous écrivons comme suit.
<div id="list"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="container-fluid" style="padding:0"> <div class="row info-cont"> <h3>小米Note2全球首賣 小米雙11促銷全面開啟</h3> <p class="list-2">測試<img src="/upload/course/000/000/004/581beb6601691170.png" style="margin-left: 20px">2016/10/31</p> <p class="rev"style="color:gray;">簡介</p> <p >CNET科技資訊網(wǎng) 11月1日 北京消息： 有著驚艷雙曲面和超強性能的小米Note2來了。上周，小米公司在北京發(fā)布了最新的雙曲面商務(wù)旗艦手機小米Note2，由于具備無與倫比的設(shè)計美感，加上梁朝偉的傾情代言，小米Note 2一經(jīng)發(fā)布就打上了“巨星”光環(huán)，也吸引了無數(shù)米粉的關(guān)注。今日（11月1日）10點，小米Note2亮黑、冰川銀兩種顏色和三種配置，在小米商城、小米之家正式開售，不同配置及價格為4G+64G版本2799元、6G+128G版本3299元、6G+128G全球版3499元。其中小米之家在10月31日中午14:00在官方微信開放小米Note 2預(yù)約。用戶選擇取貨門店及時間并填寫相關(guān)信息，成功后可以到店直接購買。 在萬眾期待的小米Note 2開售的同時，一年一度電商購物盛宴雙11也正式拉開帷幕。據(jù)了解，在今年雙11當(dāng)中，小米方面的整個活動將會從11月1日開始，持續(xù)11天，小米商城、小米天貓旗艦店、小米京東旗艦店、小米蘇寧旗艦店全平臺參與，小米之家也將線下同慶。值得一提的是，小米Note2、小米MIX兩大年度旗艦新品領(lǐng)銜燃爆雙11，預(yù)計會送出價值1.3億元福利。 小米Note2全球首賣 小米雙11促銷全面開啟 <img src="/upload/course/000/000/004/581beb80b1aad376.jpg"><br> 小米Note2引爆米粉體驗熱情 10月26日上午10時，位于北京華潤五彩城的小米之家剛剛開門營業(yè)，就有百余名米粉涌入店面當(dāng)中體驗最新發(fā)布的小米Note2、小米MIX，曾經(jīng)在蘋果零售店門前出現(xiàn)的“果粉”在體驗桌前排隊體驗的場景，在全國的小米之家再次上演。記者粗略估計，10月26日上午一個小時的時間里，就有數(shù)百名米粉前來北京小米之家五彩店體驗小米Note2、小米MIX。 “之前也有手機采用正面曲面屏，這款手機的雙曲面看起來真的十分驚艷，而且小米Note2是背部弧形設(shè)計，這樣雙曲面不僅正面看起來非常漂亮，拿在手上的手感也十分舒適，小米Note2還擁有目前最強的性能配置，讓人十分心動?！闭诂F(xiàn)場體驗手機的米粉李先生表示。 小米Note2全球首賣 小米雙11促銷全面開啟 <img src="/upload/course/000/000/004/581beb9b8dc5d595.jpg"><br> 小米黑科技燃爆雙11 每年雙11都是米粉狂歡的盛宴，小米也會推出各種促銷活動和新品，讓米粉用最優(yōu)惠的價格買到最心儀的產(chǎn)品，今年當(dāng)然也不例外。據(jù)了解，今年小米雙11主題已經(jīng)確定為“小米黑科技，燃爆雙11”，活動從11月1日開始一直持續(xù)到11月11日，小米商城、小米天貓旗艦店、小米京東旗艦店、小米蘇寧旗艦店等全平臺參與到此次活動當(dāng)中，小米之家會線下同慶。 小米相關(guān)人士表示，小米Note2、小米MIX兩大年度旗艦新品將在此次雙11中重點亮相，并準(zhǔn)備了紅米Note4特供版京東獨家首發(fā)，另有神秘手機新品即將雙11期間發(fā)布。在米家生態(tài)鏈產(chǎn)品方面，這次堪稱史上米家新品最多的小米雙11，米家IH電飯煲、米家空氣凈化器Pro、無人機等諸多新品將在雙11當(dāng)天首賣。 今年小米雙11還將延續(xù)以往的大手筆，小米商城、小米天貓旗艦店將狂送1.3億元福利。主要活動包括：1111元紅包瘋狂抽，50元、100元優(yōu)惠券等你搶，明星爆款產(chǎn)品5折秒殺，小米Max、小米5、小米5s等實物大獎送不停，小米5和小米5s、小米筆記本等小米京東旗艦店手機品類6期分期免息。此外，這次小米還準(zhǔn)備多種產(chǎn)品特惠活動：紅米3S領(lǐng)券減50元，全平臺649元起。小米筆記本13.3吋也將在天貓預(yù)售，最高可減100元。11月1日、11月11日兩天，米家壓力IH電飯煲直降100元。 作為小米今年著力建設(shè)的線下渠道，在這次雙11當(dāng)中小米之家在線下也推出了五重驚喜。包括新品同步開賣，瘋狂周末訂單滿999元送精美禮品等活動。此外，在11月12—13日，用戶出示雙11當(dāng)天在天貓旗艦店的購物訂單憑證，店內(nèi)購物滿100減5元。11月11—13日，在小米之家以舊換新，將會獲贈新機意外保服務(wù)。 小米領(lǐng)跑京東競速排行榜贏得雙11開門紅 在京東今天零點開始上線的雙11手機競速排行榜中，截止到今日（11月1日）9點，手機銷量排行前三位分別是：小米、蘋果、華為+榮耀，尤其是小米手機的銷量一直遙遙領(lǐng)先，從容拔得此次雙11開局頭籌。 截止到昨日（11月1日）上午京東熱銷手機Top10來看，小米4款，分別為紅米3S、紅米Note4、小米5和小米4c。華為0款，子品牌榮耀3款，分別為榮耀7、榮耀8和榮耀暢玩5C。剩下三款機型分別為iPhone7、OPPO R9s以及努比亞Z11mini。</p> </div> </div> </div> </div> </div> </div>
Ajoutez une nouvelle liste de bo?tes div et donnez à la plage de contenu 8 cellules. Apportez-y des modifications de style.
#list{
background-color: #EEEEEE;
padding: 40px 0;
}
#list h3{
text-align: center;
}
.list-2{
margin-top: 30px;color: gray;
text-align: center;
}De cette fa?on, le style sur le c?té gauche appara?tra grossièrement.
