Question

HTML

主页

新闻

照片

画

附表

链接

Answer 1

<ul id="HeaderMenu">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>


<ul id="footerMenu">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>

并在CSS中单独解决它们：

    body{
    background: #cccccc url("http://www.paradise.lk/images/pattern.png") no-repeat;
    width: 100%;
    height:auto;
}
h1 {
    text-align: center;
}
p.text{
    text-align: center;
}


#HeaderMenu li {
    float: left;
}

#HeaderMenu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#HeaderMenu li a:hover:not(.active) {
    background-color: red;
    color:black;
}


#footerMenu li {
   float: left;
}

#footerMenu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#footerMenu li a:hover:not(.active) {
    background-color: #2d6a05;
    color:black;
}

ul.HeaderMenu {
    list-style-type: none;
    margin: -1px;

    overflow: hidden;
    background-color: #156611;
}
ul.footerMenu {
    list-style-type: none;
    margin: -1px;

    overflow: hidden;
    background-color: #156611;
}



#logo img {
    height: 90px;
    width: 212px;


}
.box {
    background-color: #4b4244;
    width: 300px;
    padding: 25px;
    margin: 25px;
}
.box1 {
    background-color:white;
    width: 300px;
    padding: 25px;
    margin: 25px;
}

现在分别为页眉和页脚菜单设置样式。

Answer 2

body{
    background: #cccccc url("http://hdnaturewall.com/wallpaper/2015/10/sky-blue-wallpaper-background-18-desktop-background.jpg") no-repeat 0px -501px;
}

为菜单部分和页脚部分提供不同的ID

2 个答案: