Bootstrap的学习以及简单运用

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <title>柠檬学院</title>
  5 <meta charset="utf-8">
  6 <meta name="viewport" content="width=device-width, initial-scale=1">
  7 <link rel="stylesheet" href="css/bootstrap.min.css">
  8 <link rel="stylesheet" href="css/animate.min.css">
  9 
 10 <link rel="stylesheet" href="css/main1.css">
 11 <!--link rel href谨记-->
 12 
 13 </head>
 14 <body>
 15 <div id="top01"></div>
 16 <!--导航条-->
 17 <nav class="navbar navbar-default navbar-fixed-top">
 18     <div class="container">
 19     <!--logo和按钮-->    
 20         <div class="navbar-head">
 21             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#b1">
 22                 <span class="sr-only">Toggle navigation</span>
 23                 <span class="icon-bar"></span>
 24                 <span class="icon-bar"></span>
 25                 <span class="icon-bar"></span>
 26             </button>
 27             <div>
 28                 <a href="#" class="navbar-brand">柠檬学院</a>
 29             </div>
 30         </div>
 31         <!--导航-->
 32             <div class="collapse navbar-collapse">
 33                 <ul class="nav navbar-nav navbar-right">
 34                     <li><a href="#home">首页</a></li>
 35                     <li><a href="#ketang">柠檬课堂</a></li>
 36                     <li><a href="#shiji">学院事迹</a></li>
 37                     <li><a href="#jiuye">JavaEE就业班</a></li>
 38                     <li><a href="#jiangshi">讲师团</a></li>
 39                     <li><a href="#lianxi">联系我们</a></li>
 40                 </ul>
 41             </div>    
 42     </div>
 43 </nav>
 44 
 45 <section id="home">
 46     <div class="container">
 47         <div class="row wow fadeInUp" data-wow-duration="1s">
 48             <div class="col-sm-1"></div>
 49             <div class="col-sm-10">
 50                 <p>
 51                     <h1>柠檬学院</h1>一家“专注培养高精端IT人才,全力打造在线教育知名品牌”的教育咨询公司。公司以在线网络授课平台为基础,整合社会更高品质、更具效率、更先进的教育资源,
 52                     配置智能化的学习帮助计划和最适合的教学方案,聘请IT领域高端人才和资深讲师亲自授课,制定资深讲师团队“一对一”服务策略,为学员提供完善的在线教育课程体系和优质的就业服务保障,最大程度地释
 53                     放每个学员的潜能,让每个学员都能线上的学习获得更为全面的职业素养。
 54                 </p>
 55             </div>
 56             <div class="col-sm-1"></div> 
 57         </div>
 58     </div>
 59 </section>
 60 
 61 
 62 <section id="ketang">
 63     <div class="container">
 64         <div class="row wow rollIn bg-yellow" data-wow-delay="0.5s">
 65             <div class="col-sm-6">
 66                 <a href="#" target="_blank">
 67                     <img src="images/6.jpg" class="img-responsive"/>
 68                     <h3>刘老-柠檬学院Java金牌讲师</h3>
 69                     <p>Java资深讲师,多年培训经验,曾参与开发过的项目:某省电信...</p>
 70                 </a>
 71             </div>
 72             <div class="col-sm-6">
 73                 <a href="#" target="_blank">
 74                     <img src="images/7.jpg" class="img-responsive"/>
 75                     <h3>李哥-柠檬学院Java银牌讲师</h3>
 76                     <p>京东研发工程师,精通Java研发。授课风格深入浅出,幽默接地气。</p>
 77                 </a>
 78             </div>
 79         </div>    
 80     </div>
 81 </section>
 82 
 83 <section id="shiji">
 84     <div class="container">
 85         <div class="row">
 86             <div class="col-sm-6 wow swing bg-purple" data-wow-iteration="2">
 87                 <h3>李哥之漫漫IT路 </h3>
 88                 <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大学专业是电子信息工程,不甚喜欢。我更喜欢在室友上课的时候,独自一人待在宿舍抓肉鸡,并为之废寝忘食。每天拿着扫描器,导入成千上万的IP疯狂扫描。当我成功抓到第一只肉鸡并远程操控对方电脑的时候,兴奋不已。我按捺住内心的狂喜,用颤抖的双手在终端敲下了一行命令:shutdown -s -t 0 。
 89                     从窗户向外观望,宿舍楼左前方是几张乒乓球台。每当夜幕降临,华灯初上,我时常约乒协的小伙伴在此切磋球技。在昏黄的灯光下听着周董的稻香,挥舞着球拍,时间总是过的很快很快。
 90                     研究了整整一个学期的黑客技术。当我能熟练的抓鸡、拿站、提权的时候,我突然意识到这些事情没有任何意义。想明白了这一点,我毅然决然的告别了黑客时代,告别了曾经无比狂热的黑客精神。</p>
 91             </div>
 92             <div class="col-sm-6 wow swing bg-purple" data-wow-iteration="2">
 93                 <img src="images/11.jpg" class="img-circle"/>
 94             </div>
 95         </div>
 96     </div>
 97 </section>
 98 
 99 
