ACCP8.0Y2Web前端框架与移动应用开发第5章Bootstrap制作微票儿首页
2024-05-13 12:15:17
项目代码
<!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="data: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="data:image/1.jpg"><div class="carousel-caption"></div></div><div class="item"><img src="data:image/2.jpg"><div class="carousel-caption"></div></div><div class="item"><img src="data: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="data: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="data:image/5.jpg" class="img-responsive"><p>[上海]百老汇经典音乐剧--《狮子王》</p></div><div class="col-md-2 col-xs-6"><img src="data:image/6.jpg" class="img-responsive"><p>[北京]陈奕迅 ANOTHER EASON'S LIFE演唱会北京站</p></div><div class="col-md-2 col-xs-6"><img src="data:image/7.jpg" class="img-responsive"><p>[深圳]逃跑计划2016巡回演唱会深圳站</p></div><div class="col-md-2 col-xs-6"><img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:image/img4.jpg">[天津]天津中华曲苑相声专场<li class="list-group-item"><img src="data:image/img5.jpg">[深圳]刘老根大舞台深圳站</li><li class="list-group-item"><img src="data:image/img6.gif">[长沙]大兵笑工场相声晚会</li><li class="list-group-item"><img src="data: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="data: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="data: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="data: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="data:image/logow.jpg" class="navbar-brand"><span>微信电影票官网</span><br>在线占好座，覆盖影院全国第一</div><div class="col-md-4 col-xs-12" style="margin-top: 5px"><img src="data:image/phoneIcon.png" class="navbar-brand"><span>微信电影票官网</span><br>在线占好座，覆盖影院全国第一</div><div class="col-md-4 col-xs-12" style="margin-top: 5px"><img src="data:image/f_wx.png" class="navbar-brand"><img src="data: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
转载于:https://www.cnblogs.com/a782126844/p/7199463.html
ACCP8.0Y2Web前端框架与移动应用开发第5章Bootstrap制作微票儿首页相关推荐
- ACCP8.0Y2Web前端框架与移动应用开发第4章Bootstrap的JavaScript插件
杂记 插件之间的依赖关系 某些插件和 CSS 组件依赖于其它插件.如果你是单个引入每个插件的,请确保在文档中检查插件之间的依赖关系.注意,所有插件都依赖 jQuery (也就是说,jQuery必须在所 ...
- ACCP8.0Y2Web前端框架与移动应用开发第2章Bootstrap样式
1.CSS12栅格系统是整个Bootstrap的核心功能 2.Bootstrap所有的jquery都要用到jquery1.10+ 3.栅格系统的工作原理: 一行数据必须包含在.container或.c ...
- 微票儿项目_(使用Bootstrap框架）
bootstrap框架做一个简单的巩固 微票儿http://xn--https-bl8js66z7n7i//pan.baidu.com/s/1ZhuMLVhuj7NjS5b5w4y_oQ%20%20% ...
- 10大H5前端框架，让你开发不愁
作为一名在前端死缠烂打6年并且懒到不行的攻城狮,这几年阅过很多从知名到很知名的前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿 ...
- 【前端框架学习】第一次实验 跑马灯效果的制作
一.什么是跑马灯效果 每隔一段时间,排在首位的字符会被后一个字符所代替,而首位字符会被移到队尾. 二.实验过程 1.首先创建控制区域与vue实例: <div id="app" ...
- 考研刷题小程序云开发实战-页面设计与制作（题库首页、排名页、我的）
目录 前言 1.创建并配置页面 2.题库首页 3.排名页和我的 总结 前言 为啥你的UI界面感觉乱?对于小程序开发者来说,特别是对于初阶开发者或者初学者,排版的好坏是这个阶段核心要考虑的问题,也就是细 ...
- 三、如何手动实现一个微前端框架雏形
如何手动实现一个微前端框架雏形 一.了解微前端 1. 什么是微前端 为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制,将整体前端服务拆分成一些更小.更简单的,能够独立开发.测试部署的小块儿. ...
- Web 前端框架分类解读
Web前端框架可以分为两类: JS的类库框架 JQuery.JS Angular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVC Vue.JS(MVVM)*** ...
- 目前得前端框架都有哪些？
1.AngularJS Angular JS 是一个有Google维护的开源前端web应用程序框架.它最初由Brat Tech LLC的Misko Hevery于2009年开发出来.Angular J ...
最新文章
- php错误提示如何查询,php-如何显示我的MySQLi查询错误？
- linux虚拟用户的配置
- ubuntu下安装gedit插件
- 趣味编程：从字符串中提取信息（参考答案 - 上）
- Ksusha and Array (vector)
- Android数据存储五种方式总结
- mysql 5.7参数目录_mysql5.7配置
- 相机成像原理_数码相机的工作原理
- E. Pattern Matching（题意理解+拓扑排序）
- 有了它，快速学会RStudio应用
- 在内存中动态生成缩略图
- linux中安装samba的方法以及注意事项
- xms和xmx为什么要相同_为什么开料机价格相差这么多？秘密在这里，你知道吗？...
- 01.最简单的helloworld
- Visual Assist X是个好东西呀
- 黄聪：wordpress向mysql字段中保存html代码（使用add_option()方法），然后无法显示出问题...
- vsco使用教程_vsco cam怎么用？vsco cam安卓版使用教程详解
- 浙大计算机考研分数线2016,浙江大学2016考研复试分数线
- eclipse tomcat 热部署
- 美国密歇根州立大学计算机专业,密歇根州立大学计算机科学与工程系