H5 responsive development content page (2)

Add the right column

We only need to copy the right column from the information industry before Yes, there is no need to re-write the 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億美元收購(gòu)NXP 將幫其拓展汽車芯片市場(chǎ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/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>高告別單打獨(dú)斗，美國(guó)網(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億美元收購(gòu)NXP 將幫其拓展汽車芯片市場(chǎ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/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>高告別單打獨(dú)斗，美國(guó)網(wǎng)件Orbi多路由系統(tǒng)告訴你什么叫走到哪都有網(wǎng)</h4>
                <p >用戶 16/11/2 瀏覽數(shù)：</p>
            </div>
        </div>
    </div>
</div>

This is the right column, just put it into the left column div, the effect is as shown in the picture

QQ截圖20161104102212.png

In this way, our content page is completed.

Continuing Learning

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中文網(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> 首頁(yè)</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> 實(shí)例</a></li> <li><a href="about.html"><span class="glyphicon glyphicon-envelope"></span> 關(guān)于我們</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">測(cè)試<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;">簡(jiǎn)介</p> <p >CNET科技資訊網(wǎng) 11月1日北京消息：有著驚艷雙曲面和超強(qiáng)性能的小米Note2來(lái)了。上周，小米公司在北京發(fā)布了最新的雙曲面商務(wù)旗艦手機(jī)小米Note2，由于具備無(wú)與倫比的設(shè)計(jì)美感，加上梁朝偉的傾情代言，小米Note 2一經(jīng)發(fā)布就打上了“巨星”光環(huán)，也吸引了無(wú)數(shù)米粉的關(guān)注。今日（11月1日）10點(diǎn)，小米Note2亮黑、冰川銀兩種顏色和三種配置，在小米商城、小米之家正式開售，不同配置及價(jià)格為4G+64G版本2799元、6G+128G版本3299元、6G+128G全球版3499元。其中小米之家在10月31日中午14:00在官方微信開放小米Note 2預(yù)約。用戶選擇取貨門店及時(shí)間并填寫相關(guān)信息，成功后可以到店直接購(gòu)買。在萬(wàn)眾期待的小米Note 2開售的同時(shí)，一年一度電商購(gòu)物盛宴雙11也正式拉開帷幕。據(jù)了解，在今年雙11當(dāng)中，小米方面的整個(gè)活動(dòng)將會(huì)從11月1日開始，持續(xù)11天，小米商城、小米天貓旗艦店、小米京東旗艦店、小米蘇寧旗艦店全平臺(tái)參與，小米之家也將線下同慶。值得一提的是，小米Note2、小米MIX兩大年度旗艦新品領(lǐng)銜燃爆雙11，預(yù)計(jì)會(huì)送出價(jià)值1.3億元福利。小米Note2全球首賣小米雙11促銷全面開啟 <img src="http://img.php.cn/upload/course/000/000/004/581beb80b1aad376.jpg" class="img-responsive center-block"><br> 小米Note2引爆米粉體驗(yàn)熱情 10月26日上午10時(shí)，位于北京華潤(rùn)五彩城的小米之家剛剛開門營(yíng)業(yè)，就有百余名米粉涌入店面當(dāng)中體驗(yàn)最新發(fā)布的小米Note2、小米MIX，曾經(jīng)在蘋果零售店門前出現(xiàn)的“果粉”在體驗(yàn)桌前排隊(duì)體驗(yàn)的場(chǎng)景，在全國(guó)的小米之家再次上演。記者粗略估計(jì)，10月26日上午一個(gè)小時(shí)的時(shí)間里，就有數(shù)百名米粉前來(lái)北京小米之家五彩店體驗(yàn)小米Note2、小米MIX。 “之前也有手機(jī)采用正面曲面屏，這款手機(jī)的雙曲面看起來(lái)真的十分驚艷，而且小米Note2是背部弧形設(shè)計(jì)，這樣雙曲面不僅正面看起來(lái)非常漂亮，拿在手上的手感也十分舒適，小米Note2還擁有目前最強(qiáng)的性能配置，讓人十分心動(dòng)。”正在現(xiàn)場(chǎng)體驗(yàn)手機(jī)的米粉李先生表示。小米Note2全球首賣小米雙11促銷全面開啟 <img src="http://img.php.cn/upload/course/000/000/004/581beb9b8dc5d595.jpg" class="img-responsive center-block"><br> 小米黑科技燃爆雙11 每年雙11都是米粉狂歡的盛宴，小米也會(huì)推出各種促銷活動(dòng)和新品，讓米粉用最優(yōu)惠的價(jià)格買到最心儀的產(chǎn)品，今年當(dāng)然也不例外。據(jù)了解，今年小米雙11主題已經(jīng)確定為“小米黑科技，燃爆雙11”，活動(dòng)從11月1日開始一直持續(xù)到11月11日，小米商城、小米天貓旗艦店、小米京東旗艦店、小米蘇寧旗艦店等全平臺(tái)參與到此次活動(dòng)當(dāng)中，小米之家會(huì)線下同慶。小米相關(guān)人士表示，小米Note2、小米MIX兩大年度旗艦新品將在此次雙11中重點(diǎn)亮相，并準(zhǔn)備了紅米Note4特供版京東獨(dú)家首發(fā)，另有神秘手機(jī)新品即將雙11期間發(fā)布。在米家生態(tài)鏈產(chǎn)品方面，這次堪稱史上米家新品最多的小米雙11，米家IH電飯煲、米家空氣凈化器Pro、無(wú)人機(jī)等諸多新品將在雙11當(dāng)天首賣。今年小米雙11還將延續(xù)以往的大手筆，小米商城、小米天貓旗艦店將狂送1.3億元福利。主要活動(dòng)包括：1111元紅包瘋狂抽，50元、100元優(yōu)惠券等你搶，明星爆款產(chǎn)品5折秒殺，小米Max、小米5、小米5s等實(shí)物大獎(jiǎng)送不停，小米5和小米5s、小米筆記本等小米京東旗艦店手機(jī)品類6期分期免息。此外，這次小米還準(zhǔn)備多種產(chǎn)品特惠活動(dòng)：紅米3S領(lǐng)券減50元，全平臺(tái)649元起。小米筆記本13.3吋也將在天貓預(yù)售，最高可減100元。11月1日、11月11日兩天，米家壓力IH電飯煲直降100元。作為小米今年著力建設(shè)的線下渠道，在這次雙11當(dāng)中小米之家在線下也推出了五重驚喜。包括新品同步開賣，瘋狂周末訂單滿999元送精美禮品等活動(dòng)。此外，在11月12—13日，用戶出示雙11當(dāng)天在天貓旗艦店的購(gòu)物訂單憑證，店內(nèi)購(gòu)物滿100減5元。11月11—13日，在小米之家以舊換新，將會(huì)獲贈(zèng)新機(jī)意外保服務(wù)。小米領(lǐng)跑京東競(jìng)速排行榜贏得雙11開門紅在京東今天零點(diǎn)開始上線的雙11手機(jī)競(jìng)速排行榜中，截止到今日（11月1日）9點(diǎn)，手機(jī)銷量排行前三位分別是：小米、蘋果、華為+榮耀，尤其是小米手機(jī)的銷量一直遙遙領(lǐng)先，從容拔得此次雙11開局頭籌。截止到昨日（11月1日）上午京東熱銷手機(jī)Top10來(lái)看，小米4款，分別為紅米3S、紅米Note4、小米5和小米4c。華為0款，子品牌榮耀3款，分別為榮耀7、榮耀8和榮耀暢玩5C。剩下三款機(jī)型分別為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億美元收購(gòu)NXP 將幫其拓展汽車芯片市場(chǎ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/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>高告別單打獨(dú)斗，美國(guó)網(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億美元收購(gòu)NXP 將幫其拓展汽車芯片市場(chǎ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/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>高告別單打獨(dú)斗，美國(guó)網(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>自學(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>

submit Reset Code

Automatic operation