Question

我一直试图用我的代码做两件事，首先我一直试图摆脱我选择的导航链接下方的小烦恼线，并试图将页眉和页脚都浮动到没有丢失我的页眉和页脚背景的权利。

我已经在我的html中添加了一些基本的PHP来提高效率。有人可以快速浏览一下我的代码吗，我已经绞尽脑汁待了好几个小时，开始认为我真的在想这个问题。提前致谢：D

＆＃13;

/*********************************************
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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我或多或少地对我遇到的问题进行了分类。为了让我的导航栏向右浮动，同时保持我的背景完整，我不得不把它包在一个容器中并重新安排我的一些css。我还在我的标题中添加了一个：after语句，以清除导航后将浮动的任何内容。

＆＃13;

/*********************************************
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;
}

＆＃13;

<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">

＆＃13;

导航栏的填充和浮动问题

1 个答案: