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;    ov红河卫生职业学院erflow: hidden;    text-indent: -9999em;    background-color: #b0b0b0;    border-color: #fff;}.radiustwo .pointone:hover {    background打网球的好处-color: #ffac13;    color: #ffac13;}

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