为了账号安全,请及时绑定邮箱和手机立即绑定

效果出来不一样,那个缩略图没有在预期的位置0.0

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Preview 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,.slider .main .main-i,

.slider{

width: 100%;

height: 400px;

position:relative;

/*overflow: hidden;*/

}

.slider .main{

overflow: hidden;

}

{


}

.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{

text-align: right;

font-size: 40px;

line-height: 50px;

color: #b5b5b5;

}

.slider .main .main-i .caption h3{

text-align: right;

font-size: 70px;

line-height: 70px;

color: #000;

font-family: 'Open Sans Condensed';

}

.slider .ctrl{

width: 100%;

height: 13px;

line-height: 13px;

text-align: center;

position: absolute;

left: 0;

bottom: -13px;

background-color: #f00;

}

.slider .ctrl .ctrl-i{

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{

position: absolute;

width: 100%;

left: 0;

bottom: 50px;

}

</style>

</head>

<body>

<div>

<div>

<div>

<div>

<h2>H2 caption</h2>

<h3>H3 caption</h3>

</div>

<img src="imgs/{{index}}.jpg" alt="">

</div>

</div>

<div>

<a href="javascript:void(0);">

<img src="imgs/{{index}}.jpg" alt="">

</a>

</div>

</div>

</body>

</html>

http://img1.sycdn.imooc.com//58c0fc350001c87d19070932.jpg

正在回答

3 回答

看到这里解决我的问题了 我也是跟着代码敲 最后图片加了position 直接定位爆炸 我想问下 不给a 也就是ctrl-i设置定位 那么他的最近的父元素不是ctrl么 怎么定位会定到上面去嘞 ctrl也有position属性啊 虽然是absolute

0 回复 有任何疑惑可以回复我~

发现不仅要给a设置position属性· 还要给a设置display:inline-block ,width heigth   要不a是没有宽高的,

0 回复 有任何疑惑可以回复我~

已解决,一直很奇怪为什么图片没有100显示在a里,找了半天才发现是a标签没有设置position:relative;
经验告诉我们不要跟着敲代码不要跟着敲代码不要跟着敲代码!

0 回复 有任何疑惑可以回复我~
#1

qq_项秋月_0

能给一下具体的做法吗?
2017-07-02 回复 有任何疑惑可以回复我~
#2

请叫我橙子蛋 提问者 回复 qq_项秋月_0

做法就是在上面的基础上给 a标签没有设置position:relative;
2017-07-03 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

效果出来不一样,那个缩略图没有在预期的位置0.0

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信