所以我尝试了一堆我在这里找到的不同的解决方案,但就是想不通。这是网站所在位置的链接:http ://webdesign4.georgianc.on.ca/~200203355/AmanaWeb/index.html
这是我的 HTML 和 CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Amana Radarange | Microwave Oven</title>
<style type="text/css">
@import url("styles.css");
</style>
</head>
<body id="homepage">
<div id="Wrapper">
<div id="Header">
<h1 title="Amana Heating & Air Company" class="left"><a href="index.html">Amana</a></h1>
<div id="nav">
<ul>
<li id="link1"><a href="index.html">Home</a></li>
<li id="link2"><a href="about.html">About Radarange</a></li>
<li id="link3"><a href="support.html">Radarange Support</a></li>
<li id="link4"><a href="company.html">About Amana</a></li>
<li id="link5"><a href="purchase.html">Purchase Radarange</a></li>
<li id="link6"><a href="checkout.html">Check Out</a></li>
</ul>
</div>
</div>
<div id="Content">
</div>
</div>
</body>
</html>
e@charset "utf-8";
/* CSS Document */
#Header{
background-repeat: no-repeat;
display:inline;
}
#Wrapper {
background-image: url(images/TopBar.png);
background-repeat: no-repeat;
}
#Content{
background-image :url(images/Backdrop.jpg);
}
ul {
list-style-type:none;
margin:0;
padding-left: 620px;
display:inline;
}
li {
display:inline;
}
li#link2 {
padding-left: 110px;
display:inline;
}
li#link3 {
padding-left: 55px;
display:inline;
}
li#link4 {
padding-left: 60px;
display:inline;
}
li#link5 {
padding-left: 80px;
display:inline;
}
li#link6 {
padding-left: 35px;
display:inline;
}
h1 {
background-image: url(images/AmanaLogo.png);
background-repeat: no-repeat;
overflow: visible;
text-indent: -9999px;
line-height: 130px;
padding-bottom: 70px;
padding-right: 140px;
}
#Content {
clear: both;
}