应用WEB标准实例：ul li制作导航

　　前言：

　　最近在给一个电子商务网重构的时候，用ul li写了个导航，感觉挺有实用价值的，所以写出来给朋友瞧瞧。

　　实例效果图：

　　整体观察思考：

　　左下角是圆角，右上角也是圆角，中间可以平铺背景，这图的结构也可以看成左中右的结构，标题距离宽度差不多,我考虑用 ul li来写。

　　ul为整体平铺背景。

　　li设置固定宽度,左浮动。

　　左边圆角切成图片所在li中，宽度设置成切图宽度，左浮动。

　　右边圆角切成图片所在li中，宽度设置成切图宽度，右浮动。

　　还有一个"小虚点"的图片怎么处理呢！ 思考后决定放在li里，让它右浮动。

　　(盒模型来分析)

　　这样这个导航的整体框架就浮现在脑海里了。

　　接下来就是行动了.......

　　制作流程：

　　标签结构 --> 添加css样式

　　开始制作：

　　标签结构：

　　<div class="nav">
<ul>
<li class="navLeft"><img src="images/index_r4_c26.gif" alt=""/></li>
<li><img src="images/nav_t.jpg" alt=""/><a href="#">首页</a></li>
<li><img src="images/nav_t.jpg" alt=""/><a href="#">护肤类</a></li>
<li><img src="images/nav_t.jpg" alt=""/><a href="#">彩妆类</a></li>
<li><img src="images/nav_t.jpg" alt=""/><a href="#">香水类</a></li>
<li><img src="images/nav_t.jpg" alt=""/><a href="#">套装类</a></li>
<li><img src="images/nav_t.jpg" alt=""/><a href="#">问题皮肤</a></li>
<li><img src="images/nav_t.jpg" alt=""/><a href="#">身体护理</a></li>
<li><a href="#">圣荷丰胸</a></li>
<li class="navRight"><img src="images/index_r4_c61.gif" alt=""/></li>
</ul>
</div>

　　css：