网站制作巧用ul li
在网站制作过程中我们既要做到代码精减，又要不失美观，下面看下如下图的菜单是怎么做的。 附带CSS样式和源码。
- 网站制作CSS菜单
—————– 源码部分开始———————–
<div id=”left”>
<div class=”left_title”>办公家具产品分类</div>
<ul id=”left_box”>
<li id=”li_onlie”>班台系列
<div id=”left_box_2ul”>
<ul>
<li><a href=”/products/sm_bt.php”>实木班台</a></li>
<li><a href=”/products/bs_bt.php”>板式班台</a></li>
<li><a href=”/products/bl_bt.php”>玻璃班台</a></li>
<li><a href=”/products/gz_bt.php”>钢制班台</a></li>
</ul>
</div>
</li>
<li><a href=”/products/wjg.php”>文件柜系列</a></li>
<li><a href=”/products/hyz.php”>会议桌系列</a></li>
<li><a href=”/products/qtpf.php”>前台&屏风</a></li>
<li><a href=”/products/bgz.php”>办公桌系列</a></li>
<li><a href=”/products/sfcj.php”>沙发&茶几</a></li>
<li><a href=”/products/bgy.php”>办公椅系列</a></li>
<li><a href=”/products/xj.php”>校具系列</a></li>
<li><a href=”/products/jd.php”>酒店系列</a></li>
<li><a href=”/products/gz.php”>钢制系列</a></li>
</ul>
<div class=”clear”></div>
<div class=”left_footer”><img src=”../images/footer_sub.jpg”/></div>
</div>
width:229px;
margin:5px;
float:left;
}
.left_title{
background:transparent url(../images/title_sub.jpg) no-repeat scroll 0 0;
color:#009900;
font-size:14px;
font-weight:bold;
height:35px;
line-height:35px;
padding-left:10px;
width:219px;
}
#left_box{
float:left;
width:229px;
background:transparent url(../images/mid_sub.jpg) repeat-y scroll 0 0;
margin:0px;
padding:0px;
}
#left_box li{
border-bottom:1px solid #999999;
margin:0px;
padding:0px;
width:219px;
padding:3px;
margin:2px;
font-size:13px;
font-weight:bold;
text-indent:6px;
list-style:none;
}
#left_box_2ul{
padding-left:5px;
background:#f5f5f5;
}
#left_box_2ul ul{
list-style:none;
}
#left_box_2ul ul li{
list-style:none;
width:200px;
border-bottom:1px solid #CCCCCC;
font-size:12px;
font-weight:normal;
}
#li_onlie{
background-color:#ECEBED;
}
.left_footer{
width:229px;
padding-bottom:10px;
}
——————CSS源码结束———————–
2条评论 关于 “网站制作巧用ul li”
由 itx 发表于2009-06-09
博主:LI中不允许插入DIV 不符合W3C标准
admin: div 完全可以去掉，把css里的属性转到一下层的UL中即可。
由 厦门SEO 发表于2009-06-11
学习了