写了前面一段，为什么连个居中效果都没，崩溃~-慕课网

写了前面一段，为什么连个居中效果都没，崩溃~

来源：-

纪南方

2015-12-18 20:53

<!DOCTYPE HTML>
<HTML>
<head>
    <title>preview slideshows</title>
    <meta charset="utf-8">
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    /*初始化所有padding和margin*/

    body{
      padding:50px 0;
      background-color: #fff;
      font-size:14px;
      font-family: 'Avenir Next';
      color:#555;
      -wekit-font-smoothing:antialiased;
    }
    .slider.mian.mian-i,
.slider.mian,
    .slider{
      width: 100%;
      height:400px;
      position:relative;
    }
      /*huandengpian yangshi */
    .slider.mian{
      overflow: hidden;
    }
    .slider.mian.mian-i{}
    .slider.mian.mian-i img{
        width: 100%;
        position: absolute;
        left:0;
        top: 0;
        z-index: 1;
      }
        .slider.mian.mian-i.caption{
          position: absolute;
          right: 50%;
          top:30%;
          z-index: 9;
        }

        .slider.mian.mian-i.caption h2{}
        .slider.mian.mian-i.caption h3{}
      /* kong zhi an niu*/

    </style>
</head>
<body>
    <div class="slider">
          <div class="mian">
              <div class="mian-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" href="javascript"><img src="imgs/{{index}}.jpg"></a>
          </div>
    </div>

</body>
</html>

写回答关注

4回答

李晓健

2015-12-18 21:05:17

已采纳
虽然不知道你什么问题但是你的css还是有不少错的
```
.slider.main.mian-i:img{    
```
```
 font-size70px;   
```
```
border: -13px;   
```
6 0

纪南方回复李晓健

找到原因了是选择器没加空格。。。

2015-12-20 16:07:22

共 6 条回复 >
lynhao

2015-12-18 21:08:37

错误如下：
<HTML>，.slider.main.mian-i:img，body里面写漏外围的</div>，font-size70px;（分号哪去了）！！！

1 0

纪南方

好的我再改改去！多谢！

2015-12-20 12:43:11

共 1 条回复 >
lynhao

2015-12-18 21:04:19
```
border: -13px;这种代码写出来你理解这个属性的意思没？
```
1 0

纪南方

应该是bottom:-13px;是我写错了，为了让它位于图片下方

2015-12-20 12:41:57

共 1 条回复 >
lynhao

2015-12-18 21:03:10

你的代码错了好多，标点符号写漏，标签写错等等

0 0

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

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

53759 学习 · 265 问题

查看课程

相似问题

请问为什么两个hover没有效果，哪写错了吗？

回答 1

加上-webkit-grandient的东西后就什么效果都没有了

回答 1

为什么我在图片上面加了动画效果之后就没有倒影了呢？

回答 4

求帮忙看一下，为什么文字没有动画效果啊？

回答 3

.slider .ctrl 当中的bottom：-13px是什么意思，为什么前面加“ - ”符号呢？

回答 3

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