这两天利用5 1 ,使用bootstrap 写了个公司的主页当做练习。当然也仅仅写了几个页面,但是鉴于一些原因,所以只把首页的代码和效果拿出来分享!
二话不说,上代码!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap/css/bootstrap-responsive.min.css" />
<!--这里加上想用的css-->
<style type="text/css">
.title{
font:"幼圆"
color:#8968CD;
}
span.bluefont{
color:#00f;
}
span.blackfont{
color:#000;
}
span.greenfont{
color:#0f0;
}
span.purplefont{
color:#68228B;
}
span.redfont{
color:#f00;
}
span.bigfont{
font-size:24px;
}
.wrapper{
margin:20px auto;
width:900px;
}
.container{
width:900px;
}
.row{
margin:0 auto;
}
.overlap{
float:left;
}
.carousel-control{
height:80px;
margin-top:0px;
font-size:120px;
text-shadow:0 1px 1px rgba(0,0,0,4);
background-color:transparent;
border:0px;
z-index:10;
}
.carousel-caption{
left:10%;
top:30%;
right:30%;
bottom:20%;
background-color:transparent;
}
/* .carousel-caption h1{
color:#fff;
}*/
.carousel-caption p{
font-size:25px;
color:#000;
}
.logo{
width:80px;
height:40px;
float:left;
}
#logo.thumbnail{
border:0px;
padding:0px;
}
a div.thumbnail{
border:0px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="row-fluid">
<div class="span1" >
<a href="#" id="logo" class="logo thumbnail">
<img src="./meehoo/images/meehoo-logo.jpg" alt="logo" />
</a>
</div>
</div>
<div class="row-fluid">
<div class="span3 offset9">
<a href="#">
<img src="./meehoo/images/sina.png" alt="" />新浪微博
</a>
<a href="#">
<img src="./meehoo/images/tencent.png" alt="" />腾讯微博
</a>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!--<a href="#" class="brand"><img src="./meehoo/images/meehoo-logo.jpg" alt="" /></a>-->
<!-- <a href="#" id="logo" class="logo thumbnail">
<img src="./meehoo/images/meehoo-logo.jpg" alt="logo" />
</a>-->
<ul class="nav" >
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">主页</a></li>
<li><a href="#"></a></li>
<li><a href="#">行业新闻</a></li>
<li><a href="#"></a></li>
<li><a href="./meehoo/epiboly.html">外包业务</a></li>
<li><a href="#"></a></li>
<li><a href="#">客户服务</a></li>
<li><a href="#"></a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#"></a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="slide-01.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>科技企业</h1>
<p>让企业快速奔跑在企业的长廊里</p>
</div>
</div>
</div>
<div class="item">
<img src="slide-02.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>服务企业</h1>
<p>让企业的业绩节节攀升</p>
</div>
</div>
</div>
<div class="item">
<img src="slide-03.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>共享成功</h1>
<p>让我们与企业一起享受成功的咖啡</p>
</div>
</div>
</div>
</div>
<a href="#myCarousel" class="left carousel-control" data-slide="prev">‹</a>
<a href="#myCarousel" class="right carousel-control" data-slide="next">›</a>
</div>
<div class="container">
<div class="row">
<div class="span2">
<a href="#">
<div class="thumbnail">
<h3>门户网站设计</h3>
<img src="./meehoo/images/web.jpg" alt="" />
<p>我们有专业的门户网站设计团队,会按照客户的行业类型设计专门的门户网站。</p>
</div>
</a>
</div>
<div class="span3">
<a href="#">
<div class="thumbnail">
<h3>企业管理软件开发</h3>
<img src="./meehoo/images/j2ee.jpg" alt="" />
<p>丰富的管理系统开发经验,使用J2EE技术,从内心深处让客户满意</p>
</div>
</a>
</div>
<div class="span2">
<a href="#">
<div class="thumbnail">
<h3>iOS开发</h3>
<img src="./meehoo/images/ios.jpg" alt="" />
<p>iOS技术炉火纯青,一句话,客户满意是我们的成就</p>
</div>
</a>
</div>
<div class="span2">
<a href="#">
<div class="thumbnail">
<h3>Andorid开发</h3>
<img src="./meehoo/images/android.jpg" alt="" />
<p>Android技术炉火纯青,一句话,客户满意是我们的成就</p>
</div>
</a>
</div>
</div>
<hr />
<div class="footer">
© 2013 meehoo, Inc. ·
</div><!--footer-->
</div> <!--conainer-->
</div><!--wrapper 的div-->
<script type="text/javascript" src="./bootstrap/thirdpart/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
纠错:在学习之路2中,我对boostrap栅格的用法给了非常错误的解释,现做更正:span12就是占12个格子,span3就是3个格子。而学习之路2中解释的恰恰相反,所以敬请谅解!
注释:
1. 这个主页的练习,主要内容是练习,而非新技术,所以,在其中只是用了缩略图的技术,缩略图在bootstrap中真的 非常强大。.thumbnails 和 .thumbnail这两个类。thumbnails是缩略图列表,里面包含了thumbnail,我只不过为了刻意的控制位置,所以只是是用了div来控制,而非thumbnails.
使用thumbnail的时候,你只用规定好地方的大小,thumbnail自动会将图片缩到你规定的大小,呼呼,真的很酷,效果也比较可以。
效果图如下: