html css 布局小细节

时间:2022-11-11 11:43:44

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

代码不长,怕遗忘,记录下动情一刻!