1
我在w3schools &筆編輯器中的在線編輯器中嘗試了以下代碼。這是代碼。HTML「樣式」標記不起作用
body {
background-color: lavenderblush
}
.red-text {
color: red;
}
h1 {
font-family: Tangerine, times new roman;
font-size: 55px;
}
p {
font-size : 18px;
font-family: inconsolata;
}
.thick-salmon-border {
border-color: salmon;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.smaller-image {
width: 120px;
height: 120px;
}
.thick-royalblue-border {
border-color: royalblue;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-green-border {
border-color: green;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-sandybrown-border {
border-color: sandybrown;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-lightpink-border {
border-color: lightpink;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.thick-rosybrown-border {
border-color: rosybrown;
border-width: 5px;
border-style: solid;
border-radius: 50%;
}
.box {
border-style: solid;
border-color: rosybrown;
border-width: 5px;
}
.AntiqueWhite-box {
background-color: AntiqueWhite;
padding: 20px;
margin: 20px;
}
.MistyRose-box {
background-color: MistyRose;
padding: 20px;
margin: 20px;
}<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<h1 class="red-text font-effect-shadow-multiple">My Favorite Songs</h1>
<p>
<a href="https://en.wikipedia.org/wiki/Ed_Sheeran"><img class="smaller-image thick-salmon-border" src="http://cdn3.thr.com/sites/default/files/2015/07/ed_sheeran.jpg" alt="My Favorite Songs"></a>
<a href="https://en.wikipedia.org/wiki/Shape_of_You"><img class="smaller-image thick-royalblue-border" src="https://images.genius.com/fc44439c55552eb23d4a9ecb28a21f06.1000x1000x1.jpg " alt="My Favorite Songs"></a>
<a href="https://en.wikipedia.org/wiki/Thinking_Out_Loud"><img class="smaller-image thick-green-border" src="https://upload.wikimedia.org/wikipedia/en/a/ad/X_cover.png" alt="My Favorite Songs"></a>
</p>
<div class=" box AntiqueWhite-box">
<p>Ed Sheeran</p>
<ul>
<li><a href="https://www.musixmatch.com/lyrics/Ed-Sheeran/Shape-of-You">Shape of You</a></li>
<li><a href="https://www.musixmatch.com/lyrics/Ed-Sheeran/Thinking-Out-Loud">Thinking Out Loud</a></li>
<li><a href="https://www.musixmatch.com/lyrics/Ed-Sheeran/Galway-Girl">Galway Girl</a></li>
</ul>
<form action="/submit-Ed Sheeran" id="Ed Sheeran-form">
<label>
<input type="radio" name="reaction" checked>Like</label>
<label>
<input type="radio" name="reaction">Dislike</label>
<label>
<input type="radio" name="reaction">None of Above</label>
<br>
<label>
<input type="checkbox" name="electronic devices" checked>Phone</label>
<label>
<input type="checkbox" name="electronic devices">Laptop</label>
<label>
<input type="checkbox" name="electronic devices">Mp3</label>
<br>
<input type="text" placeholder="Ed Sheeran URL">
<button type="submit">Submit</button>
</form>
</div>
<p>
<a href="https://en.wikipedia.org/wiki/Adele"><img class="smaller-image thick-sandybrown-border" src="http://www.hellomagazine.com/imagenes//celebrities/2017080741334/adele-grenfell-tower-victims-screening/0-214-739/adele-t.jpg" alt="My Favorite Songs"></a>
<a href="https://en.wikipedia.org/wiki/Rolling_in_the_Deep"><img class="smaller-image thick-lightpink-border" src="http://netstorage.metrolyrics.com/albums/2777347adele-21.jpg" alt="My Favorite Songs"></a>
<a href="https://en.wikipedia.org/wiki/Hello_(Adele_song)"><img class="smaller-image thick-rosybrown-border" src="https://i.pinimg.com/736x/a9/95/9c/a9959c17c8260650136fdc4a7d8bb218--adele-in-concert-adele--album.jpg" alt="My Favorite Songs"></a>
<p>
<div class="box MistyRose-box">
<p>Adele</p>
<ul>
<li><a href="https://www.musixmatch.com/lyrics/Adele-3/Rolling-in-the-Deep">Rolling In the Deep</a></li>
<li><a href="https://www.musixmatch.com/lyrics/Adele-3/Someone-Like-You">Someone Like You</a></li>
<li><a href="https://www.musixmatch.com/lyrics/Adele-3/Hello">Hello</a></li>
</ul>
<form action="/submit-Adele" id="Adele">
<label>
<input type="radio" name="reaction" checked>Like</label>
<label>
<input type="radio" name="reaction">Dislike</label>
<label>
<input type="radio" name="reaction">None of Above</label>
<br>
<label>
<input type="checkbox" name="electronic devices" checked>Phone</label>
<label>
<input type="checkbox" name="electronic devices">Laptop</label>
<label>
<input type="checkbox" name="electronic devices">Mp3</label>
<br>
<input type="text" placeholder="Adele URL">
<button type="submit">Submit</button>
</form>
</div>BTW，我在Windows的 「邊緣」 瀏覽器跑這個。怎麼了？ 此代碼工作正常，直到昨天，但現在CSS不起作用。 w3schools或codepen有什麼變化嗎？有沒有類型？請幫忙。
它在jsfiddle中正常工作https://jsfiddle.net/fxmea0m8/ –
我看到你的簡短答案被刪除了！對不起，但是，你能否稍後解釋一下「隱形」角色的位置，以便這個問題可以在將來幫助某人？然後，您可以接受您的答案，將問題標記爲「已關閉」。 –