1. ul&li

2. ul及li的定义 unordered list，无序列表。 list item，列表中的一条。

3. ul标签的写法 <ul> <div> ul标签里也可以插入其他标签 </div> <li> 子标签 </li> <li> 子标签 </li> <li> 子标签 </li> </ul>

4. ul和li标签自身的CSS属性 List-style：包含三个子属性 List-style-type: 取值为none或url List-style-position: 取值为inside或outside List-style-image: 取值为none/disc/circle/square等

5. 常见的用法 导航、次级导航、一组切换banner、商品列表、一群排列的链接。 关键词：一群排列的有共同功能、共同布局形式的组件。（外观上可以不同）

6. 导航 整个导航是一个ul标签。 导航中的每一个单元是 li标签。 单元里的链接用a标签。 ul标签实现导航的背景。 li标签定位每个单元的位置。 a标签实现导航中每个单元链接的高度、宽度、文字大小、颜色、粗体、垂直居中等。 active 类实现当前导航所处位置的图片。

7. 导航 <ul id=“nav”> <li> <a href=“#” class=“active”>我的支付宝</a> </li> <li> <a href=“#”>消费记录</a> </li> <li> <a href=“#”>安全中心</a> </li> </ul>

8. #nav { width:…; height:…; background:…; padding-left:…; } #navli { float:left; margin-top:…; padding-right:…; display:block; width:…; height:…; text-align:center; } #navli a { width:…; height:…; line-height:…; font-size:14px; color:#000; font-weight:bold; overflow:hidden; display:block; } #navlia.active { background:…; }

9. 次级导航 次级导航依然是一个ul标签。包含在子单元的li标签内。 次级导航的结构与主导航一样：ulli a。

10. <ul id=“nav”> <li> <a href=“#” class=“active”>消费记录</a> <ulid=“sub-nav”> <li> <a href=“#” class=“active”>消费记录</a> </li> <li> <a href=“#” class=“active”>充提记录</a> </li> </ul> </li> </ul>

11. 次级导航 次级导航依附于主导航中的子单元存在，跟着子单元跑。 这时应该用什么定位方法？

12. 次级导航 position定位方法。 主导航的子单元 li标签: position:relative; 次级导航的 ul标签: position:absolute;

13. 次级导航 次级导航有背景。最方便的做法是将这个背景统一做到主导航中去。

14. #nav { width:…; height:…; background:…; padding-left:…; } #navli { float:left; margin-top:…; padding-right:…; display:block; width:…; height:…; text-align:center; position:relative; } #sub-nav { position:absolute; top:…; left:…; width:…; } #navli a { width:…; height:…; line-height:…; font-size:14px; color:#000; font-weight:bold; overflow:hidden; display:block; } #navlia.active { background:…; } #sub-navli { float:left; width:…; height:…; margin-right:…; text-align:center; display:block; }

15. #sub-navli a { width:…; height:…; line-height:…; font-size:…; color:…; overflow:hidden; display:block; } #sub-navlia.active { background:…; }

16. 一组切换banner Banner 1 Banner 2 Banner 3 Banner 4 控制banner移动到显示框内，实现切换效果。

17. 一组切换banner Banner 1 Banner 2 Banner 3 Banner 4 一组banner排列，用ul标签。 每个banner是一个 li标签。

18. 一组切换banner 援助海地 轻松网购 生活支付 多种支付方式 控制切换banner的按钮也是一组排列的 li标签。

19. Banner 2 Banner 1 Banner 3 Banner 4 援助海地 轻松网购 轻松网购 轻松网购 <div id=“banner-frame”> <ul id=“banner-group”> <li><a href=“#”><img /></a></li> <li><a href=“#”><img /></a></li> <li><a href=“#”><img /></a></li> </ul> </div> <ul id=“banner-control”> <li><a href=“#”></a></li> <li><a href=“#”></a></li> <li><a href=“#”></a></li>s </ul> Banner 展现层 Banner 控制层

20. 商品列表 整个列表是 ul标签。 每个商品是一个 li标签。

21. 商品列表 实现方式上没有本质上的区别。需要注意的是： ul标签定义好宽度。 浮动的li标签在宽度满了之后会自动换行。 注意计算好li标签的宽度以及 li之间的距离。 注意浮动的 li标签外边距不合并。 注意浏览器兼容问题（双边距等）。

22. 商品列表 Li Width: a; Li Width: a; Li Width: a; Margin-left: b; ul { width: 3a+3b; }