Question

所以我尝试了一些我在这里找到的不同解决方案，但是无法理解。以下是网站所在位置的链接：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; 
}

使用CSS使Nav项与H1内联

0 个答案: