我正在擺弄樣式符號(hào)，并想嘗試通過(guò)為字母之間的每個(gè)點(diǎn)賦予實(shí)際 FRIENDS 徽標(biāo)的顏色來(lái)設(shè)計(jì)此標(biāo)題。我想知道什么是最好的方法來(lái)做到這一點(diǎn)。HTML 中的符號(hào)顏色可以更改嗎？如果是，p使用不同 ID 制作標(biāo)簽是設(shè)置點(diǎn)樣式的唯一方法嗎？這是標(biāo)題：<header> F•R•I•E•N•D•S </header>注意：我只想使用 HTML 和 CSS 來(lái)完成此操作，而不是 Javascript 或 JQuery
3 回答
揚(yáng)帆大魚
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊
您可以使用span具有class屬性并符合類的 CSS 規(guī)則的標(biāo)簽（可以重用）
.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貢獻(xiàn)2016條經(jīng)驗(yàn) 獲得超9個(gè)贊
只需將每個(gè)后續(xù)或所需的符號(hào)放入 span 標(biāo)記中，并使用類或內(nèi)聯(lián)樣式屬性對(duì)其進(jìn)行著色，如代碼中最后兩個(gè)后者所示。
.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貢獻(xiàn)1835條經(jīng)驗(yàn) 獲得超7個(gè)贊
我建議您用標(biāo)簽包圍每個(gè)符號(hào)<span>，并使用“id”單獨(dú)定位它。
它看起來(lái)像這樣： <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>標(biāo)簽來(lái)設(shè)置符號(hào)的樣式，因?yàn)樗鼈儠?huì)在每個(gè)字母之間創(chuàng)建新行。
- 3 回答
- 0 關(guān)注
- 212 瀏覽
添加回答
舉報(bào)
0/150
提交
取消