文章速览:
HTML中有序列表(<ol><li>)和无序列表(<ul><li>)以及定义列表的使用,以及利用无序列表制作网购按钮
HTML中<a></a>标签的四大功能 必看!必看!!必看!!!
HTML表单标签<form></form>登录窗口和单选框以及下拉栏的制作
有序列表(
- )的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你们喜欢看的电影:
<ol>
<li>速8</li>
<li>返老还童</li>
<li>marvel</li>
</ol>
</body>
</html>
其中的ol代表列表夹,li代表的是列表项
结果:
对与上面写的难免感觉有些简单,其实ol标签中有5种值可以进行添加,然后就可以更加美观
对于上面的代码中等价于:
<body>
你们喜欢看的电影:
<ol type="1">
<li>速8</li>
<li>返老还童</li>
<li>marvel</li>
</ol>
</body>
当然,对于上面的type=”1“而言,也可以将1换成a、A、i、I
换成a的话,按照a、b、c进行编号的排序
换成A的话,按照A、B、C进行编号的排序
换成 i 的话,按照 i 、 ii 、 iii 进行编号排序
换成 I 的话,按照 I 、 II 、 III 进行编号排序
<body>
你们喜欢看的电影:
<ol type="1" reversed="reversed">
<li>速8</li>
<li>返老还童</li>
<li>marvel</li>
</ol>
</body>
换成上面的代码的话就会进行倒叙的排序
<body>
你们喜欢看的电影:
<ol type="1" start="2">
<li>速8</li>
<li>返老还童</li>
<li>marvel</li>
</ol>
</body>
换成上面的代码的话就会从第二个开始排序,第一个就没了
type=“1” start=“2”,无论类型是1,还是a、A、i、I,要是想从第二个开始的话,都需要start为2
无序列表(
- )的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你们喜欢吃的水果:
<ul>
<li>苹果🍎</li>
<li>香蕉🍌</li>
<li>草莓🍓</li>
</ul>
</body>
</html>
结果:
上面的代码等价于:
<ul type="disc">
<li>苹果🍎</li>
<li>香蕉🍌</li>
<li>草莓🍓</li>
</ul>
其中disc代表的是实心圆
无序列表是网页中最常用的列表,其各个列表项之间为并列关系,没有顺序级别之分。u和li标签都拥有type属性,用于指定列表项目符号。在无序列表中type属性的常用值有三个:
<ul type="square">
<li>苹果🍎</li>
<li>香蕉🍌</li>
<li>草莓🍓</li>
</ul>
换成上面的代码的会将实心圆换成实心方块
<ul type="circle">
<li>苹果🍎</li>
<li>香蕉🍌</li>
<li>草莓🍓</li>
</ul>
换成上面的代码将会换成空心圈
综上,写一个例题(此时利用到块元素):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a{
list-style-type:square;
/* list-style-image: url(images/xiao.gif);*/
}
.b{
list-style-type: circle;
}
</style>
</head>
<body>
<ul >
<li>星期日</li>
<li class="a">星期一</li>
<li>星期二</li>
<li class="b">星期三</li>
<li class="a">星期四</li>
<li>星期五</li>
<li class="b">星期六</li>
</ul>
</body>
</html>
上面无序列表前的符号也可以是自己的图片(不过图片应该小一点,这样才能够显示出来):
稍做修改:
<style>
.a{
/* list-style-type:square; */
list-style-image: url(images/xiao.gif);
}
.b{
list-style-type: circle;
}
</style>
注意:list-style-image属性就是用来引入自己的图片的当作无序表前面的标识符,不过后面跟写固定格式url(),括号里面写自己的图片的地址
对于上面的其实没有那么常见,用处也挺小,所以再举一个比较常见的例子:
就设计现在网购比较火的某宝上的按钮:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<!-- 你们喜欢看的电影:
<ol type="1" start="2">
<li>速8</li>
<li>返老还童</li>
<li>marvel</li>
</ol> -->
某宝中点击按钮:
<ul type="circle">
<li>某猫</li>
<li>聚划算</li>
<li>某猫超市</li>
</ul>
</body>
</html>
定义列表:
定义列表常用于对名词进行解释和描述,与无序和有序列表不同,定义列表的列表项前没有任何项目符号。在网页设计中,定义列表常用于实现图文混排效果,其中
标记中插入图片, 标记中放入对图片解释说明的文字。如下图所示的“讲师简介”模块就可以通过定义列表来实现。
定义列表,主要用于解释名词,包含两个层次的列表。
第一层次是需要解释的名词,第二层是具体的解释。
定义列表的语法如下;
可设置的模板:
定义列表的嵌套
在定义列表中,一个dt标记下可以有多个dd标记作为名词的解释和说明,以实现定义列表的嵌套。
无序列表和有序列表的嵌套
最常见的列表嵌套模式就是有序列表和无序列表的嵌套,可以重复第使用ol和ul标记组合实现。
举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表无序列表的嵌套</title>
</head>
<body>
<h2>每日生鲜</h2>
<ul>
<li>时令水果
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>芒果</li>
</ol>
</li>
<li>鲜谷蔬菜
<ul>
<li>毛豆</li>
<li>西芹</li>
<li>冬瓜</li>
</ul>
</li>
</ul>
</body>
</html>