0

我也有一个背景图像，我想让标题在整个屏幕上伸展，并将导航栏实现到标题中（我已经解决了标题中的导航栏问题）。我也搜索并尝试了这里的所有示例，但均无济于事。例如像这样： http: //www.projectseven.com/

我的html代码是这样的：

<!DOCtype html>
<html>
<head>
<title>Adventist Youth's Empowerment</title>
<link rel="stylesheet" href="mainstyle.css" text="style/css">
<head>
<div id="header">
<nav>
<nav id="nav_bar_center">
<ul>
    <li><a href="Home.html">Home</a></li>
    <li><a href="Main.html">Main</a></li>
    <li><a href="Aboutus.html">About Us</a></li>
    <li><a href="Contactus.html">Contact US</a></li>
    <li><a href="form.html">Form</a></li>
    <li><a href="Pictures.html">Pictures</a></li>
</ul>
</nav>
</nav>
</div>
</head>

我的CSS代码是这样的：

body {
background-repeat:
background-size: 100%;
background-image: url(Images/background%20image5.jpg);
background-position: fixed;
}

#content {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: small-caps;
text-transform: none;
color: #000000;
}
nav {
width: 100%;
height: 33px;
background-image:url(Images/navbar.gif);
background-repeat:repeat;
}
#nav_bar_center {
width: 900px;
margin-left:auto;
margin-right:auto;
}

nav ul{
list-style:none;
}
nav a {
display:inline;
float:left;
text-decoration:none;
color:#FFF;
font:"Times New Roman", Times, serif;
font-size:18px;
font-weight:bold;
line-height: 33px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 5px;

}
nav a:hover {
background-image:url(Images/navbgr.gif);
height: 28px;
}
#header {
width: 100%;
background-image:url(Images/header.gif);
}
4

1 回答 1

2

HTML 标记无效，不要将您的body内容包装在head标签中，而是使用易于命名的<body></body>标签来包装您的页面内容。也不要将nav元素包装在另一个nav标签中。

您得到的空白是因为应用了浏览器默认样式，您可以使用我推荐Eric Mayer 的重置样式表。或者你可以使用这个方便的 css 语句。

* {
    margin: 0;
    padding: 0;
}

它有效地针对页面上的每个元素，并使它们的边距和填充为 0。

您应该为您的 HTML 使用语义标记。

<!DOCtype html>
<html lang="en">
    <head>
        <title>Adventist Youth's Empowerment</title>
        <link rel="stylesheet" href="mainstyle.css" text="style/css">
    </head>
<body>
<header></header>
    <nav>
        <ul>
            <li><a href="Home.html">Home</a></li>
            <li><a href="Main.html">Main</a></li>
            <li><a href="Aboutus.html">About Us</a></li>
            <li><a href="Contactus.html">Contact US</a></li>
            <li><a href="form.html">Form</a></li>
            <li><a href="Pictures.html">Pictures</a></li>
        </ul>
    </nav>
</body>
</html>

在这里，我还为您想要达到的效果创建了一个 jsFiddle：http: //jsfiddle.net/5vdgr/

于 2013-11-03T16:59:00.337 回答