问答详情
源自:2-3 基本界面样式完成

.slider .main .main-i 设置 absolute 就不见了,没高度和宽度~

<!DOCTYPE html>
<html>
<head>
	<title>Preview AutoTab</title>
	<meta charset="utf8"/>
</head>
<style type="text/css">
	*{padding:0;margin:0}
	body{
		padding:50px 0;
		background-color: #fff;
		font-size:14px;
		font-family: 'Avenir Next';
		color:#555;
		-webkit-font-smoothing:antialiased;
	}
	.slidre .main .main-i,
	.slider .main,
	.slider{
		width: 100%;
		height: 400px;
		position: relative;
	}

	.main{
		overflow: hidden;
	}

	.slider .main .main-i{

	}
	.slider .main .main-i img{
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}

	.slider .main .main-i .caption{
		position: absolute;
		right: 50%;
		top: 30%;
		z-index: 9;
	}

	.slider .main .main-i .caption h2{
		font-size: 40px;
		line-height: 50px;
		color: #B5B5B5;
		text-align: right;
	}

	.slider .main .main-i .caption h3{
		font-size: 70px;
		line-height: 70px;
		color: #000;
		text-align: right;
		font-family: 'Open Sans Condensed';
	}

	.slider .ctrl{
		width: 100%;
		height: 13px;
		line-height: 13px;
		text-align: center;
		position: absolute;
		left: 0;
		bottom: -13px;
	}

	.slider .ctrl .ctrl-i{
		margin-left: -6px;
		position: relative;
		display: inline-block;
		width: 150px;
		height: 13px;
		background-color: #666;
		box-shadow: 0 1px 1px rgba(0,0,0,.3)
	}
	.slider .ctrl .ctrl-i img{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 50px;
		z-index: 1;
		opacity: 0;
		-webkit-transition: all .2s;
		-moz-transition: all .2s;
		-ms-transition: all .2s;
		-o-transition: all .2s;
		transition: all .2s;
		
	}
	.slider .ctrl .ctrl-i:hover{
		background: #f0f0f0;

	}

	.slider .ctrl .ctrl-i:hover img{
		bottom: 13px;
		-webkit-box-reflect:below 0px -webkit-gradient(
			linear,
			left top,
			left bottom,
			from(transparent),
			color-stop(50%,transparent),
			to(rgba(255,255,255,.3))
		);
		opacity: 1;
	}
	.slider .ctrl .ctrl-i_active:hover,
	.slider .ctrl .ctrl-i_active{
		background-color: #000;
	}
	.slider .ctrl .ctrl-i_active:hover img{
		opacity: 0;
	}

	.slider .main .main-i{
		opacity: 1;
		position: absolute;
		top: 0;
		right: 50%;
		-webkit-transition: all .5s;
		-moz-transition: all .5s;
		-ms-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
	}

	.slider .main .main-i_active{
		right: 0;
		opacity: 1;
	}

	

	/*.slider .main .main-i h2,h3{
		-webkit-transition: all .8s 1s;
		-moz-transition: all .8s 1s;
		-ms-transition: all .8s 1s;
		-o-transition: all .8s 1s;
		transition: all .8s 1s;
	}

	.slider .main .main-i h2{
		margin-right: 45px;
	}

	.slider .main .main-i h3{
		margin-right: -45px;
	}
	.slider .main .main-i_active h2,
	.slider .main .main-i_active h3{
		margin-right: 0;
	}*/

	

</style>
<body>
<div class="slider">
	<div class="main">
		<div class="main-i">
			<div class="caption">
				<h2>{{h2}}</h2>
				<h3>{{h3}}</h3>
			</div>
			<img src="img/{{index}}.jpg" alt="">
		</div>
		<div class="main-i">
			<div class="caption">
				<h2>{{h2}}</h2>
				<h3>{{h3}}</h3>
			</div>
			<img src="img/{{index}}.jpg" alt="">
		</div>
	</div>
	<div class="ctrl">
		<a href="javascript:;" class="ctrl-i">
			<img src="img/{{index}}.jpg" alt="">
		</a>
		<a href="javascript:;" class="ctrl-i">
			<img src="img/{{index}}.jpg" alt="">
		</a>
	</div>
</div>


<script type="text/javascript">
	
</script>
</body>
</html>

http://img.mukewang.com/557a915900017e9613660746.jpg

提问者:1w1 2015-06-12 15:59

个回答

  • 定定
    2015-10-10 22:22:48

    去掉图片自己的absolute定位

  • Lyn_Tech
    2015-06-24 15:02:52

    .slidre .main .main-i,
        .slider .main,
        .slider{
            width: 100%;
            height: 400px;
            position: relative;
        }

    第一行, .slidre  写错了。 是 .slider

  • weibo_啊阿影影影影影_0
    2015-06-20 20:55:55

    我也是,解决了吗