第二章列表、表格与媒体元素

最新推荐文章于 2022-03-07 08:33:57 发布

墨渐生微

最新推荐文章于 2022-03-07 08:33:57 发布

阅读量2.1k

点赞数 1

分类专栏： Web前端技术文章标签：列表表格

本文链接：https://blog.csdn.net/Mythology_px/article/details/82055486

版权

Web前端技术专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、制作音乐排行榜

需求说明：使用无序列表制作音乐排行榜热门活动

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>热门活动</title>
	</head>

	<body>
		<ul>
			<li>
				<img src="img/案例4/img1.png" />
				<p>推荐活动|原创音乐金榜</p>
			</li>

			<li>
				<img src="img/案例4/img2.png" />
				<p>推荐节目爆笑来袭</p>
			</li>

			<li>
				<img src="img/案例4/img3.png" />
				<p>推荐歌单，继续宠爱张国荣</p>
			</li>

			<li>
				<img src="img/案例4/img4.png" />
				<p>推荐活动 300首独家音乐上线</p>
			</li>
		</ul>
	</body>

</html>

二、制作音乐排行榜

需求说明：使用有序列表制作音乐排行榜

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>音乐排行榜</title>
	</head>

	<body>
		<h1>音乐排行榜</h1>
		<ol>
			<li>
				<a href="#">潇洒走一回</a>
				<img src="img/案例5/pic1.png" />
			</li>
			<li>
				<a href="#">甜蜜蜜</a>
				<img src="img/案例5/pic1.png" />
			</li>
			<li>
				<a href="#">把酒倒满</a>
				<img src="img/案例5/pic1.png" />
			</li>
			<li>
				<a href="#">我的好兄弟</a>
				<img src="img/案例5/pic1.png" />
			</li>
			<li>
				<a href="#">That girl</a>
				<img src="img/案例5/pic1.png" />
			</li>
			<li>
				<a href="#">Faraway</a>
				<img src="img/案例5/pic1.png" />
			</li>
		</ol>
	</body>

</html>

三、制作课表

需求说明：使用表格制作课表

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>个人课表</title>
	</head>

	<body>
		<table border="1" cellspacing="0" width="500px" height="300px">
			<tr align="center" valign="center">
				<td colspan="2">星期</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
			</tr>
			<tr align="center" valign="center">
				<td rowspan="2">上午</td>
				<td>8:00-10:00</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center" valign="center">
				<td>10:30-12:30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center" valign="center">
				<td rowspan="2">下午</td>
				<td>13:30-15:30</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr align="center" valign="center">
				<td>16:00-18:00</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>

</html>

四、视频音频标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<audio src="music.ogg" controls="controls"></audio>
		<video src="video.webm" controls="controls" autoplay></video>
	</body>
</html>