我在w3schools&的两个在线编辑器中尝试了以下代码。 codepen中的笔编辑器。这是代码。
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的“Edge”浏览器中运行了这个。怎么了? 这段代码工作正常,直到昨天,但现在css不起作用。在w3schools或codepen中有什么变化吗?有类型吗?请帮忙。
答案 0 :(得分:2)
首先:使用head taq(必填):
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
</style>
</head>
第二次:使用这样的样式代码(不是必需的):
<style type="text/css" media="screen">
</style>
第三次:将;
放在css代码的末尾(第6行末尾)(不是必需的):
body {
background-color: lavenderblush;
}
我希望第二次和第三次为您提供帮助。
<强>:)强>
答案 1 :(得分:0)
它在codepen中正常工作。
你应该尝试硬刷新(ctrl + F5)
OR
清除缓存和Cookie然后加载页面
OR
尝试硬核版本控制,例如在网址中添加?1
或?
之后的任何内容,然后点击网址。
e.g。
http://<your URL>.html?1
最佳做法是在<head >
标记中使用样式和脚本,因为它将在页面之前加载,您将看到最佳设计。如果它没有得到解决,那么上述解决方案将在缓存相关问题时起作用。
在
中使用Style
<head>
答案 2 :(得分:0)
这可能是一种预感,但你说它一直工作到昨天。尝试清除你的 浏览器缓存。 https://support.microsoft.com/en-us/help/10607/microsoft-edge-view-delete-browser-history 希望这有帮助!
答案 3 :(得分:-2)
你的错误是你的身体标签背景颜色属性中的分号
body{
background-color: lavenderblush;
}