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

Más contenido relacionado

Último

二年级音乐教育全年教学计vv二年级音乐教育全年教学计划 2024_25.docx
二年级音乐教育全年教学计vv二年级音乐教育全年教学计划 2024_25.docx二年级音乐教育全年教学计vv二年级音乐教育全年教学计划 2024_25.docx
二年级音乐教育全年教学计vv二年级音乐教育全年教学计划 2024_25.docxLUCHENSOONMoe
 
我可是超级厉害的黑客,轻轻一戳就能入侵一个大学网站修改成绩单呢!👍【微信tytyqqww】
我可是超级厉害的黑客,轻轻一戳就能入侵一个大学网站修改成绩单呢!👍【微信tytyqqww】我可是超级厉害的黑客,轻轻一戳就能入侵一个大学网站修改成绩单呢!👍【微信tytyqqww】
我可是超级厉害的黑客,轻轻一戳就能入侵一个大学网站修改成绩单呢!👍【微信tytyqqww】黑客 接单【TG/微信qoqoqdqd】
 
Rancangan Pengajaran Tahunan Bahasa Cina TAHUN 5
Rancangan Pengajaran Tahunan Bahasa Cina TAHUN 5Rancangan Pengajaran Tahunan Bahasa Cina TAHUN 5
Rancangan Pengajaran Tahunan Bahasa Cina TAHUN 5ssuser4cf6f01
 
1111111111一年级音乐教育全年教学计划 2024_25 (1).docx
1111111111一年级音乐教育全年教学计划 2024_25 (1).docx1111111111一年级音乐教育全年教学计划 2024_25 (1).docx
1111111111一年级音乐教育全年教学计划 2024_25 (1).docxLUCHENSOONMoe
 
最近找了黑客修改成绩,真的成功了!黑客修改成绩,黑客改成绩,入侵教务系统,国外大学成绩修改 破解教务系统,改GPA分数黑客入侵教务系统黑客修改大学成绩改分...
最近找了黑客修改成绩,真的成功了!黑客修改成绩,黑客改成绩,入侵教务系统,国外大学成绩修改 破解教务系统,改GPA分数黑客入侵教务系统黑客修改大学成绩改分...最近找了黑客修改成绩,真的成功了!黑客修改成绩,黑客改成绩,入侵教务系统,国外大学成绩修改 破解教务系统,改GPA分数黑客入侵教务系统黑客修改大学成绩改分...
最近找了黑客修改成绩,真的成功了!黑客修改成绩,黑客改成绩,入侵教务系统,国外大学成绩修改 破解教务系统,改GPA分数黑客入侵教务系统黑客修改大学成绩改分...黑客 接单【TG/微信qoqoqdqd】
 
6年级美术全年教学计划 Semakan KSSR Pendidikan Seni Visual Tahun 6.docx
6年级美术全年教学计划 Semakan KSSR Pendidikan Seni Visual Tahun 6.docx6年级美术全年教学计划 Semakan KSSR Pendidikan Seni Visual Tahun 6.docx
6年级美术全年教学计划 Semakan KSSR Pendidikan Seni Visual Tahun 6.docxAnonymous0fCNL9T0
 

Último (6)

二年级音乐教育全年教学计vv二年级音乐教育全年教学计划 2024_25.docx
二年级音乐教育全年教学计vv二年级音乐教育全年教学计划 2024_25.docx二年级音乐教育全年教学计vv二年级音乐教育全年教学计划 2024_25.docx
二年级音乐教育全年教学计vv二年级音乐教育全年教学计划 2024_25.docx
 
我可是超级厉害的黑客,轻轻一戳就能入侵一个大学网站修改成绩单呢!👍【微信tytyqqww】
我可是超级厉害的黑客,轻轻一戳就能入侵一个大学网站修改成绩单呢!👍【微信tytyqqww】我可是超级厉害的黑客,轻轻一戳就能入侵一个大学网站修改成绩单呢!👍【微信tytyqqww】
我可是超级厉害的黑客,轻轻一戳就能入侵一个大学网站修改成绩单呢!👍【微信tytyqqww】
 
Rancangan Pengajaran Tahunan Bahasa Cina TAHUN 5
Rancangan Pengajaran Tahunan Bahasa Cina TAHUN 5Rancangan Pengajaran Tahunan Bahasa Cina TAHUN 5
Rancangan Pengajaran Tahunan Bahasa Cina TAHUN 5
 
1111111111一年级音乐教育全年教学计划 2024_25 (1).docx
1111111111一年级音乐教育全年教学计划 2024_25 (1).docx1111111111一年级音乐教育全年教学计划 2024_25 (1).docx
1111111111一年级音乐教育全年教学计划 2024_25 (1).docx
 
最近找了黑客修改成绩,真的成功了!黑客修改成绩,黑客改成绩,入侵教务系统,国外大学成绩修改 破解教务系统,改GPA分数黑客入侵教务系统黑客修改大学成绩改分...
最近找了黑客修改成绩,真的成功了!黑客修改成绩,黑客改成绩,入侵教务系统,国外大学成绩修改 破解教务系统,改GPA分数黑客入侵教务系统黑客修改大学成绩改分...最近找了黑客修改成绩,真的成功了!黑客修改成绩,黑客改成绩,入侵教务系统,国外大学成绩修改 破解教务系统,改GPA分数黑客入侵教务系统黑客修改大学成绩改分...
最近找了黑客修改成绩,真的成功了!黑客修改成绩,黑客改成绩,入侵教务系统,国外大学成绩修改 破解教务系统,改GPA分数黑客入侵教务系统黑客修改大学成绩改分...
 
6年级美术全年教学计划 Semakan KSSR Pendidikan Seni Visual Tahun 6.docx
6年级美术全年教学计划 Semakan KSSR Pendidikan Seni Visual Tahun 6.docx6年级美术全年教学计划 Semakan KSSR Pendidikan Seni Visual Tahun 6.docx
6年级美术全年教学计划 Semakan KSSR Pendidikan Seni Visual Tahun 6.docx
 

Ul&Li

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.