Web——网页列表(实验6)

列表代码编写

一、题目
编写代码实现“第四届中国大学出版社图书奖公示”页面,如下图所示。
(1)页面标题为:“第四届中国大学出版社图书奖公示”;
(2)页面内容:2号标题标记显示“第四届中国大学出版社图书奖公示”,页面背景色为“#ccffcc”,按图效果完成页面设计。
(3)为列表项设置超链接(链接地址自由设置)【自加要求】
在这里插入图片描述二、题目分析
1、列表类型有3种:无序列表、有序列表、定义列表;还有一种特殊的列表是嵌套列表。嵌套列表一般是将无序列表和有序列表进行嵌套。
无序列表:
(1)使用ul标记(双标记)。在开始标记(ul)和结束标记(/ul)之间插入li标记(双标记)书写列表项内容。
(2)type属性:disc——实心圆形;circle——空心圆形;square——实心正方形
在ul标记中定义的type属性,适用于无序列表中的所有列表项;
在li标记中定义的type属性,只适用于定义了type属性的li一项;
若同时定义,优先使用li中的风格
【具体代码编写形式参照下方“代码编写”模块图片】

有序列表:
(1)使用ol标记(双标记)。在开始标记(ol)和结束标记(/ol)之间插入li标记(双标记)书写列表项内容。
(2)type属性:1——数字列表;A——大写字母列表;a——小写字母列表;I大写罗马字母列表;i——小写罗马字母列表
(3)start属性:改变当前列表项前编号的值,如

<ol type="a">
	<li type="A" value="5">计算机科学与技术专业</li>
	<li>软件工程专业</li>
	<li>电子信息工程专业</li>
	<li>物联网工程专业</li>
</ol>

结果如下:
E. 计算机科学与技术专业
f. 软件工程学院
g. 电子信息工程专业
h. 物联网工程专业
说明:改变列表项的类型类型和编号属性值会影响本身的编号类型和后面列表项编号的顺序。

定义列表:
(1)使用dl标记(双标记)。在开始标记(dl)和结束标记(/dl)之间插入dt标记(双标记)定义列表中每个元素的标题;dd标记(双标记)书写列表中的元素内容。
(2)定义列表中每个列表项前既没有符号也没有编号。
例如:

<body>
	<dl>
		<dt>联系人:</dt>
			<dd>张有为之</dd>
			<dd>电话:010-12345678</dd>
			<dd>E-mail:[email protected]</dd>
		<dt>联系地址:</dt>
			<dd>上海市复旦大学计算机系10计算机班</dd>
		<dt>邮政编码:</dt>
			<dd>200433</dd>
</body>

结果如下:
在这里插入图片描述2、题目要求的格式从图片中可以看出是有序列表,其中标题字“优秀教材一等奖”等不是<h5>或是其他的标题样式,可以将这些标题写在<p></p>段落标记中
3、超链接用<a></a>标记,此处链接的是网站,属于绝对路径

三、代码编写
在这里插入图片描述

四、结果展示
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45952057/article/details/108914390