课时33.无序列表练习3(理解)

本文详细解析了如何使用HTML中的无序列表(ul)和列表项(li)标签创建多级界面,通过嵌套ul实现复杂的菜单结构。文章介绍了WebStorm中快速编写ul格式的方法,使界面设计更加高效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上节课做了第一个练习,这节课我们来完成第二个练习(多级界面)

做之前先分析:

1.物品清单是这个界面的标题,可以通过<h1>标签来做。

2.蔬菜,水果同属于物品清单里的,并且蔬菜,水果谁先谁后都无所谓,所以是无序列表,而蔬菜里面又包含这几样,所以它们又是一个无序列表,水果同理,这是无序列表中又包含无序列表,这是这节课讲解都重点。

分析:这个li标签除了可以添加其它标签以外,还可以来添加ul标签。

无序列表中都li标签除了可以添加其它标签来丰富我们都界面以外,还可以添加ul标签来丰富我的界面,也就是说ul中有li,li中又可以有ul,可以无限下去,以后你添加标签只添加到li中就可以了,不要添加到ul里,因为ul中只能有li。

在WebStorm中如何快速编一个ul的格式

正常写ul,li标签比较复杂,需要先写一个ul然后按下tab键,WebStorm是一款很强大的工具,可以写成ul>li,按下tab键,直接生成

 

如果想有两个li,则可以写成ul>li*2,按下tab键,直接生成

含义:生成一对ul标签,然后在这对ul标签再生成两对li标签,所以刚才对例子用简单写法,可以写成如下:

ul>li*2>h2+ul>li*3,按下tab键

 

转载于:https://www.cnblogs.com/luckyshuangshuang/p/9172211.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值