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

12次阅读

共计 1080 个字符,预计需要花费 3 分钟才能阅读完成。

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

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

和 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  发现列表的我的项目符号不见了。

文章配套视频:

正文完
 0