老師 我的圖片為什么沒有變化，沒有變成150的寬度？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Previev Slideshow</title>
<style>
?*{
? padding: 0;
? ?margin: 0;
}
?body {
padding: 50px 0;
background-color: #FFF;
font-size: 14px;
font-family:'Avenir Next';
color: #555;
-webkit-font-smoothing:antialiased;/*字體抗鋸齒*/
}
.slider .main .main-i,
.slider .main,
.slider{
? width: 100%;
? height:400px;
? position: relative;
}
/*幻燈片區(qū)域*/
.slider .main{
? overflow: hidden;
}
? ? /*每個幻燈片的樣式*/
? ? .slider .main .main-i{
? ? ? float: left;
? ? }
? ? .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: #000000;
? ? ?text-align: right;
? ? ?font-family: 'Open Sans Condensed'
? ? }
/*控制按鈕區(qū)域*/
.slider .ctrl{
? width: 100%;
? height: 13px;
? line-height: 13px;
? text-align: center;
? position: absolute;
? left: 0;
? bottom: -13px;
? background-color: #f00;
}
.silder .ctrl .ctrl-i{
? display: inline-block;
? width: 150px;
? height: 13px;
? background-color: #666;
? box-shadow:0 1px 1px rgba(0,0,0,.3);
? position: relative;
? margin-left:1px;
}
.silder .ctrl .ctrl-i img{
? width: 100%;
? position: absolute;
? left: 0;
? bottom: 50px;
? z-index: 1;
? ?opacity:0;
? ?-weblit-transition:all .2s;
}
/*hover 到控制按鈕的樣式 */
.slider .ctrl .ctrl-i:hover{
?background-color: #F0F0F0;
}
.slider .ctrl .ctrl-i:hover img{
?bottom: 13px;
? -webkit-box-reflect:below 0px -webkit-gradient(
? ? ?linear,
? ? ?left top,
? ? ?left bottom,
? ? ?from(transpatent),
? ? ?color-stop(50%,transpanrent),
? ? ?to(rgba(255,255,255,.3))
? );
? opacity:1;
}
/* active 當前展現(xiàn)的狀態(tài) */
.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:0;
? position: absolute;
? right: 50%;
? top: 0;
? -weblit-transition:all .5s;
}
.slider .main .main-i h2{
? margin-right: 45px;
}
.slider .main .main-i h3{
? margin-right: -45px;
}
.slider .main .main-i h2,
.slider .main .main-i h3{
? -weblit-transition:all .8s 1s;
}
.slider .main .mian-i_active{
? ?opacity:1;
? ?right: 50%;
}
.slider .main .main-i h2,
.slider .main .main-i h3{
? margin-right: 0;
}
</style>
</head>
<body>
<div class="slider">
? <div class="main">
? ?<div class="main-i">
? ? <div class="caption">
? ? ?<h2>h2 caption</h2>
? ? ?<h3>h3 caption</h3>
? ? </div>
? ? <img src="imgs/{{index}}.jpg" />
? ?</div><div class="main-i">
? ? <div class="caption">
? ? ?<h2>h2 caption</h2>
? ? ?<h3>h3 caption</h3>
? ? </div>
? ? <img src="imgs/{{index}}.jpg" />
? ?</div>
? </div>
? <div class="ctrl">
? ?<a class="ctrl-i ctrl-i_active" href="javascript:;"><img src="imgs/{{index}}
? ?.jpg" /></a><a class="ctrl-i" href="javascript:;"><img?
? ?src="imgs/{{index}}.jpg" /></a>
? </div>
</div>
</body>
</html>
2017-06-17
哪里呢？是不是z-index 不夠？