今天图老师小编给大家介绍下应用WEB标准实例：ul li制作导航，平时喜欢应用WEB标准实例：ul li制作导航的朋友赶紧收藏起来吧！记得点赞哦~
【 tulaoshi.com - Web开发 】
前言：
最近在给一个电子商务网重构的时候，用ul li写了个导航，感觉挺有实用价值的，所以写出来给朋友瞧瞧。
实例效果图：
整体观察思考：
左下角是圆角，右上角也是圆角，中间可以平铺背景，这图的结构也可以看成左中右的结构，标题距离宽度差不多,我考虑用 ul li来写。
ul为整体平铺背景。
li设置固定宽度,左浮动。
左边圆角切成图片所在li中，宽度设置成切图宽度，左浮动。
右边圆角切成图片所在li中，宽度设置成切图宽度，右浮动。
还有一个"小虚点"的图片怎么处理呢！ 思考后决定放在li里，让它右浮动。
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）(盒模型来分析)
这样这个导航的整体框架就浮现在脑海里了。
接下来就是行动了.......
制作流程：
标签结构 -- 添加css样式
开始制作：
标签结构：
（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/） div class="nav"
ul
li class="navLeft"img src="images/index_r4_c26.gif" alt=""//li
liimg src="images/nav_t.jpg" alt=""/a href="#"首页/a/li
liimg src="images/nav_t.jpg" alt=""/a href="#"护肤类/a/li
liimg src="images/nav_t.jpg" alt=""/a href="#"彩妆类/a/li
liimg src="images/nav_t.jpg" alt=""/a href="#"香水类/a/li
liimg src="images/nav_t.jpg" alt=""/a href="#"套装类/a/li
liimg src="images/nav_t.jpg" alt=""/a href="#"问题皮肤/a/li
liimg src="images/nav_t.jpg" alt=""/a href="#"身体护理/a/li
lia href="#"圣荷丰胸/a/li
li class="navRight"img src="images/index_r4_c61.gif" alt=""//li
/ul
/div
来源:http://www.tulaoshi.com/n/20160219/1613768.html
看过《应用WEB标准实例：ul li制作导航》的人还看了以下文章 更多>>
