我正在尝试使用section标签将css样式应用于我的表，但样式未应用。
以下是我的代码。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
</head>
<body>
<div id="nav">
<a href="assignment1.html">Home</a>
<a href="table.html">Table</a>
<a href="http://rrc.ca">Red River</a>
<a href="http://google.ca">Google</a>
</div
<section id="table1">
<table>
<thead>
<tr>
<th>Syntax</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td> p Tag</td>
<td> P tag stuff</td>
<td><p>This is a paragraph.</p></td>
</tr>
<tr>
<td>h1 Tag</td>
<td>Allows you to add a header to your webpage</td>
<td><h1>This is a header</h1></td>
</tr>
<tr>
<td>img tag</td>
<td>Allows to add an image to your webpage.</td>
<td><img src="images/dogpicture.jpg alt="Picture of a Dog"></td>
</tr>
<tr>
<td>a tag</td>
<td>Allows you to add links onto your webpage.</td>
<td><a href="http://youtube.com">Youtube.com</a></td>
</tr>
<tr>
<td>div tag</td>
<td>defines a section in your html code.</td>
<td><div>This text is inside the div</div></td>
</tr>
<tr>
<td>!DOCTYPE</td>
<td>Sets the type of document.</td>
<td><!DOCTYPE html></td>
</tr>
</tbody>
</table>
</section>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Sugar</li>
</ul>
<ol>
<li>Milk</li>
<li>Eggs</li>
<li>Sugar</li>
</ol>
</body>
</html>
这是我的css
#nav {
background-color: black;
overflow: hidden;
}
#nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 18px 20px;
text-decoration: none;
font-size: 22px;
}
#nav a:hover {
background-color: white;
color: black;
}
#nav a:visited{
color:green ;
}
img{
float:left;
margin:0px auto;
overflow: none;
}
#table1 table{
border: 2px dotted black;
}
#table1 table thead tr{
background-color: green;
padding: 9px 24px;
text-align: center;
}
#table1 table tbody tr{
background-color: skyblue;
text-align: center;
}
#table1 table tbody tr:nth-child(even){
background-color: darkgreen;
}
#table1 table tbody tr:hover {
background-color: red;
}
body
{
margin:0px auto;
padding:0px;
background:#e6e6e6;
float: center;
width: 800px;
border: 2px solid black;
}
h1{
text-align: left;
float:left;
text-shadow: 10px red;
font-family: Oswald;
}
#textshadow{
text-shadow: 2px 2px #ff0000;
}
p{
font-family: Open Sans;
background-color: white;
}
我确信有些东西我不见了，但我是html的新手并且无法找到。如果它有助于我在添加ID和部分之前使用样式。
答案 0 :(得分：3)
您刚刚没有正确关闭nav div。结束标签丢失了。
应该是：
<div id="nav">
<a href="assignment1.html">Home</a>
<a href="table.html">Table</a>
<a href="http://rrc.ca">Red River</a>
<a href="http://google.ca">Google</a>
</div> <!-- just add closing bracket -->
这是固定版本：
#nav {
background-color: black;
overflow: hidden;
}
#nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 18px 20px;
text-decoration: none;
font-size: 22px;
}
#nav a:hover {
background-color: white;
color: black;
}
#nav a:visited{
color:green ;
}
img{
float:left;
margin:0px auto;
overflow: none;
}
#table1 table{
border: 2px dotted black;
}
#table1 table thead tr{
background-color: green;
padding: 9px 24px;
text-align: center;
}
#table1 table tbody tr{
background-color: skyblue;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
</head>
<body>
<div id="nav">
<a href="assignment1.html">Home</a>
<a href="table.html">Table</a>
<a href="http://rrc.ca">Red River</a>
<a href="http://google.ca">Google</a>
</div>
<section id="table1">
<table>
<thead>
<tr>
<th>Syntax</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td> p Tag</td>
<td> P tag stuff</td>
<td><p>This is a paragraph.</p></td>
</tr>
<tr>
<td>h1 Tag</td>
<td>Allows you to add a header to your webpage</td>
<td><h1>This is a header</h1></td>
</tr>
<tr>
<td>img tag</td>
<td>Allows to add an image to your webpage.</td>
<td><img src="images/dogpicture.jpg alt="Picture of a Dog"></td>
</tr>
<tr>
<td>a tag</td>
<td>Allows you to add links onto your webpage.</td>
<td><a href="http://youtube.com">Youtube.com</a></td>
</tr>
<tr>
<td>div tag</td>
<td>defines a section in your html code.</td>
<td><div>This text is inside the div</div></td>
</tr>
<tr>
<td>!DOCTYPE</td>
<td>Sets the type of document.</td>
<td><!DOCTYPE html></td>
</tr>
</tbody>
</table>
</section>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Sugar</li>
</ul>
<ol>
<li>Milk</li>
<li>Eggs</li>
<li>Sugar</li>
</ol>
</body>
</html>