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>电子邮件：[email protected]</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
时间： 2024-10-16 19:47:04