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"> </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></li> <li></li> <li></li> <li></li> </ul> <ul class="btn"> <li class="left"><</li> <li class="right">></li> </ul> </div> <div class="contain"></div> <div class="news-nav"></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> </body> </html>
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: red;*/ } .main .main-box .main-contain .banner .pic li img .show{ display: block; } .main .main-box .main-contain .banner .pic li img{ width: 800px; height: 200px; position: absolute; left: 0; top: 0; display: none; }