关于html5:零基础教你学前端15无序列表

这节课   来学习无序列表 。看一张图,这里有三个紧急的事件要解决:第一件: 家里的水壶烧开了,留神是老式的那种,不及时处理水就会溢出来;第二件:孩子睡醒了, 哭着要让你抱,很可能须要换尿布;第三件:家里的电话响了,不晓得是谁打来的, 很可能有急事;

这个案例常被用于做心理测试,如果是你, 你会先做哪一件事件呢?很显然每个人的抉择可能是不同的,解决三件事也没有规范的程序。这种无程序的内容,就能够应用无序列表来展现了, 所谓无序列表,就是指列表项中的内容是没有工夫、 空间、或者逻辑等程序要求的。无序列表的语法如图:

和 ol 一样,须要留神, ul 标签外面只能搁置 li 标签,如果须要嵌套其它标签的话, 须要搁置在 li 标签里。关上编辑器中, 新建一个 unorder_list.html 页面 , 补全根本代码,在body里书写ul标签  , 在 ul 标签外部,回车换行。在 ul 标签里定义三个 li 标签 , 在第一个 li 里写入: 抱孩子  。 第二个 li 标签里写入:关天然气。   第三个 li 里写入: 接电话 。保留。

在浏览器中关上页面,列表显示了,能够分明的看到, 列表的我的项目符号成果与有序列表不一样。无序列表的我的项目符号, 三个我的项目同为彩色的实心圆点, 表明该列表是没有程序的。

返回编辑器,替换两个 li 的地位, 通过应用剪切粘贴的办法来实现,大家发现这个操作比拟麻烦。你能够先将光标定位到某一行, 按下 Alt 键, 再点击键盘的高低箭头, 就能够挪动以后行了  。

两行替换结束后   保留。回到浏览器,刷新, 每个列表项的我的项目符号依然是彩色实心圆点, 但内容的程序曾经替换了。

无序列表的我的项目符号只有彩色实心圆点的款式吗? 当然不是, 理论我的项目开发时 ,无序列表的我的项目符号会很难看。例如百度新闻页, 左侧的新闻标题列表 , 就是无序列表 , 这里的我的项目符号就是实心方块    这样的成果是如何实现的呢?

在 ul 标签上 增加 type 属性, 它的作用就是用来设置无序列表的我的项目符号。type 的值有四个 ,示意不同的我的项目符号的款式, disc 实心圆点, circle 空心圆, square 实心方块,none 暗藏我的项目符号。

返回编辑器   在 ul 标签上输出空格   在外面增加 type属性   值为disc   保留回到浏览器    刷新    发现我的项目符号的款式没有任何扭转   因为 disc就是指实心圆点, 是 type 的默认值。返回编辑器   批改 type 的值为 circle  保留。回到浏览器   刷新   原来彩色的实心圆点变成了彩色圆环

反复这个步骤   批改 type 的值为 square    圆环变成了彩色实心方块   批改 type 的值为 none  发现列表的我的项目符号不见了。

文章配套视频:

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据