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;
}

Answer 2

博伊德的答案很棒，但有时您不希望将样式应用于所有元素（在您的情况下为所有.box i元素）。

在这种情况下，您可以使用逗号分隔多个CSS选择器和一个样式定义：

/* This will apply to all listed selectors */

.box i.popular,
.box i.upload,
.box i.diary {
    width: 60px;
    height: 60px;
    display:inline-block;
    vertical-align:text-bottom;
    margin-top: 10px;
    margin-left: 1px;
}

/* This adds some extra styles to each one at a time */

.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;
}

或者，你也可以给他们所有的共同课程。这就是Font Awesome的工作原理。

HTML：

... <i class="icon diary"></i> ...

CSS：

box i.icon {
    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;
}

使CSS代码更清晰（删除重复行）

2 个答案: