制作一个孙燕姿歌曲的网页css
时间: 2023-10-07 16:13:28 浏览: 44
好的,以下是一个简单的孙燕姿歌曲网页的CSS样式示例:
```css
/* 设置网页背景色和字体样式 */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
/* 设置标题样式 */
h1 {
font-size: 36px;
color: #333;
text-align: center;
margin-top: 50px;
}
/* 设置歌曲列表样式 */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-top: 20px;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
li:hover {
background-color: #f2f2f2;
cursor: pointer;
}
/* 设置歌曲封面图片样式 */
img {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* 设置歌曲播放器样式 */
audio {
display: block;
margin: 0 auto;
width: 80%;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* 设置页脚样式 */
footer {
text-align: center;
margin-top: 50px;
padding: 20px;
background-color: #333;
color: #fff;
}
```
使用以上样式,可以将孙燕姿歌曲网页的各个元素进行美化和布局,让网页看起来更加漂亮和舒适。当然,具体的样式还需要根据你的实际需求和设计风格进行调整。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)