前言：
最近在给一个电子商务网重构的时候，用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：
@import url("http://www.07art.com/public/public.css");
.nav{height:50px;}
.nav ul{float:right;width:737px; background:url(images/index_r4_c28.gif) repeat-x;}
.nav li{float:left;width:89px;line-height:44px;text-align:center;}
.nav li a{color:#fff;font-size:14px;}
.nav li img{float:right;}
.nav li.navLeft{width:10px;}
.nav li.navRight{float:right;width:10px;}