index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/login.css"> <link rel="stylesheet" href="https://at.alicdn.com/t/font_791183_z2ywx2u4woc.css"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> </head> <body> <!--header star--> <div class="header"> <div class="header-contain"> <h1 class="log"><a href="#" class="logo-title"></a></h1> <ul class="menu"> <li><a href="#">首页</a> </li> <li><a href="course.html">在线课堂</a> </li> <li><a href="pay.html">付费课程</a> </li> <li><a href="search.html">搜索</a> </li> </ul> <div class="log-box"> <i class="iconfont icon-iconuser"></i> <!--引入图标时一般用 i 标签 --> <span><a href="reg.html">注册</a> </span> <span><a href="css/login.css">登录</a> </span> </div> </div> </div> <!--header end--> <!--main star--> <div class="main"> <div class="main-box clearfix"> <div class="main-contain"> <!--banner--> <div class="banner"> <ul class="pic"> <li><img class="show" src="https://res.shiguangkey.com//file/201806/19/20180619142252602590185.jpg"></li> <li><img src="https://res.shiguangkey.com//file/201806/19/20180619141337485823895.jpg"></li> <li><img src="https://res.shiguangkey.com//file/201806/21/20180621150342030454625.jpg"></li> <li><img src="https://res.shiguangkey.com//file/201805/17/20180517113424433990524.jpg"></li> </ul> <ul class="tab"> <li class="on"></li> <li></li> <li></li> <li></li> </ul> <ul class="btn"> <li class="left"><</li> <li class="right">></li> </ul> </div> <div class="contain"> <ul class="recommend-news"> <li> <a href="#"><img src="https://res.shiguangkey.com//file/201806/04/20180604235838752491899.png!mall_course_a" alt="test"></a> <p> <a href="#">SEO优化,最新快速排名技巧解答分享</a> </p> </li> <li> <a href="#"><img src="https://res.shiguangkey.com//file/201805/26/20180526105323340886406.png!" alt="test"></a> <p> <a href="#">web前端零基础入门</a> </p> </li> <li> <a href="#"><img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!" alt="test"></a> <p> <a href="#">韩语小白变大神</a> </p> </li> </ul> </div> <!--news nav--> <div class="news-nav"> <ul class="nav"> <li class="active">python</li> <li>前端</li> <li>爬虫</li> <li>网络安防</li> </ul> <ul class="contain"> <li class="show"> <div class="clearfix"> <div class="left"> <img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!mall_course_a" alt=""> </div> <div class="right"> <p><span>可里:</span>大学韩国语专业 亚篮锦标赛韩语随同翻译 3年线上韩语教育经验</p> <p><span>小美:</span>大学韩语专业 韩语TOPIK6级 三年线上教学经验</p> <p><span>鸭梨:</span>大学韩国语专业 2年线上韩语教学经验 多年韩国漫画翻译经验</p> <p><span>可可:</span>韩语随同翻译 牙科医疗反映 丰富口译经验 多年爱豆站姐翻译经验</p> </div> </div> <div class="clearfix"> <div class="left"> <img src="https://res.shiguangkey.com//file/201807/23/20180723165649433839624.png!mall_course_a"> </div> <div class="right"> <p><span>Kayee:</span>口语水平优秀 语言表达能力强 教学经验丰富 对学员有耐心</p> <p><span>Celin:</span>课堂活泼有趣 注重和学员互动 轻轻松松帮大家理解英语知识</p> <p><span>Molly:</span>商务英语专业 对学员耐心 喜欢发掘不同类型的英语应用</p> <p><span>Zoey:</span>口语水平优秀 语言表达能力强 注重培养学员的口语能力和书写能力</p> </div> </div> </li> <li> <div class="clearfix"> <div class="left"> <img src="https://res.shiguangkey.com//file/201805/26/20180526105323340886406.png!mall_course_a" alt=""> </div> <div class="right"> <p><span>PC+移动开发班</span></p> <p>html + css</p> <p><span>移动网站开发内容</span></p> <p>html5 + css3</p> </div> </div> <div class="clearfix"> <div class="left"> <img src="https://res.shiguangkey.com//file/201804/11/20180411113302019932295.jpg!mall_course_a"> </div> <div class="right"> <p><span>javascript</span></p> <p>操作DOM 面向对象 Jquery ECMAScript6</p> <p><span>前端框架</span></p> <p>vue Angular React</p> </div> </div> </li> <li> <div class="clearfix"> <div class="left"> <img src="https://res.shiguangkey.com//file/201807/02/20180702141502580115367.png!mall_course_a" alt=""> </div> <div class="right"> <p><span>基础阶段</span></p> <p>python基础 python进阶 web前端</p> <p><span>实战阶段</span></p> <p>框架 项目</p> </div> </div> <div class="clearfix"> <div class="left"> <img src="https://res.shiguangkey.com//file/201807/02/20180702153723740596415.png!mall_course_a"> </div> <div class="right"> <p><span>Python数据分析与机器学习</span></p> <p>numpy pandas matplotlib seaborn</p> <p>K邻近算法 线性回归与逻辑回归算法</p> <p>决策树算法 集成算法与随机森林 贝叶斯算法 支持向量机</p> </div> </div> </li> <li> <div class="clearfix"> <div class="left"> <img src="https://res.shiguangkey.com//file/201804/19/20180419103002769224662.jpg!mall_course_a" alt=""> </div> <div class="right"> <p><span>c++课程体系</span></p> <p>C语言核心 C++语言核心</p> <p>Windows核心编程 Linux核心编程</p> <p>QT核心编程 服务器核心编程</p> </div> </div> <div class="clearfix"> <div class="left"> <img src="https://res.shiguangkey.com//file/201807/02/20180702153645933550456.png!mall_course_a"> </div> <div class="right"> <p><span>罗伯特:</span>十年项目开发经验 精通C/C++、Windows游戏编程</p> <p><span>九夏老师:</span>七年企业级项目实战经验,擅长Windows/Linux平台</p> <p><span>Danny:</span>八年大型项目开发经验,精通C/C++编程语言,擅长WindowsAPI</p> <p><span>强森老师:</span>五年企业级IT项目开发经验,三年线下教学经验</p> </div> </div> </li> </ul> </div> <div class="more">加载更多</div> </div> <div class="aside"> <div class="side-activities"> <h2>公开课<span>更多</span></h2> <div> <img src="https://res.shiguangkey.com/file/201804/19/20180419161303876645368.png!mall_course_b"> <p>python零基础入门到项目实战</p> <hr> </div> <div> <h2>VIP课<span>更多</span></h2> <div> <img src="https://res.shiguangkey.com//file/201804/19/20180419103636100353500.jpg!mall_course_a" alt=""> <p>Python基础</p> <p>Python进阶</p> <p>Python web</p> <p>框架(Django Tornado)</p> <p>项目实战</p> <hr> </div> <div class="about" style="background: url(2.png)no-repeat 200px 10px/120px 150px"> <h4>关注我</h4> <ul> <li><i class="iconfont icon-ai-weixin" style="color: blue"></i>gdwz922</li> <li><i class="iconfont icon-QQ"style="color: blue"></i>i649975652</li> <li><i class="iconfont icon-weibo"style="color: blue">....</i></li> </ul> </div> </div> </div> </div> </div> <!--footer star--> <div class="footer"> <div class="footer-box"> <div class="footer-content"> <p> <span><a href="#">关于 python</a> </span> <span><a href="#">python 开发</a> </span> <span><a href="#">python 数据分析</a> </span> <span><a href="#">python 关于我:<i class="iconfont icon-ai-weixin" ></i></a> </span> </p> <p> <span><a href="#">地址:福建.........</a> </span> <span><a href="#">联系电话:12345678911</a> </span> </p> </div> <p class="bottom-content">Copyright © 2015 - 2018 潭州python学院. All Rights Reserved</p> </div> </div> <script src="js/index.js"></script> </body> </html>
index.css
.main{ 100%; /*background: red;*/ padding: 30px 0; } .main .main-box{ 1200px; /*height: 1000px;*/ margin: auto; /*居中*/ /*background: yellowgreen;*/ } .main .main-box .main-contain{ float: left; /*左浮动*/ 800px; } .main .main-box .main-contain .banner{ 800px; height: 200px; position: relative; /*background: blue;*/ } .main .main-box .main-contain .banner .pic li img{ 800px; height: 200px; position: absolute; left: 0; top: 0; } .main .main-box .main-contain .banner .pic li img{ display: none; } .main .main-box .main-contain .banner .pic li .show{ display: block; } .main .main-box .main-contain .banner .tab{ position: absolute; left: 340px; bottom: 15px; } .main .main-box .main-contain .banner .tab li{ height: 20px; 20px; border: 1px solid white; float: left; margin: 10px; border-radius: 50%; /*方变圆*/ cursor: pointer; /*出现小手*/ } .main .main-box .main-contain .banner .tab .on{ background: red; } .main .main-box .main-contain .banner .btn{ font-size: 50px; color: white; font-weight: bold; line-height: 200px; cursor: pointer; /*出现小手*/ display: none; } .main .main-box .main-contain .banner:hover .btn{ display: block; } .main .main-box .main-contain .banner .btn .left{ position: absolute; left: 5px; } .main .main-box .main-contain .banner .btn .right{ position: absolute; right: 5px; } .main .main-box .main-contain .contain{ 800px; /*background: red;*/ font-size: 14px; } .main .main-box .main-contain .contain .recommend-news li a img{ 250px; height: 180px; /*固定图片大小*/ transition: all 1s; /**在放大图片时有时间过度 */ } .main .main-box .main-contain .contain .recommend-news{ display: flex; justify-content:space-between; /*弹性盒模型,大小自动分配 (一步做完浮动)*/ padding: 20px 10px; } .main .main-box .main-contain .contain .recommend-news li p{ text-align: center; /*居中*/ line-height: 25px; /**/ } .main .main-box .main-contain .contain .recommend-news li a img:hover{ transform: scale(1.2); /*鼠标移入时放大多少倍*/ } /*news-nav */ .main .main-box .main-contain .news-nav .nav{ 800px; height: 65px; background: yellow; line-height: 60px; /**行高与 height 一样时,文字垂直居中*/ } .main .main-box .main-contain .news-nav .nav li{ float: left; /*浮动*/ margin: 0 20px; } .main .main-box .main-contain .news-nav .nav li.active{ border-bottom: 5px solid red; box-sizing: border-box; /**让上行设置的底边往上移*/ } .main .main-box .main-contain .news-nav .nav li:hover{ cursor: pointer; //**加小手*/ } .main .main-box .main-contain .news-nav .contain{ 800px; /*height: 800px;*/ /*background:brown;*/ } .main .main-box .main-contain .news-nav .contain .left img{ float: left; 260px; height: 200px; padding: 5px; border-radius: 20px; /*小圆角*/ overflow: hidden; /*超出隐藏*/ margin-right: 10px; transition: all 1s; //*图片慢慢变大*/ } .main .main-box .main-contain .news-nav .contain .left img:hover{ transform: scale(1.2); } .main .main-box .main-contain .news-nav .contain .right{ float: left; line-height: 35px; padding: 26px 0 0 0; font-size: 16px; } .main .main-box .main-contain .news-nav .contain li{ display: none; } .main .main-box .main-contain .news-nav .contain li.show{ display:block; } .main .main-box .main-contain .more{ 500px; height: 60px; margin: 10px auto; background: yellow; border-radius: 10px; line-height: 60px; /*垂直居中*/ text-align: center; /*水平居中*/ cursor: pointer; //**加小手*/ } /*aside*/ .main .main-box .aside{ 360px; float: right; /*height: 700px;*/ background: yellow; } .main .main-box .aside .side-activities h2{ padding: 0 30px; height: 35px; line-height: 35px; } .main .main-box .aside .side-activities span{ float: right; color: skyblue; cursor: pointer; //**加小手*/ } .main .main-box .aside .side-activities div img{ 320px; padding: 0 20px; } .main .main-box .aside .side-activities div p{ padding: 0 30px; height: 30px; line-height: 30px; } .main .main-box .aside .side-activities .about{ padding: 0 20px; 320px; background: url('2.png') no-repeat 200px 10px/100px 100px; } .main .main-box .aside .side-activities .about ul li { font-size: 15px; line-height: 50px; } .main .main-box .aside .side-activities .about ul li{ height: 50px; line-height: 50px; font-size: 18px; } .main .main-box .aside .side-activities .about ul li i{ vertical-align: -8px; margin-left: 20px; font-size: 35px; }