2-6. 列表
2017-11-09 本文已影响0人
一Left一
1、什么是列表
给很多数据添加列表语义,告诉浏览器这些数据是一个整体
2、分类
无序列表 unordered list
有序列表 ordered list
定义列表 definition list
3、无序列表一
<body>
<ul type="disc">
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
<li>我是一个li</li>
</ul>
</body>
图片.png
4、无序列表二
ul中一般只放li标签,如果要构造更加复杂的界面,可以在li标签内放其他的标签丰富界面
- 一定更要记住ul标签中最好只放li标签
- 但是li标签中还可以继续放其它的标签
<h1>凤凰网</h1>
<hr width="600" align="left">
<!--
align: 控制标签在水平方向上的排布
取值：left 、right、center
这两个属性,不建议使用,后期通过css来控制
-->
<!--
快速创建标签: > (包含)
ul>li*16 : 创建ul中包含16个li
-->
<ul type="circle">
<li><a href="#">夯实中华民族伟大复兴的健康之基 喜迎十九大</a></li>
<li><a href="#">上海获2021年第46届世界技能大赛举办权 习近平致辞</a></li>
<li><a href="#">外国嘉宾参观砥砺奋进大型成就展 十九大代表风采</a></li>
<li><a href="#">“中国奇迹”背后的必然逻辑 理上网来</a></li>
<li><a href="#">台风“卡努”来袭 浙江海南等7省市有强风雨(图)</a></li>
<li><a href="#">中国成造船业“霸主”：前9月订单稳居全球第一</a></li>
<li><a href="#">神乎其神的“香格里拉陨石”骗局 为什么迅速破灭？</a></li>
<li><a href="#">火车司机28年考了6本驾照 背后的故事令人惊叹(图)</a></li>
<li><a href="#">提前在韩部署萨德主谋被曝光 韩媒：必须问责(图)</a></li>
<li><a href="#">这个美国最坚定盟友曾欺负中国 如今对美说“不”</a></li>
<li><a href="#">特朗普的这一通讲话，引发国际社会震动</a></li>
<li><a href="#">美国这么富，却为何一直都是联合国的“欠费大户”？</a></li>
<li><a href="#">卸任9个月赚6000多万美元 奥巴马如何“捞金”？</a></li>
<li><a href="#">日本研究所公布全球城市综合实力排名：北京第13</a></li>
<li><a href="#">史上最牛收费站一次收22万美元 这国GDP的60%都靠它</a></li>
<li><a href="#">美国这下真急了 多国已宣布使用人民币结算</a></li>
</ul>
</body>
图片.png
5、无序列表三
ul中包含li,li中也可以包含ul,如此循环
在webstorm中如何快速编写一个ul的格式
ul>li: 生成一对ul标签, 然后在这对ul标签中再生成一对li标签ul>li*3: 生成一对ul标签, 然后在这对ul标签中再生成3对li标签
<body>
<ul>
<li>
我是最外层的li
<ul>
<li> 我是内层的li</li>
<li> 我是内层的li</li>
<li> 我是内层的li</li>
<li>
<ul>
<li>我是第3成li</li>
<li>我是第3成li</li>
</ul>
</li>
</ul>
</li>
<li>
<img src="pic.jpg" alt="" width="200">
</li>
</ul>
</body>
图片.png
