ul&li<br />
ul及li的定义<br />unordered list,无序列表。<br />list item,列表中的一条。<br />
ul标签的写法<br />	<ul> <br />	<div> ul标签里也可以插入其他标签 </div><br />	<li> 子标签 </li><br />	<li> 子标签 </li><br />	<li> 子标签 </li><br />...
ul和li标签自身的CSS属性<br />List-style:包含三个子属性<br />List-style-type: 取值为none或url<br />List-style-position: 取值为inside或outside<br /...
常见的用法<br />导航、次级导航、一组切换banner、商品列表、一群排列的链接。<br />关键词:一群排列的有共同功能、共同布局形式的组件。(外观上可以不同)<br />
导航<br />整个导航是一个ul标签。<br />导航中的每一个单元是 li标签。<br />单元里的链接用a标签。<br />ul标签实现导航的背景。<br />li标签定位每个单元的位置。<br />a标签实现导航中每个单元链接的高度、宽...
导航<br /><ul id=“nav”><br />	<li><br />		<a href=“#” class=“active”>我的支付宝</a><br />	</li><br />	<li> <br />		<a href=“#”>消费...
#nav {<br />width:…;<br />height:…;<br />background:…;<br />padding-left:…;<br />}<br />#navli {<br />float:left;<br />mar...
次级导航<br />次级导航依然是一个ul标签。包含在子单元的li标签内。<br />次级导航的结构与主导航一样:ulli      a。<br />
<ul id=“nav”><br /><li><br />	<a href=“#” class=“active”>消费记录</a><br />	<ulid=“sub-nav”><br />		<li>	<br />		<a href=“#” c...
次级导航<br />次级导航依附于主导航中的子单元存在,跟着子单元跑。<br />这时应该用什么定位方法?<br />
次级导航<br />position定位方法。<br />主导航的子单元 li标签: position:relative;<br />次级导航的 ul标签: position:absolute;<br />
次级导航<br />次级导航有背景。最方便的做法是将这个背景统一做到主导航中去。<br />
#nav {<br />width:…;<br />height:…;<br />background:…;<br />padding-left:…;<br />}<br />#navli {<br />float:left;<br />mar...
#sub-navli a {<br />width:…;<br />height:…;<br />line-height:…;<br />font-size:…;<br />color:…;<br />overflow:hidden;<br /...
一组切换banner<br />Banner 1<br />Banner 2<br />Banner 3<br />Banner 4<br />控制banner移动到显示框内,实现切换效果。<br />
一组切换banner<br />Banner 1<br />Banner 2<br />Banner 3<br />Banner 4<br />一组banner排列,用ul标签。<br />每个banner是一个 li标签。<br />
一组切换banner<br />援助海地<br />轻松网购<br />生活支付<br />多种支付方式<br />控制切换banner的按钮也是一组排列的 li标签。<br />
Banner 2<br />Banner 1<br />Banner 3<br />Banner 4<br />援助海地<br />轻松网购<br />轻松网购<br />轻松网购<br /><div id=“banner-frame”><br...
商品列表<br />整个列表是 ul标签。<br />每个商品是一个 li标签。<br />
商品列表<br />实现方式上没有本质上的区别。需要注意的是:<br />ul标签定义好宽度。<br />浮动的li标签在宽度满了之后会自动换行。<br />注意计算好li标签的宽度以及 li之间的距离。<br />注意浮动的 li标签外边距不...
商品列表<br />Li<br />Width: a;<br />Li<br />Width: a;<br />Li<br />Width: a;<br />Margin-left: b;<br />ul {<br />width: 3a+3b...
Upcoming SlideShare
Loading in …5
×

Ul&Li

2,330 views
2,246 views

Published on

Published in: Education
3 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
2,330
On SlideShare
0
From Embeds
0
Number of Embeds
275
Actions
Shares
0
Downloads
8
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide

Ul&Li

  1. 1. ul&li<br />
  2. 2. ul及li的定义<br />unordered list,无序列表。<br />list item,列表中的一条。<br />
  3. 3. ul标签的写法<br /> <ul> <br /> <div> ul标签里也可以插入其他标签 </div><br /> <li> 子标签 </li><br /> <li> 子标签 </li><br /> <li> 子标签 </li><br /></ul><br />
  4. 4. ul和li标签自身的CSS属性<br />List-style:包含三个子属性<br />List-style-type: 取值为none或url<br />List-style-position: 取值为inside或outside<br />List-style-image: 取值为none/disc/circle/square等<br />
  5. 5. 常见的用法<br />导航、次级导航、一组切换banner、商品列表、一群排列的链接。<br />关键词:一群排列的有共同功能、共同布局形式的组件。(外观上可以不同)<br />
  6. 6. 导航<br />整个导航是一个ul标签。<br />导航中的每一个单元是 li标签。<br />单元里的链接用a标签。<br />ul标签实现导航的背景。<br />li标签定位每个单元的位置。<br />a标签实现导航中每个单元链接的高度、宽度、文字大小、颜色、粗体、垂直居中等。<br />active 类实现当前导航所处位置的图片。<br />
  7. 7. 导航<br /><ul id=“nav”><br /> <li><br /> <a href=“#” class=“active”>我的支付宝</a><br /> </li><br /> <li> <br /> <a href=“#”>消费记录</a> <br /> </li><br /> <li><br /> <a href=“#”>安全中心</a><br /> </li><br /></ul><br />
  8. 8. #nav {<br />width:…;<br />height:…;<br />background:…;<br />padding-left:…;<br />}<br />#navli {<br />float:left;<br />margin-top:…;<br />padding-right:…;<br />display:block;<br />width:…;<br />height:…;<br />text-align:center;<br />}<br />#navli a {<br />width:…;<br /> height:…;<br /> line-height:…;<br /> font-size:14px;<br /> color:#000;<br /> font-weight:bold;<br />overflow:hidden;<br />display:block;<br />}<br />#navlia.active {<br />background:…;<br />}<br />
  9. 9. 次级导航<br />次级导航依然是一个ul标签。包含在子单元的li标签内。<br />次级导航的结构与主导航一样:ulli a。<br />
  10. 10. <ul id=“nav”><br /><li><br /> <a href=“#” class=“active”>消费记录</a><br /> <ulid=“sub-nav”><br /> <li> <br /> <a href=“#” class=“active”>消费记录</a><br /> </li><br /><li> <br /> <a href=“#” class=“active”>充提记录</a><br /> </li><br /> </ul><br /></li><br /></ul><br />
  11. 11. 次级导航<br />次级导航依附于主导航中的子单元存在,跟着子单元跑。<br />这时应该用什么定位方法?<br />
  12. 12. 次级导航<br />position定位方法。<br />主导航的子单元 li标签: position:relative;<br />次级导航的 ul标签: position:absolute;<br />
  13. 13. 次级导航<br />次级导航有背景。最方便的做法是将这个背景统一做到主导航中去。<br />
  14. 14. #nav {<br />width:…;<br />height:…;<br />background:…;<br />padding-left:…;<br />}<br />#navli {<br />float:left;<br />margin-top:…;<br />padding-right:…;<br />display:block;<br />width:…;<br />height:…;<br />text-align:center;<br />position:relative;<br />}<br />#sub-nav {<br />position:absolute;<br />top:…;<br />left:…;<br />width:…;<br />}<br />#navli a {<br />width:…;<br /> height:…;<br /> line-height:…;<br /> font-size:14px;<br /> color:#000;<br /> font-weight:bold;<br />overflow:hidden;<br />display:block;<br />}<br />#navlia.active {<br />background:…;<br />}<br />#sub-navli {<br />float:left;<br />width:…;<br />height:…;<br />margin-right:…;<br />text-align:center;<br />display:block;<br />}<br />
  15. 15. #sub-navli a {<br />width:…;<br />height:…;<br />line-height:…;<br />font-size:…;<br />color:…;<br />overflow:hidden;<br />display:block;<br />}<br />#sub-navlia.active {<br />background:…;<br />}<br />
  16. 16. 一组切换banner<br />Banner 1<br />Banner 2<br />Banner 3<br />Banner 4<br />控制banner移动到显示框内,实现切换效果。<br />
  17. 17. 一组切换banner<br />Banner 1<br />Banner 2<br />Banner 3<br />Banner 4<br />一组banner排列,用ul标签。<br />每个banner是一个 li标签。<br />
  18. 18. 一组切换banner<br />援助海地<br />轻松网购<br />生活支付<br />多种支付方式<br />控制切换banner的按钮也是一组排列的 li标签。<br />
  19. 19. Banner 2<br />Banner 1<br />Banner 3<br />Banner 4<br />援助海地<br />轻松网购<br />轻松网购<br />轻松网购<br /><div id=“banner-frame”><br /><ul id=“banner-group”><br /> <li><a href=“#”><img /></a></li><br /> <li><a href=“#”><img /></a></li><br /><li><a href=“#”><img /></a></li><br /></ul><br /></div><br /><ul id=“banner-control”><br /><li><a href=“#”></a></li><br /><li><a href=“#”></a></li><br /><li><a href=“#”></a></li>s<br /></ul><br />Banner 展现层<br />Banner 控制层<br />
  20. 20. 商品列表<br />整个列表是 ul标签。<br />每个商品是一个 li标签。<br />
  21. 21. 商品列表<br />实现方式上没有本质上的区别。需要注意的是:<br />ul标签定义好宽度。<br />浮动的li标签在宽度满了之后会自动换行。<br />注意计算好li标签的宽度以及 li之间的距离。<br />注意浮动的 li标签外边距不合并。<br />注意浏览器兼容问题(双边距等)。<br />
  22. 22. 商品列表<br />Li<br />Width: a;<br />Li<br />Width: a;<br />Li<br />Width: a;<br />Margin-left: b;<br />ul {<br />width: 3a+3b;<br />}<br />

×