Question

刷新时，我无法获得CSS代码来显示我在浏览器中所做的更改。有些CSS代码无法正常工作，而我在下面提供的某些CSS代码却无法正常工作。我正在尝试更改主标题导航栏上的CSS，但所有更改均无效。例如，如果我将背景色更改为红色，则什么也不会发生。

   nav {
	width: 100%; 
  	height: 100px; 
  	background-color: #0b98de;
    }

    nav a {
	display: block; 
	font-family: sans-serif;
    font-size: 9px;
    color: white;
	background-color: #17b0cf;
    border: 1px solid #000;
	padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
	text-decoration: none;
    }

    nav a:hover {
    background-color:#e3e7ee
    }

    #logo {
    font-family: 'Hind', sans-serif;
    font-size: 30px;
    letter-spacing: -2px;
    text-shadow: 1px 1px 2px #c4c4c4;
    padding-left: 20px;
    padding-right: 40px;
    margin-right: 10px;
    margin-top: -20px;
    }

<body>
	<nav>
	<a id="logo" href="#">Logo</a>
	<a href="#">How it works</a>
	<a href="#">Sign Up</a>
	<a href="#">Login</a>
    </nav>
   </body>

Answer 1

在HTML中使用以下代码结构：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        nav {
            width: 100%; 
            height: 100px; 
            background-color: #0b98de;
        }

        nav a {
            display: block; 
            font-family: sans-serif;
            font-size: 9px;
            color: white;
            background-color: #17b0cf;
            border: 1px solid #000;
            padding-top: 20px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            text-decoration: none;
        }

        nav a:hover {}

        #logo {
            font-family: 'Hind', sans-serif;
            font-size: 30px;
            letter-spacing: -2px;
            text-shadow: 1px 1px 2px #c4c4c4;
            padding-left: 20px;
            padding-right: 40px;
            margin-right: 10px;
            margin-top: -20px;
        }
    </style>
</head>
<body>
    <nav>
        <a id="logo" href="#">Logo</a>
        <a href="#">How it works</a>
        <a href="#">Sign Up</a>
        <a href="#">Login</a>
    </nav>
</body>
</html>

Answer 2

确保您的HTML语法并创建 style.css 文件，然后在其中插入CSS代码。这将是一个好习惯。

维护单独的style.css文件，或在HTML文件中使用<style>标签。
在创建navbar首先创建ul然后创建li时始终遵循正确的作法。

nav {
    width: 100%; 
    height: 100px; 
    background-color: #0b98de;
}

nav a {
    display: block; 
    font-family: sans-serif;
    font-size: 15px;
    color: white;
    background-color: #17b0cf;
    border: 1px solid #000;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    text-decoration: none;
}

nav a:hover {
    background-color:grey;
}

#logo {
    font-family: 'Hind', sans-serif;
    font-size: 30px;
    letter-spacing: -2px;
    text-shadow: 1px 1px 2px #c4c4c4;
    padding-left: 20px;
    padding-right: 40px;
    margin-right: 10px;
    margin-top: -20px;
}

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <nav>
        <a id="logo" href="#">Logo</a>
        <a href="#">How it works</a>
        <a href="#">Sign Up</a>
        <a href="#">Login</a>
    </nav>
</body>
</html>

Answer 3

您的

中有语法错误

nav a:hover{
    background-color:#e3e7ee      
}

您应该在CSS中以分号结尾。将以下内容更改为

nav a:hover{
    background-color:#e3e7ee;
}

如果仍然无法正常运行，请尝试使用其他浏览器并查看其行为。如果它在其他浏览器中运行，则必须清除测试浏览器的缓存。

我无法获得CSS代码来显示我在浏览器中所做的更改

3 个答案: