divcss:DIV CSS列形导航一例，超酷解析！

on 2009-2-12 in Html教程 | 0 Comment


先看看XHTML代码:
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<divid=\"navcontainer\">
<ulid=\"navlist\">
<liid=\"active\"><ahref=\"http://www.52css.com/\"id=\"current\">Itemone</a>
<ulid=\"subnavlist\">
<liid=\"subactive\"><ahref=\"http://www.52css.com/\"id=\"subcurrent\">Subitemone</a></li>
<li><ahref=\"http://www.52css.com/\">Subitemtwo</a></li>
<li><ahref=\"http://www.52css.com/\">Subitemthree</a></li>
<li><ahref=\"http://www.52css.com/\">Subitemfour</a></li>
</ul>
</li>
<li><ahref=\"http://www.52css.com/\">Itemtwo</a></li>
<li><ahref=\"http://www.52css.com/\">Itemthree</a></li>
<li><ahref=\"http://www.52css.com/\">Itemfour</a></li>
</ul>
</div>



看看CSS是如何定久相关元素:
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
#navcontainer{margin-left:30px;}

#navcontainerul
{
margin:0;
padding:0;
list-style-type:none;
font-family:verdana,arial,Helvetica,sans-ser;
}

#navcontainerli{margin:0;}

#navcontainera
{
display:block;
padding:5px10px;
width:140px;
color:#000;
background-color:#ADC1AD;
text-decoration:none;
border-top:1pxsolid#fff;
border-left:1pxsolid#fff;
border-bottom:1pxsolid#333;
border-right:1pxsolid#333;
font-weight:bold;
font-size:.8em;
background-image:url(images/vertical06.jpg);
background-repeat:no-repeat;
background-position:00;
}

#navcontainera:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
border-top:1pxsolid#333;
border-left:1pxsolid#333;
border-bottom:1pxsolid#fff;
border-right:1pxsolid#fff;
background-image:url(images/vertical06a.jpg);
background-repeat:no-repeat;
background-position:00;
}

#navcontainerululli{margin:0;}

#navcontainerulula
{
display:block;
padding:5px5px5px30px;
width:125px;
color:#000;
background-color:#C5D8C5;
text-decoration:none;
font-weight:normal;
}

#navcontainerulula:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
}



看了这么多代码现在让我们看看运行效果吧！

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]