.slider .main .main-i 设置 absolute 就不见了，没高度和宽度~-慕课网

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

来源：2-3 基本界面样式完成

1w1

2015-06-12 15:59

<!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>

写回答关注

3回答

定定

2015-10-10 22:22:48

去掉图片自己的absolute定位

0 0

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

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

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

0 0

weibo_啊阿影影影影影_0

2015-06-20 20:55:55

我也是，解决了吗

0 0

JS+CSS3实现带预览图幻灯片效果

同样的幻灯片，不一样的切换，学会实现思路，操作很简单

53759 学习 · 265 问题

查看课程

相似问题

crtl-i里的图片始终继承不了它的宽度高度

回答 4

9分35秒，在设置幻灯片切换样式（.slider .main .main-i）样式时，一旦绝对定位后两张图片均无法显示。

回答 7

关于宽度设置，父级的问题

回答 1

['','main-i_right'][i%2]

回答 3

.main-i_active和.ctrl-i_active

回答 1

打开慕课网App查看更多内容