Question

我还有一个背景图片，我希望在整个屏幕上拉伸标题，并将导航栏实现到标题中（我已经解决了标题问题中的导航栏）。我也搜索并尝试了这里的所有例子无济于事。例如：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);
}

Answer 1

HTML标记无效，请勿在{{1}}标记中包含body内容，而是使用简单命名的head标记来包装您的网页内容。也不要将<body></body>元素包装在另一个nav标记中。

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

nav

它有效地定位页面上的每个元素，并使其边距和填充为0。

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

* {
    margin: 0;
    padding: 0;
}

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

如何在没有空格的情况下在整个屏幕上拉伸标题

1 个答案: