我正在摆弄样式符号，并想尝试通过为字母之间的每个点赋予实际 FRIENDS 徽标的颜色来设计此标题。我想知道什么是最好的方法来做到这一点。HTML 中的符号颜色可以更改吗？如果是，p使用不同 ID 制作标签是设置点样式的唯一方法吗？这是标题：<header> F•R•I•E•N•D•S </header>注意：我只想使用 HTML 和 CSS 来完成此操作，而不是 Javascript 或 JQuery
3 回答
扬帆大鱼
TA贡献1799条经验 获得超9个赞
您可以使用span具有class属性并符合类的 CSS 规则的标签（可以重用）
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.yellow {
color: yellow;
}
.orange {
color: orange;
}
.brown {
color: brown;
}
<header> F<span class="red">•</span>R<span class="blue">•</span>I<span class="green">•</span>E<span class="yellow">•</span>N<span class="orange">•</span>D<span class="brown">•</span>S </header>
慕沐林林
TA贡献2016条经验 获得超9个赞
只需将每个后续或所需的符号放入 span 标记中，并使用类或内联样式属性对其进行着色，如代码中最后两个后者所示。
.red{
color: red;
}
.blue{
color: blue;
}
.green{
color: green;
}
.brown{
color: brown;
}
.orange{
color: orange;
}
<header> <span class="red">F</span>•<span class="green">R</span>•<span class="brown">I</span>•<span class="blue">E</span>•<span style="color:yellow">D</span>•<span style="color:gray">S</span> </header>
qq_花开花谢_0
TA贡献1835条经验 获得超7个赞
我建议您用标签包围每个符号<span>，并使用“id”单独定位它。
它看起来像这样： <header> F<span id="red">•</span>R<span id="blue">•</span>I&<span id="green">#8226;</span>E<span id="yellow">•</span>N<span id="orange">•</span>D<span id="brown">•</span>S </header>
您不想使用<p>标签来设置符号的样式，因为它们会在每个字母之间创建新行。
- 3 回答
- 0 关注
- 129 浏览
添加回答
举报
0/150
提交
取消