lesson14-在线课堂搜索
//网页-在线课堂+搜索
css文件夹：
common.css 公共
index.css 主页
reset.css 重置
regist.css 注册
login.css 登陆
course.css 在线课堂
search.css 搜索
jq文件夹：
index.js 主页
course.js 在线课堂
html：
index.html 主页
course.html 在线课堂
search.html 搜索
regist.html 注册
login.html 登陆
----------------------------------------------------
代码过程： 1，开始写course.html在线课堂页中间div代码 <!--在线课堂中层div布局--> <div class="middle"> <div class="mid-top"> <div class="menu"> <h3>在线课堂</h3> <ul class="title"> <li class="active">创业案例</li> //菜单栏，切换菜单 <li>深度报道</li> <li>干货分析</li> <li>投资人说</li> <div class="mid-con"> <ul class="con-list"> <li class="con show"> <div class="course-list"> <ul class="course"> //6个li显示图片+文字 <li> <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"> <div class="course-con"> <h3>潭州英语</h3> <p class="course-info">每天十分钟，迅速掌握英语学习小技巧</p> <p class="course-price">免费</p> </div> </li> </li> <li class="con">content2</li> <li class="con">content3</li> <li class="con">content4</li> 2，写search.html搜索页面中间布局代码 <!--搜索页面中层div布局--> <div class="middle"> <div class="mid-con clearfix"> <!--搜索网页中层左侧sougou搜索--> <div class="con-left"> <!--搜狗搜索功能--> <div class="form"> <form action="https://www.sogou.com/web" method="get"> <input class="text" type="text" name="query" placeholder="请输入要查询的内容"> <input class="btn" type="submit" value="搜索"> </form> </div> </div> <!--移植主页中层右侧--> <div class="con-right"> --------------------- //以前的代码可移植到现有项目 2，css样式 2-1写course.css 在线课堂中层css /*===middle star===*/ /*===mid-top star===*/ <!--菜单栏css--> /*===mid-top end===*/ /*===mid-con start===*/ <!--菜单栏对应菜单显示图像css--> /*===mid-con end===*/ /*===middle end===*/ 2-2写search.css，搜索中层css /*===middle start===*/ /*===con-left start===*/ /*===form start===*/ <!--sougou搜索表单和按钮样式css--> /*===form end===*/ /*===con-left end===*/ /*===con-right start===*/ <!--移植主页中层右侧css--> /*===con-right end===*/ /*===middle end===*/ ----------------------- 3，js动画 3-1，index.js动画 $(function(){ 图片轮播效果动画 //hover(mouseenter,mouseleaver) 鼠标移入图片定时器停止，移出又开始 } $(function(){ 切换菜单动画 } 3-2，course.js动画 $(function () { 切换菜单动画 }
----------------------------------------------------------------------------
视频1-在线课堂
<!--course.js代码，在线课堂-->
1 $(function () { 2 //菜单栏 3 var $title=$(".menu .title li"); 4 var $content=$(".mid-con .con-list .con"); 5 console.log($title); 6 console.log($content); 7 var n_index=0; 8 //点击切换菜单 9 $title.click(function () { 10 num=$(this).index(); 11 change($content,$title,num); 12 }); 13 //变化函数 14 function change($obj1,$obj2,num){ 15 $obj1.eq(n_index).fadeOut(2000); 16 $obj2.eq(n_index).removeClass("active"); 17 n_index = num; 18 $obj1.eq(n_index).fadeIn(2000); 19 $obj2.eq(n_index).addClass("active"); 20 } 21 });
------------------------------------------
<!--course.css代码在线课堂-->
1 /*===middle star===*/ 2 /*===mid-top star===*/ 3 .middle .mid-top{ 4 background: white; 5 height:65px; 6 width:100%; 7 } 8 .middle .mid-top .menu{ 9 height:65px; 10 width:1200px; 11 margin:0 auto; 12 background: white; 13 line-height: 65px; 14 } 15 .middle .mid-top .menu h3{ 16 float:left;/*浮动在左边*/ 17 margin-right:60px; 18 font-size:22px; 19 font-weight: normal; 20 } 21 .middle .mid-top .menu .title li{ 22 float:left;/*左浮动，列变行显示*/ 23 margin-left: 20px; 24 font-size: 18px; 25 color:grey; 26 cursor: pointer;/*鼠标滑入光标图形*/ 27 } 28 .middle .mid-top .menu .title li:hover{ 29 text-shadow: 1px 1px 2px #212121;/*鼠标滑入字体加深*/ 30 } 31 .middle .mid-top .menu .title li.active{ 32 color:black; 33 } 34 /*===mid-top end===*/ 35 /*===mid-con start===*/ 36 .middle .mid-con{ 37 height:800px; 38 width:1200px; 39 margin:0 auto; 40 /*background: #52a6f7;*/ 41 } 42 .middle .mid-con .con-list{ 43 position:relative;/*父级相对定位*/ 44 } 45 .middle .mid-con .con-list .con{ 46 position:absolute;/*子级绝对定位，脱离文档，浮动*/ 47 display:none;/*隐藏*/ 48 49 } 50 .middle .mid-con .con-list .con.show{ 51 display: block;/*显示*/ 52 color:black; 53 } 54 .middle .mid-con .con-list .con .course-list .course li{ 55 margin:20px; 56 float:left;/*左浮动*/ 57 } 58 .middle .mid-con .con-list .con .course-list .course li img{ 59 width:260px; 60 height:158px; 61 } 62 .middle .mid-con .con-list .con .course-list .course li .course-con{ 63 width:220px; 64 height:158px; 65 background: white; 66 position:relative;/*父级相对定位*/ 67 padding:0 20px; 68 } 69 .middle .mid-con .con-list .con .course-list .course li .course-con h3{ 70 font-size:20px; 71 font-weight: normal; 72 } 73 .middle .mid-con .con-list .con .course-list .course li .course-con .course-info{ 74 overflow: hidden;/*超出部分隐藏*/ 75 white-space: nowrap;/*规定段落中的文本不进行换行*/ 76 text-overflow: ellipsis;/*省略号*/ 77 line-height: 56px; 78 color:grey; 79 } 80 .middle .mid-con .con-list .con .course-list .course li .course-con .course-price{ 81 color:green; 82 position:absolute;/*子级绝对定位，脱离文档，浮动*/ 83 bottom:20px; 84 right:30px; 85 } 86 /*===mid-con end===*/ 87 88 /*===middle end===*/
------------------------------------------
<!--course.html代码，在线课堂网页-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>course</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/common.css"> 8 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 9 <!--导入course.css样式--> 10 <link rel="stylesheet" href="css/course.css"> 11 <!--网页导入js--> 12 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 13 <!--本地导入js--> 14 <script src="jq/course.js"></script> 15 </head> 16 <body> 17 <!--top star--> 18 <div class="top"> 19 <div class="top-con"> 20 <div class="logo"></div> 21 <ul class="menu"> 22 <li><a href="index.html">首页</a></li> 23 <li class="show"><a href="javascript:void(0);" >在线课堂</a></li> 24 <li><a href="javascript:void(0);">付费咨询</a></li> 25 <li><a href="search.html">搜索</a></li> 26 </ul> 27 <div class="reg-log"> 28 <i class="iconfont icon-user"></i> 29 <a href="regist.html">注册</a>/ 30 <a href="login.html">登录</a> 31 </div> 32 </div> 33 </div> 34 <!--top end--> 35 <!--middle star--> 36 <!--在线课堂中层div布局--> 37 <div class="middle"> 38 <div class="mid-top"> 39 <!--菜单栏--> 40 <div class="menu"> 41 <h3>在线课堂</h3> 42 <ul class="title"> 43 <li class="active">创业案例</li> 44 <li>深度报道</li> 45 <li>干货分析</li> 46 <li>投资人说</li> 47 </ul> 48 </div> 49 </div> 50 <div class="mid-con"> 51 <ul class="con-list"> 52 <!--菜单栏对应菜单显示图像--> 53 <li class="con show"> 54 <div class="course-list"> 55 <ul class="course"> 56 <li> 57 <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"> 58 <div class="course-con"> 59 <h3>潭州英语</h3> 60 <p class="course-info">每天十分钟，迅速掌握英语学习小技巧</p> 61 <p class="course-price">免费</p> 62 </div> 63 </li> 64 <li> 65 <img src="https://res.shiguangkey.com//file/201808/15/20180815184208130188134.png!mall_course_c"> 66 <div class="course-con"> 67 <h3>潭州日语</h3> 68 <p class="course-info">每天十分钟，迅速掌握日语学习小技巧</p> 69 <p class="course-price">免费</p> 70 </div> 71 </li> 72 <li> 73 <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"> 74 <div class="course-con"> 75 <h3>潭州英语</h3> 76 <p class="course-info">每天十分钟，迅速掌握英语学习小技巧</p> 77 <p class="course-price">免费</p> 78 </div> 79 </li> 80 <li> 81 <img src="https://res.shiguangkey.com//file/201808/15/20180815184208130188134.png!mall_course_c"> 82 <div class="course-con"> 83 <h3>潭州日语</h3> 84 <p class="course-info">每天十分钟，迅速掌握日语学习小技巧</p> 85 <p class="course-price">免费</p> 86 </div> 87 </li> 88 <li> 89 <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"> 90 <div class="course-con"> 91 <h3>潭州英语</h3> 92 <p class="course-info">每天十分钟，迅速掌握英语学习小技巧</p> 93 <p class="course-price">免费</p> 94 </div> 95 </li> 96 <li> 97 <img src="https://res.shiguangkey.com//file/201808/15/20180815184208130188134.png!mall_course_c"> 98 <div class="course-con"> 99 <h3>潭州日语</h3> 100 <p class="course-info">每天十分钟，迅速掌握日语学习小技巧</p> 101 <p class="course-price">免费</p> 102 </div> 103 </li> 104 </ul> 105 </div> 106 </li> 107 <li class="con">content2</li> 108 <li class="con">content3</li> 109 <li class="con">content4</li> 110 </ul> 111 </div> 112 </div> 113 <!--middle end--> 114 <!--bottom star--> 115 <div class="bottom"> 116 <div class="bot1"> 117 <div class="bot1-con"> 118 <div class="logo"></div> 119 <p class="link-con"> 120 <span class="link"> 121 <a href="javascript:void(0);">潭州官网</a> | 122 <a href="javascript:void(0);">SEO研究中心</a> | 123 <a href="javascript:void(0);">潭州商城</a> | 124 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 125 <a href="javascript:void(0);">安全中心</a> 126 </span> 127 <span class="about-me"> 128 关于我： 129 <i class="iconfont icon-weixin"> </i> 130 feifei 131 </span> 132 </p> 133 <p class="addr-con"> 134 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 135 <span class="tel"> 136 客服热线：4001-567-315 137 </span> 138 </p> 139 </div> 140 </div> 141 <div class="bot2"> 142 <div class="bot2-con"> 143 <p>Copyright © 2017 All Rights Reserved </p> 144 </div> 145 </div> 146 </div> 147 <!--bottom end--> 148 </body> 149 </html>
--------------------------------------------------------------
视频2-搜索
1分钟：f12，网页调试页面效果不会影响源代码
22分钟：搜索直接可以用搜狗的网页搜索
<!--search.css代码，搜索网页-->
1 /*===middle start===*/ 2 .middle .mid-con .con-left{ 3 width:800px; 4 float:left;/*浮动在左侧*/ 5 } 6 .middle .mid-con .con-right{ 7 width:360px; 8 float:right;/*浮动在右侧*/ 9 background: white; 10 /*height:200px;*/ 11 } 12 /*===con-left start===*/ 13 /*===form start===*/ 14 .middle .mid-con .con-left .form{ 15 margin-top:20px; 16 background: white; 17 padding:40px 40px; 18 } 19 .middle .mid-con .con-left .form .text{ 20 width:600px; 21 height:40px; 22 border-radius: 20px 0 0 20px;/*边框左侧圆角--左上20，右上0，右下0，左下20*/ 23 border:1px solid grey; 24 font-size:18px; 25 border-right:none; 26 text-indent: 1em; 27 } 28 .middle .mid-con .con-left .form .btn{ 29 width:100px; 30 height:44px; 31 background: red; 32 color:white; 33 font-size:18px; 34 border-radius:0 20px 20px 0;/*边框右侧圆角*/ 35 border:1px solid red; 36 margin-left:-6px; 37 vertical-align: bottom;/*和其他div底部对齐*/ 38 } 39 /*===form end===*/ 40 /*===con-left end===*/ 41 /*===con-right start===*/ 42 /*移植主页中层右侧css*/ 43 /*===offline-class start===*/ 44 .middle .mid-con .con-right{ 45 width: 360px; 46 /*height:800px;*/ 47 background: white; 48 /*position:absolute;*/ 49 /*right:0;*/ 50 float:right; 51 margin-top:20px; 52 } 53 .middle .mid-con .con-right .offline-class h3{ 54 line-height: 60px; 55 color:black; 56 font-size: 18px; 57 padding:0 20px; 58 } 59 .middle .mid-con .con-right .offline-class h3 a{ 60 font-size:14px; 61 color:skyblue; 62 float:right; 63 } 64 .middle .mid-con .con-right .offline-class .pic{ 65 width:320px; 66 height:210px; 67 margin:0 auto; 68 position:relative; 69 } 70 .middle .mid-con .con-right .offline-class .pic img{ 71 width:320px; 72 height:210px; 73 } 74 .middle .mid-con .con-right .offline-class .pic p{ 75 position:absolute; 76 bottom:0; 77 height:40px; 78 width:320px; 79 background: rgba(0,0,0,0.3); 80 color:white; 81 text-align:center; 82 line-height: 40px; 83 } 84 .middle .mid-con .con-right .offline-class .status{ 85 /*height:200px;*/ 86 width:320px; 87 /*background: #52a6f7;*/ 88 padding:0 20px; 89 } 90 .middle .mid-con .con-right .offline-class .status li{ 91 height:40px; 92 line-height: 40px; 93 } 94 .middle .mid-con .con-right .offline-class .status li span{ 95 color:black; 96 font-size:15px; 97 } 98 .middle .mid-con .con-right .offline-class .status li .one{ 99 color:skyblue; 100 border:1px solid skyblue; 101 margin-right:20px; 102 } 103 .middle .mid-con .con-right .offline-class .status li .two{ 104 color:grey; 105 border:1px solid grey; 106 margin-right: 20px; 107 } 108 /*===offline-class end===*/ 109 /*===online-class start===*/ 110 .middle .mid-con .con-right .online-class{ 111 border-top:1px solid lightgrey; 112 } 113 .middle .mid-con .con-right .online-class h3{ 114 line-height: 60px; 115 color:black; 116 font-size: 18px; 117 padding:0 20px; 118 } 119 .middle .mid-con .con-right .online-class h3 a{ 120 font-size:14px; 121 color:skyblue; 122 float:right; 123 } 124 .middle .mid-con .con-right .online-class .pic{ 125 width:320px; 126 height:210px; 127 margin:0 auto; 128 position:relative; 129 } 130 .middle .mid-con .con-right .online-class .pic img{ 131 width:320px; 132 height:210px; 133 } 134 /*===online-class end===*/ 135 /*===attention-me start===*/ 136 .middle .mid-con .con-right .attention-me{ 137 border-top:1px solid lightgrey; 138 margin-top:20px; 139 } 140 .middle .mid-con .con-right .attention-me h3{ 141 line-height: 60px; 142 color:black; 143 font-size: 18px; 144 padding:0 20px; 145 } 146 .middle .mid-con .con-right .attention-me .info{ 147 float:left; 148 } 149 .middle .mid-con .con-right .attention-me .info li{ 150 line-height:56px ; 151 } 152 .middle .mid-con .con-right .attention-me .info li i{ 153 font-size: 40px; 154 padding:0 20px; 155 } 156 .middle .mid-con .con-right .attention-me .attention{ 157 height:150px; 158 width:150px; 159 background:url("http://qpic.cn/c5WlGbF6e") no-repeat center/100%; 160 float:right; 161 margin-right:20px; 162 /*margin-top:20px;*/ 163 } 164 .middle .mid-con .con-right .attention-me .attention p{ 165 line-height: 32px; 166 margin-top:130px; 167 text-align: center; 168 } 169 /*===attention-me end===*/ 170 /*===hot-recommend start===*/ 171 .middle .mid-con .con-right .hot-recommend{ 172 border-top:1px solid lightgrey; 173 margin-top:20px; 174 } 175 .middle .mid-con .con-right .hot-recommend h3{ 176 line-height: 60px; 177 color:black; 178 font-size: 18px; 179 padding:0 20px; 180 } 181 .middle .mid-con .con-right .hot-recommend .hot-news li{ 182 border-bottom: 1px solid lightgrey; 183 padding:20px 0; 184 } 185 .middle .mid-con .con-right .hot-recommend .hot-news .news-con{ 186 width:200px; 187 height:75px; 188 /*background: blueviolet;*/ 189 padding:0 20px; 190 float:left; 191 } 192 .middle .mid-con .con-right .hot-recommend .hot-news .news-con p{ 193 width:200px; 194 height:50px; 195 line-height: 25px; 196 overflow: hidden;/*超出部分隐藏*/ 197 text-overflow: ellipsis;/*省略号*/ 198 display: -webkit-box; 199 -webkit-box-orient:vertical; 200 -webkit-line-clamp:2;/*指定省略号出现的行数*/ 201 } 202 .middle .mid-con .con-right .hot-recommend .hot-news .news-con .other{ 203 margin-top: 10px; 204 } 205 .middle .mid-con .con-right .hot-recommend .hot-news .news-con .other .hot{ 206 color:green; 207 float:left; 208 } 209 .middle .mid-con .con-right .hot-recommend .hot-news .news-con .other .time{ 210 float:right; 211 } 212 .middle .mid-con .con-right .hot-recommend .hot-news .pic{ 213 float:right; 214 width:100px; 215 height:75px; 216 margin-right:20px; 217 } 218 .middle .mid-con .con-right .hot-recommend .hot-news .pic img{ 219 width:100px; 220 height:75px; 221 } 222 /*===hot-recommend end===*/ 223 /*===con-right end===*/ 224 /*===middle end===*/
------------------------------------------------------------------------------------
<!--search.html代码，搜索网页-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>search</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/common.css"> 8 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 9 <link rel="stylesheet" href="css/search.css"> 10 </head> 11 <body> 12 <!--top star--> 13 <div class="top"> 14 <div class="top-con"> 15 <div class="logo"></div> 16 <ul class="menu"> 17 <li><a href="index.html">首页</a></li> 18 <li><a href="course.html">在线课堂</a></li> 19 <li><a href="javascript:void(0);">付费咨询</a></li> 20 <li class="show"><a href="javascript:void(0);" >搜索</a></li> 21 </ul> 22 <div class="reg-log"> 23 <i class="iconfont icon-user"></i> 24 <a href="regist.html">注册</a>/ 25 <a href="login.html">登录</a> 26 </div> 27 </div> 28 </div> 29 <!--top end--> 30 <!--middle star--> 31 <!--搜索页面中层div布局--> 32 <div class="middle"> 33 <div class="mid-con clearfix"> 34 <!--搜索网页中层左侧sougou搜索--> 35 <div class="con-left"> 36 <div class="form"> 37 <!--搜狗搜索功能--> 38 <form action="https://www.sogou.com/web" method="get"> 39 <input class="text" type="text" name="query" placeholder="请输入要查询的内容"> 40 <input class="btn" type="submit" value="搜索"> 41 </form> 42 </div> 43 </div> 44 <!--移植主页中层右侧--> 45 <div class="con-right"> 46 <div class="offline-class"> 47 <h3>线下课程<a href="JavaScript:void(0);">更多</a></h3> 48 <div class="pic"> 49 <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"> 50 <p>无压力对话外国Girl</p> 51 </div> 52 <ul class="status"> 53 <li><a href="javascript:void(0);"><span class="one">报名中</span><span>潭州python基础班</span></a> </li> 54 <li><a href="javascript:void(0);"><span class="two">已结束</span><span>潭州日语班</span></a></li> 55 </ul> 56 </div> 57 <div class="online-class"> 58 <h3>在线课堂<a href="javascript:void(0);">更多</a></h3> 59 <div class="pic"> 60 <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"> 61 </div> 62 </div> 63 <div class="attention-me clearfix"> 64 <h3>关注我</h3> 65 <ul class="info"> 66 <li><i class="iconfont icon-zhihu" style="color:blue;"></i>feifei</li> 67 <li><i class="iconfont icon-weibo" style="color:red;"></i>feifei</li> 68 <li><i class="iconfont icon-github" style="color:green;"></i>feifei</li> 69 </ul> 70 <div class="attention"> 71 <p>扫码关注</p> 72 </div> 73 </div> 74 <div class="hot-recommend"> 75 <h3>热门推荐</h3> 76 <ul class="hot-news"> 77 <li class="clearfix"> 78 <div class="news-con"> 79 <p>湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式</p> 80 <div class="other"> 81 <span class="hot">热点</span> 82 <span class="time">9月5日</span> 83 </div> 84 </div> 85 <div class="pic"> 86 <img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA"> 87 </div> 88 </li> 89 <li class="clearfix"> 90 <div class="news-con"> 91 <p>湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式</p> 92 <div class="other"> 93 <span class="hot">热点</span> 94 <span class="time">9月5日</span> 95 </div> 96 </div> 97 <div class="pic"> 98 <img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA"> 99 </div> 100 </li> 101 <li class="clearfix"> 102 <div class="news-con"> 103 <p>湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式</p> 104 <div class="other"> 105 <span class="hot">热点</span> 106 <span class="time">9月5日</span> 107 </div> 108 </div> 109 <div class="pic"> 110 <img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA"> 111 </div> 112 </li> 113 </ul> 114 </div> 115 </div> 116 </div> 117 </div> 118 <!--middle end--> 119 <!--bottom star--> 120 <div class="bottom"> 121 <div class="bot1"> 122 <div class="bot1-con"> 123 <div class="logo"></div> 124 <p class="link-con"> 125 <span class="link"> 126 <a href="javascript:void(0);">潭州官网</a> | 127 <a href="javascript:void(0);">SEO研究中心</a> | 128 <a href="javascript:void(0);">潭州商城</a> | 129 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 130 <a href="javascript:void(0);">安全中心</a> 131 </span> 132 <span class="about-me"> 133 关于我： 134 <i class="iconfont icon-weixin"> </i> 135 feifei 136 </span> 137 </p> 138 <p class="addr-con"> 139 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 140 <span class="tel"> 141 客服热线：4001-567-315 142 </span> 143 </p> 144 </div> 145 </div> 146 <div class="bot2"> 147 <div class="bot2-con"> 148 <p>Copyright © 2017 All Rights Reserved </p> 149 </div> 150 </div> 151 </div> 152 <!--bottom end--> 153 </body> 154 </html>
--------------
课堂内容
ok
---------------------------------------------------------
<!--regist.css 注册代码-->
1 /*====regist star====*/ 2 /*移植之前lesson3写的注册页面css*/ 3 .middle{ 4 height:800px; 5 width:100%; 6 /*border:1px solid #e8dede;*/ 7 /*background: #e8dede;*/ 8 } 9 .middle .contain{ 10 height:600px; 11 width:480px; 12 background: white; 13 margin:40px auto; 14 } 15 .middle .contain .top-contain{ 16 height:50px; 17 width:440px; 18 /*background: blueviolet;*/ 19 margin-left:20px; 20 border-bottom: 1px solid lightgray; 21 line-height: 50px; 22 } 23 .middle .contain .top-contain h3{ 24 float:left; 25 font-weight: normal; 26 font-size:20px; 27 border-bottom: 3px solid blueviolet; 28 /*以下实现下边框在盒子内*/ 29 height:50px; 30 box-sizing: border-box; 31 } 32 .middle .contain .top-contain a{ 33 float:right; 34 font-size:20px; 35 color:skyblue; 36 } 37 .middle .contain .regist-contain{ 38 margin-left:20px; 39 } 40 .middle .contain .regist-contain input{ 41 height:50px; 42 width:440px; 43 margin-top:20px; 44 font-size:20px; 45 text-indent: 1em; 46 border-radius: 5px;/*小圆角*/ 47 border:1px solid gray; 48 } 49 .middle .contain .regist-contain .inp{ 50 width:300px; 51 } 52 .middle .contain .regist-contain a{ 53 border:1px solid #52a6f7; 54 display: inline-block;/*具有行内元素的特点,但可以设置宽高*/ 55 height:50px; 56 width:130px; 57 margin-left:10px; 58 line-height:50px; 59 border-radius: 5px; 60 text-align: center; 61 } 62 .middle .contain .regist-contain .btn{ 63 background: #52a6f7; 64 } 65 /*====regist end====*/
---------------------------------------------------------
<!--login.css 登陆代码-->
1 /*===login start===*/ 2 .middle .mid-con .content{ 3 width:480px; 4 height:380px; 5 background: white; 6 margin:30px auto;/*上下外间距30px，auto左右自适应居中*/ 7 } 8 9 .middle .mid-con .content .top-contain{ 10 height:50px; 11 width:440px; 12 line-height: 50px; 13 margin-left:20px; 14 border-bottom:1px solid lightgrey; 15 /*margin-bottom: 20px;*/ 16 17 } 18 .middle .mid-con .content .top-contain h3{ 19 float:left;/*浮动在左边*/ 20 border-bottom: 3px solid blueviolet;/*边框底部3px紫实线*/ 21 box-sizing: border-box; 22 height:50px; 23 font-size:20px; 24 font-weight:normal; 25 } 26 .middle .mid-con .content .top-contain a{ 27 color:skyblue; 28 float: right;/*浮动在右边*/ 29 font-size:18px; 30 } 31 .middle .mid-con .content .login-con{ 32 margin-left:20px; 33 } 34 .middle .mid-con .content .login-con>input{ 35 height:50px; 36 width:440px; 37 margin-top:20px; 38 border-radius: 5px;/*矩形圆角*/ 39 border:1px solid gray; 40 font-size:18px; 41 text-indent: 1em; 42 } 43 .middle .mid-con .content .login-con .form-item{ 44 margin-top:20px; 45 /*height:50px;*/ 46 width:440px; 47 line-height: 50px; 48 } 49 .middle .mid-con .content .login-con .form-item input{ 50 float:left;/*浮动在左边*/ 51 height:50px; 52 line-height: 50px; 53 } 54 .middle .mid-con .content .login-con .form-item a{ 55 color:gray;/*灰色*/ 56 float:right;/*浮动在右边*/ 57 } 58 .middle .mid-con .content .login-con .btn{ 59 background: #52a6f7; 60 } 61 /*===login end===*/
---------------------------------------------------------
<!--regist.html 注册页面代码-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>regist</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/common.css"> 8 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 9 <!--导入regist.css--> 10 <link rel="stylesheet" href="css/regist.css"> 11 </head> 12 <body> 13 <!--top star--> 14 <div class="top"> 15 <div class="top-con"> 16 <div class="logo"></div> 17 <ul class="menu"> 18 <li><a href="index.html" target="_blank">首页</a></li> 19 <li><a href="course.html" target="_blank">在线课堂</a></li> 20 <li><a href="javascript:void(0);">付费咨询</a></li> 21 <li><a href="search.html" target="_blank">搜索</a></li> 22 </ul> 23 <div class="reg-log"> 24 <i class="iconfont icon-user"></i> 25 <a href="JavaScript:void(0);">注册</a>/ 26 <a href="login.html" target="_blank">登录</a> 27 </div> 28 </div> 29 </div> 30 <!--top end--> 31 <!--middle star--> 32 <div class="middle"> 33 <div class="mid-con"> 34 <!--移植之前lesson3写的注册页面--> 35 <div class="contain"> 36 <div class="top-contain"> 37 <h3>请注册</h3> 38 <a href="login.html">立即登录></a> 39 </div> 40 <div class="regist-contain"> 41 <form action="" method="post"> 42 <input type="text" placeholder="请输入手机号" name="phone"><br> 43 <input type="text" placeholder="请输入短信验证码" name="cookie" class="inp"><a href="javascript:void(0);">发送验证码</a><br> 44 <input type="text" placeholder="请输入用户名" name="usr"><br> 45 <input type="password" placeholder="请输入密码" name="psw"><br> 46 <input type="password" placeholder="请再次输入密码" name="pswD"><br> 47 <input type="text" placeholder="请输入图形验证码" name="cookie" class="inp"><a href="javascript:void(0);"><img>此处为图片</a><br> 48 <input type="submit" value="立即注册" class="btn"> 49 </form> 50 </div> 51 </div> 52 </div> 53 </div> 54 <!--middle end--> 55 <!--bottom star--> 56 <div class="bottom"> 57 <div class="bot1"> 58 <div class="bot1-con"> 59 <div class="logo"></div> 60 <p class="link-con"> 61 <span class="link"> 62 <a href="javascript:void(0);">潭州官网</a> | 63 <a href="javascript:void(0);">SEO研究中心</a> | 64 <a href="javascript:void(0);">潭州商城</a> | 65 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 66 <a href="javascript:void(0);">安全中心</a> 67 </span> 68 <span class="about-me"> 69 关于我： 70 <i class="iconfont icon-weixin"> </i> 71 feifei 72 </span> 73 </p> 74 <p class="addr-con"> 75 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 76 <span class="tel"> 77 客服热线：4001-567-315 78 </span> 79 </p> 80 </div> 81 </div> 82 <div class="bot2"> 83 <div class="bot2-con"> 84 <p>Copyright © 2017 All Rights Reserved </p> 85 </div> 86 </div> 87 </div> 88 <!--bottom end--> 89 </body> 90 </html>
---------------------------------------------------------
<!--login.html 登陆代码-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>login</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/common.css"> 8 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 9 <!--导入login.css--> 10 <link rel="stylesheet" href="css/login.css"> 11 </head> 12 <body> 13 <!--top star--> 14 <div class="top"> 15 <div class="top-con"> 16 <div class="logo"></div> 17 <ul class="menu"> 18 <li><a href="index.html">首页</a></li> 19 <li><a href="course.html">在线课堂</a></li> 20 <li><a href="javascript:void(0);">付费咨询</a></li> 21 <li><a href="search.html">搜索</a></li> 22 </ul> 23 <div class="reg-log"> 24 <i class="iconfont icon-user"></i> 25 <a href="regist.html">注册</a>/ 26 <a href="javascript:void(0);">登录</a> 27 </div> 28 </div> 29 </div> 30 <!--top end--> 31 <!--middle star--> 32 <div class="middle"> 33 <!--注册页面中间div代码--> 34 <div class="mid-con"> 35 <div class="content"> 36 <div class="top-contain"> 37 <h3>请登录</h3> 38 <a href="javascript:void(0);">立即注册></a> 39 </div> 40 <form action="" method="post" class="login-con"> 41 <input type="text" placeholder="请输入手机号" name="telephone"><br> 42 <input type="password" placeholder="请输入密码" name="psw"> 43 <div class="form-item clearfix"> 44 <input type="checkbox" name="rem">七天内自动登录 45 <a href="javascript:void(0);">忘记密码？</a> 46 </div> 47 <input type="submit" value="登录" class="btn"> 48 </form> 49 </div> 50 </div> 51 </div> 52 <!--middle end--> 53 <!--bottom star--> 54 <div class="bottom"> 55 <div class="bot1"> 56 <div class="bot1-con"> 57 <div class="logo"></div> 58 <p class="link-con"> 59 <span class="link"> 60 <a href="javascript:void(0);">潭州官网</a> | 61 <a href="javascript:void(0);">SEO研究中心</a> | 62 <a href="javascript:void(0);">潭州商城</a> | 63 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 64 <a href="javascript:void(0);">安全中心</a> 65 </span> 66 <span class="about-me"> 67 关于我： 68 <i class="iconfont icon-weixin"> </i> 69 feifei 70 </span> 71 </p> 72 <p class="addr-con"> 73 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 74 <span class="tel"> 75 客服热线：4001-567-315 76 </span> 77 </p> 78 </div> 79 </div> 80 <div class="bot2"> 81 <div class="bot2-con"> 82 <p>Copyright © 2017 All Rights Reserved </p> 83 </div> 84 </div> 85 </div> 86 <!--bottom end--> 87 </body> 88 </html>
---------------------------------------------------------
<!--index.css 主页代码-->
1 /*===middle star===*/ 2 /*===con-left star===*/ 3 .middle .mid-con .con-left{ 4 width: 800px; 5 /*height:800px;*/ 6 /*background: blueviolet;*/ 7 float:left; 8 /*left:0;*/ 9 } 10 11 /*======banner start======*/ 12 .middle .mid-con .con-left .banner{ 13 height:200px; 14 width:800px; 15 /*background: #52a6f7;*/ 16 margin:0 auto; 17 position:relative; 18 margin-top:20px; 19 } 20 .middle .mid-con .con-left .banner .pic img{ 21 height:200px; 22 width:800px; 23 position:absolute; 24 display:none; 25 } 26 .middle .mid-con .con-left .banner .pic img.show{ 27 display: block; 28 } 29 .middle .mid-con .con-left .banner .btn{ 30 font-size: 50px; 31 height:200px; 32 line-height:200px; 33 color:white; 34 font-weight: bold; 35 display: none; 36 } 37 .middle .mid-con .con-left .banner:hover .btn{ 38 display:block; 39 } 40 .middle .mid-con .con-left .banner .btn .left{ 41 position:absolute; 42 left:15px; 43 } 44 .middle .mid-con .con-left .banner .btn .right{ 45 position:absolute; 46 right:15px; 47 } 48 .middle .mid-con .con-left .banner .tab{ 49 /*border:1px solid red;*/ 50 /*height:17px;*/ 51 /*width:118px;*/ 52 position:absolute; 53 bottom:15px; 54 left:50%; 55 margin-left:-59px; 56 } 57 .middle .mid-con .con-left .banner .tab li{ 58 height:15px; 59 width:15px; 60 border: 1px solid white; 61 border-radius: 50%; 62 float:left; 63 margin-left:10px; 64 } 65 .middle .mid-con .con-left .banner .tab li:hover{ 66 background: white; 67 } 68 .middle .mid-con .con-left .banner .tab .active{ 69 background: white; 70 } 71 /*======banner end======*/ 72 /*======news star======*/ 73 .news{ 74 width:800px; 75 height:230px; 76 background: white; 77 border-bottom: 1px solid gainsboro; 78 } 79 .news .news-list{ 80 /*margin:20px auto;*/ 81 padding:20px; 82 } 83 .news .news-list li{ 84 width:245px; 85 height:190px; 86 background: greenyellow; 87 float:left; 88 margin-left:6px; 89 position:relative; 90 overflow: hidden;/*图片放大时不超出li范围*/ 91 } 92 .news .news-list li:hover img{ 93 transform: scale(1.2);/*鼠标移入，图片放大倍数*/ 94 } 95 .news .news-list li img{ 96 width:245px; 97 height:190px; 98 transition: all 800ms;/*图片放大速度*/ 99 } 100 .news .news-list li p{ 101 width:245px; 102 height:60px; 103 background: rgba(0,0,0,0.3); 104 color:white; 105 line-height:30px; 106 padding:0 10px; 107 box-sizing: border-box; 108 position:absolute; 109 bottom:0; 110 } 111 /*======news end======*/ 112 /*======menus star======*/ 113 .menus{ 114 width:760px; 115 height:460px; 116 background: white; 117 padding:20px 20px 0 20px; 118 } 119 120 .menus .title li{ 121 float: left; 122 padding:0 20px; 123 cursor: pointer; 124 } 125 .menus .title li:hover{ 126 /*border-left:3px solid blueviolet;*/ 127 text-shadow:1px 1px 2px #212121; 128 } 129 .menus .title li.active{ 130 border-left:3px solid blueviolet; 131 } 132 .menus .menus-con{ 133 /*width:760px;*/ 134 height:400px; 135 /*background: #52a6f7;*/ 136 position:relative; 137 margin-top: 30px; 138 } 139 .menus .menus-con li{ 140 position:absolute; 141 display: none; 142 } 143 .menus .menus-con li.show{ 144 display: block; 145 } 146 .menus .menus-con li .news{ 147 width:760px; 148 height:160px; 149 border-bottom: 1px solid gainsboro; 150 padding: 20px 0; 151 } 152 .menus .menus-con li .news .pic{ 153 float:left; 154 height:160px; 155 width:230px; 156 } 157 .menus .menus-con li .news .text{ 158 float:left; 159 height:160px; 160 width:500px; 161 /*background: blueviolet;*/ 162 margin-left: 20px; 163 } 164 .menus .menus-con li .news .text h4{ 165 font-size:22px; 166 font-weight:normal; 167 height:52px; 168 line-height: 26px; 169 } 170 .menus .menus-con li .news .text p{ 171 line-height: 22px; 172 color:lightgrey; 173 } 174 .menus .menus-con li .news .text .other{ 175 margin-top: 30px; 176 } 177 .menus .menus-con li .news .pic img{ 178 height:160px; 179 width:230px; 180 } 181 .menus .menus-con li .news .text .other .hot{ 182 color:green; 183 float:left; 184 } 185 .menus .menus-con li .news .text .other .time, 186 .menus .menus-con li .news .text .other .author { 187 float:right; 188 margin-right:10px; 189 } 190 /*======menus end======*/ 191 /*======a star======*/ 192 .con-left a{ 193 display: block; 194 height:40px; 195 width:400px; 196 margin:0 auto; 197 background: #52a6f7; 198 line-height: 50px; 199 text-align: center; 200 } 201 /*======a end======*/ 202 /*===con-left end===*/ 203 /*===con-right start===*/ 204 /*===offline-class start===*/ 205 .middle .mid-con .con-right{ 206 width: 360px; 207 /*height:800px;*/ 208 background: white; 209 /*position:absolute;*/ 210 /*right:0;*/ 211 float:right;/*在右边浮动*/ 212 margin-top:20px; 213 } 214 .middle .mid-con .con-right .offline-class h3{ 215 line-height: 60px; 216 color:black; 217 font-size: 18px; 218 padding:0 20px; 219 } 220 .middle .mid-con .con-right .offline-class h3 a{ 221 font-size:14px; 222 color:skyblue; 223 float:right; 224 } 225 .middle .mid-con .con-right .offline-class .pic{ 226 width:320px; 227 height:210px; 228 margin:0 auto; 229 position:relative;/*父级相对定位，固定*/ 230 } 231 .middle .mid-con .con-right .offline-class .pic img{ 232 width:320px; 233 height:210px; 234 } 235 .middle .mid-con .con-right .offline-class .pic p{ 236 position:absolute;/*子级绝对定位，脱离文档，浮动*/ 237 bottom:0; 238 height:40px; 239 width:320px; 240 background: rgba(0,0,0,0.3);/*透明度*/ 241 color:white; 242 text-align:center;/*文本居中*/ 243 line-height: 40px;/*统一高度*/ 244 } 245 .middle .mid-con .con-right .offline-class .status{ 246 /*height:200px;*/ 247 width:320px; 248 /*background: #52a6f7;*/ 249 padding:0 20px; 250 } 251 .middle .mid-con .con-right .offline-class .status li{ 252 height:40px; 253 line-height: 40px; 254 } 255 .middle .mid-con .con-right .offline-class .status li span{ 256 color:black; 257 font-size:15px; 258 } 259 .middle .mid-con .con-right .offline-class .status li .one{ 260 color:skyblue;/*字体天蓝色*/ 261 border:1px solid skyblue;/*矩形边框1px天蓝色实线*/ 262 margin-right:20px; 263 } 264 .middle .mid-con .con-right .offline-class .status li .two{ 265 color:grey; 266 border:1px solid grey; 267 margin-right: 20px; 268 } 269 /*===offline-class end===*/ 270 /*===online-class start===*/ 271 .middle .mid-con .con-right .online-class{ 272 border-top:1px solid lightgrey;/*边框上边1px亮灰色实线*/ 273 } 274 .middle .mid-con .con-right .online-class h3{ 275 line-height: 60px; 276 color:black; 277 font-size: 18px; 278 padding:0 20px; 279 } 280 .middle .mid-con .con-right .online-class h3 a{ 281 font-size:14px; 282 color:skyblue; 283 float:right;/*浮动在右边*/ 284 } 285 .middle .mid-con .con-right .online-class .pic{ 286 width:320px; 287 height:210px; 288 margin:0 auto; 289 position:relative;/*父级相对定位*/ 290 } 291 .middle .mid-con .con-right .online-class .pic img{ 292 width:320px; 293 height:210px; 294 } 295 /*===online-class end===*/ 296 /*===attention-me start===*/ 297 .middle .mid-con .con-right .attention-me{ 298 border-top:1px solid lightgrey; 299 margin-top:20px; 300 } 301 .middle .mid-con .con-right .attention-me h3{ 302 line-height: 60px; 303 color:black; 304 font-size: 18px; 305 padding:0 20px; 306 } 307 .middle .mid-con .con-right .attention-me .info{ 308 float:left;/*浮动在左边*/ 309 } 310 .middle .mid-con .con-right .attention-me .info li{ 311 line-height:56px ; 312 } 313 .middle .mid-con .con-right .attention-me .info li i{ 314 font-size: 40px; 315 padding:0 20px; 316 } 317 .middle .mid-con .con-right .attention-me .attention{ 318 height:150px; 319 width:150px; 320 /*背景图片，不平铺，位置，*/ 321 background:url("http://qpic.cn/c5WlGbF6e") no-repeat center/100%; 322 float:right;/*在右边浮动*/ 323 margin-right:20px; 324 /*margin-top:20px;*/ 325 } 326 .middle .mid-con .con-right .attention-me .attention p{ 327 line-height: 32px; 328 margin-top:130px; 329 text-align: center;/*文本居中*/ 330 } 331 /*===attention-me end===*/ 332 /*===hot-recommend start===*/ 333 .middle .mid-con .con-right .hot-recommend{ 334 border-top:1px solid lightgrey; 335 margin-top:20px; 336 } 337 .middle .mid-con .con-right .hot-recommend h3{ 338 line-height: 60px; 339 color:black; 340 font-size: 18px; 341 padding:0 20px; 342 } 343 .middle .mid-con .con-right .hot-recommend .hot-news li{ 344 border-bottom: 1px solid lightgrey; 345 padding:20px 0; 346 } 347 .middle .mid-con .con-right .hot-recommend .hot-news .news-con{ 348 width:200px; 349 height:75px; 350 /*background: blueviolet;*/ 351 padding:0 20px; 352 float:left;/*在左边浮动*/ 353 } 354 .middle .mid-con .con-right .hot-recommend .hot-news .news-con p{ 355 width:200px; 356 height:50px; 357 line-height: 25px; 358 overflow: hidden;/*超出部分隐藏*/ 359 text-overflow: ellipsis;/*省略号*/ 360 display: -webkit-box; 361 -webkit-box-orient:vertical; 362 -webkit-line-clamp:2;/*指定省略号出现的行数*/ 363 } 364 .middle .mid-con .con-right .hot-recommend .hot-news .news-con .other{ 365 margin-top: 10px; 366 } 367 .middle .mid-con .con-right .hot-recommend .hot-news .news-con .other .hot{ 368 color:green;/*字体绿色*/ 369 float:left;/*浮动在左边*/ 370 } 371 .middle .mid-con .con-right .hot-recommend .hot-news .news-con .other .time{ 372 float:right;/*浮动在右边*/ 373 } 374 .middle .mid-con .con-right .hot-recommend .hot-news .pic{ 375 float:right;/*浮动在右边*/ 376 width:100px; 377 height:75px; 378 margin-right:20px; 379 } 380 .middle .mid-con .con-right .hot-recommend .hot-news .pic img{ 381 width:100px;/*图片大小*/ 382 height:75px; 383 } 384 /*===hot-recommend end===*/ 385 /*===con-right end===*/ 386 /*===middle end===*/
---------------------------------------------------------
<!--index.html 主页代码-->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/common.css"> 8 <link rel="stylesheet" href="http://at.alicdn.com/t/font_821133_8551rqcfn3e.css"> 9 <link rel="stylesheet" href="css/index.css"> 10 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> 11 <script src="jq/index.js"></script> 12 </head> 13 <body> 14 <!--top star--> 15 <div class="top"> 16 <div class="top-con"> 17 <div class="logo"></div> 18 <ul class="menu"> 19 <li class="show"><a href="javascript:void(0);">首页</a></li> 20 <li><a href="course.html">在线课堂</a></li> 21 <li><a href="javascript:void(0);">付费咨询</a></li> 22 <li><a href="search.html">搜索</a></li> 23 </ul> 24 <div class="reg-log"> 25 <i class="iconfont icon-user"></i> 26 <a href="regist.html">注册</a>/ 27 <a href="login.html">登录</a> 28 </div> 29 </div> 30 </div> 31 <!--top end--> 32 <!--middle star--> 33 <div class="middle"> 34 <div class="mid-con clearfix"> 35 <!--主页中间左侧div--> 36 <div class="con-left"> 37 <div class="banner"> 38 <ul class="pic"> 39 <li><img src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg" 40 ></li> 41 <li><img src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg" 42 ></li> 43 <li><img src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg" 44 ></li> 45 <li><img src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"></li> 46 </ul> 47 <ul class="btn"> 48 <li class="left"><</li> 49 <li class="right">></li> 50 </ul> 51 <ul class="tab"> 52 <li></li> 53 <li></li> 54 <li></li> 55 <li></li> 56 </ul> 57 </div> 58 <div class="news"> 59 <ul class="news-list"> 60 <li> 61 <img src="https://static-image.xfz.cn/1529218165_112.jpg-website.news.list"> 62 <p>社交电商，终究还是逃不脱阿里的势力范围</p> 63 </li> 64 <li> 65 <img src="https://res.shiguangkey.com//file/201808/18/20180818150813307974385.jpg!mall_course_a"> 66 <p> 67 <span>每天十分钟，迅速掌握日语学习小技巧</span> 68 <span style="color:greenyellow;font-weight: bold;float:right;">免费</span> 69 </p> 70 </li> 71 <li> 72 <img src="https://static-image.xfz.cn/1529218165_112.jpg-website.news.list"> 73 <p>社交电商，终究还是逃不脱阿里的势力范围</p> 74 </li> 75 </ul> 76 </div> 77 <div class="menus"> 78 <ul class="title clearfix"> 79 <li class="active">最新资讯</li> 80 <li>热点</li> 81 <li>深度报道</li> 82 <li>案例</li> 83 </ul> 84 <ul class="menus-con"> 85 <li class="show"> 86 <div class="news clearfix"> 87 <div class="pic"> 88 <img src="https://res.shiguangkey.com//file/201806/01/20180601202006677835073.png"> 89 </div> 90 <div class="text"> 91 <h4>争议中的拼多多，面对的不只是舆论危机</h4> 92 <p>对于拼多多而言，当下面临的最大问题，并不是什么舆论危机，舆论危机只是结果，不是原因。 否则，应对危机的对策就要跑偏了.</p> 93 <div class="other"> 94 <span class="hot">热点</span> 95 <span class="time">1分钟</span> 96 <span class="author">霏霏</span> 97 </div> 98 </div> 99 </div> 100 <div class="news clearfix"> 101 <div class="pic"> 102 <img src="https://res.shiguangkey.com//file/201806/01/20180601202006677835073.png"> 103 </div> 104 <div class="text"> 105 <h4>争议中的拼多多，面对的不只是舆论危机</h4> 106 <p>对于拼多多而言，当下面临的最大问题，并不是什么舆论危机，舆论危机只是结果，不是原因。 否则，应对危机的对策就要跑偏了.</p> 107 <div class="other"> 108 <span class="hot">热点</span> 109 <span class="time">1分钟</span> 110 <span class="author">霏霏</span> 111 </div> 112 </div> 113 </div> 114 </li> 115 <li>content2</li> 116 <li>content3</li> 117 <li>content4</li> 118 </ul> 119 </div> 120 <a href="javascript:void(0);">加载更多</a> 121 </div> 122 <!--主页中间右侧div--> 123 <div class="con-right"> 124 <div class="offline-class"> 125 <h3>线下课程<a href="JavaScript:void(0);">更多</a></h3> 126 <div class="pic"> 127 <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"> 128 <p>无压力对话外国Girl</p> 129 </div> 130 <ul class="status"> 131 <li><a href="javascript:void(0);"><span class="one">报名中</span><span>潭州python基础班</span></a> </li> 132 <li><a href="javascript:void(0);"><span class="two">已结束</span><span>潭州日语班</span></a></li> 133 </ul> 134 </div> 135 <div class="online-class"> 136 <h3>在线课堂<a href="javascript:void(0);">更多</a></h3> 137 <div class="pic"> 138 <img src="https://res.shiguangkey.com//file/201804/26/20180426142628123364782.jpg"> 139 </div> 140 </div> 141 <div class="attention-me clearfix"> 142 <h3>关注我</h3> 143 <ul class="info"> 144 <!--阿里图标--> 145 <li><i class="iconfont icon-zhihu" style="color:blue;"></i>feifei</li> 146 <li><i class="iconfont icon-weibo" style="color:red;"></i>feifei</li> 147 <li><i class="iconfont icon-github" style="color:green;"></i>feifei</li> 148 </ul> 149 <div class="attention"> 150 <p>扫码关注</p> 151 </div> 152 </div> 153 <div class="hot-recommend"> 154 <h3>热门推荐</h3> 155 <ul class="hot-news"> 156 <li class="clearfix"> 157 <div class="news-con"> 158 <p>湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式</p> 159 <div class="other"> 160 <span class="hot">热点</span> 161 <span class="time">9月5日</span> 162 </div> 163 </div> 164 <div class="pic"> 165 <img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA"> 166 </div> 167 </li> 168 <li class="clearfix"> 169 <div class="news-con"> 170 <p>湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式</p> 171 <div class="other"> 172 <span class="hot">热点</span> 173 <span class="time">9月5日</span> 174 </div> 175 </div> 176 <div class="pic"> 177 <img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA"> 178 </div> 179 </li> 180 <li class="clearfix"> 181 <div class="news-con"> 182 <p>湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式</p> 183 <div class="other"> 184 <span class="hot">热点</span> 185 <span class="time">9月5日</span> 186 </div> 187 </div> 188 <div class="pic"> 189 <img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA"> 190 </div> 191 </li> 192 </ul> 193 </div> 194 </div> 195 </div> 196 </div> 197 <!--middle end--> 198 <!--bottom star--> 199 <div class="bottom"> 200 <div class="bot1"> 201 <div class="bot1-con"> 202 <div class="logo"></div> 203 <p class="link-con"> 204 <span class="link"> 205 <a href="javascript:void(0);">潭州官网</a> | 206 <a href="javascript:void(0);">SEO研究中心</a> | 207 <a href="javascript:void(0);">潭州商城</a> | 208 <a href="javascript:void(0);">潭州天猫旗舰店</a> | 209 <a href="javascript:void(0);">安全中心</a> 210 </span> 211 <span class="about-me"> 212 关于我： 213 <i class="iconfont icon-weixin"> </i> 214 feifei 215 </span> 216 </p> 217 <p class="addr-con"> 218 <span class="addr">版权所有：湖南时光钥匙网络有限公司</span> 219 <span class="tel"> 220 客服热线：4001-567-315 221 </span> 222 </p> 223 </div> 224 </div> 225 <div class="bot2"> 226 <div class="bot2-con"> 227 <p>Copyright © 2017 All Rights Reserved </p> 228 </div> 229 </div> 230 </div> 231 <!--bottom end--> 232 233 </body> 234 </html>
------------------------------------------------------
<!--reset.css 公共重置代码-->
1 /*====regist star====*/ 2 /*移植之前lesson3写的注册页面css*/ 3 .middle{ 4 height:800px; 5 width:100%; 6 /*border:1px solid #e8dede;*/ 7 /*background: #e8dede;*/ 8 } 9 .middle .contain{ 10 height:600px; 11 width:480px; 12 background: white; 13 margin:40px auto; 14 } 15 .middle .contain .top-contain{ 16 height:50px; 17 width:440px; 18 /*background: blueviolet;*/ 19 margin-left:20px; 20 border-bottom: 1px solid lightgray; 21 line-height: 50px; 22 } 23 .middle .contain .top-contain h3{ 24 float:left; 25 font-weight: normal; 26 font-size:20px; 27 border-bottom: 3px solid blueviolet; 28 /*以下实现下边框在盒子内*/ 29 height:50px; 30 box-sizing: border-box; 31 } 32 .middle .contain .top-contain a{ 33 float:right; 34 font-size:20px; 35 color:skyblue; 36 } 37 .middle .contain .regist-contain{ 38 margin-left:20px; 39 } 40 .middle .contain .regist-contain input{ 41 height:50px; 42 width:440px; 43 margin-top:20px; 44 font-size:20px; 45 text-indent: 1em; 46 border-radius: 5px;/*小圆角*/ 47 border:1px solid gray; 48 } 49 .middle .contain .regist-contain .inp{ 50 width:300px; 51 } 52 .middle .contain .regist-contain a{ 53 border:1px solid #52a6f7; 54 display: inline-block;/*具有行内元素的特点,但可以设置宽高*/ 55 height:50px; 56 width:130px; 57 margin-left:10px; 58 line-height:50px; 59 border-radius: 5px; 60 text-align: center; 61 } 62 .middle .contain .regist-contain .btn{ 63 background: #52a6f7; 64 } 65 /*====regist end====*/
-------------------------------------------------------------
<!--conmon.css代码 公共布局-->
1 /*top star*/ 2 .top{ 3 width:100%; 4 height:65px; 5 background: #141414; 6 } 7 .top .top-con{ 8 width:1200px; 9 height:65px; 10 background: #141414; 11 margin:0 auto; 12 text-align: center; 13 line-height: 65px; 14 color:white; 15 } 16 .top .top-con .logo{ 17 height:100%; 18 width:235px; 19 background: url("https://www.python.org/static/img/python-logo.png") no-repeat 0 -6px; 20 float:left; 21 margin-right:60px; 22 } 23 .top .top-con .menu li{ 24 float:left; 25 margin-left:20px; 26 /*让下划线出现在盒子内部*/ 27 height:65px; 28 box-sizing: border-box; 29 } 30 .top .top-con .menu li a{ 31 display: inline-block; 32 height:65px; 33 width:60px; 34 color:inherit; 35 font-size: 15px; 36 } 37 .top .top-con .menu li.show{ 38 border-bottom:4px solid greenyellow; 39 } 40 .top .top-con .menu li:hover{ 41 border-bottom:4px solid greenyellow; 42 } 43 .top .top-con .reg-log{ 44 float:right; 45 /*color:inherit;*/ 46 font-size:18px; 47 } 48 .top .top-con .reg-log a{ 49 color:inherit; 50 } 51 .top .top-con .reg-log i{ 52 font-size: 30px; 53 vertical-align: middle; 54 } 55 /*top end*/ 56 /*middle star*/ 57 .middle{ 58 width:100%; 59 /*height: 800px;*/ 60 /*position:relative;*/ 61 } 62 .middle .mid-con{ 63 width:1200px; 64 /*height:800px;*/ 65 /*background: #52a6f7;*/ 66 margin:0 auto; 67 } 68 /*middle end*/ 69 /*bottom star*/ 70 .bottom{ 71 color:white; 72 } 73 .bottom .bot1{ 74 width:100%; 75 height: 120px; 76 background: grey; 77 } 78 .bottom .bot1 .bot1-con{ 79 width:1200px; 80 height:120px; 81 background: grey; 82 margin:0 auto; 83 } 84 .bottom .bot1 .bot1-con .logo{ 85 background: url("https://www.python.org/static/img/python-logo.png") no-repeat 0 15px; 86 width:248px; 87 height:100%; 88 float:left; 89 } 90 .bottom .bot1 .bot1-con .link-con{ 91 padding-top:30px; 92 } 93 .bottom .bot1 .bot1-con p{ 94 line-height: 30px; 95 text-align: center; 96 } 97 .bottom .bot1 .bot1-con .link-con .link a{ 98 /*padding:0 5px;*/ 99 } 100 .bottom .bot1 .bot1-con .link-con .link, 101 .bottom .bot1 .bot1-con .addr-con .addr{ 102 margin-right:20px; 103 } 104 .bottom .bot2{ 105 width:100%; 106 height:60px; 107 background-color: #141414; 108 } 109 .bottom .bot2 .bot2-con{ 110 width:1200px; 111 height:60px; 112 background: #141414; 113 margin:0 auto; 114 line-height: 60px; 115 } 116 .bottom .bot2 .bot2-con p{ 117 text-align: center; 118 color:inherit; 119 } 120 /*bottom end*/
-------------------------------------------------------------
<!--index.js 动画代码-->
1 $(function(){ 2 //获取操作对象 3 var $pic=$(".banner .pic img")// 图片对象 4 var $btn=$(".banner .btn li")//左右箭头 5 var $tab=$(".banner .tab li")//小圆点 6 var len=$pic.length; 7 var $banner =$(".banner");//获取轮播图所在div对象 8 9 //初始化 10 $pic.eq(0).addClass("show"); 11 $tab.eq(0).addClass("active"); 12 13 //小圆点点击 14 var n_index=0;//定义一个变量指向当前显示的序列 15 16 $tab.click(function(){ 17 // console.log($(this).index());//直接获取当前点击按钮的序列 18 var num=$(this).index(); 19 if(num!=n_index){ 20 change($pic,$tab,num); 21 } 22 }); 23 24 //图片和小圆点切换的变化函数 25 function change($obj1,$obj2,num){ 26 $obj1.eq(n_index).fadeOut(2000); 27 $obj2.eq(n_index).removeClass("active"); 28 n_index = num; 29 $obj1.eq(n_index).fadeIn(2000); 30 $obj2.eq(n_index).addClass("active"); 31 } 32 33 //左右箭头 34 $btn.click(function(){ 35 var num=n_index; 36 // console.log($(this).index());//0:left/1:right 37 if($(this).index()){//1:right 38 num++; 39 // console.log(num); 40 //var a=[1,2,3,4,5,6,7,8,9,10,11,12]===>12341234 41 //==>1%4=1,2%4=2,3%4=3,4%4=0,5%4=1,6%4=2... 42 num%=len;// 43 }else{//0:left 44 num--; 45 if(num<0){ 46 num=len-1; 47 } 48 } 49 change($pic,$tab,num); 50 }); 51 52 //自动轮播 53 var SI=setInterval(f,2000); 54 function f() { 55 var num=n_index; 56 num++; 57 num%=len; 58 change($pic,$tab,num); 59 } 60 61 //hover(mouseenter,mouseleaver) 62 $banner.hover(function(){console.log("ok");clearInterval(SI);},function (){SI=setInterval(f,2000);}); 63 }); 64 65 $(function () { 66 //菜单栏 67 var $title=$(".menus .title li"); 68 var $content=$(".menus .menus-con li"); 69 // console.log($title); 70 var n_index=0; 71 $title.click(function () { 72 num=$(this).index(); 73 change($content,$title,num); 74 }); 75 //变化函数 76 function change($obj1,$obj2,num){ 77 $obj1.eq(n_index).fadeOut(2000); 78 $obj2.eq(n_index).removeClass("active"); 79 n_index = num; 80 $obj1.eq(n_index).fadeIn(2000); 81 $obj2.eq(n_index).addClass("active"); 82 } 83 });
-----------------------
总结：
页面效果
