我附上了我的代码副本。我的文章文章没有格式化或工作正常，如果有人可以请帮助我了解告诉我如何解决这个问题。它们看起来像在屏幕中间居中的灰色/深灰色框格式很好。现在它甚至不会改变页面上任何东西的背景颜色。谢谢！ - Cale
header
{
text-align:center;
text-shadow: 2px 2px 3px grey;
color: white;
padding: 20px 0px 0px 0px;
border-bottom: DarkCyan;
position: fixed;
border-bottom: 2px solid white;
top: -10;
height: 150px;
left: -10;
width: 105%;
z-index:5;
}
header a
{
text-decoration: none;
text-align:center;
text-shadow: 2px 2px 5px grey;
font-weight: bold;
font-size: 40px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 100%;
color: white;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
p.articleheader
{
font-weight: bold;
font-size: 35px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 150%;
text-align: center;
color: white;
text-shadow: 2px 2px 3px grey;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
article.art1class
{
text-align:center;
color: silver;
padding: 0px 20px 0px 20px;
background-color: darkslategray;
border-bottom: 2px solid white;
border-top: 2px solid white;
height: 650px;
position: relative;
width: 75%;
max-width: 850px;
margin: 0 auto;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-weight: bold;
font-size: 15px;
font-family: "Comic Sans MS", cursive, sans-serif;
background-color: midnightblue;
position: fixed;
top: 162;
lefT: -0;
width:100%;
z-index:5;
}
ul.menu li {
float: left;
}
ul.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-bottom: 2px solid white;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
ul.menu li a:hover {
background-color: purple;
color: white;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="CSS/styles.css">
<TITLE>Multicultural Festival - Home</TITLE>
</HEAD>
<BODY>
<HEADER>
<a name="top" href="#home"><H1>Multicultural Festival</H1></a>
</HEADER>
<ul class="menu">
<li style="width:25%"><a href="Home.html">Home</a></li>
<li style="width:25%"><a href="Events.html">Events</a></li>
<li style="width:25%"><a href="Location.html">Location</a></li>
<li style="width:25%"><a href="Contact.html">Contact</a></li>
</ul>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<ARTICLE class="art1class">
<p class="articleheader">#1 Samsung Galaxy S7 Edge</p>
<hr>
<p>
Last year's Galaxy S6 Edge was a good phone,
but not brilliant. It was the same as the Samsung Galaxy S6,
but had a curved screen - and that was it. It was the same size, power and camera,
and that wasn't enough.
Fast forward to today and the S7 Edge takes all the great looks of the S6 Edge,
makes the phone even curvier and combines it with the superb power and feature set of the S7.
The camera is just brilliant, the mix of metal and glass is really nice to hold, and even the
Touchwiz overlay is turning into something more usable than before.
Battery life improvements are hugely welcomed, and while the price is higher,
it's now affixed to a phone that offers simply the best in nearly every department,
so many will be happy with the outlay.
</p>
<hr>
</ARTICLE>
<br>
<br><br><br><br><br><br><hr><br><br><br><br><br><br>
<br>
</BODY>
<FOOTER>
<NAV>
All Copyright reserved to Cale © Creation Date: 08/06/2018<br>
<a href="home.html">Home</a> | <a href="#home">Home</a> | <a href="brands.html">Brands</a> | <a href="contact.html">Contact</a>
</NAV>
</FOOTER>
</HTML>
答案 0 :(得分：0)
我刚刚在我的文本编辑器中运行了上面的代码，它运行正常。 CSS正如您在描述中定义的那样工作。 我认为问题在于你的CSS文件的链接。 再次检查地址并检查大写/小写错误
Image showing the Proper Style
我甚至改变了背景颜色并且有效。
代码：
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
<TITLE>Multicultural Festival - Home</TITLE>
</HEAD>
<BODY>
<HEADER>
<a name="top" href="#home"><H1>Multicultural Festival</H1></A>
</HEADER>
<ul class= "menu">
<li style="width:25%"><a href="Home.html">Home</a></li>
<li style="width:25%"><a href="Events.html">Events</a></li>
<li style="width:25%"><a href="Location.html">Location</a></li>
<li style="width:25%"><a href="Contact.html">Contact</a></li>
</ul>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<ARTICLE class="art1class">
<p class="articleheader">#1 Samsung Galaxy S7 Edge</p>
<hr>
<p>Last year's Galaxy S6 Edge was a good phone,
but not brilliant. It was the same as the Samsung Galaxy S6,
but had a curved screen - and that was it. It was the same size, power and camera,
and that wasn't enough.
Fast forward to today and the S7 Edge takes all the great looks of the S6 Edge,
makes the phone even curvier and combines it with the superb power and feature set of the S7.
The camera is just brilliant, the mix of metal and glass is really nice to hold, and even the
Touchwiz overlay is turning into something more usable than before.
Battery life improvements are hugely welcomed, and while the price is higher,
it's now affixed to a phone that offers simply the best in nearly every department,
so many will be happy with the outlay.
</p>
<hr>
</ARTICLE>
<br>
<br><br><br><br><br><br><hr><br><br><br><br><br><br>
<br>
</BODY>
<FOOTER>
<NAV>
All Copyright reserved to Cale © Creation Date: 08/06/2018<br>
<a href="home.html">Home</a> | <a href="#home">Home</a> | <a href="brands.html">Brands</a> | <a href="contact.html">Contact</a>
</NAV>
</FOOTER>
</HTML>
CSS：
header
{
text-align:center;
text-shadow: 2px 2px 3px grey;
color: white;
padding: 20px 0px 0px 0px;
border-bottom: DarkCyan;
position: fixed;
border-bottom: 2px solid white;
top: -10;
height: 150px;
left: -10;
width: 105%;
z-index:5;
}
header a
{
text-decoration: none;
text-align:center;
text-shadow: 2px 2px 5px grey;
font-weight: bold;
font-size: 40px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 100%;
color: white;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
p.articleheader
{
font-weight: bold;
font-size: 35px;
font-family: Tahoma, Geneva, sans-serif;
line-height: 150%;
text-align: center;
color: white;
text-shadow: 2px 2px 3px grey;
word-spacing: 3px;
letter-spacing: -1;
font-variant: small-caps;
}
article.art1class
{
text-align:center;
color: silver;
padding: 0px 20px 0px 20px;
background-color: darkslategray;
border-bottom: 2px solid white;
border-top: 2px solid white;
height: 650px;
position: relative;
width: 75%;
max-width: 850px;
margin: 0 auto;
}
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-weight: bold;
font-size: 15px;
font-family: "Comic Sans MS", cursive, sans-serif;
background-color: midnightblue;
position: fixed;
top: 162;
lefT: -0;
width:100%;
z-index:5;
}
ul.menu li {
float: left;
}
ul.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-bottom: 2px solid white;
-moz-transition: background-color .3s ease-in;
-webkit-transition: background-color .3s ease-in;
-o-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
ul.menu li a:hover {
background-color: purple;
color: white;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}