Question

我的CSS样式表标题无效。它在内部样式表或嵌入式样式表中效果最佳，但在外部样式表中的代码时无效。只有标题类没有炒过，但其他代码效果最好。

        .header1{
            background-color: brown ;
            padding: 20px;
            background-image: url("pics/saqib.png");
        }
        #pic{
            float: right;
        }
        ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }

        li {
                float:left;
                background-color: #333;
                border-top-left-radius: 35%;
                border-top-right-radius: 35%;
                margin-left:2px;
            }

        li a {
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
            /* Change the link color to #111 (black) on hover */
        li a:hover {
                background-color: green;
        }
        .navbar{
            padding: 20px;
            margin-top: 150px;
        }
        /* End nav bar */
        .skin{
            background-color: lightblue;
        }
        .table {
            margin-top: 0px;
            width: 100%;
        }
        .table .sidebar{
            border-right: 2px solid black;
            width: 20%;
        }
        .footer{
            background-color: blue;
            padding: 20px;
            padding: 100px;
        }
        .left{
            float: left;
            display: block;
            width: 40%;
            color: gray;
            border-right: 2px solid white;
            border-color: gray;
            padding-right: 70px;
        }
        .right{
            float: right;
            display: block;
            width: 40%;
            color: gray;
        }
        pre a{
            font-family: helvatic, sanshrif;
            font-size: 15px;
            color: white;
        }
        pre a:hover{
            color: green;

        }

<!DOCTYPE html>
<html>
    <head>
            <title>My Page</title>
            <link rel="stylesheet" type="text/css" href="mypage.css"/>
            <meta charset="UTF-8"/>
    </head>
    <body>
            <header class="header">
                <div id="pic"> <img src="pics/saqib.png"/></div>
                    <div class="navbar">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Software</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">About us</a></li>
                        </ul>
                    </div>
            </header>
            <div class="skin">
                <table class="table">
                        <tr>
                            <td class="sidebar">
                                    This is sidebar
                            </td>
                            <td style="padding: 50px;">
                                <h1>My First Website</h1>
                                <p> A collection of all steps to complete a process in known as Transaction. DBMS  should support transaction. It must ensure that all steps in a transaction are executed successfully or none of them is executed. It facility ensures that the database is always in consistent state even if a transaction fails due to some problem such as system crash or power failure etc.</p>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">
                                <footer class="footer">
                                    <div class="left">
                                        <pre><a href="#">Home</a>  |  <a href="#">Software</a>  |  <a href="#">Contact Us</a>  |  <a href="#">About us</a></pre>
                                    </div>
                                    <div class="right">
                                        The most important function of DBMS 
                                        is data processing. It includes creation,
                                        storage and arrangements of data in database.
                                    </div>
                                </footer>
                            </th>
                        </tr>
                </table>
            </div>
    <body>
</html>

Answer 1

您的样式表定义了.header1类，但您的HTML正在寻找header。让它们一样。

Answer 2

应该是：

.header{
            background-color: brown ;
            padding: 20px;
            background-image: url("pics/saqib.png");
        }

Answer 3

您可以在任何一个地方进行更改以使其正常工作：

在HTML中：

<header class="header">

为：

<header class="header1">

或在CSS中：

.header1 {
    background-color: brown;
    padding: 20px;
    background-image: url("pics/saqib.png");
}

为：

.header {
    background-color: brown;
    padding: 20px;
    background-image: url("pics/saqib.png");
}

外部CSS文件无法正常工作

3 个答案: