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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏挖数

世界上最有价值的不是石油,而是数据!

"The world's most valuable resource is no longer oil,but data"

10920
来自专栏Python小屋

Python借助百度搜索引擎爬取Python小屋密切相关文章

第二步,下载正确版本的Chrome浏览器驱动然后放到Python安装目录中,同时确保Python安装目录在系统环境变量Path中,下载地址为http://chr...

13610
来自专栏FreeBuf

企业中了勒索病毒该怎么办?可以解密吗?

勒索病毒席卷全球,给全球各大小政企业都带来了巨大的损失,勒索病毒重点在于防,可是黑客无孔不入,再强大的系统都有可能存在漏洞,万一企业被攻击,已经中了勒索病毒,那...

77410
来自专栏知识分享

7-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案微信小程序篇(微信配网_申请微信公众号)

https://www.cnblogs.com/yangfengwu/p/11042266.html

26250
来自专栏前端词典

CSS 中重要的层叠概念

最近在项目中遇到了一个问题,menu-bar 希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因。

11950
来自专栏运维之美

使用 GoAccess 分析 Nginx 日志

GoAccess 是一款开源的且具有交互视图界面的实时 Web 日志分析工具,通过你的 Web 浏览器或者 *nix 系统下的终端程序 (Terminal) ...

20430
来自专栏网站建设、网站制作专栏

前端框架bootstrap和layui的区别有哪些

做前端的小伙伴肯定都用过或听过Bootstrap和LayUi,小编我虽然不是专业的前端程序员,但是对于前端还是颇有研究,闲暇事情会经常研究各种前端框架的源码,一...

1.2K20
来自专栏Lambda

VSCode

版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

29450
来自专栏JAVAandPython君

JAVAWeb| 详解JSP技术、指令、隐式对象、标签

首先,我们来了解一下JSP这个东东,大家看它的缩写可能有点懵逼,告诉大家全称之后可能会更容易理解,JSP全称:Java Server Page ,直译过来便是...

14940
来自专栏Jerry的SAP技术分享

How is correct index.html served by ui5 handler from BSP repository

This wiki explains the process how the index.html of Fiori application is served...

9820

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励