前言:
最近在给一个电子商务网重构的时候,用ul li写了个导航,感觉挺有实用价值的,所以写出来给朋友瞧瞧。
(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)实例效果图:
整体观察思考:
左下角是圆角,右上角也是圆角,中间可以平铺背景,这图的结构也可以看成左中右的结构,标题距离宽度差不多,我考虑用 ul li来写。
ul为整体平铺背景。
li设置固定宽度,左浮动。
左边圆角切成图片所在li中,宽度设置成切图宽度,左浮动。
右边圆角切成图片所在li中,宽度设置成切图宽度,右浮动。
还有一个"小虚点"的图片怎么处理呢! 思考后决定放在li里,让它右浮动。
(盒模型来分析)
这样这个导航的整体框架就浮现在脑海里了。
接下来就是行动了.......
制作流程:
标签结构 -- 添加css样式
(本文来源于图老师网站,更多请访问http://m.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