Question

我正在尝试在单独的文件中创建导航栏，以便稍后我可以将其包含在php中。文件nav_menu.php包含h1标记，p标记以及包含ul标记的a。我在外部样式表中创建了CSS。我设计了所有元素。 h1标记不起作用。为什么呢？

nav_menu.php：

<html>
<head>
<link rel="stylesheet" type="text/css" href="nav_menu.css">
</head>
<body>

<h1 title="School Helping Program">------ S.H.P. ------</h1>
<p title="S.H.P.">School Helping Program</p>

<ul>
<li><a href="home.php">home</a></li>
<li><a href="marks.php">marks</a></li>
<li><a onclick="logout()">log out</a></li>
</ul>

</body>
</html>

nav_menu.css：

<style>

h1{text-align:center;color:#CC0000;}/*Here's the prolbem*/
p{font-style:italic;text-align:center;}
li{float:left;}
ul{list-style-type:none;margin:0;padding:0;}
a{
display:block;
width:180px;
text-align:center;
background-color:#5CB8E6;
text-transform:uppercase;
color:#CC0000;
text-decoration:none;
padding:10px 135px;
cursor: pointer;
}

Answer 1

您正在使用外部.css文件，因此其中不得包含任何HTML标记。

<style> // remove this
^^^^^^^---

h1{text-align:center;color:#CC0000;}/*Here's the prolbem*/

Answer 2

这是因为您在第一行有<style>而浏览器将其威胁为<style>\n\nh1选择器。

Answer 3

删除css文件中的前两行，它应该可以工作：

<style>

不是必需的，也可能是css文件中的错误

Answer 4

由于它是外部样式表，因此您不需要包含<style>标记，因为只有在该文件中添加css时才需要html标记

所以你需要做的就是改变这个：

<style>

h1{text-align:center;color:#CC0000;}/*Here's the prolbem*/
p{font-style:italic;text-align:center;}
li{float:left;}
ul{list-style-type:none;margin:0;padding:0;}
a{
display:block;
width:180px;
text-align:center;
background-color:#5CB8E6;
text-transform:uppercase;
color:#CC0000;
text-decoration:none;
padding:10px 135px;
cursor: pointer;
}

到此

h1{text-align:center;color:#CC0000;}/*Here's the prolbem*/
p{font-style:italic;text-align:center;}
li{float:left;}
ul{list-style-type:none;margin:0;padding:0;}
a{
display:block;
width:180px;
text-align:center;
background-color:#5CB8E6;
text-transform:uppercase;
color:#CC0000;
text-decoration:none;
padding:10px 135px;
cursor: pointer;
}

然后它应该可以正常工作

外部样式表不适用于XAMPP中的`h1`

4 个答案: