HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮 |
您所在的位置：网站首页 › dw中如何制作嵌套表格 › HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮 |
HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮
|
文章速览： HTML基础知识的学习+附加常用HTML标签 HTML中有序列表（＜ol＞＜li＞）和无序列表（＜ul＞＜li＞）以及定义列表的使用，以及利用无序列表制作网购按钮 HTML中图片的网页插入以及属性设置 HTML中＜a＞＜/a＞标签的四大功能 必看！必看！！必看！！！ HTML表单标签＜form＞＜/form＞登录窗口和单选框以及下拉栏的制作 有序列表（ ）的使用： Document 你们喜欢看的电影： 速8 返老还童 marvel其中的ol代表列表夹，li代表的是列表项 结果： 对于上面的代码中等价于： 你们喜欢看的电影： 速8 返老还童 marvel当然，对于上面的type=”1“而言，也可以将1换成a、A、i、I 换成a的话，按照a、b、c进行编号的排序 换成A的话，按照A、B、C进行编号的排序 换成 i 的话，按照 i 、 ii 、 iii 进行编号排序 换成 I 的话，按照 I 、 II 、 III 进行编号排序 你们喜欢看的电影： 速8 返老还童 marvel换成上面的代码的话就会进行倒叙的排序 换成上面的代码的话就会从第二个开始排序，第一个就没了 结果： 其中disc代表的是实心圆 无序列表是网页中最常用的列表，其各个列表项之间为并列关系，没有顺序级别之分。u和li标签都拥有type属性，用于指定列表项目符号。在无序列表中type属性的常用值有三个: 换成上面的代码的会将实心圆换成实心方块 换成上面的代码将会换成空心圈
对于上面的其实没有那么常见，用处也挺小，所以再举一个比较常见的例子： 就设计现在网购比较火的某宝上的按钮： Document ul{ /* 删除汉字前面的圈圈 */ list-style:none; } *{ /* 删除网页最上面的空白 */ margin : 0; /* 删除左边处的空白 */ padding: 0; } li{ /* 将body标签中所有li标签中的文字横过来，横成一排 */ float: left; /* 横过来之后，将原本body标签中的li标签中每个lio标签中的文字之间流出空隙 */ margin: 0 10px; /* 颜色设为某宝红 */ color: #f40; /* 对字体进行加粗 */ font-weight:bold; /* 设置一个字体的大小： */ font-size: 14px; height: 25px; line-height: 25px; padding: 0 5px; } /* hover的意思就是当鼠标移到这个位置发生什么事 */ li:hover{ /* 鼠标移动到li标签中的字体上变成的背景颜色 */ background: #f40; /* 鼠标移动到li标签中的字体上将li标签中的字体变成白色 */ color: #fff; /* 鼠标移动到文字上背景变成圆角 */ border-radius: 15px; } 某宝中点击按钮： 某猫 聚划算 某猫超市
定义列表常用于对名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。在网页设计中，定义列表常用于实现图文混排效果，其中 标记中插入图片， 标记中放入对图片解释说明的文字。如下图所示的“讲师简介”模块就可以通过定义列表来实现。
举个例子： 有序列表无序列表的嵌套 每日生鲜 时令水果 苹果 香蕉 芒果 鲜谷蔬菜 毛豆 西芹 冬瓜
|
对与上面写的难免感觉有些简单，其实ol标签中有5种值可以进行添加，然后就可以更加美观
type=“1” start=“2”，无论类型是1，还是a、A、i、I，要是想从第二个开始的话，都需要start为2
上面的代码等价于：
综上，写一个例题（此时利用到块元素）：
上面无序列表前的符号也可以是自己的图片（不过图片应该小一点，这样才能够显示出来）： 稍做修改： 
注意：list-style-image属性就是用来引入自己的图片的当作无序表前面的标识符，不过后面跟写固定格式url（），括号里面写自己的图片的地址
定义列表，主要用于解释名词，包含两个层次的列表。 第一层次是需要解释的名词，第二层是具体的解释。 定义列表的语法如下； 
可设置的模板： 
定义列表的嵌套 在定义列表中，一个dt标记下可以有多个dd标记作为名词的解释和说明，以实现定义列表的嵌套。 无序列表和有序列表的嵌套 最常见的列表嵌套模式就是有序列表和无序列表的嵌套，可以重复第使用ol和ul标记组合实现。
【本文地址】