学了两个月的html和css每天都重复一样的生活，敲着大同小异的代码，这样的生活枯燥无味。我腻了，我也累了！小米首页算是我写的第三个静态页面，写了好久，很多细节都把握不好，下面的这个简单的布局细节是我觉得最有趣的了萌呆萌呆的！记录下来，留个回忆！
效果图：鼠标经过的时候改变背景颜色！
话不多说，直接上代码！
html代码如下：
<div class="radius"> <ol> <li class="radiusOne"><span class="point">1</span></li> <li class="radiusTwo"><span class="pointOne">2</span></li> <li class="radiusTwo"><span class="pointOne">3</span></li> <li class="radiusTwo"><span class="pointOne">4</span></li> </ol </div>
css代码如下：
.radius { position: absolute; width: 100%; bottom: 15px; text-align: center; left: 0; } .radiusOne { display: inline-block; widht: 10px; height: 10px; padding: 10px; margin: 0 2px; cursor: default; } .radiusOne .point { display: block; width: 6px; height: 6px; border: 2px solid #f5f5f5; border-color: #FF6700; border-radius: 6px; text-align: left; overflow: hidden; text-indent: -9999em; } .radiusTwo { display: inline-block; widht: 10px; height: 10px; padding: 10px; margin: 0 2px; cursor: pointer; } .radiusTwo .pointOne { display: block; width: 6px; height: 6px; border: 2px solid #f5f5f5; border-color: #FF6700; border-radius: 6px; text-align: left; overflow: hidden; text-indent: -9999em; background-color: #b0b0b0; border-color: #fff; } .radiusTwo .pointOne:hover { background-color: #ffac13; color: #ffac13; }
代码不长，怕遗忘，记录下动情一刻！
原文：https://www.cnblogs.com/woheni/p/10945615.html