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{
width: 100%;
/*background: red;*/
padding: 30px 0;
}
.main .main-box{
width: 1200px;
/*height: 1000px;*/
margin: auto; /*居中*/
/*background: yellowgreen;*/
}
.main .main-box .main-contain{
float: left; /*左浮动*/
width: 800px;
}
.main .main-box .main-contain .banner{
width: 800px;
height: 200px;
position: relative;
/*background: blue;*/
}
.main .main-box .main-contain .banner .pic li img{
width: 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;
width: 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{
width: 800px;
/*background: red;*/
font-size: 14px;
}
.main .main-box .main-contain .contain .recommend-news li a img{
width: 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{
width: 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{
width: 800px;
/*height: 800px;*/
/*background:brown;*/
}
.main .main-box .main-contain .news-nav .contain .left img{
float: left;
width: 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{
width: 500px;
height: 60px;
margin: 10px auto;
background: yellow;
border-radius: 10px;
line-height: 60px; /*垂直居中*/
text-align: center; /*水平居中*/
cursor: pointer; //**加小手*/
}
/*aside*/
.main .main-box .aside{
width: 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{
width: 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;
width: 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;
}