使用bootstrap开发的网页；
以下附上源码
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/bootsrap.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />-->
<link rel="stylesheet" type="text/css" href="css/bootsrap.css" />
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.css" />
<script src="css/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="css/myself.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="top">
<a href="" class="left" style="padding-left: 10%;">
<div class="glyphicon glyphicon-flag">
</div>
<span class="top_1">
DELTA
</span>
<span class="top_2">
Company
</span>
</a>
<div class="right_1" style="padding-right: 0">
<a href="" class="right">
HOME
</a>
<a href="" class="right">
Features
</a>
<a href="" class="right">
WORRKS
</a>
<a href="" class="right">
TEAM
</a>
<a href="" class="right">
Contact
</a>
<a href="" class="right">
Sign Up
</a>
</div>
</div>
<div class="middle col-xs-12">
<div class="middle_1"></div>
<div class="aa">
<div class=" glyphicon glyphicon-envelope"></div>
<div class="font_1">
READY TO LAUNCH
</div>
<span id="font_2">
Get Latest Newsletters
</span>
<div class="box">
<input type="text" placeholder="you Emali" name="" id="input_1" value="" />
<input type="button" name="" id="input_2" value="Subscribe" /><br />
<span id="font_3">
Let Us Know When It Luanched |
</span>
<a href="">Hire Me!</a>
</div>
</div>
</div>
<div class="table">
<div class="table_1 col-md-4 col-sm-6 col-xs-12">
<div class="glyphicon glyphicon-glass"></div>
<h3>Bootstrap</h3>
<span class="">
probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis multos consequat. Nostrud anim eiusmod, ita aliqua fabulas.
</span>
</div>
<div class="table_2 col-md-4 col-sm-6 col-xs-12">
<div class="glyphicon glyphicon-off">
</div>
<h3>Bootstrap</h3>
<span class="">
probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis multos consequat. Nostrud anim eiusmod, ita aliqua fabulas.
</span>
</div>
<div class="table_3 col-md-4 col-sm-6 col-xs-12">
<div class="glyphicon glyphicon-text-width">
</div>
<h3>Bootstrap</h3>
<span class="">
probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis multos consequat. Nostrud anim eiusmod, ita aliqua fabulas.
</span>
</div><br />
<div class="table_4 col-md-4 col-sm-6 col-xs-12">
<div class="glyphicon glyphicon-pencil">
</div>
<h3>Bootstrap</h3>
<span class="">
probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis multos consequat. Nostrud anim eiusmod, ita aliqua fabulas.
</span>
</div>
<div class="table_5 col-md-4 col-sm-6 col-xs-12">
<div class="glyphicon glyphicon-xbt">
</div>
<h3>Bootstrap</h3>
<span class="">
probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis multos consequat. Nostrud anim eiusmod, ita aliqua fabulas.
</span>
</div>
<div class="table_6 col-md-4 col-sm-6 col-xs-12">
<div class="glyphicon glyphicon-ice-lolly">
</div>
<h3>Bootstrap</h3>
<span class="">
probant an malis deserunt commodo labore labore do pariatur, culpa concursionibus singulis multos consequat. Nostrud anim eiusmod, ita aliqua fabulas.
</span>
</div>
</div>
<div id="back">
<div class="wecan">
<div class="col-md-6 col-sm-6 a1">
<img src="css/u=1363261390,2562522054&fm=26&gp=0.jpg" />
</div>
<div class="col-md-6 col-sm-6 a3" style="padding-right:15% ;">
<h3>We Can Help Your Business </h3>
<span id="a2">
Lorem ipsum dolor sit amet reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Haccusamus terry richardson ad squid. pwolf moon officia aute, non cupidatat skateboard. Wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt cusamus terry richardson ad squid.
</span><br />
<div class="bou_1">
Get Started
</div>
<div class="bou_2">
Download
</div>
</div>
</div>
</div>
<div class="img">
<div class="wenzhi">
Our Hard Work
</div>
<div class="img_top">
<div class="img_1 col-md-3 col-sm-6 col-xm-12 " style="margin: 0;padding: 0;">
<div class="box_img ">
<img src="css/portfolio1.jpg" class="" />
</div>
<div class="b1 ">
<span class="glyphicon glyphicon-cloud "></span>
<span class="glyphicon glyphicon-asterisk "></span>
<span class="glyphicon glyphicon-home"></span>
</div>
</div>
<div class="img_1 col-md-3 col-sm-6 col-xm-12" style="margin: 0;padding: 0;">
<div class="box_img ">
<img src="css/portfolio2.jpg" class="" />
</div>
<div class="b1 ">
<span class="glyphicon glyphicon-cloud "></span>
<span class="glyphicon glyphicon-asterisk "></span>
<span class="glyphicon glyphicon-home"></span>
</div>
</div>
<div class="img_1 col-md-3 col-sm-6 col-xm-12" style="margin: 0;padding: 0;">
<div class="box_img ">
<img src="css/portfolio3.jpg" class="" />
</div>
<div class="b1 ">
<span class="glyphicon glyphicon-cloud "></span>
<span class="glyphicon glyphicon-asterisk "></span>
<span class="glyphicon glyphicon-home"></span>
</div>
</div>
<div class="img_1 col-md-3 col-sm-6 col-xm-12" style="margin: 0;padding: 0;">
<div class="box_img ">
<img src="css/portfolio4.jpg" class="" />
</div>
<div class="b1 ">
<span class="glyphicon glyphicon-cloud "></span>
<span class="glyphicon glyphicon-asterisk "></span>
<span class="glyphicon glyphicon-home"></span>
</div>
</div>
</div>
<div class="img_top">
<div class="img_1 col-md-3 col-sm-6 col-xm-12 " style="margin: 0;padding: 0;">
<div class="box_img ">
<img src="css/portfolio3.jpg" class="" />
</div>
<div class="b1 ">
<span class="glyphicon glyphicon-cloud "></span>
<span class="glyphicon glyphicon-asterisk "></span>
<span class="glyphicon glyphicon-home"></span>
</div>
</div>
<div class="img_1 col-md-3 col-sm-6 col-xm-12" style="margin: 0;padding: 0;">
<div class="box_img ">
<img src="css/portfolio1.jpg" class="" />
</div>
<div class="b1 ">
<span class="glyphicon glyphicon-cloud "></span>
<span class="glyphicon glyphicon-asterisk "></span>
<span class="glyphicon glyphicon-home"></span>
</div>
</div>
<div class="img_1 col-md-3 col-sm-6 col-xm-12" style="margin: 0;padding: 0;">
<div class="box_img ">
<img src="css/portfolio4.jpg" class="" />
</div>
<div class="b1 ">
<span class="glyphicon glyphicon-cloud "></span>
<span class="glyphicon glyphicon-asterisk "></span>
<span class="glyphicon glyphicon-home"></span>
</div>
</div>
<div class="img_1 col-md-3 col-sm-6 col-xm-12" style="margin: 0;padding: 0;">
<div class="box_img ">
<img src="css/portfolio2.jpg" class="" />
</div>
<div class="b1 ">
<span class="glyphicon glyphicon-cloud "></span>
<span class="glyphicon glyphicon-asterisk "></span>
<span class="glyphicon glyphicon-home"></span>
</div>
</div>
</div>
</div>
<div class="font_c">
Our Members
</div>
<!--max_shot -->
<div class="max_shot">
<div class=" col-md-3 col-sm-6 col-xm-12" >
<div class="middle_shot">
<div class="background" style="">
<img src="css/member1.jpg" class="img_shot"/>
<div class="icons" >
<i class="glyphicon glyphicon-phone-alt"></i>
</div>
</div>
<div class="shot_font">
GABRIEL STAN
</div>
<div class="shot_font_blue">
Web Designer
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6 col-xm-12" >
<div class="middle_shot">
<div class="background" style="">
<img src="css/member2.jpg" class="img_shot"/>
<div class="icons" >
<i class="glyphicon glyphicon-phone-alt"></i>
</div>
</div>
<div class="shot_font">
GABRIEL STAN
</div>
<div class="shot_font_blue">
Web Designer
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6 col-xm-12" >
<div class="middle_shot">
<div class="background" style="">
<img src="css/member2.jpg" class="img_shot"/>
<div class="icons" >
<i class="glyphicon glyphicon-phone-alt"></i>
</div>
</div>
<div class="shot_font">
GABRIEL STAN
</div>
<div class="shot_font_blue">
Web Designer
</div>
</div>
</div>
<div class=" col-md-3 col-sm-6 col-xm-12" >
<div class="middle_shot">
<div class="background" style="">
<img src="css/member1.jpg" class="img_shot"/>
<div class="icons" >
<i class="glyphicon glyphicon-phone-alt"></i>
</div>
</div>
<div class="shot_font">
GABRIEL STAN
</div>
<div class="shot_font_blue">
Web Designer
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
#top {
display: inline-block;
/*text-align: center;*/
background: black;
color: white;
width: 100%;
height: 70px;
}
#top .left {
float: left;
color: white;
}
#top .glyphicon-flag {
margin-top: 10px;
font-size: 3.5em;
}
#top a {
color: white;
text-decoration: none;
}
#top .left .top_1 {
display: block;
margin-top: -56px;
text-indent: 51px;
font-weight: 900;
font-size: 30px;
}
#top .left .top_2 {
text-indent: 51px;
display: block;
color: green;
font-weight: 900;
}
#top .right_1 {
float: right;
padding: 0;
margin: 0;
margin-top: 30px;
margin-right: 5%;
}
#top .right_1 .right {
margin: 1em;
}
#top .right_1 .right:hover {
color: #01BF86;
text-decoration: underline;
transition: color 1s;
transition: text-decoration 1s;
}
.middle {
background-image: url(gen.jpeg);
width: 100%;
height: 50em;
position: relative;
background-repeat: no-repeat;
text-align: center;
margin-top: -8px;
}
.middle .middle_1 {
right: 0;
left: 0;
top: 0;
bottom: 0;
position: absolute;
z-index: 1;
background-color: rgba(51, 153, 102, 0.8);
}
.aa {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
z-index: 9;
}
.middle .glyphicon-envelope {
z-index: 2;
top: 2em;
color: white;
font-size: 5em;
}
#cen {
text-align: center;
}
.font_1 {
/* z-index: 2;*/
color: white;
letter-spacing: 10px;
margin-bottom: 0;
margin-top: 176px;
text-transform: uppercase;
word-spacing: 5px;
font-family: 'Roboto Slab', serif !important;
font-weight: 300;
font-size: 17px;
}
#font_2 {
color: #fff;
font-size: 55px;
font-weight: 700;
letter-spacing: -1px;
line-height: 1.2;
margin: 0 auto 30px;
position: relative;
text-transform: capitalize;
}
.box {
text-align: center;
display: block;
height: 170px;
width: 50%;
background-color: rgba(0, 0, 0, 0.5);
margin: auto;
margin-top: 5em;
min-width: 550px;
}
.box #input_1 {
height: 40px;
width: 40%;
margin-top: 50px;
background-color: rgba(225, 225, 227, 0.2);
outline: 1px solid none;
margin-left: ;
color: white;
border: 1px solid transparent;
border-radius: 5px;
padding-left: 12px;
}
.box #input_1:focus {
background-color: rgba(255, 255, 255, 0.5);
border: 1px solid rgb(102, 204, 255);
}
.box #input_2 {
border: 0 none;
border-radius: 4px;
box-shadow: none;
color: #fff;
font-size: 13px;
margin: 0 2px;
width: 15%;
padding: 11px 0;
background-color: #38A5E0;
text-transform: uppercase;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
.box #font_3 {
color: white;
font-size: 10%
}
.table {
height: 25em;
padding-left: 12%;
padding-right: 12%;
}
.table .col-md-4 {
margin-top: 50px;
color: black;
}
.table_1:hover .glyphicon-glass {
color: #01bf86;
transition: all 1s;
background-color: white;
}
.table_2:hover .glyphicon-off {
transition: all 1s;
color: #01bf86;
background-color: white;
}
.table_3:hover .glyphicon-text-width {
transition: all 1s;
color: #01bf86;
background-color: white;
}
.table_4:hover .glyphicon-pencil {
transition: all 1s;
color: #01bf86;
background-color: white;
}
.table_5:hover .glyphicon-xbt {
transition: all 1s;
color: #01bf86;
background-color: white;
}
.table_6:hover .glyphicon-ice-lolly {
transition: all 1s;
color: #01bf86;
background-color: white;
}
.glyphicon-glass,
.glyphicon-off,
.glyphicon-text-width,
.glyphicon-ice-lolly,
.glyphicon-xbt,
.glyphicon-pencil {
text-align: center;
height: 65px;
width: 65px;
padding-top: 20px;
line-height: 65px;
font-size: 25px;
border-radius: 50%;
color: white;
background-color: #01bf86;
border: 1px solid #01bf86;
}
#back {
background-color: #F3F6FA;
text-align: center;
display: inline-block;
margin: 7em 0em;
}
.wecan .a1 {
margin: 5em 0em;
}
.wecan img {
width: 303px;
height: 514px;
}
.wecan h3 {
color: #4f4f4f;
font-weight: 900;
font-size: 40px;
margin-bottom: 20px;
margin-top: 5px;
line-height: 1.1;
}
.wecan #a2 {
color: #707070;
font-size: 14px;
font-weight: 100;
line-height: 1.7;
margin-bottom: 30px;
}
.wecan .a3 {
text-align: left;
padding-top: 100px;
}
.bou_1,
.bou_2 {
margin: 10px;
display: inline-block;
width: 39%;
height: 42px;
background-color: #38A5E0;
border-radius: 30px;
text-align: center;
color: white;
line-height: 42px;
}
.bou_2 {
background-color: #01BF86;
}
.bou_2:hover {
transition: background-color 1s;
background-color: #38A5E0;
}
.img {
text-align: center;
/*position: relative;*/
}
.img .wenzhi {
font-size: 35px;
font-weight: 800;
margin-bottom: 50px;
color: white;
}
.img img {
z-index: 99;
position: relative;
top: 0;
width: 100%;
}
.img img:hover {
transition: top 1s;
top: -60px;
}
.img_1 {
position: relative;
margin: 0;
padding: 0;
}
.b1 {
background-color: #004444;
position: absolute;
z-index: 2;
height: 60px;
bottom: 0px;
line-height: 60px;
bottom: 0;
left: 0px;
width: 100%;
}
.glyphicon-cloud,
.glyphicon-asterisk,
.glyphicon-home {
padding: 14px 16px;
margin-left: 2px;
margin-right: 2px;
border-radius: 3px;
background-color: #38A5E0;
}
.font_c {
display: inline-block;
color: white;
font-size: 35px;
font-weight: 800;
line-height: 1.4;
margin-bottom: 30px;
margin-left: 6em;
padding: 2em 0em;
}
.max_shot {
margin-left: 10em;
margin-right: 5em;
}
.max_shot .img_shot {
max-width: 100%;
height: 20em;
position: relative;
}
.shot_font {
color: #555;
font-size: 20px;
font-weight: 700;
word-spacing: 3px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
}
.middle_shot {
text-align: center;
position: relative;
padding: 0;
margin: 0;
}
.shot_font_blue {
color: #1964ee;
display: block;
font-size: 15px;
margin-bottom: 15px;
font-weight: 500;
font-family: 'Roboto Slab', serif;
}
.background {
color: white;
position: relative;
display: inline-block;
}
.middle_shot .icons {
padding-top: 2.5em;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: rgba(1, 191, 134, 0.9);
font-size: 3em;
display: none;
}
/*.middle_shot:hover .icons {
display: block;
transition: all 2s;
}*/
.max_box_add{
/*width: 100%;
height: 50em;*/
margin-top: 30em;
}
/*.add_cilp{
background-image: url(timg.jpg);
width: 100%;
height: 40em;
position: fixed;
bottom: 0;
background-size:cover
background-repeat: no-repeat;
z-index: -20;
height: 2000px;
}
.add_cilp{
}
.clear{
clear: both;
}*/
