看了两天的bootstrap，顿觉框架真是漂亮又方便 就照着官网推的网站写了一个响应式
2017-05-10 21:33
525 查看
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>bootstrap练习</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #FEF2F6;
}
.container{
width: 100%;
height: 100%;
position: relative;
z-index: 100;
}
.whiteText{
color: white;
line-height: 32px;
}
.onePageBg{
background-image: url("images/firecracker.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.overlayImg{
width: 100%;
height: 100%;
position: absolute;
}
.overlayImg img{
width: 100%;
height: 100%;
}
.onePageIntent{
position: absolute;
margin-top: 10%;
width: 75%;
height: 70%;
max-height: 600px;
margin-left: 80px;
}
.cuTi{
max-width: 700px;
}
.duiQi{
max-width: 460px;
text-align: center;
margin-top: 80px;
}
.PT{
height: 50px;
}
.btn{
width: 250px;
height: 50px;
border-radius: 50px;
background-color:#663399;
border:0;
}
.btn:hover{
background-color:#663399;
}
.imgBox{
cursor: pointer;
margin:0 auto;
margin-top: 1100px;
width: 43px;
height: 43px;
}
.twoPageBg{
background-image: url(images/violine.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.threeCol{
width: 100%;
text-align: center;
}
.picBox{
text-align: center;
}
.threePage{
margin-top: 30px;
width: 100%;
}
.threePageIntent div{
font-family: Raleway-Black;
color: #2F2F2F;
font-size: 44px;
letter-spacing: -0.24px;
line-height: 50px;
text-align: center;
}
.threePageIntent p{
font-size: 18px;
color: #747E80;
letter-spacing: 0;
text-align: center;
line-height: 28px;
}
.threePageIntent{
margin-bottom: 130px;
}
.threePageEmail{
position: relative;
width: 80%;
z-index: 6;
/*border:1px solid red;*/
}
.mailBox,.requestBox{
z-index: 6;
}
.textAlign{
/*position: absolute;*/
font-size: 18px;
color: #747E80;
letter-spacing: 0;
line-height: 28px;
padding-bottom: 20px;
text-align: center;
font-family: Raleway-Regular;
}
@media screen and (min-width: 1200px){
.col-lg-6 {
width: 43px;
float: none;
}
}
@media screen and (min-width: 769px) { /*宽度大于769px*/
.onePageBg{
width: 100%;
max-width: 1280px;
margin: 0 auto;
height: 1204px;
background-size: cover;
background-position: center center;
}
.PT{
font-size: 30px;
}
.cuTi{
font-size: 54px;
line-height: 50px;
}
.twoPageBg{
width: 100%;
max-width: 1280px;
margin: 0 auto;
height: 695px;
background-size: cover;
background-position: center center;
border: 1px solid BLACK;
}
.twoPageWord{
margin-top: 145px;
font-size: 14px;
width: 100%;
text-align: center;
}
.twoPageWord h1{
font-size: 44px;
}
.threeCol{
margin-top: 100px;
}
.threePageEmail{
width: 550px;
height: 42px;
margin:20px auto;
}
.mailBox{
width: 260px;
height: 40px;
border-radius: 25px 0 0 25px;
padding-left: 20px;
box-shadow: 1px 1px 35px 1px grey;
}
.requestBox{
width: 260px;
height: 42px;
border-radius: 0 25px 25px 0;
padding-left: 20px;
background-color: #663399;
line-height: 25px;
margin-left: -10px;
box-shadow: 1px 1px 40px 1px grey;
}
.requestBox:hover{
background-color: #663399;
}
}
@media screen and (max-width: 1200px){
.threeCol{
margin-top:0px;
}
.twoPageWord{
margin-top: 0px;
}
.container{
margin: 0;
padding: 0;
}
.onePageBg,.twoPage,.threePage{
margin: 0;
}
}
@media screen and (max-width: 768px){
.onePageBg{
width: 100%;
margin: 0 auto;
height: 1204px;
background-size: cover;
background-position: center center;
}
.PT{
font-size: 30px;
}
.cuTi{
font-size: 54px;
line-height: 50px;
}
.twoPageBg{
width: 100%;
max-width: 768px;
margin: 0 auto;
height: 695px;
background-size: cover;
background-position: center center;
border: 1px solid BLACK;
}
.twoPageWord{
margin-top: 10px;
font-size: 14px;
width: 100%;
text-align: center;
}
.twoPageWord h1{
font-size: 44
4000
px;
}
.threeCol{
margin-top: 0px;
}
.threePageEmail{
width: 550px;
height: 42px;
margin:20px auto;
}
.mailBox{
width: 260px;
height: 40px;
border-radius: 25px 0 0 25px;
padding-left: 20px;
box-shadow: 1px 1px 35px 1px grey;
}
.requestBox{
width: 260px;
height: 42px;
border-radius: 0 25px 25px 0;
padding-left: 20px;
background-color: #663399;
line-height: 25px;
margin-left: -10px;
box-shadow: 1px 1px 40px 1px grey;
}
.requestBox:hover{
background-color: #663399;
}
}
@media screen and (max-width: 667px){
.threePageEmail{
width: 80%;
height: 100px;
/*border:1px solid red;*/
}
.mailBox,.requestBox{
float: none;
width: 100%;
margin: 5px auto;
border-radius: 25px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="overlayImgBox">
<div class="overlayImg">
<img src="images/overlay.png" alt="">
</div>
<div class="contentBox">
<div class="onePageBg row">
<div class="onePageIntent">
<div class="onePageWord">
<h1 class="cuTi whiteText"><strong>Let's Make Our</strong><br>
<strong>World Smaller</strong>
</h1>
<h3 class="whiteText">Connect to a real and unfiltered<br>
world through the eyes of others
</h3>
</div>
<div class="duiQi">
<h1 class="whiteText PT"><strong>Peek:to</strong></h1>
<button type="button" class="btn btn-success btn-lg">
SIGN UP FOR BETA
</button>
</div>
</div>
<div class="imgBox col-lg-6">
<a href="#twoPage" class="active" data-toggle="tab">
<img src="images/Bitmap.png" >
</a>
</div>
</div>
<div class="twoPage whiteText" id="twoPage">
<div class="twoPageBg">
<div class="twoPageIntent">
<div class="twoPageWord whiteText">
<h4>A FEW WOEDS</h4>
<h1><strong>About Peek:to</strong></h1>
</div>
<DIV class="threeCol">
<div class="row">
<div class="col-lg-4 cols">
<img src="images/mag.png" height="69" width="67" alt="">
<div class="textBox">
<h3><strong>A DREAM</strong></h3>
<p>We are on a mission to make our world smaller</p>
</div>
</div>
<div class="col-lg-4 cols">
<img src="images/group.png" height="69" width="67" alt="">
<div class="textBox">
<h3><strong>WHY</strong></h3>
<p>Had enough with likes, filters and
buzzwords ? Let's connect to the real world that surrounds us all.
</p>
</div>
</div>
<div class="col-lg-4 cols">
<img src="images/icon.png" height="69" width="67" alt="">
<div class="textBox">
<h3><strong>JOIN</strong></h3>
<p>If you are willing to help people explore the world through your eyes than come join the ride...</p>
</div>
</div>
</div>
</DIV>
</div>
</div>
</div>
<DIV class="threePage">
<div class="threePageBox">
<div class="picBox">
<img src="images/logo.png" height="104" width="104" alt="">
</div>
<div class="threePageIntent">
<div>
Want a Sneak Peek?
</div>
<p>
Sign up for closed beta and help us plant the early seeds of Peek:to
</p>
</div>
<div class="threePageEmail">
<input type="text" name="" class="mailBox" value="Your Email" placeholder="Your Email">
<input type="submit" name="" value="REQUEST INVITE" class="requestBox btn btn-success btn-lg whiteText ">
</div>
</div>
<div class="textAlign">
<p>Access to the closed beta is by invitation only. Requests<br> accepted until the 31st of May 2017</p>
</div>
</DIV>
</div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>bootstrap练习</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #FEF2F6;
}
.container{
width: 100%;
height: 100%;
position: relative;
z-index: 100;
}
.whiteText{
color: white;
line-height: 32px;
}
.onePageBg{
background-image: url("images/firecracker.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.overlayImg{
width: 100%;
height: 100%;
position: absolute;
}
.overlayImg img{
width: 100%;
height: 100%;
}
.onePageIntent{
position: absolute;
margin-top: 10%;
width: 75%;
height: 70%;
max-height: 600px;
margin-left: 80px;
}
.cuTi{
max-width: 700px;
}
.duiQi{
max-width: 460px;
text-align: center;
margin-top: 80px;
}
.PT{
height: 50px;
}
.btn{
width: 250px;
height: 50px;
border-radius: 50px;
background-color:#663399;
border:0;
}
.btn:hover{
background-color:#663399;
}
.imgBox{
cursor: pointer;
margin:0 auto;
margin-top: 1100px;
width: 43px;
height: 43px;
}
.twoPageBg{
background-image: url(images/violine.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.threeCol{
width: 100%;
text-align: center;
}
.picBox{
text-align: center;
}
.threePage{
margin-top: 30px;
width: 100%;
}
.threePageIntent div{
font-family: Raleway-Black;
color: #2F2F2F;
font-size: 44px;
letter-spacing: -0.24px;
line-height: 50px;
text-align: center;
}
.threePageIntent p{
font-size: 18px;
color: #747E80;
letter-spacing: 0;
text-align: center;
line-height: 28px;
}
.threePageIntent{
margin-bottom: 130px;
}
.threePageEmail{
position: relative;
width: 80%;
z-index: 6;
/*border:1px solid red;*/
}
.mailBox,.requestBox{
z-index: 6;
}
.textAlign{
/*position: absolute;*/
font-size: 18px;
color: #747E80;
letter-spacing: 0;
line-height: 28px;
padding-bottom: 20px;
text-align: center;
font-family: Raleway-Regular;
}
@media screen and (min-width: 1200px){
.col-lg-6 {
width: 43px;
float: none;
}
}
@media screen and (min-width: 769px) { /*宽度大于769px*/
.onePageBg{
width: 100%;
max-width: 1280px;
margin: 0 auto;
height: 1204px;
background-size: cover;
background-position: center center;
}
.PT{
font-size: 30px;
}
.cuTi{
font-size: 54px;
line-height: 50px;
}
.twoPageBg{
width: 100%;
max-width: 1280px;
margin: 0 auto;
height: 695px;
background-size: cover;
background-position: center center;
border: 1px solid BLACK;
}
.twoPageWord{
margin-top: 145px;
font-size: 14px;
width: 100%;
text-align: center;
}
.twoPageWord h1{
font-size: 44px;
}
.threeCol{
margin-top: 100px;
}
.threePageEmail{
width: 550px;
height: 42px;
margin:20px auto;
}
.mailBox{
width: 260px;
height: 40px;
border-radius: 25px 0 0 25px;
padding-left: 20px;
box-shadow: 1px 1px 35px 1px grey;
}
.requestBox{
width: 260px;
height: 42px;
border-radius: 0 25px 25px 0;
padding-left: 20px;
background-color: #663399;
line-height: 25px;
margin-left: -10px;
box-shadow: 1px 1px 40px 1px grey;
}
.requestBox:hover{
background-color: #663399;
}
}
@media screen and (max-width: 1200px){
.threeCol{
margin-top:0px;
}
.twoPageWord{
margin-top: 0px;
}
.container{
margin: 0;
padding: 0;
}
.onePageBg,.twoPage,.threePage{
margin: 0;
}
}
@media screen and (max-width: 768px){
.onePageBg{
width: 100%;
margin: 0 auto;
height: 1204px;
background-size: cover;
background-position: center center;
}
.PT{
font-size: 30px;
}
.cuTi{
font-size: 54px;
line-height: 50px;
}
.twoPageBg{
width: 100%;
max-width: 768px;
margin: 0 auto;
height: 695px;
background-size: cover;
background-position: center center;
border: 1px solid BLACK;
}
.twoPageWord{
margin-top: 10px;
font-size: 14px;
width: 100%;
text-align: center;
}
.twoPageWord h1{
font-size: 44
4000
px;
}
.threeCol{
margin-top: 0px;
}
.threePageEmail{
width: 550px;
height: 42px;
margin:20px auto;
}
.mailBox{
width: 260px;
height: 40px;
border-radius: 25px 0 0 25px;
padding-left: 20px;
box-shadow: 1px 1px 35px 1px grey;
}
.requestBox{
width: 260px;
height: 42px;
border-radius: 0 25px 25px 0;
padding-left: 20px;
background-color: #663399;
line-height: 25px;
margin-left: -10px;
box-shadow: 1px 1px 40px 1px grey;
}
.requestBox:hover{
background-color: #663399;
}
}
@media screen and (max-width: 667px){
.threePageEmail{
width: 80%;
height: 100px;
/*border:1px solid red;*/
}
.mailBox,.requestBox{
float: none;
width: 100%;
margin: 5px auto;
border-radius: 25px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="overlayImgBox">
<div class="overlayImg">
<img src="images/overlay.png" alt="">
</div>
<div class="contentBox">
<div class="onePageBg row">
<div class="onePageIntent">
<div class="onePageWord">
<h1 class="cuTi whiteText"><strong>Let's Make Our</strong><br>
<strong>World Smaller</strong>
</h1>
<h3 class="whiteText">Connect to a real and unfiltered<br>
world through the eyes of others
</h3>
</div>
<div class="duiQi">
<h1 class="whiteText PT"><strong>Peek:to</strong></h1>
<button type="button" class="btn btn-success btn-lg">
SIGN UP FOR BETA
</button>
</div>
</div>
<div class="imgBox col-lg-6">
<a href="#twoPage" class="active" data-toggle="tab">
<img src="images/Bitmap.png" >
</a>
</div>
</div>
<div class="twoPage whiteText" id="twoPage">
<div class="twoPageBg">
<div class="twoPageIntent">
<div class="twoPageWord whiteText">
<h4>A FEW WOEDS</h4>
<h1><strong>About Peek:to</strong></h1>
</div>
<DIV class="threeCol">
<div class="row">
<div class="col-lg-4 cols">
<img src="images/mag.png" height="69" width="67" alt="">
<div class="textBox">
<h3><strong>A DREAM</strong></h3>
<p>We are on a mission to make our world smaller</p>
</div>
</div>
<div class="col-lg-4 cols">
<img src="images/group.png" height="69" width="67" alt="">
<div class="textBox">
<h3><strong>WHY</strong></h3>
<p>Had enough with likes, filters and
buzzwords ? Let's connect to the real world that surrounds us all.
</p>
</div>
</div>
<div class="col-lg-4 cols">
<img src="images/icon.png" height="69" width="67" alt="">
<div class="textBox">
<h3><strong>JOIN</strong></h3>
<p>If you are willing to help people explore the world through your eyes than come join the ride...</p>
</div>
</div>
</div>
</DIV>
</div>
</div>
</div>
<DIV class="threePage">
<div class="threePageBox">
<div class="picBox">
<img src="images/logo.png" height="104" width="104" alt="">
</div>
<div class="threePageIntent">
<div>
Want a Sneak Peek?
</div>
<p>
Sign up for closed beta and help us plant the early seeds of Peek:to
</p>
</div>
<div class="threePageEmail">
<input type="text" name="" class="mailBox" value="Your Email" placeholder="Your Email">
<input type="submit" name="" value="REQUEST INVITE" class="requestBox btn btn-success btn-lg whiteText ">
</div>
</div>
<div class="textAlign">
<p>Access to the closed beta is by invitation only. Requests<br> accepted until the 31st of May 2017</p>
</div>
</DIV>
</div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Bootstrap 前端框架制作响应式网站
- 响应式网站开发框架Bootstrap中Carousel插件的使用及使之支持手机端
- BootStrap的一个标准框架的内容解释——来源于bootstrap官网
- 基于ThinkPHP+Bootstrap框架开发的响应式机械设备集团网站PHP源码+WAP手机端
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架
- 响应式前端框架Bootstrap系列（3）段落、文字相关
- 做一个响应式网站需要多长时间
- 响应式前端框架Bootstrap系列（6）下拉列菜单
- 响应式前端框架Bootstrap系列（8）图片处理
- Bootstrap响应式前端框架笔记五——按钮
- 响应式前端框架Bootstrap系列（15）面板
- 响应式前端框架Bootstrap系列（17）滚动监听（Scrollspy）插件
- 响应式前端框架Bootstrap系列（19）折叠（Collapse）插件
- 使用Bootstrap 3开发响应式网站实践02,轮播
- 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容
- 推荐一个不错的bootstrap学习网站
- 自己实现的一个寻径算法的框架，具体算法采用动态库模式，可以非常方便灵活地尝试多种寻径算法
- DotNet中设置网站名称，方便把一个项目变成产品。
- 做一个如人人网的网站框架,都现需要考虑哪些东西