我一直在尝试用我的代码做两件事,首先,我一直在努力摆脱我选择的导航链接下面令人讨厌的小行,同时也试图在不丢失页眉和页脚背景的情况下将页眉和页脚向右浮动。
为了提高效率,我在html中添加了一些基本的PHP。有人能快速看一下我的代码吗?我已经为此绞尽脑汁好几个小时了,开始觉得我真的想得太多了。提前感谢:D
/*********************************************
Header & Footer
*********************************************/
.header,
.footer {
max-width: 80%;
background: #191A1C;
margin: auto;
}
.header .nav,
.footer .nav{
text-align: center;
}
.header .nav ul,
.footer .nav ul {
list-style: none;
padding: 0;
margin: auto 0;
}
.header .nav li,
.footer .nav li{
display: inline-block;
}
/*********************************************
Links
*********************************************/
.header .nav li a:link,
.header .nav li a:visited,
.footer .nav li a:link,
.footer .nav li a:visited {
text-decoration: none;
background: #404247;
color: #E8EBF5;
}
.header .nav li,
.header .nav li a:link,
.header .nav li a:visited{
padding: 1em 2em;
}
.footer .nav li,
.footer .nav li a:link,
.footer .nav li a:visited{
padding: 0.5em 1em;
}
.header .nav li a:hover,
.footer .nav li a:hover {
text-decoration: underline;
}
/*********************************************
Selected Links
*********************************************/
.header .nav li.home_on a,
.footer .nav li.home_on a{
background: #BC4663;
}
.header .nav li.portfolio_on a,
.footer .nav li.portfolio_on a{
background: #80C7F2;
}
.header .nav li.aboutMe_on a,
.footer .nav li.aboutMe_on a{
background: #CCC331;
}
.header .nav li.contactMe_on a,
.footer .nav li.contactMe_on a{
background: #64CE97;
}
<html>
<head>
<title><?php echo $pageTitle; ?></title>
<link rel="stylesheet" href="css/nav.css" type="text/css">
</head>
<body>
<div class="header">
<ul class="nav">
<li class="home <?php if ($section == "home") {echo "home_on";} ?>"><a href="index.php">Home</a></li>
<li class="portfolio <?php if ($section == "portfolio") {echo "portfolio_on";} ?>"><a href="portfolio.php">Portfolio</a></li>
<li class="aboutMe <?php if ($section == "aboutMe") {echo "aboutME_on";} ?>"><a href="aboutMe.php">About Me</a></li>
<li class="contactMe <?php if ($section == "contactMe") {echo "contactMe_on";} ?>"><a href="contactMe.php">Contact Me</a></li>
</ul>
</div>
我或多或少已经解决了我遇到的问题。为了在保持背景不变的同时将导航栏向右浮动,我不得不将其包装在一个容器中,并重新排列一些css。我还在我的标题中添加了一个:after语句,以清除导航后浮动的任何内容。
/*********************************************
Header & Footer
*********************************************/
.wrapper{
max-width: 80%;
margin: auto;
}
.header,
.footer {
background: #191A1C;
}
.header:after,
.footer:after {
content:"";
height:0;
display:block;
visibility:hidden;
clear:both;
}
.header .nav,
.footer .nav{
text-align: center;
float: right;
margin: 0;
}
.header .nav ul,
.footer .nav ul {
list-style: none;
padding: 0;
margin: auto 0;
}
.header .nav li,
.footer .nav li{
display: inline-block;
}
<html>
<head>
<title><?php echo $pageTitle; ?></title>
<link rel="stylesheet" href="css/nav.css" type="text/css">
</head>
<body>
<div class="header">
<div class="wrapper">
<ul class="nav">
<li class="home <?php if ($section == "home") {echo "home_on";} ?>"><a href="index.php">Home</a></li>
<li class="portfolio <?php if ($section == "portfolio") {echo "portfolio_on";} ?>"><a href="portfolio.php">Portfolio</a></li>
<li class="aboutMe <?php if ($section == "aboutMe") {echo "aboutME_on";} ?>"><a href="aboutMe.php">About Me</a></li>
<li class="contactMe <?php if ($section == "contactMe") {echo "contactMe_on";} ?>"><a href="contactMe.php">Contact Me</a></li>
</ul>
</div>
</div>
<div id="content">