* { margin: 0; padding: 0; } ul, li { list-style: none; } img { border: none; } .clear { clear: both; zoom: 1; } .clear:after { content: ''; height: 0; display: visibility; clear: both; overflow: hidden; } #box { width: 500px; height: 300px; margin: 10px auto; position: relative; } #img { height: 100%; } #img img { width: 100%; height: 100%; display: none; } #num li { float: left; background-color: gray; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 20px; color: #fff; font-weight: bold; margin-left: 5px; cursor: pointer; } #num { position: absolute; bottom: 5px; right: 5px; } #num li:hover { background-color: #f80; } #num li.active { background-color: #f80; }