Css 将导航标签拆分为四个相等的部分_Css_Html

Css 将导航标签拆分为四个相等的部分

css html

Css 将导航标签拆分为四个相等的部分,css,html,Css,Html,我想将导航标签分成四个相等的部分（如正方形），并向其中添加四个不同的背景图像。这是我的密码： <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Feedback<

我想将导航标签分成四个相等的部分（如正方形），并向其中添加四个不同的背景图像。这是我的密码：

<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>


保险商实验室
{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
锂
{
浮动：左；
}
A.
{
显示：块；
宽度：60px；
}
.img1{
背景图片：url（）；
背景重复：无重复；
}
.img2{
背景图片：url（）；
背景重复：无重复；
}
.img3{
背景图片：url（）；
背景重复：无重复；
}
.img4{
背景图片：url（）；
背景重复：无重复；
}

nav{宽度：200%；高度：500px；-moz边框半径：10px；-webkit边框半径：10px；边框半径：10px；//对于opera背景：#f3f3f3；边框：10px实心#bbbbbbbbb；位置：绝对；背景：#f9f9f9url（../images/joo.jpg）；}以上是它的css代码添加

display:table cell

li项

<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>