bootstrap 网站样式 常用
image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>联想控股</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<style type="text/css">
div.hero-unit {
background: url(images/bg.png) no-repeat;
height: 443px;
width: 980px;
position: relative;
padding: 0;
margin: 0;
border-color: gray;
}
div.hero-unit h1 {
display: none;
}
div.hero-unit .banner {
position: absolute;
bottom: 0;
left: 10px;
}
div.hero-unit .btn {
position: absolute;
bottom: 14px;
right: 20px;
}
div.span4 img {
width: 180px;
}
</style>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>联想控股</h1>
<p class="banner"><img src="images/bg2.png"></p>
<p><a href="#" class="btn">更多»</a></p>
</div>
<div class="row">
<div class="span4 col-md-4">
<h2>公司专题</h2>
<p>2012年12月2日，联想之星创业大讲堂在常州举行，柳传志就“创业一把手的成长”、“创业团队的建设”与创业者进行分享。</p>
<p><a class="btn" href="#">了解更多»</a></p>
</div>
<div class="span4 col-md-4">
<h2>特别关注</h2>
<p>从靠“卖电脑”起家，到旗下集IT、房地产、消费与现代服务、化工新材料、现代农业五大核心资产运营于一体，联想控股正冲刺在2014年～2016年之间上市。</p>
<p><a class="btn" href="#">了解更多»</a></p>
</div>
<div class="span4 col-md-4">
<h2>我们的历史</h2>
<p><img src="images/bg1.png"></p>
<p><a class="btn" href="#">了解更多»</a></p>
</div>
</div>
<footer>
<p>© Company 2013</p>
</footer>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.06.03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读