Bootstrap的学习以及简单运用
<!DOCTYPE html>
<html>
<head>
<title>柠檬学院</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.min.css"> <link rel="stylesheet" href="css/main1.css">
<!--link rel href谨记--> </head>
<body>
<div id="top01"></div>
<!--导航条-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--logo和按钮-->
<div class="navbar-head">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#b1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div>
<a href="#" class="navbar-brand">柠檬学院</a>
</div>
</div>
<!--导航-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">首页</a></li>
<li><a href="#ketang">柠檬课堂</a></li>
<li><a href="#shiji">学院事迹</a></li>
<li><a href="#jiuye">JavaEE就业班</a></li>
<li><a href="#jiangshi">讲师团</a></li>
<li><a href="#lianxi">联系我们</a></li>
</ul>
</div>
</div>
</nav> <section id="home">
<div class="container">
<div class="row wow fadeInUp" data-wow-duration="1s">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<p>
<h1>柠檬学院</h1>一家“专注培养高精端IT人才，全力打造在线教育知名品牌”的教育咨询公司。公司以在线网络授课平台为基础，整合社会更高品质、更具效率、更先进的教育资源，
配置智能化的学习帮助计划和最适合的教学方案，聘请IT领域高端人才和资深讲师亲自授课，制定资深讲师团队“一对一”服务策略，为学员提供完善的在线教育课程体系和优质的就业服务保障，最大程度地释
放每个学员的潜能，让每个学员都能线上的学习获得更为全面的职业素养。
</p>
</div>
<div class="col-sm-1"></div>
</div>
</div>
</section> <section id="ketang">
<div class="container">
<div class="row wow rollIn bg-yellow" data-wow-delay="0.5s">
<div class="col-sm-6">
<a href="#" target="_blank">
<img src="data:images/6.jpg" class="img-responsive"/>
<h3>刘老-柠檬学院Java金牌讲师</h3>
<p>Java资深讲师，多年培训经验，曾参与开发过的项目：某省电信...</p>
</a>
</div>
<div class="col-sm-6">
<a href="#" target="_blank">
<img src="data:images/7.jpg" class="img-responsive"/>
<h3>李哥-柠檬学院Java银牌讲师</h3>
<p>京东研发工程师，精通Java研发。授课风格深入浅出，幽默接地气。</p>
</a>
</div>
</div>
</div>
</section> <section id="shiji">
<div class="container">
<div class="row">
<div class="col-sm-6 wow swing bg-purple" data-wow-iteration="2">
<h3>李哥之漫漫IT路 </h3>
<p> 大学专业是电子信息工程，不甚喜欢。我更喜欢在室友上课的时候，独自一人待在宿舍抓肉鸡，并为之废寝忘食。每天拿着扫描器，导入成千上万的IP疯狂扫描。当我成功抓到第一只肉鸡并远程操控对方电脑的时候，兴奋不已。我按捺住内心的狂喜，用颤抖的双手在终端敲下了一行命令：shutdown -s -t 0 。
从窗户向外观望，宿舍楼左前方是几张乒乓球台。每当夜幕降临，华灯初上，我时常约乒协的小伙伴在此切磋球技。在昏黄的灯光下听着周董的稻香，挥舞着球拍，时间总是过的很快很快。
研究了整整一个学期的黑客技术。当我能熟练的抓鸡、拿站、提权的时候，我突然意识到这些事情没有任何意义。想明白了这一点，我毅然决然的告别了黑客时代，告别了曾经无比狂热的黑客精神。</p>
</div>
<div class="col-sm-6 wow swing bg-purple" data-wow-iteration="2">
<img src="data:images/11.jpg" class="img-circle"/>
</div>
</div>
</div>
</section> <section id="shiji01">
<div class="container">
<div class="row">
<div class="col-sm-6 wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">
<h3>柠檬缘</h3>
<p>
凡是都是冥冥中注定的，我一出生就注定了，在一个农村家庭，而且父母都没有上过学。我的妈妈重男轻女，在我童年的记忆中都是打骂我，有时候我在想这难道是后妈吗？为啥老这样对我呢（后来才明白，家庭经济不好，愁的了）？但是我爸爸对我很亲，深深记得，我爸爸拿16元给我买了一件黄色的衣服，超级好看，就因为那件衣服，爸妈还吵架了…….
由于自己家庭贫穷，穿的衣服都是很破很旧，同学都不跟我玩而且很排斥我。但是我很喜欢学习，小学语文老师管的很严，有一次迟到，在教室外被罚站了一节课。从此再也没有迟到过。后来由于频繁换数学老师，不负责任，成绩就不行了….
记忆中的初中老师都很势力眼，对老师和家境好的孩子都是很好，按成绩排座位，学习不好的没有关系的都排后面，我呢，学习不好，后面太乱，就要求做讲台前。高中的生活是比较开心的，目标只有一个，就是考一个好大学，每天早上四点左右起床，特别是冬天，好冷，但是有目标的人就是有闯劲，Never give up ！只想考上大学，但是结果并不理想。因为从小心灵就受打击，一直都是耻辱感很强，别人越是看不起我，我就偏偏要做到。想通过自己的努力改变人生都不容易。
</p>
</div>
<div class="col-sm-6 wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">
<img src="data:images/12.jpg" class="img-circle"/>
</div>
</div>
</div>
</section>
<div id="buy"></div>
<section id="jiuye">
<div class="row wow lightSpeedIn bg-yellow">
<div class="col-sm-12 d1">
<h2>JavaEE就业班</h2>
</div>
<div class="col-sm-4">
<div class="d2">
<img src="data:images/9.jpg"/>
<a href="#" class="btn btn-warning">6500RMB-加入购买</a>
</div>
</div>
<div class="col-sm-4">
<div class="d3">
<img src="data:images/16.jpg"/>
<a href="#" class="btn btn-warning">7500RMB-加入购买</a>
</div>
</div>
<div class="col-sm-4">
<div class="d4">
<img src="data:images/15.jpg"/>
<a href="#" class="btn btn-info">开始试听</a>
</div>
</div>
</div>
</section>
<div id="teacher"></div>
<section id="jiangshi">
<div class="container">
<div class="row wow bounceInDown bg-green">
<div class="col-sm-3">
<div class="p1">
<a href="#" target="_blank">
<img src="data:images/3.jpg" class="img-circle"/>
<h3>李哥</h3>
<p>李老师-柠檬学院Java银牌讲师
京东研发工程师，精通Java研发。授课风格深入浅出，幽默接地...
</p>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="p2">
<a href="#" target="_blank">
<img src="data:images/17.jpg" class="img-circle"/>
<h3>刘老</h3>
<p>刘老师-柠檬学院Java金牌讲师
Java资深讲师，多年培训经验，曾参与开发过的项目：某省电信...
</p>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="p3">
<a href="#" target="_blank">
<img src="data:images/19.jpg" class="img-circle"/>
<h3>任老师</h3>
<P>任老师-柠檬学院Java金牌讲师
从事开发5年，之后从事IT教育行业10年，在IT教育方面始终...
</p>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="p4">
<a href="#" target="_blank">
<img src="data:images/20.jpg" class="img-circle"/>
<h3>储哥</h3>
<P>储老师-柠檬学院Java银牌讲师
精通JavaEE企业级开发，对SSM架构有深入理解...
</p>
</a>
</div>
</div>
</div>
</div>
</section> <section id="lianxi">
<div class="container">
<div class="row wow bounceInUp bg-red">
<div class="col-sm-6">
<h2>联系我们</h2>
<p> 聘请IT领域高端人才和资深讲师亲自授课，制定资深讲师团队“一对一”服务策略，为学员提供完善的在线教育课程体系和优质的就业服务保障，最大程度地释放每个学员的潜能，让每个学员都能线上的学习获得更为全面的职业素养。</p>
<p>地址：北京市xxxx</p>
<p>电话：152xxxxxxxx</p>
<p>电子邮件：xxxx@xx.com</p>
<p>旗下网站：Java资源库 www.java1995.com</p>
</div>
<div class="col-sm-6">
<form method="post">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="请输入您的姓名"/>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="请输入您的电子邮件"/>
</div>
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="移动电话">
</div>
<div class="col-sm-12">
<input type="text" class="form-control" placeholder="标题">
</div>
<div class="col-sm-12">
<textarea placeholder="留言内容" class="form-control" rows="4"></textarea>
</div>
<div class="col-sm-6">
<input type="submit" class="form-control btn btn-warning" value="提交"/>
</div>
</form>
</textarea>
</div>
</div>
</div>
</section> <section id="banquan">
<div class="row wow bounceInDown bg-green" data-wow-delay="0.01s">
<div class="col-sm-6">
<img src="data:images/1.png"/>
</div>
<div class="col-sm-6">
<h5>课程存档 课程内容版权均归北京阳光柠檬科技有限公司所有
京ICP备16040204号-1
</h5>
<p>
Powered by EduSoho v7.2.0 ©2014-2016
</p>
</div>
</section> <section id="top">
<div class="row wow bounceInDown bg-green" data-wow-delay="0.01s">
<div class="col-sm-12">
<a href="#top01" class="btn btn-warning">顶部</a>
<a href="#buy" class="btn btn-danger">购买</a>
<a href="#teacher" class="btn btn-info">讲师</a>
</div>
</div>
</section> <script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
.navbar-default .navbar-brand{
font-size:36px;
color:#02B980;
font-weight:bold;
height:70px;
line-height:35px;
}
.navbar-collapse li a{
font-size:20px;
height:70px;
line-height:35px;
font-weight:bold;
//background-color:#02B980;
}
#home{
height:400px;
margin-top:70px;
font-weight:bold;
text-align:center;
width:100%;
background-color:#02B980;
padding:90px 0;
}
#home h1{
color:white;
}
#ketang{
text-align:center;
padding:70px;
}
#ketang a img{
width:400px;
height:250px;
margin:0 auto;
}
#ketang a{
text-decoration:none;
}
#shiji{
background-color:pink;
padding:40px 0;
text-align:center;
height:370px;
}
#shiji01{
background-color:purple;
padding:40px 0;
text-align:center;
height:370px;
}
#shiji h3,#shiji01 h3{
font-weight:bold;
font-size:24px;
}
#shiji p,#shiji01 p{
line-height:20px;
}
#jiuye{
text-align:center;
//padding:80px 0;
}
#jiuye .d1{
background-color:#02B980;
}
#jiuye .d2,#jiuye .d3,#jiuye .d4{
background-color:pink;
width:430px;
}
#jiuye img{
width:430px;
height:250px;
}
#jiuye a{
font-size:24px;
text-decoration:none;
margin-top:30px;
margin-bottom:20px;
}
#jiuye a:hover{
color:blue;
background-color:yellow;
}
#jiangshi{
margin-top:80px;
}
#jiangshi .p1,#jiangshi .p2,#jiangshi .p3,#jiangshi .p4{
background-color:#ECECEC;
width:216px;
height:270px;
}
#jiangshi a{
text-decoration:none;
}
#jiangshi img{
margin:10px 40px;
}
#lianxi{
background-color:pink;
margin-top:30px;
}
#lianxi h2{
font-size:36px;
font-weight:bold;
}
#lianxi p{
font-weight:bold;
line-height:30px;
}
#lianxi input{
margin-top:20px;
height:40px;
margin-bottom:20px;
}
#banquan{
background-color:white;
height:120px;
}
#banquan img{
margin-top:30px;
margin-left:100px;
}
#banquan h5{
text-align:right;
margin-right:200px;
margin-top:35px;
}
#banquan p{
text-align:right;
margin-right:200px;
}
#banquan a{
margin:0 auto;
}
#top a{
float:right;
margin-right:50px;
}
案例所需要的引用，和素材，源码
链接：http://pan.baidu.com/s/1bpKaqfH 密码：robl
Bootstrap的学习以及简单运用的更多相关文章
- Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理
这是本人第一次写,写的不好的地方还忘包含.写这个的主要原因是想通过这个来学习下EF的CodeFirst模式,本来也想用AngularJs来玩玩的,但是自己只会普通的绑定,对指令这些不是很熟悉,所以就基 ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- bootstrap基础学习【导航条、分页导航】（五）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- bootstrap组件学习
转自http://v3.bootcss.com/components/ bootstrap组件学习 矢量图标的用法<span class="glyphicon glyphicon-se ...
- bootstrap插件学习-bootstrap.dropdown.js
bootstrap插件学习-bootstrap.dropdown.js 先看bootstrap.dropdown.js的结构 var toggle = '[data-toggle="drop ...
- JMeter学习工具简单介绍
JMeter学习工具简单介绍 一.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态 ...
- Bootstrap历练实例：简单的可折叠
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap基础学习 ---- 系列文章
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...
- （java）selenium webdriver学习---实现简单的翻页，将页面内容的标题和标题链接取出
selenium webdriver学习---实现简单的翻页,将页面内容的标题和标题链接取出: 该情况适合能能循环page=1~n,并且每个网页随着循环可以打开的情况, 注意一定是自己拼接的url可以 ...
随机推荐
- Hdu OJ 5884-Sort （2016 ACM/ICPC Asia Regional Qingdao Online）（二分+优化哈夫曼）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5884 题目大意:有n个有序的序列,对于第i个序列有ai个元素. 现在有一个程序每次能够归并k个序列, ...
- clang format 自定义样式常用参数说明
常用的格式设置: #如果为真(true),分析格式化过的文件中最常见的&和*的对齐方式.然后指针对齐仅作为回退 DerivePointerAlignment: false #缩进宽度 Inde ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- Rsync+inotify实现实时同步
1.1 inotify介绍 inotify是一种强大的.细粒度的.异步的文件系统事件控制机制.linux内核从2.6.13起,加入了inotify支持,通过inotify可以监控文件系统中添加.删除. ...
- github的一些指令
- 设置EditText光标位置
editext.setSelection(int index);
- 云计算和大数据时代网络技术揭秘（十七）VOQ机制
VOQ机制 本章介绍的VOQ是一种新型的QoS机制,目的是为了解决著名的交换机HoL难题. 但VOQ强烈依赖于调度算法,例如,一个48口的交换机,每个端口都要维护48-1个FIFO缓存队列, 一共48 ...
- 3163: [Heoi2013]Eden的新背包问题
Description "寄没有地址的信,这样的情绪有种距离,你放着谁的歌曲,是怎样的心心静,能不能说给我听."失忆的Eden总想努力地回忆起过去,然而总是只能清晰地记得那种思念的 ...
- 多重背包 （poj 1014）
题目:Dividing 题意:6种重量的的石头,每个给定数量,用总重的一半去装,问能否装满. #include <iostream> #include <algorithm> ...
- 文件和目录：access函数
access函数是按照实际用户ID和实际组ID进行访问权限测试的: #include <unistd.h> int access( const char *pathname, int mo ...