<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首页</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
@media(min-width: 768px) {
nav {
display: flex;
justify-content: space-around;
}
}
@media(max-width: 768px) {
#box {
position: absolute;
right: 100px;
top: 0px;
width: 40%;
/* */
display: flex;
flex-direction: row;
}
form {
display: none;
}
}
</style>
</head>
<body>
<nav class="nav navbar-inverse">
<div>
<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>
<a href="#" class="navbar-brand" style="margin-top: -10px;"><img src="img/footer_logo.png"></a>
</div>
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav">
<li><a href="#">全国</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">演出 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">周杰伦演唱会</a></li>
<li><a href="#">张学友演唱会</a></li>
<li><a href="#">刘德华演唱会</a></li>
</ul>
</li>
<li><a href="#">电影</a></li>
<li><a href="#">我的微票儿<span style="margin-left: 6px;" class="label label-danger">new</span></a></li>
</ul>
</div>
</div>
<div>
<form class="navbar-form navbar-brand">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入要搜索的内容">
</div>
<button type="submit" class="btn btn-primary" 1>搜索</button>
</form>
<ul class="nav navbar-nav navbar-right" id="box">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</nav>
<div class="row jumbotron" style="background-image: url(img/bannerbg.png);">
<div class="col-md-6 col-sm-offset-1">
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<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>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="img/1.jpg" alt="First slide">
</div>
<div class="item">
<img src="img/3.jpg" alt="Second slide">
</div>
<div class="item">
<img src="img/5.1.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-3 col-sm-offset-1 ">
<ul class="thumbnail ">
<li class="list-group-item ">
<h3>特惠看</h3>
</li>
<li class="list-group-item ">
<img src="img/img1.jpg "/>
</li>
<li class="list-group-item ">
<a href="# ">[苏州]2016迷笛电子音乐节(预售)</a>
</li>
<li class="list-group-item ">
<a href="# ">穿着花裤子喝着小酒通宵达旦</a>
</li>
<li class="list-group-item ">
<a href="# ">2016刘若英世界巡回演唱会</a>
</li>
<li class="list-group-item ">
<a href="# ">[上海]百老汇经典音乐剧--《狮子王》</a>
</li>
</ul>
</div>
</div>
<div class="row col-sm-offset-1">
<div class="col-md-11 col-xs-12 ">
<div class="col-md-2 col-xs-6 ">
<div class="thumbnail">
<img src="img/5.jpg" />
<p>[上海]百老汇经典音乐剧《狮子王》</p>
</div>
</div>
<div class="col-md-2 col-xs-6 ">
<div class="thumbnail">
<img src="img/11.jpg" />
<p>[上海]百老汇经典音乐剧《狮子王》</p>
</div>
</div>
<div class="col-md-2 col-xs-6 ">
<div class="thumbnail">
<img src="img/10.jpg" />
<p>[上海]百老汇经典音乐剧《狮子王》</p>
</div>
</div>
<div class="col-md-2 col-xs-6 ">
<div class="thumbnail">
<img src="img/8.jpg" />
<p>[上海]百老汇经典音乐剧《狮子王》</p>
</div>
</div>
<div class="col-md-3 col-xs-12 ">
<div class="thumbnail">
<ul class="nav nav-tabs">
<li class="active"><a href="#name1" data-toggle="tab">首页</a></li>
<li><a href="#name2" data-toggle="tab">技能课</a></li>
</ul>
<div class="tab-content" style="margin: 10px;">
<div class="tab-pane fade in active" id="name1">
<p><img src="img/img2.jpg"></p>
<p>[哈尔滨]梁静茹.你的名字是爱情演唱会</p>
<p>[太原]蔡依林2016PLAY世界巡回演唱会</p>
</div>
<div class="tab-pane" id="name2">
<p>演唱会</p>
<p>体育赛事</p>
<p>舞台剧</p>
<p>儿童亲子</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row col-sm-offset-1">
<div class="col-lg-10 col-xs-12 thumbnail">
<img src="img/ad1.jpg" width="97%" />
</div>
</div>
<div class="row col-sm-offset-1">
<div class="col-md-11 col-xs-12 ">
<div class="row">
<div class="col-lg-8 col-xs-12">
<div class="col-md-12 col-xs-12">
<div class="thumbnail">
<ul class="nav nav-tabs">
<li class="active"><a href="#name3" data-toggle="tab">演唱会</a></li>
<li><a href="#name4" data-toggle="tab">体育赛事</a></li>
<li><a href="#name5" data-toggle="tab">舞台剧</a></li>
<li><a href="#name6" data-toggle="tab">儿童亲子</a></li>
<li><a href="#name7" data-toggle="tab">音乐会</a></li>
<li><a href="#name8" data-toggle="tab">展览活动</a></li>
</ul>
<div class="tab-content" style="margin: 10px;">
<div class="tab-pane fade in active" id="name3">
<div class="row">
<div class="col-md-3 col-xs-6 ">
<div class="thumbnail">
<img src="img/5.jpg" />
<p>[上海]百老汇经典音乐剧《狮子王》</p>
<p><span style="color: #13B9F7; font-size: 40px;">180</span>元起</p>
</div>
</div>
<div class="col-md-3 col-xs-6 ">
<div class="thumbnail">
<img src="img/11.jpg" />
<p>[上海]百老汇经典音乐剧《狮子王》</p>
<p><span style="color: #13B9F7; font-size: 40px;">180</span>元起</p>
</div>
</div>
<div class="col-md-3 col-xs-6 ">
<div class="thumbnail">
<img src="img/10.jpg" />
<p>[上海]百老汇经典音乐剧《狮子王》</p>
<p><span style="color: #13B9F7; font-size: 40px;">180</span>元起</p>
</div>
</div>
<div class="col-md-3 col-xs-6 ">
<div class="thumbnail">
<img src="img/8.jpg" />
<p>[上海]百老汇
北大青鸟 Bootstrap 微票儿 项目_学习部
3星 · 超过75%的资源 需积分: 20 142 浏览量
2018-06-09
09:32:16
上传
评论 3
收藏 1.23MB ZIP 举报
dengks1
- 粉丝: 1
- 资源: 3