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

x颖x颖xy

x颖x颖xy

2016-02-19 16:59

今天图老师小编给大家介绍下应用WEB标准实例:ul li制作导航,平时喜欢应用WEB标准实例:ul li制作导航的朋友赶紧收藏起来吧!记得点赞哦~

  前言:

  最近在给一个电子商务网重构的时候,用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

展开更多 50%)
分享

猜你喜欢

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

Web开发
应用WEB标准实例:ul li制作导航

ul与li的区别

Web开发
ul与li的区别

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

dl,dt,dd,ul,li,ol区别及应用

Web开发
dl,dt,dd,ul,li,ol区别及应用

CSS教程:li和ul标签用法举例

Web开发
CSS教程:li和ul标签用法举例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

DIV+CSS 中UL,LI的运用

Web开发
DIV+CSS 中UL,LI的运用

Web标准发展建议与好的实例之URLs应用技巧

Html CSS布局 Div+CSS XHTML
Web标准发展建议与好的实例之URLs应用技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

C#数据库事务原理及实践

C#数据库事务原理及实践

笔记本换固态硬盘选购多大容量的才好

笔记本换固态硬盘选购多大容量的才好
下拉加载更多内容 ↓