图片比例不正常啊，如图：

.banner{
background:#eaeaea;
}
.banner > ul{
position:relative;
width:1490px;
height:538px;
margin:0 auto;
padding-top:10px;

}
.banner > ul > li{
position:absolute;
width:610px;
height:300px;
overflow:hidden;
}
.banner > ul > li.active{
z-index:2;
top:37px;
right:0;
left:0;
width:960px;
height:460px;
margin:auto;
border:1px solid #fff;
}
.banner > ul > li.left{
z-index:1;
top:0;
bottom:0;
left:0;
margin:auto;
}
.banner > ul > li.right{
z-index:1;
top:0;
right:0;
bottom:0;
margin:auto;
}
.banner > ul > li > img{
position:absolute;
height:100%;
left:-30%;
}

陈祺祺 2017-08-03

源自：HTML5网页布局 2-3 html5页面布局（表现层_banner）

收起

4回答

怎么都被占用了呢 2017-08-04 13:52:38

图片不要设置定位，而且要在包含它的盒子中宽度100%显示。可参考

收起回答

提问者陈祺祺 2017-08-04 12:47:52

我重新放一下代码：

HTML：

CSS样式：

/* banner*/
.banner{min-width: 1490px;background: #eaeaea;}
.banner > ul{position: relative;width: 1490px;height: 538px;margin: 0 auto;padding-top: 10px;}
.banner > ul > li{position: absolute;overflow: hidden;width: 610px;height: 300px;}
.banner > ul > li.active{z-index: 2;top: 37px;right: 0;left: 0;width: 800px;height: 460px;margin: auto;border: 1px solid #fff;}
.banner > ul > li.left{z-index: 1;top: 0;bottom: 0;left: 0;margin: auto;}
.banner > ul > li.right{z-index: 1;top: 0;right: 0;bottom: 0;margin: auto;}
.banner > ul > li > img{position: absolute;left: -30%;height: 100%;}

收起回答

北极贝 2017-08-04 12:20:22

.banner > ul{ padding-top：10px；} 去掉

我做的HTML的代码是：

<ul>

</ul>

</section>

CSS样式是：

.banner{ background:#eeeeee;}

.banner > ul{ position:relative; width:1490px; height:538px; margin:0 auto;}

.banner > ul > li{ position:absolute; width:610px; height:300px; overflow:hidden;}

.banner > ul > li.active{ z-index:2; top:37px; right:0; left:0; width:800px; height:460px;margin:auto; border:1px solid #fff;}

.banner > ul > li.left{ z-index:1; top:0; bottom:0; left:0; margin:auto;}

.banner > ul > li.right{ z-index:1; top:0; bottom:0; right:0; margin:auto;}

.banner > ul > li > img{ height:100%; position:absolute; left:-30%;}

你可以对照你的HTML文件还有CSS样式文件参考一下

效果图

收起回答

提问者陈祺祺 #1

对了一下，代码是一样的，吧padding-top: 10px;去掉以后也没有变化。。

2017-08-04 12:44:13
北极贝回复提问者陈祺祺 #2

那或许是浏览器的问题吧，padding-top是上边距的高度，和你的图片应该没有太大的关系。 banner的css样式，你的min-width: 1490px;不用给高度，这个高度是里ul给撑起来的高度。你这里给了两个高度一个在.banner{min-width: 1490px;}中，一个在.banner > ul{width: 1490px;}中

2017-08-07 11:03:59

怎么都被占用了呢 2017-08-04 12:01:14

请详细描述问题，并将代码完整的放上来

收起回答

提问者陈祺祺 #1

我做出来的效果不一样，图片显示过大 <section class="banner"> <ul> <li class="active"><img src="images/banner/banner1.jpg"></li> <li class="left"><img src="images/banner/banner3.jpg"></li> <li class="right"><img src="images/banner/banner2.jpg"></li> </ul> </section> /* banner*/ .banner{min-width: 1490px;background: #eaeaea;} .banner > ul{position: relative;width: 1490px;height: 538px;margin: 0 auto;padding-top: 10px;} .banner > ul > li{position: absolute;overflow: hidden;width: 610px;height: 300px;} .banner > ul > li.active{z-index: 2;top: 37px;right: 0;left: 0;width: 800px;height: 460px;margin: auto;border: 1px solid #fff;} .banner > ul > li.left{z-index: 1;top: 0;bottom: 0;left: 0;margin: auto;} .banner > ul > li.right{z-index: 1;top: 0;right: 0;bottom: 0;margin: auto;} .banner > ul > li > img{position: absolute;left: -30%;height: 100%;}

2017-08-04 12:40:59