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> 大学专业是电子信息工程，不甚喜欢。我更喜欢在室友上课的时候，独自一人待在宿舍抓肉鸡，并为之废寝忘食。每天拿着扫描器，导入成千上万的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>
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> 聘请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>课程存档 课程内容版权均归北京阳光柠檬科技有限公司所有
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
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016-10-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