100 <section id="shiji01">
101     <div class="container">
102         <div class="row">
103             <div class="col-sm-6 wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">
104                 <h3>柠檬缘</h3>
105                 <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
106                     凡是都是冥冥中注定的,我一出生就注定了,在一个农村家庭,而且父母都没有上过学。我的妈妈重男轻女,在我童年的记忆中都是打骂我,有时候我在想这难道是后妈吗?为啥老这样对我呢(后来才明白,家庭经济不好,愁的了)?但是我爸爸对我很亲,深深记得,我爸爸拿16元给我买了一件黄色的衣服,超级好看,就因为那件衣服,爸妈还吵架了…….
107                     由于自己家庭贫穷,穿的衣服都是很破很旧,同学都不跟我玩而且很排斥我。但是我很喜欢学习,小学语文老师管的很严,有一次迟到,在教室外被罚站了一节课。从此再也没有迟到过。后来由于频繁换数学老师,不负责任,成绩就不行了….
108                     记忆中的初中老师都很势力眼,对老师和家境好的孩子都是很好,按成绩排座位,学习不好的没有关系的都排后面,我呢,学习不好,后面太乱,就要求做讲台前。高中的生活是比较开心的,目标只有一个,就是考一个好大学,每天早上四点左右起床,特别是冬天,好冷,但是有目标的人就是有闯劲,Never give up !只想考上大学,但是结果并不理想。因为从小心灵就受打击,一直都是耻辱感很强,别人越是看不起我,我就偏偏要做到。想通过自己的努力改变人生都不容易。
109                 </p>
110             </div>
111             <div class="col-sm-6 wow pulse bg-red" data-wow-iteration="5" data-wow-duration="0.15s">
112                 <img src="images/12.jpg" class="img-circle"/>
113             </div>
114         </div>
115     </div>
116 </section>
117 <div id="buy"></div>        
118 <section id="jiuye">
119     <div class="row wow lightSpeedIn bg-yellow">
120         <div class="col-sm-12 d1">
121             <h2>JavaEE就业班</h2>
122         </div>
123         <div class="col-sm-4">
124             <div class="d2">
125                 <img src="images/9.jpg"/>
126                 <a href="#" class="btn btn-warning">6500RMB-加入购买</a>
127             </div>
128         </div>
129         <div class="col-sm-4">
130             <div class="d3">
131                 <img src="images/16.jpg"/>
132                 <a href="#" class="btn btn-warning">7500RMB-加入购买</a>
133             </div>
134         </div>
135         <div class="col-sm-4">
136             <div class="d4">
137                 <img src="images/15.jpg"/>
138                 <a href="#" class="btn btn-info">开始试听</a>
139             </div>
140         </div>
141     </div>
142 </section>
143 <div id="teacher"></div>
144 <section id="jiangshi">
145     <div class="container">
146         <div class="row wow bounceInDown bg-green">
147             <div class="col-sm-3">
148                 <div class="p1">
149                     <a href="#" target="_blank">
150                         <img src="images/3.jpg" class="img-circle"/>
151                         <h3>李哥</h3>
152                         <p>李老师-柠檬学院Java银牌讲师
153                             京东研发工程师,精通Java研发。授课风格深入浅出,幽默接地...
154                         </p>
155                     </a>
156                 </div>
157             </div>
158             <div class="col-sm-3">
159                 <div class="p2">
160                     <a href="#" target="_blank">
161                         <img src="images/17.jpg" class="img-circle"/>
162                         <h3>刘老</h3>
163                         <p>刘老师-柠檬学院Java金牌讲师
164                             Java资深讲师,多年培训经验,曾参与开发过的项目:某省电信...
165                         </p>
166                     </a>
167                 </div>
168             </div>
169             <div class="col-sm-3">
170                 <div class="p3">
171                     <a href="#" target="_blank">
172                         <img src="images/19.jpg" class="img-circle"/>
173                         <h3>任老师</h3>
174                         <P>任老师-柠檬学院Java金牌讲师
175                             从事开发5年,之后从事IT教育行业10年,在IT教育方面始终...
176                         </p>
177                     </a>
178                 </div>
179             </div>
180             <div class="col-sm-3">
181                 <div class="p4">
182                     <a href="#" target="_blank">
183                         <img src="images/20.jpg" class="img-circle"/>
184                         <h3>储哥</h3>
185                         <P>储老师-柠檬学院Java银牌讲师
186                             精通JavaEE企业级开发,对SSM架构有深入理解...
187                         </p>
188                     </a>
189                 </div>
190             </div>
191         </div>
192     </div>
193 </section>
194 
195 <section id="lianxi">
196 <div class="container">
197     <div class="row wow bounceInUp bg-red">
198         <div class="col-sm-6">
199             <h2>联系我们</h2>
200             <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;聘请IT领域高端人才和资深讲师亲自授课,制定资深讲师团队“一对一”服务策略,为学员提供完善的在线教育课程体系和优质的就业服务保障,最大程度地释放每个学员的潜能,让每个学员都能线上的学习获得更为全面的职业素养。</p>
201             <p>地址:北京市xxxx</p>
202             <p>电话:152xxxxxxxx</p>
203             <p>电子邮件:xxxx@xx.com</p>
204             <p>旗下网站:Java资源库 www.java1995.com</p>
205         </div>
206         <div class="col-sm-6">
207             <form method="post">
208                 <div class="col-sm-6">
209                     <input type="text" class="form-control" placeholder="请输入您的姓名"/>
210                 </div>
211                 <div class="col-sm-6">
212                     <input type="text" class="form-control" placeholder="请输入您的电子邮件"/>
213                 </div>
214                 <div class="col-sm-12">
215                     <input type="text" class="form-control" placeholder="移动电话">
216                 </div>
217                 <div class="col-sm-12">
218                     <input type="text" class="form-control" placeholder="标题">
219                 </div>
220                 <div class="col-sm-12">
221                     <textarea placeholder="留言内容" class="form-control" rows="4"></textarea>
222                 </div>
223                 <div class="col-sm-6">
224                     <input type="submit" class="form-control btn btn-warning" value="提交"/>
225                 </div>
226             </form>    
227             </textarea>
228         </div>
229     </div>
230 </div>    
231 </section>
232 
233 <section id="banquan">
234     <div class="row wow bounceInDown bg-green" data-wow-delay="0.01s">
235         <div class="col-sm-6">
236              <img src="images/1.png"/>
237         </div>
238         <div class="col-sm-6">
239              <h5>课程存档 课程内容版权均归北京阳光柠檬科技有限公司所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
240                 京ICP备16040204号-1
241              </h5>
242              <p>
243                 Powered by EduSoho v7.2.0 ©2014-2016
244              </p>
245         </div>
246 </section>
247 
248 <section id="top">
249     <div class="row wow bounceInDown bg-green" data-wow-delay="0.01s">
250         <div class="col-sm-12">
251             <a href="#top01" class="btn btn-warning">顶部</a>
252             <a href="#buy" class="btn btn-danger">购买</a>
253             <a href="#teacher" class="btn btn-info">讲师</a>
254         </div>     
255     </div>
256 </section>
257 
258 
259 <script src="js/jquery.min.js"></script>
260 <script src="js/bootstrap.min.js"></script>
261 <script src="js/wow.min.js"></script>
262 <script>
263     new WOW().init();
264 </script>
265 </body>
266 </html>
  1 .navbar-default .navbar-brand{
  2     font-size:36px;    
  3     color:#02B980;
  4     font-weight:bold;
  5     height:70px;
  6     line-height:35px;
  7 }
  8 .navbar-collapse li a{
  9     font-size:20px;
 10     height:70px;
 11     line-height:35px;
 12     font-weight:bold;
 13     //background-color:#02B980;
 14 }
 15 
 16 #home{
 17     height:400px;
 18     margin-top:70px;
 19     font-weight:bold;
 20     text-align:center;
 21     width:100%;
 22     background-color:#02B980;
 23     padding:90px 0;
 24 }
 25 #home h1{
 26     color:white;
 27 }
 28 #ketang{
 29     text-align:center;
 30     padding:70px;
 31 }
 32 
 33 #ketang a img{
 34     width:400px;
 35     height:250px;
 36     margin:0 auto;
 37 }
 38 #ketang a{
 39     text-decoration:none;
 40 }
 41 
 42 #shiji{
 43     background-color:pink;
 44     padding:40px 0;
 45     text-align:center;
 46     height:370px;
 47 }
 48 #shiji01{
 49     background-color:purple;
 50     padding:40px 0;
 51     text-align:center;
 52     height:370px;
 53 }
 54 #shiji h3,#shiji01 h3{
 55     font-weight:bold;
 56     font-size:24px;
 57 }
 58 #shiji p,#shiji01 p{
 59     line-height:20px;
 60 }
 61 #jiuye{
 62     text-align:center;    
 63     //padding:80px 0;
 64 }
 65 #jiuye .d1{
 66     background-color:#02B980;
 67 }
 68 #jiuye .d2,#jiuye .d3,#jiuye .d4{
 69     background-color:pink;
 70     width:430px;
 71 }
 72 #jiuye img{
 73     width:430px;
 74     height:250px;
 75 }
 76 #jiuye a{
 77     font-size:24px;
 78     text-decoration:none;
 79     margin-top:30px;
 80     margin-bottom:20px;
 81 }
 82 #jiuye a:hover{
 83     color:blue;
 84     background-color:yellow;
 85 }
 86 #jiangshi{
 87     margin-top:80px;
 88     
 89 }
 90 #jiangshi .p1,#jiangshi .p2,#jiangshi .p3,#jiangshi .p4{
 91     background-color:#ECECEC;
 92     width:216px;
 93     height:270px;
 94 }
 95 #jiangshi a{
 96     text-decoration:none;
 97 }
 98 #jiangshi img{
 99     margin:10px 40px;
