Page de contenu de développement réactif H5 (2)

Ajouter la colonne de droite

Il suffit de copier la colonne de droite de l'industrie de l'information précédente Oui, ce n'est pas nécessaire pour réécrire le code.

<div class="col-md-4 info-right">
    <blockquote>
        <h2>資訊列表</h2>
    </blockquote>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;">
                <img src="/upload/course/000/000/004/581b047e152ad666.jpg" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-sm-7 col-xs-7">
                <h4>高通宣布470億美元收購NXP 將幫其拓展汽車芯片市場</h4>
                <p >用戶 16/11/2 瀏覽數(shù)：</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;">
                <img src="/upload/course/000/000/004/581b049cad458310.jpg" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-sm-7 col-xs-7">
                <h4>小米Note2全球首賣 小米雙11促銷全面開啟</h4>
                <p >用戶 16/11/2 瀏覽數(shù)：</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;">
                <img src="/upload/course/000/000/004/581b04ae8a2f0453.jpg" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-sm-7 col-xs-7">
                <h4>高告別單打獨斗，美國網(wǎng)件Orbi多路由系統(tǒng)告訴你什么叫走到哪都有網(wǎng)</h4>
                <p >用戶 16/11/2 瀏覽數(shù)：</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;">
                <img src="/upload/course/000/000/004/581b047e152ad666.jpg" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-sm-7 col-xs-7">
                <h4>高通宣布470億美元收購NXP 將幫其拓展汽車芯片市場</h4>
                <p >用戶 16/11/2 瀏覽數(shù)：</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;">
                <img src="/upload/course/000/000/004/581b049cad458310.jpg" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-sm-7 col-xs-7">
                <h4>小米Note2全球首賣 小米雙11促銷全面開啟</h4>
                <p >用戶 16/11/2 瀏覽數(shù)：</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;">
                <img src="/upload/course/000/000/004/581b047e152ad666.jpg" class="img-responsive" alt="">
            </div>
            <div class="col-md-7 col-sm-7 col-xs-7">
                <h4>高告別單打獨斗，美國網(wǎng)件Orbi多路由系統(tǒng)告訴你什么叫走到哪都有網(wǎng)</h4>
                <p >用戶 16/11/2 瀏覽數(shù)：</p>
            </div>
        </div>
    </div>
</div>

C'est la colonne de droite, il suffit de la mettre dans le div de la colonne de gauche, l'effet est comme indiqué sur l'image

QQ截圖20161104102212.png

De cette fa?on, notre page de contenu est complétée.

