項目代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微票兒</title> <link rel="stylesheet" href="../css/bootstrap.css"> <style> .navbar-brand{ margin-left: 15px; } #myCarousel{ margin: 20px; } #onerowcolumn{ margin: 20px; } .container{ margin-top: 30px; } ul li{ list-style:none; } /* #myTabContent{ margin: -20px; }*/ #tworowcol{ margin: 10px; } </style> </head> <body> <!--頂部導航部分--> <nav class="nav navbar-inverse"> <div class="navbar-header"> <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> <span class="icon-bar"></span> </button> <img src="image/logow.jpg" class="navbar-brand"> </div> <div class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li><a href="#">登錄</a></li> <li><a href="#">注冊</a></li> </ul> </div> <div class="collapse navbar-collapse navbar-right"> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="請輸入要搜索的內容"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div> <div class="collapse navbar-collapse navbar-left"> <ul class="nav navbar-nav"> <li><a href="#" class="active">全國</a></li> <li><a href="#">演出</a></li> <li><a href="#">電影</a></li> <li><a href="#">我的微票兒<span style="margin-left: 6px;" class="label label-danger">new</span></a></li> </ul> </div> </nav> <!--第一行微票兒輪播圖和特惠看部分--> <div class="row" style="background-color: rgba(180,180,166,0.95)" id="onerow"> <div class="col-md-8 col-xs-12"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="image/1.jpg"> <div class="carousel-caption"></div> </div> <div class="item"> <img src="image/2.jpg"> <div class="carousel-caption"></div> </div> <div class="item"> <img src="image/3.jpg"> <div class="carousel-caption"></div> </div> </div> <a class="carousel-control leftt" href="#myCarousel" data-slide="prev"></a> <a class="carousel-control rightt" href="#myCarousel" data-slide="next"></a> </div> </div> <div class="col-md-3 col-md-offset-1 col-xs-12" style="background-color: white" id="onerowcolumn"> <h4>特惠看</h4> <img src="image/img1.jpg"> <p>[蘇州]2016迷笛電子音樂節(預售)</p> <p>穿着花褲子喝着小酒通宵達旦</p> <p>------------------------------</p> <p>2016劉若英世界巡回演唱會</p> <p>[上海]百老匯經典音樂劇--《獅子王》</p> </div> </div> <div class="container"> <!--第二行左邊一個大概占8份的演出和右側的選項卡--> <div class="row"> <div class="col-md-2 col-xs-6"> <img src="image/5.jpg" class="img-responsive"> <p>[上海]百老匯經典音樂劇--《獅子王》</p> </div> <div class="col-md-2 col-xs-6"> <img src="image/6.jpg" class="img-responsive"> <p>[北京]陳奕迅 ANOTHER EASON'S LIFE演唱會北京站</p> </div> <div class="col-md-2 col-xs-6"> <img src="image/7.jpg" class="img-responsive"> <p>[深圳]逃跑計划2016巡回演唱會深圳站</p> </div> <div class="col-md-2 col-xs-6"> <img src="image/8.jpg" class="img-responsive"> <p>[北京]BJCC北京漫控潮流博覽會[北京]BJCC北京漫控潮流博覽會</p> </div> <div class="col-md-3 col-xs-12"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#news" data-toggle="tab" id="one"> 首頁</a> </li> <li><a href="#play" data-toggle="tab">技能課</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="news"> <ul> <li><img src="image/img2.jpg" class="img-responsive"></li> <li>[哈爾濱]梁靜茹.你的名字是愛情演唱會</li> <li>--------------------------------------</li> <li>[太原]蔡依林2016PLAY世界巡回演唱會</li> </ul> </div> </div> </div> </div> <div class="row"> <!--第三行是一個占12列的廣告頁面--> <div class="col-md-12"> <img src="image/ad1.jpg" class="img-responsive"> </div> </div> <div class="row"> <div class="col-md-10 col-xs-12" id="tworow"> <ul id="myTab1" class="nav nav-tabs"> <li class="active"><a href="#news" data-toggle="tab" id="one1"> 演唱會</a> </li> <li><a href="#play" data-toggle="tab">體育賽事</a></li> <li><a href="#war" data-toggle="tab"> 舞台劇</a> </li> <li><a href="#society" data-toggle="tab">兒童親子</a></li> <li><a href="#phy" data-toggle="tab"> 音樂會</a> </li> <li><a href="#act" data-toggle="tab">展覽活動</a></li> </ul> <div id="myTabContent1" class="tab-content"> <div class="tab-pane fade in active" id="news1"> <!--第四行選項卡有內容的右側大概占三分的歷歷在目--> <div class="row" id="tworowcol"> <div class="col-md-3 col-xs-6"> <img src="image/9.jpg" class="img-responsive"> <p>[蘇州]2016迷笛電子音樂節<br><strong style="font-size: 20px">180</strong>元起</p> </div> <div class="col-md-3 col-xs-6"> <img src="image/10.jpg" class="img-responsive"> <p>[深圳]逃跑計划2016巡回演唱會深圳站<br><strong style="font-size: 20px">180</strong>元起</p> </div> <div class="col-md-3 col-xs-6"> <img src="image/11.jpg" class="img-responsive"> <p>[北京]陳奕迅 ANOTHER EASON'S LIFE演唱會北京站<br><strong style="font-size: 20px">380</strong>元起</p> </div> <div class="col-md-3 col-xs-6"> <img src="image/12.jpg" class="img-responsive"> <p>[青島]周傑倫2016世界巡回演唱會青島站(即將開售)<br><strong style="font-size: 20px">380</strong>元起</p> </div> <div class="col-md-3 col-xs-6"> <img src="image/13.jpg" class="img-responsive"> <p>[太原]周傑倫2016世界巡回演唱會太原站(預售) 280元起<br><strong style="font-size: 20px">280</strong>元起</p> </div> <div class="col-md-3 col-xs-6"> <img src="image/14.jpg" class="img-responsive"> <p>[太原]2016 李榮浩「有 理想」世界巡回演唱會-太原站<br><strong style="font-size: 20px">280</strong>元起</p> </div> <div class="col-md-3 col-xs-6"> <img src="image/15.jpg" class="img-responsive"> <p>[深圳]徐佳瑩“日全蝕”深圳演唱會<br><strong style="font-size: 20px">280</strong>元起</p> </div> <div class="col-md-3 col-xs-6"> <img src="image/16.jpg" class="img-responsive"> <p>[太原]2016劉若英"Renext 我敢"世界巡回演唱會太原站<br><strong style="font-size: 20px">380</strong>元起</p> </div> </div> </div> </div> </div> <div class="col-md-2 col-xs-12"> <ul class="list-group"> <li class="list-group-item" style="background-color: rgba(98,205,233,0.95)"> <div>歷歷在目</div></li> <li class="list-group-item"><img src="image/img4.jpg">[天津]天津中華曲苑相聲專場 <li class="list-group-item"><img src="image/img5.jpg">[深圳]劉老根大舞台深圳站 </li> <li class="list-group-item"><img src="image/img6.gif">[長沙]大兵笑工場相聲晚會 </li> <li class="list-group-item"><img src="image/img4.jpg">[天津]天津中華曲苑相聲專場 </li> <li class="list-group-item"> 查看今日全部演出 </li> </ul> </div> </div> <!--第五行場館推薦和熱銷榜單--> <div class="row"> <div class="col-md-9 col-xs-12"> <div class="col-md-2"><strong>場館推薦</strong></div><br> <br><br> </div> <div class="row" id="row"> <div class="col-md-4 col-xs-12"> <div class=""> <img src="image/img7.jpg" class="img-responsive"> <div class="caption"> <p><strong>近期演出：</strong><br><br> [北京]恆源祥戲劇出品大型原創音樂劇《猶太人在上海》<br><br> [北京]滬語話劇《永遠的尹雪艷》<br><br> [北京]恆源祥戲劇出品原創話劇《大商海》<br><br> [北京]百老匯經典音樂劇《音樂之聲》中文版 </p> </div> </div> </div> <div class="col-md-4 col-xs-12">5 <div class=""> <img src="image/img8.jpg" class="img-responsive"> <div class="caption"> <p><strong>近期演出：</strong><br> [北京]2016如果 田馥甄巡回演唱會PLUS北京站(售罄) </div> </div> </div> <div class="col-md-3"> <span><strong>熱銷榜單</strong></span> <ul class="list-group"> <li class="list-group-item"><img src="image/img9.jpg">2016年1月1日~12月31日 [華特迪士尼大劇院] </li> <li class="list-group-item">[北京]陳奕迅 ANOTHER EASON'S LIFE </li> <li class="list-group-item">[深圳]逃跑計划2016巡回演唱會深圳站 </li> <li class="list-group-item">[北京]BJCC北京漫控潮流博覽會 </li> <li class="list-group-item"> [貴陽]陳奕迅 ANOTHER EASON'S LIFE演唱會貴陽站 </li> <li class="list-group-item"> [太原]2016岳雲鵬相聲專場太原站 </li> </ul> </div> </div> </div> <div class="row" style="background-color:rgba(23,15,22,0.95)"> <div class="col-md-4 col-xs-12" style="margin-top: 5px"> <img src="image/logow.jpg" class="navbar-brand"><span>微信電影票官網</span><br> 在線占好座，覆蓋影院全國第一 </div> <div class="col-md-4 col-xs-12" style="margin-top: 5px"> <img src="image/phoneIcon.png" class="navbar-brand"><span>微信電影票官網</span><br> 在線占好座，覆蓋影院全國第一 </div> <div class="col-md-4 col-xs-12" style="margin-top: 5px"> <img src="image/f_wx.png" class="navbar-brand"><img src="image/f_wpr.png" class="navbar-brand"><span>微信電影票官網</span><br> 在線占好座，覆蓋影院全國第一 </div> <div class="col-md-5 col-xs-12 col-md-offset-3" style="margin-top: 5px"> @2015北京微影時代科技有限公司版權所有 京ICP備14034406號-2 </div> </div> </div> <!--最下面的尾部--> <script src="../jquery-3.2.1.min.js"></script> <script src="../js/bootstrap.js"></script> </body> </html>
歡迎提問，歡迎指錯，歡迎討論學習信息 有需要的私聊 發布評論即可 都能回復的
原文在博客園http://www.cnblogs.com/a782126844/有需要可以聯系扣扣：2265682997