用HTML设计一个流行歌曲排行网页,里面包含5首歌,每个歌曲一张图片,点击歌曲名会跳转到歌曲介绍
时间: 2024-02-11 16:06:25 浏览: 25
好的,这是一个简单的HTML代码示例,你可以根据自己的需求进行修改和美化。注意:为了简化代码,我使用了外部CSS文件。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>流行歌曲排行榜</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>流行歌曲排行榜</h1>
<table>
<tr>
<td>
<a href="song1.html">
<img src="song1.jpg" alt="歌曲1">
</a>
</td>
<td>
<a href="song1.html">
<h2>歌曲1</h2>
</a>
</td>
</tr>
<tr>
<td>
<a href="song2.html">
<img src="song2.jpg" alt="歌曲2">
</a>
</td>
<td>
<a href="song2.html">
<h2>歌曲2</h2>
</a>
</td>
</tr>
<tr>
<td>
<a href="song3.html">
<img src="song3.jpg" alt="歌曲3">
</a>
</td>
<td>
<a href="song3.html">
<h2>歌曲3</h2>
</a>
</td>
</tr>
<tr>
<td>
<a href="song4.html">
<img src="song4.jpg" alt="歌曲4">
</a>
</td>
<td>
<a href="song4.html">
<h2>歌曲4</h2>
</a>
</td>
</tr>
<tr>
<td>
<a href="song5.html">
<img src="song5.jpg" alt="歌曲5">
</a>
</td>
<td>
<a href="song5.html">
<h2>歌曲5</h2>
</a>
</td>
</tr>
</table>
</body>
</html>
```
然后在同级目录下创建一个名为style.css的文件,添加以下样式代码:
```
h1 {
text-align: center;
color: #333;
}
table {
margin: auto;
}
td {
padding: 10px;
text-align: center;
}
img {
width: 200px;
height: 200px;
}
```
以上代码中,我们使用了表格来展示歌曲图片和名字,并使用链接将歌曲名字与对应的介绍页面相连。同时,为了美化页面,我们使用了CSS样式来设置标题的样式、表格的居中等。
相关推荐
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)