html css 布局小细节

学了两个月的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;
}

代码不长，怕遗忘，记录下动情一刻！