100 }
101 #lianxi{
102     background-color:pink;
103     margin-top:30px;
104 }
105 #lianxi h2{
106     font-size:36px;
107     font-weight:bold;
108 }
109 #lianxi p{
110     font-weight:bold;
111     line-height:30px;
112 }
113 #lianxi input{
114     margin-top:20px;
115     height:40px;
116     margin-bottom:20px;
117 }
118 #banquan{
119     background-color:white;
120     height:120px;
121 }
122 #banquan img{
123     margin-top:30px;
124     margin-left:100px;
125 }
126 #banquan h5{
127     text-align:right;
128     margin-right:200px;
129     margin-top:35px;
130 }
131 #banquan p{
132     text-align:right;
133     margin-right:200px;
134     
135 }
136 #banquan a{
137     margin:0 auto;
138 }
139 #top a{
140     float:right;
141     margin-right:50px;
142 }

案例所需要的引用,和素材,源码

链接:http://pan.baidu.com/s/1bpKaqfH 密码:robl

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

IT 已成为最疯狂的加班行业,没有之一

夜幕降临,当IT大楼里依然灯火通明时,那一刻,我仿佛王进喜、石传翔等劳模灵魂附体,我知道我不是一个在加班,我不是一个人!连续9个通宵加班都不是事,一点不夸张,这...

