第七章利用CSS和多媒体美化页面（作业二）

2025/5/1 11:40:55 来源：https://blog.csdn.net/H2629896520/article/details/143336083 浏览: 次关键词：第七章利用CSS和多媒体美化页面（作业二）

效果图如下：

Html代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>心灵之音</title><style type="text/css">@import url("../css/worktest.css");</style></head><body><div class="all"><div class="content"><div class="left">心灵之音</div><div class="right"><img src="../img2/list.jpg"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.陈小朵 - 匆匆那年<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<audio src="../media/陈小朵 - 匆匆那年.mp3" controls="controls"></audio><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.陈颖恩 - 那些你很冒险的梦<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<audio src="../media/陈颖恩 - 那些你很冒险的梦.mp3" controls="controls"></audio><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.黄霄雲 - 左手指月<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<audio src="../media/黄霄雲 - 左手指月.mp3" controls="controls"></audio><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.李健 - 抚仙湖<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<audio src="../media/李健 - 抚仙湖.mp3" controls="controls"></audio><div class="bottom">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">流行音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">摇滚音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">现代音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">名族音乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">蓝调歌曲</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">管弦乐队</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">合奏乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" target="_blank">更多...</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></div><div class="last">版权所有&copy;心灵之音网站</div></div></div></body>
</html>

CSS代码如下：

.all{height: 700px;width: 700px;border: 1px solid black;background-image: url("../img2/bg-0.jpg");
}
.content{position: relative;background-color: #eee;margin: auto;height: 660px;width: 600px;border: 1px solid black;margin: 10px 50px 20px 50px;
}
.left{background-color: wheat;color: #ff1111;font-size: 60px;width: 120px;height: 630px;writing-mode: vertical-lr;float: left;border-right: 1px solid black;border-bottom: 1px solid black;display: grid;place-items: center; letter-spacing: 20px;
}
.right{font-size: 20px;width: 479px;height: 570px;border-bottom: 1px solid black;float: right;
}
img{width: 479px;height: 116px;
}
.bottom{background-color: aquamarine;width: 479px;height: 63px;border-bottom: 1px solid black;
}
.last{width: 598px;height: 28px;background-color: aquamarine;position: absolute;bottom: 0;text-align: center; 
}

第七章利用CSS和多媒体美化页面（作业二）

效果图如下：

Html代码如下：

CSS代码如下：

相关资讯

热文排行

最新新闻

推荐新闻

热搜词