&&&&&&&&&&&
目录结构：
|—css\ reset.css、common.css、index.css、login.css、reg.css
|—js\ jquery-3.3.1.js、index.js、login.js、reg.js
|—index.html、course.html、pay.html、search.html、login.html、reg.html
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&首页&/title&
&link rel="stylesheet" href="css/reset.css"&
&link rel="stylesheet" href="css/common.css"&
&link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css"&
&link rel="stylesheet" href="css/index.css"&
&script src="js/jquery-3.3.1.js"&&/script&
11 &/head&
&!--header start--&
&div class="header"&
&div class="header-contain"&
&div class="logo"&&a href="javascript:void(0);" class="logo-title"&&/a&&/div&
&ul class="menu"&
&li class="active"&&a href="javascript:void(0);"&首&&页&/a&&/li&
&li&&a href="course.html"&在线课堂&/a&&/li&
&li&&a href="pay.html"&付费课程&/a&&/li&
&li&&a href="search.html"&搜&&索&/a&&/li&
&div class="login-box"&
&i class="iconfont icon-user"&&/i&
&span&&a href="reg.html"&注册&/a&&/span&&/
&span&&a href="login.html"&登录&/a&&/span&
&!--header end--&
&!--middle start--&
&div class="main"&
&div class="main-box clearfix"&
&div class="main-contain"&
&!--轮播图--&
&div class="banner"&
&ul class="pic"&
&li&&a href="javascript:void(0)"&&img src="https://res.shiguangkey.com//file//.jpg" alt="图片1"&&/a&&/li&
&li&&a href="javascript:void(0)"&&img src="https://res.shiguangkey.com//file//.jpg" alt="图片2"&&/a&&/li&
&li&&a href="javascript:void(0)"&&img src="https://res.shiguangkey.com//file//.jpg" alt="图片3"&&/a&&/li&
&li&&a href="javascript:void(0)"&&img src="https://res.shiguangkey.com//file//.jpg" alt="图片4"&&/a&&/li&
&ul class="tab"&
&ul class="btn"&
&!--&li class="left"&&&/li&--&
&!--&li class="right"&&&/li&--&
&li class="left"&&i class="iconfont icon-BAI-zuojiantou"&&/i&&/li&
&li class="right"&&i class="iconfont icon-BAI-youjiantou"&&/i&&/li&
&!--三个框--&
&div class="content"&
&ul class="recommend-news"&
&a href="javascript:void(0)"&&img src="https://res.shiguangkey.com//file//.png!mall_course_a" alt="图片1"&&/a&
&p&&a href="https://www.shiguangkey.com/course/830"&SEO优化，最新快速排名技巧解答分享&/a&&/p&
&a href="javascript:void(0)"&&img src="https://res.shiguangkey.com//file//.png!mall_course_c" alt="图片2"&&/a&
&p&&a href="https://www.shiguangkey.com/course/1767"&web前端零基础入门&/a&&/p&
&a href="javascript:void(0)"&&img src="https://res.shiguangkey.com//file//.png!mall_course_c" alt="图片3"&&/a&
&p&&a href="https://www.shiguangkey.com/course/2191"&韩语小白变大神&/a&&/p&
&!--新闻--&
&div class="news clearfix"&
&ul class="nav clearfix"&
&li class="active"&语言&/li&
&li&前端&/li&
&li&Python&/li&
&li&C++&/li&
&ul class="content"&
&div class="clearfix"&
&div class="left"&
&img src="https://res.shiguangkey.com//file//.png!mall_course_a" alt=""&
&div class="right"&
&p&&span&可里：&/span&大学韩国语专业 亚篮锦标赛韩语随同翻译 3年线上韩语教育经验&/p&
&p&&span&小美：&/span&大学韩语专业 韩语TOPIK6级 三年线上教学经验&/p&
&p&&span&鸭梨：&/span&大学韩国语专业 2年线上韩语教学经验 多年韩国漫画翻译经验&/p&
&p&&span&可可：&/span&韩语随同翻译 牙科医疗反映 丰富口译经验 多年爱豆站姐翻译经验&/p&
&div class="clearfix"&
&div class="left"&
&img src="https://res.shiguangkey.com//file//.png!mall_course_a" alt=""&
&div class="right"&
<span style="color: #0
&p&&span&Kayee：&/span&口语水平优秀 语言表达能力强 教学经验丰富 对学员有耐心&/p&
<span style="color: #1
&p&&span&Celin：&/span&课堂活泼有趣 注重和学员互动 轻轻松松帮大家理解英语知识&/p&
<span style="color: #2
&p&&span&Molly：&/span&商务英语专业 对学员耐心 喜欢发掘不同类型的英语应用&/p&
<span style="color: #3
&p&&span&Zoey：&/span&口语水平优秀 语言表达能力强 注重培养学员的口语能力和书写能力&/p&
<span style="color: #4
<span style="color: #5
<span style="color: #6
<span style="color: #7
<span style="color: #8
&div class="clearfix"&
<span style="color: #9
&div class="left"&
<span style="color: #0
&img src="https://res.shiguangkey.com//file//.png!mall_course_a" alt=""&
<span style="color: #1
<span style="color: #2
&div class="right"&
<span style="color: #3
&p&&span&PC+移动开发班&/span&&/p&
<span style="color: #4
&p&html + css&/p&
<span style="color: #5
&p&&span&移动网站开发内容&/span&&/p&
<span style="color: #6
&p&html5 + css3&/p&
<span style="color: #7
<span style="color: #8
<span style="color: #9
&div class="clearfix"&
<span style="color: #0
&div class="left"&
<span style="color: #1
&img src="https://res.shiguangkey.com//file//.jpg!mall_course_a" alt=""&
<span style="color: #2
<span style="color: #3
&div class="right"&
<span style="color: #4
&p&&span&javascript&/span&&/p&
<span style="color: #5
&p&操作DOM 面向对象 Jquery ECMAScript6&/p&
<span style="color: #6
&p&&span&前端框架&/span&&/p&
<span style="color: #7
&p&vue Angular React&/p&
<span style="color: #8
<span style="color: #9
<span style="color: #0
<span style="color: #1
<span style="color: #2
&div class="clearfix"&
<span style="color: #3
&div class="left"&
<span style="color: #4
&img src="https://res.shiguangkey.com//file//.png!mall_course_a" alt=""&
<span style="color: #5
<span style="color: #6
&div class="right"&
<span style="color: #7
&p&&span&基础阶段&/span&&/p&
<span style="color: #8
&p&python基础 python进阶 web前端&/p&
<span style="color: #9
&p&&span&实战阶段&/span&&/p&
<span style="color: #0
&p&框架 项目&/p&
<span style="color: #1
<span style="color: #2
<span style="color: #3
&div class="clearfix"&
<span style="color: #4
&div class="left"&
<span style="color: #5
&img src="https://res.shiguangkey.com//file//.png!mall_course_a" alt=""&
<span style="color: #6
<span style="color: #7
&div class="right"&
<span style="color: #8
&p&&span&Python数据分析与机器学习&/span&&/p&
<span style="color: #9
&p&numpy pandas matplotlib seaborn&/p&
<span style="color: #0
&p&K邻近算法 线性回归与逻辑回归算法&/p&
<span style="color: #1
&p&决策树算法 集成算法与随机森林 贝叶斯算法 支持向量机&/p&
<span style="color: #2
<span style="color: #3
<span style="color: #4
<span style="color: #5
<span style="color: #6
&div class="clearfix"&
<span style="color: #7
&div class="left"&
<span style="color: #8
&img src="https://res.shiguangkey.com//file//.jpg!mall_course_a" alt=""&
<span style="color: #9
<span style="color: #0
&div class="right"&
<span style="color: #1
&p&&span&c++课程体系&/span&&/p&
<span style="color: #2
&p&C语言核心 C++语言核心&/p&
<span style="color: #3
&p&Windows核心编程 Linux核心编程&/p&
<span style="color: #4
&p&QT核心编程 服务器核心编程&/p&
<span style="color: #5
<span style="color: #6
<span style="color: #7
&div class="clearfix"&
<span style="color: #8
&div class="left"&
<span style="color: #9
&img src="https://res.shiguangkey.com//file//.png!mall_course_a" alt=""&
<span style="color: #0
<span style="color: #1
&div class="right"&
<span style="color: #2
&p&&span&罗伯特:&/span&十年项目开发经验 精通C/C++、Windows游戏编程&/p&
<span style="color: #3
&p&&span&九夏老师:&/span&七年企业级项目实战经验，擅长Windows/Linux平台&/p&
<span style="color: #4
&p&&span&Danny:&/span&八年大型项目开发经验，精通C/C++编程语言，擅长WindowsAPI&/p&
<span style="color: #5
&p&&span&强森老师:&/span&五年企业级IT项目开发经验，三年线下教学经验&/p&
<span style="color: #6
<span style="color: #7
<span style="color: #8
<span style="color: #9
<span style="color: #0
<span style="color: #1
&div class="more"&加载更多&/div&
<span style="color: #2
<span style="color: #3
&div class="aside"&
<span style="color: #4
&div class="course"&
<span style="color: #5
&p&公开课&span&更多&/span&&/p&
<span style="color: #6
&div&&img src="https://res.shiguangkey.com/file//.png!mall_course_b" alt=""&&/div&
<span style="color: #7
&p&Python 零基础入门到项目实战开发&/p&
<span style="color: #8
<span style="color: #9
<span style="color: #0
&div class="course"&
<span style="color: #1
&p&VIP课&span&更多&/span&&/p&
<span style="color: #2
&div&&img src="https://res.shiguangkey.com//file//.jpg!mall_course_a" alt=""&&/div&
<span style="color: #3
&p&Python基础&/p&
<span style="color: #4
&p&Python进阶&/p&
<span style="color: #5
&p&Python web&/p&
<span style="color: #6
&p&框架(Django Tornado)&/p&
<span style="color: #7
&p&项目实战&/p&
<span style="color: #8
<span style="color: #9
<span style="color: #0
&div class="about"&
<span style="color: #1
&h2&关注我&/h2&
<span style="color: #2
&p&&i class="iconfont icon-weixin21" style="color:"&&/i&&微信号&/p&
<span style="color: #3
&p&&i class="iconfont icon-qq1" style="color:"&&/i&&QQ号&/p&
<span style="color: #4
&p&&i class="iconfont icon-weibo21" style="color:"&&/i&&微博号&span&扫描关注&/span&&/p&
<span style="color: #5
<span style="color: #6
<span style="color: #7
&div class="recommend"&
<span style="color: #8
&h2&热门推荐&/h2&
<span style="color: #9
&div class="hot clearfix"&
<span style="color: #0
&div class="left"&
<span style="color: #1
&p class="upper"&湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式&/p&
<span style="color: #2
&p class="lower"&热点&span&8月16日&/span&&/p&
<span style="color: #3
<span style="color: #4
&div class="right"&
<span style="color: #5
&img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA" alt=""&
<span style="color: #6
<span style="color: #7
<span style="color: #8
&div class="hot clearfix"&
<span style="color: #9
&div class="left"&
<span style="color: #0
&p class="upper"&湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式&/p&
<span style="color: #1
&p class="lower"&热点&span&8月16日&/span&&/p&
<span style="color: #2
<span style="color: #3
&div class="right"&
<span style="color: #4
&img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA" alt=""&
<span style="color: #5
<span style="color: #6
<span style="color: #7
&div class="hot clearfix"&
<span style="color: #8
&div class="left"&
<span style="color: #9
&p class="upper"&湖南信息技术类中高职衔接培训班来访潭州，探索互联网+教育新模式&/p&
<span style="color: #0
&p class="lower"&热点&span&8月16日&/span&&/p&
<span style="color: #1
<span style="color: #2
&div class="right"&
<span style="color: #3
&img src="http://a1.qpic.cn/psb?/V13Pc4324LdOaJ/EaLrCUqB.T14wh*zo.6jalz0OlnGr7k*Ka5MzNoWnsY!/b/dAgBAAAAAAAA" alt=""&
<span style="color: #4
<span style="color: #5
<span style="color: #6
<span style="color: #7
<span style="color: #8
<span style="color: #9
<span style="color: #0
&!--middle end--&
<span style="color: #1
<span style="color: #2
&!--footer start--&
<span style="color: #3
&div class="footer"&
<span style="color: #4
&div class="footer-content"&
<span style="color: #5
<span style="color: #6
&span&&a href="javascript:void(0);"&关于python&/a&&/span& |
<span style="color: #7
&span&&a href="javascript:void(0);"&python开发&/a&&/span& |
<span style="color: #8
&span&&a href="javascript:void(0);"&数据分析&/a&&/span&&&
<span style="color: #9
&span&关于我：&a href="javascript:void(0);"&&i class="iconfont icon-weixin2"&&/i&&你猜&/a&&/span&
<span style="color: #0
<span style="color: #1
<span style="color: #2
&span&&a href="javascript:void(0);"&地址:湖南省长沙市岳麓区&&&/a&&/span&
<span style="color: #3
&span&&a href="javascript:void(0);"&联系方式:400-&/a&&/span&
<span style="color: #4
<span style="color: #5
<span style="color: #6
&div class="footer-bottom"&
<span style="color: #7
&p class="bottom-content"& Copyright & 2015 - 2018 潭州Python学院. All Rights Reserved&/p&
<span style="color: #8
<span style="color: #9
<span style="color: #0
&!--footer end--&
<span style="color: #1
&script src="js/index.js"&&/script&
<span style="color: #2 &/body&
<span style="color: #3 &/html&
index.html
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&在线课堂&/title&
&link rel="stylesheet" href="css/reset.css"&
&link rel="stylesheet" href="css/common.css"&
&link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css"&
<span style="color: # &body&
<span style="color: #
&!--header start--&
<span style="color: #
&div class="header"&
<span style="color: #
&div class="header-contain"&
<span style="color: #
&div class="logo"&&a href="javascript:void(0);" class="logo-title"&&/a&&/div&
<span style="color: #
&ul class="menu"&
<span style="color: #
&li&&a href="index.html"&首&&页&/a&&/li&
<span style="color: #
&li class="active"&&a href="javascript:void(0);"&在线课堂&/a&&/li&
<span style="color: #
&li&&a href="pay.html"&付费课程&/a&&/li&
<span style="color: #
&li&&a href="search.html"&搜&&索&/a&&/li&
<span style="color: #
<span style="color: #
&div class="login-box"&
<span style="color: #
&i class="iconfont icon-user"&&/i&
<span style="color: #
&span&&a href="reg.html"&注册&/a&&/span&&/
<span style="color: #
&span&&a href="login.html"&登录&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&!--header end--&
<span style="color: #
<span style="color: #
&!--footer start--&
<span style="color: #
&div class="footer"&
<span style="color: #
&div class="footer-content"&
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&关于python&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&python开发&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&数据分析&/a&&/span&&&
<span style="color: #
&span&关于我：&a href="javascript:void(0);"&&i class="iconfont icon-weixin2"&&/i&&你猜&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&地址:湖南省长沙市岳麓区&&&/a&&/span&
<span style="color: #
&span&&a href="javascript:void(0);"&联系方式:400-&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&div class="footer-bottom"&
<span style="color: #
&p class="bottom-content"& Copyright & 2015 - 2018 潭州Python学院. All Rights Reserved&/p&
<span style="color: #
<span style="color: #
<span style="color: #
&!--footer end--&
<span style="color: # &/body&
<span style="color: # &/html&
course.html
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&付费课程&/title&
&link rel="stylesheet" href="css/reset.css"&
&link rel="stylesheet" href="css/common.css"&
&link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css"&
<span style="color: # &body&
<span style="color: #
&!--header start--&
<span style="color: #
&div class="header"&
<span style="color: #
&div class="header-contain"&
<span style="color: #
&div class="logo"&&a href="javascript:void(0);" class="logo-title"&&/a&&/div&
<span style="color: #
&ul class="menu"&
<span style="color: #
&li&&a href="index.html"&首&&页&/a&&/li&
<span style="color: #
&li&&a href="course.html"&在线课堂&/a&&/li&
<span style="color: #
&li class="active"&&a href="javascript:void(0);"&付费课程&/a&&/li&
<span style="color: #
&li&&a href="search.html"&搜&&索&/a&&/li&
<span style="color: #
<span style="color: #
&div class="login-box"&
<span style="color: #
&i class="iconfont icon-user"&&/i&
<span style="color: #
&span&&a href="reg.html"&注册&/a&&/span&&/
<span style="color: #
&span&&a href="login.html"&登录&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&!--header end--&
<span style="color: #
<span style="color: #
&!--footer start--&
<span style="color: #
&div class="footer"&
<span style="color: #
&div class="footer-content"&
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&关于python&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&python开发&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&数据分析&/a&&/span&&&
<span style="color: #
&span&关于我：&a href="javascript:void(0);"&&i class="iconfont icon-weixin2"&&/i&&你猜&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&地址:湖南省长沙市岳麓区&&&/a&&/span&
<span style="color: #
&span&&a href="javascript:void(0);"&联系方式:400-&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&div class="footer-bottom"&
<span style="color: #
&p class="bottom-content"& Copyright & 2015 - 2018 潭州Python学院. All Rights Reserved&/p&
<span style="color: #
<span style="color: #
<span style="color: #
&!--footer end--&
<span style="color: # &/body&
<span style="color: # &/html&
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&搜索&/title&
&link rel="stylesheet" href="css/reset.css"&
&link rel="stylesheet" href="css/common.css"&
&link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css"&
<span style="color: # &body&
<span style="color: #
&!--header start--&
<span style="color: #
&div class="header"&
<span style="color: #
&div class="header-contain"&
<span style="color: #
&div class="logo"&&a href="javascript:void(0);" class="logo-title"&&/a&&/div&
<span style="color: #
&ul class="menu"&
<span style="color: #
&li&&a href="index.html"&首&&页&/a&&/li&
<span style="color: #
&li&&a href="course.html"&在线课堂&/a&&/li&
<span style="color: #
&li&&a href="pay.html"&付费课程&/a&&/li&
<span style="color: #
&li class="active"&&a href="javascript:void(0);"&搜&&索&/a&&/li&
<span style="color: #
<span style="color: #
&div class="login-box"&
<span style="color: #
&i class="iconfont icon-user"&&/i&
<span style="color: #
&span&&a href="reg.html"&注册&/a&&/span&&/
<span style="color: #
&span&&a href="login.html"&登录&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&!--header end--&
<span style="color: #
<span style="color: #
&!--footer start--&
<span style="color: #
&div class="footer"&
<span style="color: #
&div class="footer-content"&
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&关于python&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&python开发&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&数据分析&/a&&/span&&&
<span style="color: #
&span&关于我：&a href="javascript:void(0);"&&i class="iconfont icon-weixin2"&&/i&&你猜&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&地址:湖南省长沙市岳麓区&&&/a&&/span&
<span style="color: #
&span&&a href="javascript:void(0);"&联系方式:400-&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&div class="footer-bottom"&
<span style="color: #
&p class="bottom-content"& Copyright & 2015 - 2018 潭州Python学院. All Rights Reserved&/p&
<span style="color: #
<span style="color: #
<span style="color: #
&!--footer end--&
<span style="color: # &/body&
<span style="color: # &/html&
search.html
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&登录&/title&
&link rel="stylesheet" href="css/reset.css"&
&link rel="stylesheet" href="css/common.css"&
&link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css"&
&link rel="stylesheet" href="css/login.css"&
<span style="color: #
&script src="js/jquery-3.3.1.js"&&/script&
<span style="color: # &/head&
<span style="color: # &body&
<span style="color: #
&!--header start--&
<span style="color: #
&div class="header"&
<span style="color: #
&div class="header-contain"&
<span style="color: #
&div class="logo"&&a href="javascript:void(0);" class="logo-title"&&/a&&/div&
<span style="color: #
&ul class="menu"&
<span style="color: #
&li&&a href="index.html"&首&&页&/a&&/li&
<span style="color: #
&li&&a href="course.html"&在线课堂&/a&&/li&
<span style="color: #
&li&&a href="pay.html"&付费课程&/a&&/li&
<span style="color: #
&li class="active"&&a href="javascript:void(0);"&搜&&索&/a&&/li&
<span style="color: #
<span style="color: #
&div class="login-box"&
<span style="color: #
&i class="iconfont icon-user"&&/i&
<span style="color: #
&span&&a href="reg.html"&注册&/a&&/span&&/
<span style="color: #
&span&&a href="login.html"&登录&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&!--header end--&
<span style="color: #
<span style="color: #
&!--reg start--&
<span style="color: #
&div class="page"&
<span style="color: #
&div class="main"&
<span style="color: #
&div class="top clearfix"&
<span style="color: #
&h2&请登录&/h2&
<span style="color: #
&a href="reg.html"&立即注册&&&/a&
<span style="color: #
<span style="color: #
&form action=""&
<span style="color: #
&div class="inp"&
<span style="color: #
&input type="text" name="mobile" placeholder="请输入手机号"&
<span style="color: #
<span style="color: #
&div class="inp"&
<span style="color: #
&input type="password" name="pw" placeholder="请输入密码"&
<span style="color: #
<span style="color: #
&div class="addition clearfix"&
<span style="color: #
&input type="checkbox" name="auto" value="auto"&七天内自动登录
<span style="color: #
&a href="javascript:void(0)"&忘记密码？&/a&
<span style="color: #
<span style="color: #
&input type="submit" value="登录"&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&!--reg end--&
<span style="color: #
<span style="color: #
&!--footer start--&
<span style="color: #
&div class="footer"&
<span style="color: #
&div class="footer-content"&
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&关于python&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&python开发&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&数据分析&/a&&/span&&&
<span style="color: #
&span&关于我：&a href="javascript:void(0);"&&i class="iconfont icon-weixin2"&&/i&&你猜&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&地址:湖南省长沙市岳麓区&&&/a&&/span&
<span style="color: #
&span&&a href="javascript:void(0);"&联系方式:400-&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&div class="footer-bottom"&
<span style="color: #
&p class="bottom-content"& Copyright & 2015 - 2018 潭州Python学院. All Rights Reserved&/p&
<span style="color: #
<span style="color: #
<span style="color: #
&!--footer end--&
<span style="color: #
&script src="js/login.js"&&/script&
<span style="color: # &/body&
<span style="color: # &/html&
login.html
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&注册&/title&
&link rel="stylesheet" href="css/reset.css"&
&link rel="stylesheet" href="css/common.css"&
&link rel="stylesheet" href="https://at.alicdn.com/t/font_791124_pbr311n1o2.css"&
&link rel="stylesheet" href="css/reg.css"&
<span style="color: #
&script src="js/jquery-3.3.1.js"&&/script&
<span style="color: # &/head&
<span style="color: # &body&
<span style="color: #
&!--header start--&
<span style="color: #
&div class="header"&
<span style="color: #
&div class="header-contain"&
<span style="color: #
&div class="logo"&&a href="javascript:void(0);" class="logo-title"&&/a&&/div&
<span style="color: #
&ul class="menu"&
<span style="color: #
&li&&a href="index.html"&首&&页&/a&&/li&
<span style="color: #
&li&&a href="course.html"&在线课堂&/a&&/li&
<span style="color: #
&li&&a href="pay.html"&付费课程&/a&&/li&
<span style="color: #
&li class="active"&&a href="javascript:void(0);"&搜&&索&/a&&/li&
<span style="color: #
<span style="color: #
&div class="login-box"&
<span style="color: #
&i class="iconfont icon-user"&&/i&
<span style="color: #
&span&&a href="reg.html"&注册&/a&&/span&&/
<span style="color: #
&span&&a href="login.html"&登录&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&!--header end--&
<span style="color: #
<span style="color: #
&!--reg start--&
<span style="color: #
&div class="page"&
<span style="color: #
&div class="main"&
<span style="color: #
&div class="top clearfix"&
<span style="color: #
&h2&请注册&/h2&
<span style="color: #
&a href="login.html"&立即登录&&&/a&
<span style="color: #
<span style="color: #
&form action=""&
<span style="color: #
&div class="inp"&
<span style="color: #
&input type="text" name="mobile" placeholder="请输入手机号"&
<span style="color: #
<span style="color: #
&div class="inp clearfix"&
<span style="color: #
&input class="left" type="text" name="mobile-code" placeholder="请输入手机验证码"&
<span style="color: #
&a class="sendcode" href="javascript:void(0)"&发送验证码&/a&
<span style="color: #
<span style="color: #
&div class="inp"&
<span style="color: #
&input type="text" name="user" placeholder="请输入用户名"&
<span style="color: #
<span style="color: #
&div class="inp"&
<span style="color: #
&input type="password" name="pw" placeholder="请输入密码"&
<span style="color: #
<span style="color: #
&div class="inp"&
<span style="color: #
&input type="password" name="pw2" placeholder="请再次输入密码"&
<span style="color: #
<span style="color: #
&div class="inp"&
<span style="color: #
&input class="left" type="text" name="pic-code" placeholder="请输入图形验证码"&
<span style="color: #
&a href="javascript:void(0)"&图形验证码&/a&
<span style="color: #
<span style="color: #
&input type="submit" value="注册"&
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
&!--reg end--&
<span style="color: #
<span style="color: #
&!--footer start--&
<span style="color: #
&div class="footer"&
<span style="color: #
&div class="footer-content"&
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&关于python&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&python开发&/a&&/span& |
<span style="color: #
&span&&a href="javascript:void(0);"&数据分析&/a&&/span&&&
<span style="color: #
&span&关于我：&a href="javascript:void(0);"&&i class="iconfont icon-weixin2"&&/i&&你猜&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&span&&a href="javascript:void(0);"&地址:湖南省长沙市岳麓区&&&/a&&/span&
<span style="color: #
&span&&a href="javascript:void(0);"&联系方式:400-&/a&&/span&
<span style="color: #
<span style="color: #
<span style="color: #
&div class="footer-bottom"&
<span style="color: #
&p class="bottom-content"& Copyright & 2015 - 2018 潭州Python学院. All Rights Reserved&/p&
<span style="color: #
<span style="color: #
<span style="color: #
&!--footer end--&
<span style="color: #
&script src="js/reg.js"&&/script&
<span style="color: # &/body&
<span style="color: # &/html&
1 /* http://meyerweb.com/eric/tools/css/reset/
License: none (public domain)
6 html, body, div, span, applet, object, iframe,
7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 a, abbr, acronym, address, big, cite, code,
9 del, dfn, em, img, ins, kbd, q, s, samp,
<span style="color: # small, strike, strong, sub, sup, tt, var,
<span style="color: # b, u, i, center,
<span style="color: # dl, dt, dd, ol, ul, li,
<span style="color: # fieldset, form, label, legend,
<span style="color: # table, caption, tbody, tfoot, thead, tr, th, td,
<span style="color: # article, aside, canvas, details, embed,
<span style="color: # figure, figcaption, footer, header, hgroup,
<span style="color: # menu, nav, output, ruby, section, summary,
<span style="color: # time, mark, audio, video {
<span style="color: #
margin: 0;
<span style="color: #
padding: 0;
<span style="color: #
border: 0;
<span style="color: #
font-size: 100%;
<span style="color: #
font: inherit;
<span style="color: #
vertical-align: baseline;
<span style="color: # }
<span style="color: # /* HTML5 display-role reset for older browsers */
<span style="color: # article, aside, details, figcaption, figure,
<span style="color: # footer, header, hgroup, menu, nav, section {
<span style="color: #
display: block;
<span style="color: # }
<span style="color: # body {
<span style="color: #
line-height: 1;
<span style="color: # }
<span style="color: # ol, ul {
<span style="color: #
list-style: none;
<span style="color: # }
<span style="color: # blockquote, q {
<span style="color: #
quotes: none;
<span style="color: # }
<span style="color: # blockquote:before, blockquote:after,
<span style="color: # q:before, q:after {
<span style="color: #
content: '';
<span style="color: #
content: none;
<span style="color: # }
<span style="color: # table {
<span style="color: #
border-collapse: collapse;
<span style="color: #
border-spacing: 0;
<span style="color: # }
<span style="color: #
<span style="color: # /*以下为自己新增样式*/
<span style="color: # a{
<span style="color: #
/*去下划线*/
<span style="color: #
text-decoration: none;
<span style="color: #
/*不变色,继承父级字体颜色*/
<span style="color: #
color: inherit;
<span style="color: # }
<span style="color: # /*清除塌陷*/
<span style="color: # .clearfix::after{
<span style="color: #
display: block;
<span style="color: #
/*左右都没有浮动元素*/
<span style="color: #
clear: both;
<span style="color: #
content: "";
<span style="color: # }
1 .header{
width: 100%;
height: 69px;
background: black;
color: white;
7 .header .header-contain{
width: 1200px;
height: 69px;
<span style="color: #
margin: auto;
<span style="color: #
line-height: 69px;
<span style="color: #
background: black;
<span style="color: # }
<span style="color: # .header .header-contain .logo{
<span style="color: #
float: left;
<span style="color: #
width: 260px;
<span style="color: #
height: 100%;
<span style="color: # }
<span style="color: # .header .header-contain .logo .logo-title{
<span style="color: #
display: block;
<span style="color: #
width: 100%;
<span style="color: #
height: 100%;
<span style="color: #
background: url("https://www.python.org/static/img/python-logo.png") no-repeat;
<span style="color: # }
<span style="color: # .header .header-contain .menu{
<span style="color: #
margin-left: 50px;
<span style="color: #
/*不设float,margin-left不生效*/
<span style="color: #
float: left;
<span style="color: # }
<span style="color: # .header .header-contain .menu li{
<span style="color: #
/*不设width 保持最大行宽,设了width 鼠标移动时li位置会改变*/
<span style="color: #
width: 120px;
<span style="color: #
height: 69px;
<span style="color: #
float: left;
<span style="color: #
text-align: center;
<span style="color: #
/*padding: 0 20*/
<span style="color: # }
<span style="color: # .header .header-contain .menu li:hover {
<span style="color: #
border-bottom: 5px solid greenyellow;
<span style="color: #
box-sizing: border-box;
<span style="color: # }
<span style="color: # .header .header-contain .menu .active{
<span style="color: #
border-bottom: 5px solid greenyellow;
<span style="color: #
box-sizing: border-box;
<span style="color: # }
<span style="color: # .header .header-contain .login-box{
<span style="color: #
float: right;
<span style="color: # }
<span style="color: # .header .header-contain .login-box i{
<span style="color: #
font-size: 25px;
<span style="color: #
color: greenyellow;
<span style="color: #
vertical-align: -3px;
<span style="color: # }
<span style="color: #
<span style="color: # .footer{
<span style="color: #
width: 100%;
<span style="color: #
background: rgb(83,94,103);
<span style="color: # }
<span style="color: # .footer .footer-content{
<span style="color: #
width: 1200px;
<span style="color: #
margin: auto;
<span style="color: #
text-align: center;
<span style="color: #
color: #c1c1c1;
<span style="color: #
<span style="color: #
line-height: 35px;
<span style="color: #
padding: 20px 0px;
<span style="color: #
background: rgb(83,94,103) url("https://www.python.org/static/img/python-logo.png") no-repeat 50px 15px;
<span style="color: # }
<span style="color: # .footer .footer-content i{
<span style="color: #
font-size: 25px;
<span style="color: #
vertical-align: -2px;
<span style="color: #
color: yellowgreen;
<span style="color: # }
<span style="color: # .footer .footer-bottom{
<span style="color: #
width: 100%;
<span style="color: #
background: black;
<span style="color: # }
<span style="color: # .footer .footer-bottom .bottom-content{
<span style="color: #
width: 1200px;
<span style="color: #
background: black;
<span style="color: #
line-height: 50px;
<span style="color: #
margin: auto;
<span style="color: #
text-align: center;
<span style="color: #
color: #c1c1c1;
<span style="color: # }
common.css
background: antiquewhite;
width: 100%;
padding: 30px 0px;
8 .main .main-box{
width: 1200px;
/*height: 2000*/
background: antiquewhite;
margin: auto;
14 .main .main-box .main-contain{
float: left;
width: 800px;
19 /*banner轮播图*/
20 .main .main-box .main-contain .banner{
width: 800px;
height: 200px;
position: relative;
background: aquamarine;
26 .main .main-box .main-contain .banner .pic li{
/*不加absolute,fadein/out切换时会占用下一行空间*/
position: absolute;
display: none;
31 .main .main-box .main-contain .banner .pic li a img{
width: 800px;
height: 200px;
35 .main .main-box .main-contain .banner .tab{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -78px;
41 .main .main-box .main-contain .banner .tab li{
width: 15px;
height: 15px;
border: 2px solid white;
border-radius: 50%;
float: left;
margin: 0 10px;
cursor: pointer;
50 .main .main-box .main-contain .banner .tab .active {
background: white;
53 .main .main-box .main-contain .banner .tab li:hover{
background: white;
56 .main .main-box .main-contain .banner .btn li{
position: absolute;
height: 200px;
line-height: 200px;
cursor: pointer;
display: none;
63 .main .main-box .main-contain .banner .btn li i{
font-size: 50px;
color: white;
67 .main .main-box .main-contain .banner .btn .left{
left: 10px;
70 .main .main-box .main-contain .banner .btn .right{
right: 10px;
73 .main .main-box .main-contain .banner:hover .btn li{
display: block;
77 /*三个框*/
78 .main .main-box .main-contain .content{
width: 800px;
background: lightgrey;
font-size: 14px;
color: black;
84 .main .main-box .main-contain .content .recommend-news{
display: flex;
justify-content: space-between;
/*如果设置margin,由于oontent没有border而无法显示上边距*/
padding: 20px 15px 10px 15px;
90 .main .main-box .main-contain .content .recommend-news li a img{
width: 250px;
height: 180px;
/*<span style="color: #s慢动作 结合transform: scale*/
transition: all 1s;
96 .main .main-box .main-contain .content .recommend-news li p{
text-align: center;
margin-top: 10px;
margin-bottom: 5px;
<span style="color: #0 }
<span style="color: #1 /*overflow必须设置大小,因此不能设置在li，否则影响p*/
<span style="color: #2 /*设在a就需要置block*/
<span style="color: #3 /*&是子代选择器,不会影响p里面的a*/
<span style="color: #4 .main .main-box .main-contain .content .recommend-news li&a{
<span style="color: #5
display: block;
<span style="color: #6
width: 250px;
<span style="color: #7
height: 180px;
<span style="color: #8
overflow: hidden;
<span style="color: #9 }
<span style="color: #0 .main .main-box .main-contain .content .recommend-news li:hover a img{
<span style="color: #1
transform: scale(1.2);
<span style="color: #2 }
<span style="color: #3
<span style="color: #4 /*新闻*/
<span style="color: #5 .main .main-box .main-contain .news .nav{
<span style="color: #6
width: 800px;
<span style="color: #7
height: 50px;
<span style="color: #8
line-height: 50px;
<span style="color: #9
background: darkgrey;
<span style="color: #0 }
<span style="color: #1 .main .main-box .main-contain .news .nav li{
<span style="color: #2
float: left;
<span style="color: #3
margin-right: 30px;
<span style="color: #4
width: 80px;
<span style="color: #5
height: 50px;
<span style="color: #6
text-align: center;
<span style="color: #7
cursor: pointer;
<span style="color: #8 }
<span style="color: #9 .main .main-box .main-contain .news .nav .active{
<span style="color: #0
border-bottom: 4px solid yellow;
<span style="color: #1
box-sizing: border-box;
<span style="color: #2 }
<span style="color: #3 .main .main-box .main-contain .news .content{
<span style="color: #4
width: 800px;
<span style="color: #5
background: lightgrey;
<span style="color: #6 }
<span style="color: #7 .main .main-box .main-contain .news .content .left{
<span style="color: #8
float: left;
<span style="color: #9
width: 260px;
<span style="color: #0
height: 200px;
<span style="color: #1
margin: 10px 10px 10px 10px;
<span style="color: #2
overflow: hidden;
<span style="color: #3
border-radius: 20px;
<span style="color: #4 }
<span style="color: #5 .main .main-box .main-contain .news .content .right{
<span style="color: #6
float: left;
<span style="color: #7
margin: 10px 0 10px 0;
<span style="color: #8
line-height: 50px;
<span style="color: #9
font-size: 15px;
<span style="color: #0 }
<span style="color: #1 .main .main-box .main-contain .news .content .right span{
<span style="color: #2
color: red;
<span style="color: #3 }
<span style="color: #4 .main .main-box .main-contain .news .content li{
<span style="color: #5
display: none;
<span style="color: #6 }
<span style="color: #7 .main .main-box .main-contain .news .content li .left img{
<span style="color: #8
width: 260px;
<span style="color: #9
height: 200px;
<span style="color: #0
transition: all 1s;
<span style="color: #1 }
<span style="color: #2 .main .main-box .main-contain .news .content li .left:hover img{
<span style="color: #3
transform: scale(1.2);
<span style="color: #4 }
<span style="color: #5 .main .main-box .main-contain .more{
<span style="color: #6
width: 400px;
<span style="color: #7
height: 50px;
<span style="color: #8
line-height: 50px;
<span style="color: #9
text-align: center;
<span style="color: #0
border-radius: 20px;
<span style="color: #1
background: darkgrey;
<span style="color: #2
margin: 20px auto;
<span style="color: #3
color: blue;
<span style="color: #4
cursor: pointer;
<span style="color: #5 }
<span style="color: #6
<span style="color: #7 /*右边*/
<span style="color: #8 .main .main-box .aside{
<span style="color: #9
float: right;
<span style="color: #0
width: 360px;
<span style="color: #1
/*height: 800*/
<span style="color: #2
background: lightgrey;
<span style="color: #3 }
<span style="color: #4 .main .main-box .aside .course div img{
<span style="color: #5
width: 320px;
<span style="color: #6
/*height: 192*/
<span style="color: #7
margin-left: 20px;
<span style="color: #8 }
<span style="color: #9 .main .main-box .aside .course p{
<span style="color: #0
width: 360px;
<span style="color: #1
height: 30px;
<span style="color: #2
line-height: 30px;
<span style="color: #3
text-indent: 20px;
<span style="color: #4 }
<span style="color: #5 .main .main-box .aside .course p span{
<span style="color: #6
float: right;
<span style="color: #7
margin-right: 20px;
<span style="color: #8
color: blue;
<span style="color: #9 }
<span style="color: #0 .main .main-box .aside .about{
<span style="color: #1
width: 360px;
<span style="color: #2
background: url("http://onj3s3zfw.bkt.clouddn.com/o_1cggt7lvb1ovi1l1g1ucu8nl1spc7.jpg") no-repeat 170px 20px/100px 100px;
<span style="color: #3 }
<span style="color: #4 .main .main-box .aside .about h2{
<span style="color: #5
text-indent: 2em;
<span style="color: #6
margin-top: 20px;
<span style="color: #7
margin-bottom: 20px;
<span style="color: #8 }
<span style="color: #9 .main .main-box .aside .about p{
<span style="color: #0
width: 360px;
<span style="color: #1
line-height: 40px;
<span style="color: #2
text-indent: 20px;
<span style="color: #3 }
<span style="color: #4 .main .main-box .aside .about p i{
<span style="color: #5
font-size: 24px;
<span style="color: #6
vertical-align: -3px;
<span style="color: #7 }
<span style="color: #8 .main .main-box .aside .about p span{
<span style="color: #9
float: right;
<span style="color: #0
margin-right: 108px;
<span style="color: #1
font-size: 95%;
<span style="color: #2 }
<span style="color: #3 .main .main-box .aside .recommend h2{
<span style="color: #4
text-indent: 2em;
<span style="color: #5
margin-top: 20px;
<span style="color: #6
margin-bottom: 20px;
<span style="color: #7 }
<span style="color: #8 .main .main-box .aside .recommend .hot{
<span style="color: #9
margin-bottom: 10px;
<span style="color: #0 }
<span style="color: #1 .main .main-box .aside .recommend .hot .left{
<span style="color: #2
float: left;
<span style="color: #3
width: 200px;
<span style="color: #4
height: 90px;
<span style="color: #5
margin-left: 20px;
<span style="color: #6 }
<span style="color: #7 .main .main-box .aside .recommend .hot .right{
<span style="color: #8
float: right;
<span style="color: #9
margin-right: 20px;
<span style="color: #0
margin-top: 10px;
<span style="color: #1 }
<span style="color: #2 .main .main-box .aside .recommend .hot .left .upper{
<span style="color: #3
width: 200px;
<span style="color: #4
height: 56px;
<span style="color: #5
line-height: 28px;
<span style="color: #6
overflow: hidden;
<span style="color: #7
margin-bottom: 10px;
<span style="color: #8
text-overflow: ellipsis;
<span style="color: #9
display: -webkit-box;
<span style="color: #0
-webkit-box-orient: vertical;
<span style="color: #1
-webkit-line-clamp: 2;
<span style="color: #2 }
<span style="color: #3 .main .main-box .aside .recommend .hot .left .lower{
<span style="color: #4
width: 200px;
<span style="color: #5
font-size: 95%;
<span style="color: #6
margin-bottom: 10px;
<span style="color: #7 }
<span style="color: #8 .main .main-box .aside .recommend .hot .left .lower span{
<span style="color: #9
float: right;
<span style="color: #0
margin-right: 10px;
<span style="color: #1 }
<span style="color: #2 .main .main-box .aside .recommend .hot img{
<span style="color: #3
width: 110px;
<span style="color: #4
height: 70px;
<span style="color: #5 }
background: antiquewhite;
width: 100%;
height: 500px;
background: antiquewhite;
9 .page .main{
<span style="color: #
width: 440px;
<span style="color: #
background: white;
<span style="color: #
border: 1px solid darkgray;
<span style="color: #
margin: 30px auto;
<span style="color: #
border-radius: 5px;
<span style="color: # }
<span style="color: # .page .main .top{
<span style="color: #
width: 400px;
<span style="color: #
height: 40px;
<span style="color: #
line-height: 40px;
<span style="color: #
margin: 5px auto;
<span style="color: #
border-bottom: 1px solid darkgray;
<span style="color: # }
<span style="color: # .page .main .top h2{
<span style="color: #
height: 40px;
<span style="color: #
border-bottom: 3px solid blue;
<span style="color: #
box-sizing: border-box;
<span style="color: #
float: left;
<span style="color: # }
<span style="color: # .page .main .top a{
<span style="color: #
display: block;
<span style="color: #
height: 40px;
<span style="color: #
float: right;
<span style="color: #
color: blue;
<span style="color: # }
<span style="color: #
<span style="color: # .page .main form{
<span style="color: #
width: 400px;
<span style="color: #
margin: auto;
<span style="color: # }
<span style="color: # .page .main form .inp{
<span style="color: #
width: 400px;
<span style="color: #
height: 40px;
<span style="color: #
line-height: 40px;
<span style="color: #
margin: 15px auto;
<span style="color: # }
<span style="color: # .page .main form .inp input{
<span style="color: #
width: 400px;
<span style="color: #
height: 40px;
<span style="color: #
border: 1px solid darkgray;
<span style="color: #
box-sizing: border-box;
<span style="color: #
border-radius: 5px;
<span style="color: #
text-indent: 1em;
<span style="color: #
font-size: 16px;
<span style="color: # }
<span style="color: # .page .main form .addition{
<span style="color: #
width: 400px;
<span style="color: #
height: 30px;
<span style="color: #
font-size: 14px;
<span style="color: # }
<span style="color: # .page .main form .addition input[type=checkbox]{
<span style="color: #
width: 15px;
<span style="color: #
height: 15px;
<span style="color: #
float: left;
<span style="color: #
color: white;
<span style="color: #
vertical-align: -300px;
<span style="color: # }
<span style="color: # .page .main form div a{
<span style="color: #
float: right;
<span style="color: #
color: blue;
<span style="color: #
font-size: 15px;
<span style="color: # }
<span style="color: # .page .main form input[type=submit]{
<span style="color: #
width: 400px;
<span style="color: #
height: 40px;
<span style="color: #
margin: auto;
<span style="color: #
margin-bottom: 20px;
<span style="color: #
line-height: 40px;
<span style="color: #
text-align: center;
<span style="color: #
border-radius: 5px;
<span style="color: #
font-size: 18px;
<span style="color: #
background: lightskyblue;
<span style="color: #
border-style: none;
<span style="color: #
color: white;
<span style="color: #
cursor: pointer;
<span style="color: # }
<span style="color: # /*当内容较短时,让footer固定在底部,不会跟着登录框后面 横在页面中间*/
<span style="color: # .footer{
<span style="color: #
position: fixed;
<span style="color: #
<span style="color: #
bottom: 0;
<span style="color: # }
background: antiquewhite;
width: 100%;
height: 800px;
background: antiquewhite;
9 .page .main{
<span style="color: #
width: 440px;
<span style="color: #
background: white;
<span style="color: #
border: 1px solid darkgray;
<span style="color: #
margin: 30px auto;
<span style="color: #
border-radius: 5px;
<span style="color: # }
<span style="color: # .page .main .top{
<span style="color: #
width: 400px;
<span style="color: #
height: 40px;
<span style="color: #
line-height: 40px;
<span style="color: #
margin: 5px auto;
<span style="color: #
border-bottom: 1px solid darkgray;
<span style="color: # }
<span style="color: # .page .main .top h2{
<span style="color: #
height: 40px;
<span style="color: #
border-bottom: 3px solid blue;
<span style="color: #
box-sizing: border-box;
<span style="color: #
float: left;
<span style="color: # }
<span style="color: # .page .main .top a{
<span style="color: #
display: block;
<span style="color: #
height: 40px;
<span style="color: #
float: right;
<span style="color: #
color: blue;
<span style="color: # }
<span style="color: #
<span style="color: # .page .main form{
<span style="color: #
width: 400px;
<span style="color: #
margin: auto;
<span style="color: # }
<span style="color: # .page .main form .inp{
<span style="color: #
width: 400px;
<span style="color: #
height: 40px;
<span style="color: #
line-height: 40px;
<span style="color: #
margin: 15px auto;
<span style="color: # }
<span style="color: # .page .main form .inp input{
<span style="color: #
width: 400px;
<span style="color: #
height: 40px;
<span style="color: #
border: 1px solid darkgray;
<span style="color: #
box-sizing: border-box;
<span style="color: #
border-radius: 5px;
<span style="color: #
text-indent: 1em;
<span style="color: #
font-size: 16px;
<span style="color: # }
<span style="color: # .page .main form .inp .left{
<span style="color: #
width: 260px;
<span style="color: #
float: left;
<span style="color: # }
<span style="color: # .page .main form .inp a{
<span style="color: #
float: right;
<span style="color: #
display: block;
<span style="color: #
width: 120px;
<span style="color: #
height: 40px;
<span style="color: #
line-height: 40px;
<span style="color: #
text-align: center;
<span style="color: #
font-size: 16px;
<span style="color: #
border: 1px solid darkgray;
<span style="color: #
box-sizing: border-box;
<span style="color: #
border-radius: 5px;
<span style="color: # }
<span style="color: # .page .main form input[type=submit]{
<span style="color: #
width: 400px;
<span style="color: #
height: 40px;
<span style="color: #
margin: auto;
<span style="color: #
margin-bottom: 20px;
<span style="color: #
line-height: 40px;
<span style="color: #
text-align: center;
<span style="color: #
border-radius: 5px;
<span style="color: #
font-size: 18px;
<span style="color: #
background: lightskyblue;
<span style="color: #
border-style: none;
<span style="color: #
color: white;
<span style="color: #
cursor: pointer;
<span style="color: # }
<span style="color: # /*当内容较短时,让footer固定在底部,不会跟着登录框后面 横在页面中间*/
<span style="color: # .footer{
<span style="color: #
position: fixed;
<span style="color: #
<span style="color: #
bottom: 0;
<span style="color: # }
JavaScript
JQuery.js 略
1 $(function () {
var $picLi = $(".main .main-box .banner .pic li");
var $tabLi = $(".main .main-box .banner .tab li");
var $btnLI = $(".main .main-box .banner .btn li");
var $banner = $(".main .main-box .banner");
var picIndex = 0;
var len = $picLi.
<span style="color: #
// 初始化显示
<span style="color: #
$picLi.hide().eq(picIndex).show();
<span style="color: #
$tabLi.eq(picIndex).addClass("active");
<span style="color: #
<span style="color: #
function change(n) {
<span style="color: #
if( n != picIndex ){
<span style="color: #
$picLi.eq(picIndex).fadeOut(2000);
<span style="color: #
$tabLi.eq(picIndex).removeClass("active");
<span style="color: #
picIndex =
<span style="color: #
$picLi.eq(picIndex).fadeIn(2000);
<span style="color: #
$tabLi.eq(picIndex).addClass("active");
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
// 点击事件
<span style="color: #
$tabLi.click(function () {
<span style="color: #
change($(this).index());
<span style="color: #
<span style="color: #
$btnLI.click(function () {
<span style="color: #
var index = picI
<span style="color: #
if($(this).index()){
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
if(0 === index){
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
change(index);
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
function auto() {
<span style="color: #
timer = setInterval(function () {
<span style="color: #
var index = picI
<span style="color: #
<span style="color: #
<span style="color: #
change(index);
<span style="color: #
<span style="color: #
<span style="color: #
function mouseIn(){
<span style="color: #
clearInterval(timer);
<span style="color: #
<span style="color: #
<span style="color: #
$banner.hover(mouseIn, auto);
<span style="color: # });
<span style="color: #
<span style="color: # $(function () {
<span style="color: #
var $nav = $(".main .main-box .main-contain .news .nav li");
<span style="color: #
var $content = $(".main .main-box .main-contain .news .content li");
<span style="color: #
var index = 0;
<span style="color: #
<span style="color: #
<span style="color: #
$nav.eq(index).addClass("active");
<span style="color: #
$content.hide().eq(index).show();
<span style="color: #
<span style="color: #
$nav.click(function () {
<span style="color: #
var i = $(this).index();
<span style="color: #
<span style="color: #
if (i != index) {
<span style="color: #
$nav.eq(index).removeClass("active");
<span style="color: #
$content.eq(index).hide();
<span style="color: #
<span style="color: #
$nav.eq(index).addClass("active");
<span style="color: #
$content.hide().eq(index).show();
<span style="color: #
<span style="color: #
<span style="color: # });
<span style="color: # // 头部不显示亮下划线
<span style="color: # $(function () {
<span style="color: #
var $menuLi = $(".header .header-contain .menu li");
<span style="color: #
$.each($menuLi, function (i, obj){
<span style="color: #
obj.removeAttribute("class", "active");
<span style="color: #
<span style="color: # });
1 // 头部不显示亮下划线
2 $(function () {
var $menuLi = $(".header .header-contain .menu li");
$.each($menuLi, function (i, obj){
obj.removeAttribute("class", "active");
9 $(function () {
<span style="color: #
var $btn = $(".page .main form div .sendcode");
<span style="color: #
<span style="color: #
var timer=
<span style="color: #
<span style="color: #
function sendCodeTimer() {
<span style="color: #
if( 1 === count ){
<span style="color: #
clearInterval(timer);
<span style="color: #
timer=undefined
<span style="color: #
$btn.html("重新发送");
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: #
$btn.html(count + "s");
<span style="color: #
<span style="color: #
<span style="color: #
function sendCodeClick() {
<span style="color: #
if(timer === undefined ){
<span style="color: #
count = 10;
<span style="color: #
$btn.html(count + "s");
<span style="color: #
timer = setInterval(sendCodeTimer, 1000);
<span style="color: #
<span style="color: #
<span style="color: #
$btn.click(sendCodeClick);
<span style="color: # });
阅读(...) 评论()