382
来自专栏北京马哥教育

快递小哥:用6年时间做到IT主管

? 文 | 糖豆 来源 | 中文业界资讯 在我30岁生日那天,终于收到升职的通知,自己如愿的也从一名小小程序员升职成为IT主管,负责公司硬件设备驱...

3916
来自专栏养码场

9月新丧象:程序员最大的悲哀是什么?

晚上十一点,刚加完班,下班偶遇一个年长的同事,便一同坐地铁回家。路上同事哼着歌,声音有点低哑,筷子兄弟的《老男孩》:

591
来自专栏程序员互动联盟

一位台湾码农的心路历程

前言:台湾的IT环境是什么样的,我们很少关注过。本文作者superbcde是一位台湾程序员,他没有显赫的教育背景,从IT培训学校开始,一步一步走向自己的奋斗目标...

3177
来自专栏大数据架构师专家

30岁了!还在迷茫,我们该怎么办?

1615
来自专栏程序人生

管理是什么(一)

简言之,无论团队大小,管理者的主要任务是建立 信任,输出 文化,确定 目标和战略(策略),有效 执行,并且和团队不断 学习和成长。

850
来自专栏数据的力量

凡是你排斥的,就是你所要学习的

如果你觉得伴侣对你失去热情,可能是因为你也对他失去热情;就像一位婚姻专家说的:「如果我们的婚姻变得乏味,可能是因为我觉得乏味,或更糟的是我这个人很乏味。」

753
来自专栏我就是马云飞

一位程序员的十年工作总结

展望未来,总结过去10年的程序员生涯,给程序员小弟弟小妹妹们的一些总结性忠告 走过的路,回忆起来是那么曲折,把自己的一些心得体会分享给程序员兄弟姐妹们,虽然...

3345
来自专栏PPV课数据科学社区

【聚焦】大数据揭秘北上广深加班到底哪家强

滴滴专车日前推出的北上广深加班楼排行榜火遍全网,加班汪们集体吐槽,票选让加班楼飞!一起来看看关于加班的大数据! 票选魔鬼加班楼,一下子让全城的加班汪都浮出了水面...

4665
来自专栏成猿之路

▶︎这才是真正的《开学第一课》

我想无论你有多大、在读哪个年级,许多人都打心底里希望现在还在放假,以及今天不用那么早起床。

663

扫码关注云+社区