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
