我创建了一个事件导航栏,它突出显示了您当前正在使用 PHP 的页面的链接。我的目标是使链接显示为带下划线且颜色不同。下划线有效,但颜色没有改变。
我已经将 .on 类(PHP 将激活的类)定位在其他适用的 css 样式之后,所以我认为没有任何冲突。我什至尝试使用 !important 来查看是否有任何影响,但遗憾的是没有。
标题.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script><![endif]-->
<title><?php echo "LWM Marketing"; ?></title>
<link rel="stylesheet" type="text.css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<?=@$css;?>
</head>
<body>
<div class="wrapper">
<header>
<a class="header-logo" href="index.php"><h1 id="main-logo">LWM PR & Comms</h1></a>
<ul class="nav">
<li class="<?php if ($section == "index") { echo "on";} ?>"><a href="index.php">About</a></li>
<li class="<?php if ($section == "services") { echo "on";} ?>"><a href="services.php">Services and Previous Work</a></li>
<li class="<?php if ($section == "contact") { echo "on";} ?>"><a href="contact.php">Contact</a></li>
</ul>
</header>
<div id="content">
索引.css
#content>*{
width:300px;
#content{
height:1025px;
h2{
font-family: 'Special Elite', helvetica, arial, verdana, sans-serif;
padding-left: 15px;
position: relative;
top:20px;
#linkedin{
position: relative;
top:30px;
left:5px;
#logo-cloud{
position: relative;
left:380px;
top:-150px;
width:600px;
#main-blurb{
font-family: 'Raleway', helvetica, arial, sans-serif;
font-size: 18px;
padding-left: 15px;
position: relative;
top: -125px;
width:600px;
#main-blurb p{
margin: 0px 0px 40px 40px;
text-indent: 15px;
width:600px;
#main-blurb p:last-child{
text-align: center;
font-size: 24px;
#divider{
width:960px;
position: relative;
top:-125px;
left:12px;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #B6B8BA;
padding-top:15px;
#twitter-timeline{
position: relative;
top:-580px;
left:682px;
footer{
position: relative;
top:-30px;
.hidden{
display:none;
style.css (with the class that the PHP activates)
/* General Styling */
body{
font-family: 'Raleway', helvetica, arial, verdana, sans-serif;
background-image:url("images/paper.png");
}
.wrapper{
width:960px;
margin: auto;
a {
color:#000000;
text-decoration:none;
}
a:hover{
color:#434991;
}
a:active{
color:#FF9436;
}
/* Logo (Header) */
.header-logo{
display:block;
width:247px;
height:111px;
text-indent:-9999px;
background: url("images/logo.gif") no-repeat;
margin:15px 0px 10px 15px;
float:left;
position:relative;
left:40px;
/* Main-Nav */
.nav li{
list-style-type: none;
display:inline-block;
font-size: 23px;
margin-top:90px;
float:left;
position:relative;
left:25px;
top:-12px;
.nav a{
font-family: 'Special Elite', sans-serif;
padding-top:5px;
border-left: 1px dotted #878787 ;
padding:2px 5px 0px 30px;
.nav li:first-child a {
border: 0;
.on{
text-decoration:underline;
color:#FF9436;
/* Footer */
footer{
font-family: 'Special Elite', sans-serif;
width:100%;
float:left;
footer p{
display:inline;
footer div{
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #B6B8BA;
padding-top:15px;
footer div li{
list-style-type: none;
display: inline-block;
font-size: 15px;
margin-left: 80px;
footer div li p{
font-size: 12px;
有人能看出为什么颜色属性没有影响吗?它是被我没有注意到的东西覆盖了,还是有其他我完全忽略的东西?
谢谢。
最佳答案
您是否设置了“.on a”的样式,这将是必需的。
关于php - 使用 PHP 的 CSS 主动导航突出显示。下划线有效,颜色无效。为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23742819/