使CSS代码更清晰(删除重复行)

Question

如何更清楚地制作此代码.我的意思是从头开始删除这个重复的部分.我想我应该添加到HTML和CSS <li>但是当我将它粘贴到这个标签时我<span>根本不起作用......

CSS:

.box i.popular {
    width: 60px;
    height: 60px;
    display:inline-block;
    vertical-align:text-bottom;
    margin-top: 10px;
    margin-left: 1px;
    background: url('../images/popular.png') no-repeat
}

.box i.upload {
    width: 60px;
    height: 60px;
    display:inline-block;
    vertical-align:text-bottom;
    margin-top: 10px;
    margin-left: 1px;
    background: url('../images/upload.png') no-repeat;
}

.box i.diary {
    width: 60px;
    height: 60px;
    display:inline-block;
    vertical-align:text-bottom;
    margin-top: 10px;
    margin-left: 1px;
    background: url('../images/diary.png') no-repeat;
}

HTML:

    <a href="#"><div id="test"><div class="box"><p><i class="popular"></i><span>Inspiration</span></p></div></div></a>
    <a href="#"><div id="test"><div class="box"><p><i class="upload"></i><span>Upload photo</span></p></div></div></a>
    <a href="#"><div id="test"><div class="box"><p><i class="diary"></i><span>Go to diary</span></p></div></div></a>

提前致谢!

Answer 1

试试这个:

您不需要重复全局框样式,因为它们都使用大小和位置属性.因此,请将常用样式附加.box到下一步,然后您需要设置的唯一样式是变体的各个样式.

.box i{
    width: 60px;
    height: 60px;
    display:inline-block;
    vertical-align:text-bottom;
    margin-top: 10px;
    margin-left: 1px;
}
.box i.popular {
    background: url('../images/popular.png') no-repeat
}

.box i.upload {
    background: url('../images/upload.png') no-repeat;
}

.box i.diary {
    background: url('../images/diary.png') no-repeat;
}