个回答

• 树懒先生3152678

  2016-08-12 11:17:32

  li::after  这样写只有一个圆圈出现是因为定位的问题，

   仔细去看下

  .slider {
              position: absolute;
              width: 100%;
              text-align: center;
              z-index: 9999;
              bottom: 100px;
              }
              .slider li {
              display: inline-block;
              width: 170px;
              height: 130px;
              margin-right: 15px;
              }

  这一段代码里面，li是没有定位的，即没有position，而以下：

  .slider a {
              display: inline-block;
              width: 170px;
              padding-top: 70px;
              padding-bottom: 20px;
              position: relative;
              cursor: pointer;
              border: 2px solid #fff;
              border-radius: 5px;
              vertical-align: top;
              color: #fff;
              text-decoration: none;
              font-size: 22px;
              font-family: 'Yesteryear', cursive;
              text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
              }

  a标签是有position定位的。再看任务二：
  

   /*任务二、设置缩略图形状*/
                  {
              content:"";
              display: block;
              height: 120px;
              width: 120px;
              border: 5px solid #fff;
              border-radius: 50%;
              position: absolute;
              left: 50%;
              margin-left: -60px;
              z-index: 9999;
              top: -80px;
              }

  这里的position：absolute；是要基于离它最近有定位属性的父元素定位的。

  所以，如果按照你这样写，那么所有的 圆圈将都会以 .slide 进行定位，都只会基于一个点。

  若是想要按照你写的实现效果，可以给 .slide li { position：relative}；即可。

  2

• qq_PureBLACK_13313525

  2016-05-25 15:47:50

  .clearfix a::after有5个框  但是前面是clearfix他的子元素不应该是li?

  0

• 速写素

  2016-05-25 12:05:46

  因为a是li的儿子啊，缩略图是加在a的链接上的，如果加在li的后面不就是跟a没关系了？
  

  0