我想将导航标签分成四个相等的部分(如正方形)并向它们添加四个不同的背景图像。这是我的代码:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
}
.img1{
background-image:url();
background-repeat:no-repeat;
}
.img2{
background-image:url();
background-repeat:no-repeat;
}
.img3{
background-image:url();
background-repeat:no-repeat;
}
.img4{
background-image:url();
background-repeat:no-repeat;
}
</style>
</head>
<body>
<ul>
<li><a href="#home" class="img1" >Home</a></li>
<li><a href="#news" class="img2">News</a></li>
<li><a href="#contact" class="img3">Contact</a></li>
<li><a href="#about" class="img4>About</a></li>
</ul>