Question

我正在尝试使用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>&lt;p&gt;This is a paragraph.&lt;/p&gt;</td>
                    </tr>
                    <tr>
                        <td>h1 Tag</td>
                        <td>Allows you to add a header to your webpage</td>
                        <td>&lt;h1&gt;This is a header&lt;/h1&gt;</td>
                    </tr>
                    <tr>
                        <td>img tag</td>
                        <td>Allows to add an image to your webpage.</td>
                        <td>&lt;img src="images/dogpicture.jpg alt="Picture of a Dog"&gt;</td>
                    </tr>
                    <tr>
                        <td>a tag</td>
                        <td>Allows you to add links onto your webpage.</td>
                        <td>&lt;a href="http://youtube.com"&gt;Youtube.com&lt;/a&gt;</td>
                    </tr>
                    <tr>
                        <td>div tag</td>
                        <td>defines a section in your html code.</td>
                        <td>&lt;div&gt;This text is inside the div&lt;/div&gt;</td>
                    </tr>
                    <tr>
                        <td>!DOCTYPE</td>
                        <td>Sets the type of document.</td>
                        <td>&lt;!DOCTYPE html&gt;</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和部分之前使用样式。

Answer 1

您刚刚没有正确关闭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>&lt;p&gt;This is a paragraph.&lt;/p&gt;</td>
                    </tr>
                    <tr>
                        <td>h1 Tag</td>
                        <td>Allows you to add a header to your webpage</td>
                        <td>&lt;h1&gt;This is a header&lt;/h1&gt;</td>
                    </tr>
                    <tr>
                        <td>img tag</td>
                        <td>Allows to add an image to your webpage.</td>
                        <td>&lt;img src="images/dogpicture.jpg alt="Picture of a Dog"&gt;</td>
                    </tr>
                    <tr>
                        <td>a tag</td>
                        <td>Allows you to add links onto your webpage.</td>
                        <td>&lt;a href="http://youtube.com"&gt;Youtube.com&lt;/a&gt;</td>
                    </tr>
                    <tr>
                        <td>div tag</td>
                        <td>defines a section in your html code.</td>
                        <td>&lt;div&gt;This text is inside the div&lt;/div&gt;</td>
                    </tr>
                    <tr>
                        <td>!DOCTYPE</td>
                        <td>Sets the type of document.</td>
                        <td>&lt;!DOCTYPE html&gt;</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>

ID不应用样式到表

1 个答案: