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="https://at.alicdn.com/t/font_791183_yqg5z4kxenj.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="login.html">登录</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> <div class="clearfix"> <div class="left"> <img src="https://res.shiguangkey.com//file/201805/03/20180503165311843004082.png!mall_course_a"> </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> <div></div> </li> </ul> </div> <div class="more">加载更多</div> </div> <div class="aside"> </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 .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;
}