第二个页面，，部分还没能完全响应
网页中 img2文件夹以及源码链接https://pan.baidu.com/s/1dHniQFf
<!--
index.html
Created by 命_心 on 2018-01-23.
Copyright 2018 命_心. All rights reserved.
-->
<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap_text 2</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
li{
list-style: none;
}
#data ul li{
padding: 8px 0;
border-bottom: 1px #ccc solid;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"></div>
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
<ul class="nav nav-pills nav-justified nav1 text-center">
<li><a href="#" class="color-black">Speakers</a></li>
<li><a href="#" class="color-black">Venue</a></li>
<li><a href="#" class="color-black">Schedule</a></li>
<li><a href="#" class="color-black">Sponsors</a></li>
</ul>
</div>
<div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<img class="img-responsive center-block" src="img2/16.png" style="width: 100%;"/>
</div>
<div class="row" style="width: 40%;height: 120px;background-color: #FFFFFF;position:absolute; left:32%;top: 62%;">
<span style="line-height: 33px;">Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors
</span>
<div class="input-group">
<input type="text" class="form-control" placeholder="Email Address">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">GET IN LINE</button>
</span>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="row" style="border-bottom:1px #ccc solid; ;">
<h2 class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Speakers</h2>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right">
<button class="btn btn-danger" style="margin-top: 20px;">Submit A Talk</button>
</div>
</div>
<div class="row">
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
<img src="img2/10.png" class="img-responsive pull-left" style="padding-right: 10px;" />
<div >
<h4 class="inf-word">ERLE Bubu</h4>
<h6 class="inf-word1">ERLE Bubu shou</h6>
<a class="inf-word2" style="color: red;">@ERLE Bu</a>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
<img src="img2/11.png" class="img-responsive pull-left" style="padding-right: 10px;"/>
<h4 class="inf-word">ERLE Bubu</h4>
<h6 class="inf-word1">ERLE Bubu erfegss</h6>
<a class="inf-word2" style="color: red;">@ERLE Bu</a>
</li>
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
<img src="img2/12.png" class="img-responsive pull-left" style="padding-right: 10px;" />
<h4 class="inf-word">ERLE Bubu</h4>
<h6 class="inf-word1">ERLE Bubu erfeg shou</h6>
<a class="inf-word2" style="color: red;">@ERLE Bu</a>
</li>
</div>
<div class="row">
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
<img src="img2/10.png" class="img-responsive pull-left" style="padding-right: 10px;" />
<div >
<h4 class="inf-word">ERLE Bubu</h4>
<h6 class="inf-word1">ERLE Bubu shou</h6>
<a class="inf-word2" style="color: red;">@ERLE Bu</a>
</div>
</li>
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
<img src="img2/11.png" class="img-responsive pull-left" style="padding-right: 10px;"/>
<h4 class="inf-word">ERLE Bubu</h4>
<h6 class="inf-word1">ERLE Bubu erfegss</h6>
<a class="inf-word2" style="color: red;">@ERLE Bu</a>
</li>
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
<img src="img2/12.png" class="img-responsive pull-left" style="padding-right: 10px;" />
<h4 class="inf-word">ERLE Bubu</h4>
<h6 class="inf-word1">ERLE Bubu erfeg shou</h6>
<a class="inf-word2" style="color: red;">@ERLE Bu</a>
</li>
</div>
<div class="row">
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
<img src="img2/9.png" class="img-responsive pull-left" style="padding-right: 10px;"/>
<h4 class="inf-word">ERLE Bubu</h4>
<h6 class="inf-word1">ERLE Bubu erfegss</h6>
<a class="inf-word2" style="color: red;">@ERLE Bu</a>
</li>
</div>
</div>
</div>
</div>
<div class="container-fluid" style="background-color: #363533;">
<div class="container">
<h3 class="text-center" style="color: #fff;">The Venue</h3>
<p class="text-center" style="color: #eac1ab;">The Museum of Science and Industy,Chicago-one of the lastest science museums<br /> in the world-is home to more than 400,000 square feet of hands-on exhibits designed <br/>to spark scientific inquiry and creativity.</p>
<p class="text-center" style="color: #ff7a7d; font-weight: bold; padding-bottom: 40px;">Visit The Museum Website</p>
</div>
</div>
<div class="container-fluid">
<div class="row">
<img src="img2/18.png" style="padding: 0;" class="img-responsive col-lg-3 col-md-3 col-sm-6 col-xs-12"/>
<img src="img2/19.png" style="padding: 0;" class="img-responsive col-lg-3 col-md-3 col-sm-6 col-xs-12"/>
<img src="img2/20.png" style="padding: 0;" class="img-responsive col-lg-3 col-md-3 col-sm-6 col-xs-12"/>
<img src="img2/21.png" style="padding: 0;" class="img-responsive col-lg-3 col-md-3 col-sm-6 col-xs-12"/>
</div>
</div>
<div class="container-fluid" style="background-color: #363533; padding-top: 50px; padding-bottom: 50px;">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<img src="img2/22.png" class="img-responsive" style="margin-bottom: 20px;"/>
<p style="color: #fff; font-weight: bold;">Science Storms After Party</p>
<p style="color: #ccb7ca;">The Laracon after-parties will take place in the beautiful museum rotunda and Science Storms exhibit.Have a drink and mingle with the community while you check out the Tesla coil,steam tornado,and tsunami box.Drinks are on us!</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<img src="img2/23.png" class="img-responsive" style="margin-bottom: 20px;"/>
<p style="color: #fff; font-weight: bold;">Museum Access</p>
<p style="color: #ccb7ca;">Every Laracon attendee is granted full access to the museum for the duration of the conference.Enjoy your lunch break by browsing the museum's exhibits!</p>
</div>
</div>
</div>
</div>
<div class="container-fluid" style="padding: 50px 0px 40px 0px; background-color: #f3f4ee;">
<div class="container">
<h3 style="color: #32291a;">Schedule</h3>
<div class="row" id="data">
<ul class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<li>July 25</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
</ul>
<ul class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<li>July 25</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
<li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
</ul>
</div>
</div>
</div>
<div class="container"style="margin-bottom: 40px;">
<div class="row"style="margin-top: 40px;margin-bottom: 40px;">
<h2 class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Sponsors</h2>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="padding-top: 20px;">
<button class="btn btn-danger">Become A Sponsors</button>
</div>
</div>
<p style="padding-bottom: 5px;font-weight: bold;">Gold</p>
<div class="row">
<img src="img2/4.png" class="img-responsive col-lg-4 col-md-6 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
<img src="img2/5.png" class="img-responsive col-lg-4 col-md-6 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
<img src="img2/6.png" class="img-responsive col-lg-4 col-md-6 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
</div>
<p style="padding-bottom: 5px;font-weight: bold;">Bronze</p>
<div class="row">
<img src="img2/2.png" class="img-responsive col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
<img src="img2/3.png" class="img-responsive col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
</div>
<p style="padding-bottom: 5px;font-weight: bold;">Community</p>
<div class="row">
<img src="img2/1.png" class="img-responsive col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
</div>
</div>
<div class="container-fluid" style="background-color: #343434; padding-top: 30px; padding-bottom: 30px;">
<div class="container">
<p style="color: #f2d3bf; font-size: 8px;">© Laravel LLC.All rights reserved.</p>
<p style="color: #f2d3bf; font-size: 8px;">Follow us on Twitter <span style="color: #ac3c31;font-size: 8px;">@LaraconUS</span> or contact us at <span style="color: #ac3c31;font-size: 8px;">taylor@laravel.com</span>.</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
网友评论