<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Busy - 电商</title>
<style>
/*
任务
1 .banner_imgs的宽度应该等于多少？
2 如果让.number 里面a 居中？
*/
body,ul{margin: 0; padding: 0;}
li{list-style: none;}
.banner{
width: 800px;
height: 450px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.banner_imgs{
width: 4000px;
position: absolute;
left: -0; top: 0;
}
.banner_imgs li{
float: left;
}
.banner_imgs img{
width: 800px;
height: 100%;
display: block;
}
.number{
width: 100%;
text-align:center;
position: absolute;
left: 0;
bottom: 20px;
}
.number a{
display: inline-block;
width: 20px;
background-color: #fff;
height: 6px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="banner">
<ul class="banner_imgs">
<li><a href="javascript:;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53ad2498000174af13660768.jpg" alt="1"></a></li>
<li><a href="javascript:;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53ad25df0001300613660768.jpg" alt="2"></a></li>
<li><a href="javascript:;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53ad26010001ac1113660768.jpg" alt="3"></a></li>
<li><a href="javascript:;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53ad26170001a86013660768.jpg" alt="4"></a></li>
<li><a href="javascript:;"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//53ad26320001289e13660768.jpg" alt="5"></a></li>
</ul>
<div class="number">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