Formation continue

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中文網(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(http://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; } #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.8; letter-spacing: 2px; 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; } #case{ padding: 40px 0; background-color: #eee; text-align: center; } #case h4{ color: #666; } #case p{ color: #666; line-height: 1.6; } #about{ background-color: #eee; padding: 40px 15px; } #about a{ color: #2aabd2; } #about .about{ background-color: #fff; box-shadow: 2px 2px #ccc; } #about h3{ color: #333; font-size: 18px; border-bottom: 1px solid #eee; padding: 20px 0; margin: 0 0 10px 0; } #about p{ line-height: 2; font-size: 13px; } .list{ background-color: #fff; box-shadow: 2px 2px #ccc; } .rev { border-left: 2px solid #e2b709; width: 100%; overflow: hidden; margin-top: 20px; padding-left: 10px; } #list{ background-color: #EEEEEE; padding: 40px 0; } #list h3{ text-align: center; } .list-2{ margin-top: 30px;color: gray; text-align: center; } .page{ text-align: center; } /*小屏幕大于等于768px*/ @media (min-width: 768px) { .tab-h2{ font-size: 24px; } .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; } #about h3{ font-size: 19px; } #about p{ font-size: 14px; } } /*中等屏幕大于等于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; } #about h3{ font-size: 20px; } #about p{ font-size: 15px; } } /*大屏幕大于等于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; } #about h3{ font-size: 22px; } #about p{ font-size: 16px; } } #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="http://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><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 class="active"><a href="case.html"><span class="glyphicon glyphicon-fire"></span> 實例</a></li> <li><a href="about.html"><span class="glyphicon glyphicon-envelope"></span> 關于我們</a></li> </ul> </div> </div> </nav> <div class=" jumbotron"> <div class="container"> <hgroup> <h1></h1> <h4></h4> </hgroup> </div> </div> <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="http://img.php.cn/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ā)布了最新的雙曲面商務旗艦手機小米Note2，由于具備無與倫比的設計美感，加上梁朝偉的傾情代言，小米Note 2一經(jīng)發(fā)布就打上了“巨星”光環(huán)，也吸引了無數(shù)米粉的關注。今日（11月1日）10點，小米Note2亮黑、冰川銀兩種顏色和三種配置，在小米商城、小米之家正式開售，不同配置及價格為4G+64G版本2799元、6G+128G版本3299元、6G+128G全球版3499元。其中小米之家在10月31日中午14:00在官方微信開放小米Note 2預約。用戶選擇取貨門店及時間并填寫相關信息，成功后可以到店直接購買。在萬眾期待的小米Note 2開售的同時，一年一度電商購物盛宴雙11也正式拉開帷幕。據(jù)了解，在今年雙11當中，小米方面的整個活動將會從11月1日開始，持續(xù)11天，小米商城、小米天貓旗艦店、小米京東旗艦店、小米蘇寧旗艦店全平臺參與，小米之家也將線下同慶。值得一提的是，小米Note2、小米MIX兩大年度旗艦新品領銜燃爆雙11，預計會送出價值1.3億元福利。小米Note2全球首賣小米雙11促銷全面開啟 <img src="http://img.php.cn/upload/course/000/000/004/581beb80b1aad376.jpg" class="img-responsive center-block"><br> 小米Note2引爆米粉體驗熱情 10月26日上午10時，位于北京華潤五彩城的小米之家剛剛開門營業(yè)，就有百余名米粉涌入店面當中體驗最新發(fā)布的小米Note2、小米MIX，曾經(jīng)在蘋果零售店門前出現(xiàn)的“果粉”在體驗桌前排隊體驗的場景，在全國的小米之家再次上演。記者粗略估計，10月26日上午一個小時的時間里，就有數(shù)百名米粉前來北京小米之家五彩店體驗小米Note2、小米MIX。 “之前也有手機采用正面曲面屏，這款手機的雙曲面看起來真的十分驚艷，而且小米Note2是背部弧形設計，這樣雙曲面不僅正面看起來非常漂亮，拿在手上的手感也十分舒適，小米Note2還擁有目前最強的性能配置，讓人十分心動。”正在現(xiàn)場體驗手機的米粉李先生表示。小米Note2全球首賣小米雙11促銷全面開啟 <img src="http://img.php.cn/upload/course/000/000/004/581beb9b8dc5d595.jpg" class="img-responsive center-block"><br> 小米黑科技燃爆雙11 每年雙11都是米粉狂歡的盛宴，小米也會推出各種促銷活動和新品，讓米粉用最優(yōu)惠的價格買到最心儀的產(chǎn)品，今年當然也不例外。據(jù)了解，今年小米雙11主題已經(jīng)確定為“小米黑科技，燃爆雙11”，活動從11月1日開始一直持續(xù)到11月11日，小米商城、小米天貓旗艦店、小米京東旗艦店、小米蘇寧旗艦店等全平臺參與到此次活動當中，小米之家會線下同慶。小米相關人士表示，小米Note2、小米MIX兩大年度旗艦新品將在此次雙11中重點亮相，并準備了紅米Note4特供版京東獨家首發(fā)，另有神秘手機新品即將雙11期間發(fā)布。在米家生態(tài)鏈產(chǎn)品方面，這次堪稱史上米家新品最多的小米雙11，米家IH電飯煲、米家空氣凈化器Pro、無人機等諸多新品將在雙11當天首賣。今年小米雙11還將延續(xù)以往的大手筆，小米商城、小米天貓旗艦店將狂送1.3億元福利。主要活動包括：1111元紅包瘋狂抽，50元、100元優(yōu)惠券等你搶，明星爆款產(chǎn)品5折秒殺，小米Max、小米5、小米5s等實物大獎送不停，小米5和小米5s、小米筆記本等小米京東旗艦店手機品類6期分期免息。此外，這次小米還準備多種產(chǎn)品特惠活動：紅米3S領券減50元，全平臺649元起。小米筆記本13.3吋也將在天貓預售，最高可減100元。11月1日、11月11日兩天，米家壓力IH電飯煲直降100元。作為小米今年著力建設的線下渠道，在這次雙11當中小米之家在線下也推出了五重驚喜。包括新品同步開賣，瘋狂周末訂單滿999元送精美禮品等活動。此外，在11月12—13日，用戶出示雙11當天在天貓旗艦店的購物訂單憑證，店內(nèi)購物滿100減5元。11月11—13日，在小米之家以舊換新，將會獲贈新機意外保服務。小米領跑京東競速排行榜贏得雙11開門紅在京東今天零點開始上線的雙11手機競速排行榜中，截止到今日（11月1日）9點，手機銷量排行前三位分別是：小米、蘋果、華為+榮耀，尤其是小米手機的銷量一直遙遙領先，從容拔得此次雙11開局頭籌。截止到昨日（11月1日）上午京東熱銷手機Top10來看，小米4款，分別為紅米3S、紅米Note4、小米5和小米4c。華為0款，子品牌榮耀3款，分別為榮耀7、榮耀8和榮耀暢玩5C。剩下三款機型分別為iPhone7、OPPO R9s以及努比亞Z11mini。</p> </div> </div> </div> <div class="col-md-4 info-right"> <blockquote> <h2>資訊列表</h2> </blockquote> <div class="container-fluid"> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;"> <img src="http://img.php.cn/upload/course/000/000/004/581b047e152ad666.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>高通宣布470億美元收購NXP 將幫其拓展汽車芯片市場</h4> <p >用戶 16/11/2 瀏覽數(shù)：</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;"> <img src="http://img.php.cn/upload/course/000/000/004/581b049cad458310.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>小米Note2全球首賣小米雙11促銷全面開啟</h4> <p >用戶 16/11/2 瀏覽數(shù)：</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;"> <img src="http://img.php.cn/upload/course/000/000/004/581b04ae8a2f0453.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>高告別單打獨斗，美國網(wǎng)件Orbi多路由系統(tǒng)告訴你什么叫走到哪都有網(wǎng)</h4> <p >用戶 16/11/2 瀏覽數(shù)：</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;"> <img src="http://img.php.cn/upload/course/000/000/004/581b047e152ad666.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>高通宣布470億美元收購NXP 將幫其拓展汽車芯片市場</h4> <p >用戶 16/11/2 瀏覽數(shù)：</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;"> <img src="http://img.php.cn/upload/course/000/000/004/581b049cad458310.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>小米Note2全球首賣小米雙11促銷全面開啟</h4> <p >用戶 16/11/2 瀏覽數(shù)：</p> </div> </div> <div class="row"> <div class="col-md-5 col-sm-5 col-xs-5" style="margin: 12px 0;padding: 0;"> <img src="http://img.php.cn/upload/course/000/000/004/581b047e152ad666.jpg" class="img-responsive" alt=""> </div> <div class="col-md-7 col-sm-7 col-xs-7"> <h4>高告別單打獨斗，美國網(wǎng)件Orbi多路由系統(tǒng)告訴你什么叫走到哪都有網(wǎng)</h4> <p >用戶 16/11/2 瀏覽數(shù)：</p> </div> </div> </div> </div> </div> </div> </div> <footer id="footer"> <div class="container"> <p>自學路線 | 合作相關 | 投訴建議</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>

soumettre Réinitialiser le code

Opération automatique