ACCP8.0Y2Web前端框架与移动应用开发第5章Bootstrap制作微票儿首页
生活随笔
收集整理的這篇文章主要介紹了
ACCP8.0Y2Web前端框架与移动应用开发第5章Bootstrap制作微票儿首页
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
項(xiàng)目代碼
<!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> <!--頂部導(dǎo)航部分--> <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="#">注冊(cè)</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="請(qǐng)輸入要搜索的內(nèi)容"></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迷笛電子音樂節(jié)(預(yù)售)</p><p>穿著花褲子喝著小酒通宵達(dá)旦</p><p>------------------------------</p><p>2016劉若英世界巡回演唱會(huì)</p><p>[上海]百老匯經(jīng)典音樂劇--《獅子王》</p></div></div> <div class="container"><!--第二行左邊一個(gè)大概占8份的演出和右側(cè)的選項(xiàng)卡--><div class="row"><div class="col-md-2 col-xs-6"><img src="image/5.jpg" class="img-responsive"><p>[上海]百老匯經(jīng)典音樂劇--《獅子王》</p></div><div class="col-md-2 col-xs-6"><img src="image/6.jpg" class="img-responsive"><p>[北京]陳奕迅 ANOTHER EASON'S LIFE演唱會(huì)北京站</p></div><div class="col-md-2 col-xs-6"><img src="image/7.jpg" class="img-responsive"><p>[深圳]逃跑計(jì)劃2016巡回演唱會(huì)深圳站</p></div><div class="col-md-2 col-xs-6"><img src="image/8.jpg" class="img-responsive"><p>[北京]BJCC北京漫控潮流博覽會(huì)[北京]BJCC北京漫控潮流博覽會(huì)</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>[哈爾濱]梁靜茹.你的名字是愛情演唱會(huì)</li><li>--------------------------------------</li><li>[太原]蔡依林2016PLAY世界巡回演唱會(huì)</li></ul></div></div></div></div><div class="row"><!--第三行是一個(gè)占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">演唱會(huì)</a></li><li><a href="#play" data-toggle="tab">體育賽事</a></li><li><a href="#war" data-toggle="tab">舞臺(tái)劇</a></li><li><a href="#society" data-toggle="tab">兒童親子</a></li><li><a href="#phy" data-toggle="tab">音樂會(huì)</a></li><li><a href="#act" data-toggle="tab">展覽活動(dòng)</a></li></ul><div id="myTabContent1" class="tab-content"><div class="tab-pane fade in active" id="news1"><!--第四行選項(xiàng)卡有內(nèi)容的右側(cè)大概占三分的歷歷在目--><div class="row" id="tworowcol"><div class="col-md-3 col-xs-6"><img src="image/9.jpg" class="img-responsive"><p>[蘇州]2016迷笛電子音樂節(jié)<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>[深圳]逃跑計(jì)劃2016巡回演唱會(huì)深圳站<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演唱會(huì)北京站<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世界巡回演唱會(huì)青島站(即將開售)<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世界巡回演唱會(huì)太原站(預(yù)售) 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 李榮浩「有 理想」世界巡回演唱會(huì)-太原站<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>[深圳]徐佳瑩“日全蝕”深圳演唱會(huì)<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 我敢"世界巡回演唱會(huì)太原站<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">[天津]天津中華曲苑相聲專場(chǎng)<li class="list-group-item"><img src="image/img5.jpg">[深圳]劉老根大舞臺(tái)深圳站</li><li class="list-group-item"><img src="image/img6.gif">[長沙]大兵笑工場(chǎng)相聲晚會(huì)</li><li class="list-group-item"><img src="image/img4.jpg">[天津]天津中華曲苑相聲專場(chǎng)</li><li class="list-group-item">查看今日全部演出</li></ul></div></div><!--第五行場(chǎng)館推薦和熱銷榜單--><div class="row"><div class="col-md-9 col-xs-12"><div class="col-md-2"><strong>場(chǎng)館推薦</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>[北京]恒源祥戲劇出品大型原創(chuàng)音樂劇《猶太人在上海》<br><br>[北京]滬語話劇《永遠(yuǎn)的尹雪艷》<br><br>[北京]恒源祥戲劇出品原創(chuàng)話劇《大商海》<br><br>[北京]百老匯經(jīng)典音樂劇《音樂之聲》中文版</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如果 田馥甄巡回演唱會(huì)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">[深圳]逃跑計(jì)劃2016巡回演唱會(huì)深圳站</li><li class="list-group-item">[北京]BJCC北京漫控潮流博覽會(huì)</li><li class="list-group-item">[貴陽]陳奕迅 ANOTHER EASON'S LIFE演唱會(huì)貴陽站</li><li class="list-group-item">[太原]2016岳云鵬相聲專場(chǎng)太原站</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>微信電影票官網(wǎng)</span><br>在線占好座，覆蓋影院全國第一</div><div class="col-md-4 col-xs-12" style="margin-top: 5px"><img src="image/phoneIcon.png" class="navbar-brand"><span>微信電影票官網(wǎng)</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>微信電影票官網(wǎng)</span><br>在線占好座，覆蓋影院全國第一</div><div class="col-md-5 col-xs-12 col-md-offset-3" style="margin-top: 5px">@2015北京微影時(shí)代科技有限公司版權(quán)所有 京ICP備14034406號(hào)-2</div></div> </div><!--最下面的尾部--> <script src="../jquery-3.2.1.min.js"></script> <script src="../js/bootstrap.js"></script> </body> </html>歡迎提問，歡迎指錯(cuò)，歡迎討論學(xué)習(xí)信息 有需要的私聊 發(fā)布評(píng)論即可 都能回復(fù)的
??原文在博客園http://www.cnblogs.com/a782126844/有需要可以聯(lián)系扣扣：2265682997
轉(zhuǎn)載于:https://www.cnblogs.com/a782126844/p/7199463.html
總結(jié)
以上是生活随笔為你收集整理的ACCP8.0Y2Web前端框架与移动应用开发第5章Bootstrap制作微票儿首页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： deepin linux下python安
- 下一篇： python练习册 每天一个小程序 第0