如何创建用于幻灯片的点，只有html和css？

Question

如何创建导航，幻灯片中使用的点。仅使用Html和CSS。

喜欢这个：http://i.stack.imgur.com/qocTe.jpg

提前致谢。

Answer 1

首先，让我们定义HTML标记。 通常一个简单的清单：

<ul class="nav-dots-container">
    <li class="nav-dot"></li>
    <li class="nav-dot"></li>
    <li class="nav-dot"></li>
</ul>

在此之后，添加一些样式：

.nav-dots-container .nav-dot{
   display: inline-block;
   width: 10px;
   height: 10px;
   background: #666;
   border-radius: 100%;
   margin: 3px;
   cursor: pointer;
}

至少，有点额外造型：

.nav-dots-container .nav-dot.active{
  background: teal;
}
.nav-dots-container .nav-dot:hover{
  background: blue;
}

这只是一个基本的例子。

在这里小提琴：https://jsfiddle.net/gtk7jm14/