本文详细解析了音乐网站的页面布局，包括头部固定导航、主体区域的flex布局、边缘导航栏的定位，以及底部页脚的设计。CSS样式覆盖了颜色、边框、字体和响应式设计，同时展示了HTML结构与关键元素交互的代码实例。
布局：CSS
/* 头部样式 */
header{
position: fixed;
top: 0;
width: 100%;
height:50px;
display: flex;
justify-content: space-between;
height:50px;
border: 1px solid gray;
background-color:rgb(225, 225, 225)
}
/* 主体部分样式 */
main{
margin-top: 50px;
width: 100%;
border: 1px solid gray;
display: flex;
justify-content: center;
}
/* 主体部分里面的一部分 */
section{
margin-top: 20px;
width: 900px;
}
/* 边缘（右下角）部分样式 */
aside{
border-radius: 5px;
position: fixed;
right:3%;
bottom: 40px;
height:200px;
}
/* 底部样式 */
footer{
width: 100%;
border-radius: 5px;
position: fixed;
bottom: 0;
}
#footer{
height: 60px;
border:2px solid grey;
display: flex;
justify-content: center;
align-items: center;
background-color:rgb(225, 225, 225,0.8)
}
.ul>li{
float: left;
list-style: none;
}
/* 去除所有a标签的下划线，并且将标签文字设置为黑色 */
a{
text-decoration: none;
color: black;
}
#ul-1{
width: 200px;
display: flex;
justify-content: space-between;
}
#ul-2{
width: 100px;
display: flex;
justify-content: space-around;
}
#ul-3>li{
list-style: none;
height: 40px;
background-color: rgb(225, 225, 225,0.8);
}
#ul-4{
width: 500px;
display: flex;
justify-content: space-between;
}
#favor{
position: fixed;
right:320px ;
bottom: 100px;
visibility: hidden;
color: powderblue;
background-color: rgb(225, 225, 225,0.5);
border: 1px solid grey;
}
#ul-5>li{
list-style: none;
}
#article{
position: fixed;
left: 300px;
top:52px;
width: 920px;
height: 597px;
background-color:rgb(255, 240,255);
visibility: hidden;
border:1px solid cornflowerblue;
border-radius: 5px;
display: flex;
justify-content: space-around;
overflow: hidden;
}
#star-img{
width: 250px;
height: 250px;
border-radius: 250px;
}
#Rotation-img{
width: 400px;
height: 350px;
}
#img2{
margin-top: -10px;
height: 40px;
width: 40px;
border-radius:40px ;
}
#form{
display: flex;
align-items: center;
}
#input{
border:2px solid black;
width: 300px;
height: 20px;
border-radius:20px 0 0 20px;
}
/* 对登录框样式进行设置 */
.Login{
width:400px;
height: 200px;
display: none;
position: fixed;
top: 8%;
right: 3%;
border-radius: 5px;
background-color: white;
}
.first{
margin-top: 5%;
margin-left: 70px;
display: flex;
justify-content: center;
}
.second{
width: 260px;
height: 20px;
margin-top: 5%;
margin-left: 70px;
text-align: right;
}
.last{
margin-top: 5%;
margin-left: 75px;
display: flex;
justify-content: center;
}
.Login a {
position: absolute;
right: -20px;
top: -20px;
background-color: #fff;
display: inline-block;
padding: 5px;
height: 26px;
line-height: 26px;
text-decoration: none;
color: black;
font-size: 13px;
}
.main-list{
margin-top: 40px;
height: 200px;
}
#list1{
color: azure;
display: flex;
justify-content: space-between;
height: 20px;
}
#list2,#list3{
color: azure;
height: 10px;
display: flex;
justify-content: space-between;
}
#list1>li,#list2>li,#list3>li{
display: flex;
justify-content: space-between;
list-style: none;
}
.list{
display: flex;
justify-content: space-between;
height: 200px;
}
.list-image{
width: 100%;
height: 100%;
border-radius: 10px;
}
#star-img{
width: 250px;
height: 250px;
border-radius: 250px;
}
#open_Login{
margin-top: -10px;
display: flex;
justify-content: center;
align-items: center;
height:40px;
width:50px;
border: 10px;
background-color: royalblue;
color: white;
}
网页部分：HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="divport" content="width=device-width, initial-scale=1.0">
<title>音乐网站-音乐馆页面</title>
<link rel="stylesheet" type="text/css" href="./css/音乐网站.css" >
<script type="text/javascript" src="./音乐网站.js"></script>
<style>
main{
background-image: url(./img/背景图片3.webp);
background-size: 100% 100%;
}
</style>
</head>
<body>
<!-- 头部，导航栏 -->
<header>
<ul class="ul">
<li style="margin-top: -22px;"><h3>音乐播放器</h3></li>
</ul>
<ul class="ul" id="ul-1">
<li><a href="./音乐网站.html"><div>推荐</div></a></li>
<li><a href="./音乐网站-视频页面.html">视频</a></li>
<li><a href="./音乐网站-音乐页面.html"><div style="border-bottom:2px solid red ;">音乐馆</div></a></li>
</ul>
<form id="form">
<input id="input" type="" value="输入歌曲信息">
<input type="submit" value="搜索" style="height: 26px; border-radius:0 20px 20px 0">
</form>
<ul class="ul" id="ul-2">
<li><a href="javascript:;" class="open_Login"><div id="open_Login">登录</div></a></li>
<li>设置</li>
</ul>
<!-- 登录信息输入界面，点击以上“登录”按钮才会显示该部分 -->
<div class="Login">
<div class="first">登录界面</div>
<a href="JavaScript:;" class="close">⛔</a>
<div class="second">
<label for="">用户名：</label>
<input type="text" name="" id="" value="请输入用户名">
</div>
<div class="second">
<label for="">登录密码：</label>
<input type="text" name="" id="" value="请输入登录密码">
</div>
<div class="last"><input type="submit" value="登录"></div>
</div>
</header>
<!-- 主要部分 -->
<main>
<section>
<!-- 各类歌单 -->
<div class="main-list">
<ul id="list1">
<li>精选</li>
<li>排行</li>
<li>歌手</li>
<li>分类歌单</li>
</ul>
<div class="list">
<div style="width:48% ;"><img class="list-image" src="./img/Eason2.jpg"></div>
<div style="width:48% ;"><img class="list-image" src="./img/Eason4.jpg"></div>
</div>
</div>
<div class="main-list">
<ul id="list2">
<li>官方歌单</li>
<li>更多></li>
</ul>
<div class="list">
<div style="width:32% ;"><img class="list-image" src="./img/1636295844190.jpg" style=""></div>
<div style="width: 32%;"><img class="list-image" src="./img/1636295844196.jpg" style="width: 100%;"></div>
<div style="width:32% ;"><img class="list-image" src="./img/1636295844202.jpg" style="width: 100%;"></div>
</div>
</div>
<div class="main-list">
<ul id="list3">
<li>最新发行</li>
<li>最新</li>
<li>内地</li>
<li>港台</li>
<li>欧美</li>
<li>韩国</li>
<li>日本</li>
<li>更多></li>
</ul>
<div class="list">
<div style="width: 23%;"><img class="list-image" src="./img/1636295844208.png"></div>
<div style="width: 23%;"><img class="list-image" src="./img/1636295844220.jpg"></div>
<div style="width: 23%;"><img class="list-image" src="./img/1636295844229.jpg"></div>
<div style="width: 23% ;"><img class="list-image" src="./img/meimei.jfif"></div>
</div>
</div>
</section>
<article>
<div id="article" >
<!-- 专辑页面 -->
<div style="margin-top: 150px;"><img id="star-img" src="img/贾斯汀.jpg"><div style="text-align: center;">歌手：Justin-Bieber<br>歌曲：stay</div>
</div>
<div style="display: flex;align-items: center;">
<iframe id="iframe" src="./音乐网站-歌词1.html" style="border:white ;height: 400px;">
<!-- 属性为visibility: hidden的隐藏内容，不占用空间，还可以向该位置添加其他元素或内容 -->
</iframe>
</div>
</div>
</article>
<!-- 喜欢的歌单，点击才会显示出来该部分 -->
<ul id="favor">
<li>危险派对-王以太/刘至佳</li>
<li>别叫我达芬奇-Li Ghost小鬼</li>
<li>stay-Justin-Bieber</li>
<li>老男孩-筷子兄弟</li>
<li>明年今日-陈奕迅</li>
<li id="eason" οnclick="Song_playing()">富士山下-陈奕迅</li>
<li>一丝不挂-陈奕迅</li>
<li>好久不见-陈奕迅</li>
</ul>
</main>
<!-- section部分的补充，增加body部分的高度，让页面内容能充分展示 -->
<div style="background-color:rgb(51, 44, 85);height:550px;"></div>
<!-- 右下角导航栏部分，该部分用了绝对定位 -->
<aside>
<ul id="ul-3">
<li><a>🎧</a></li>
<li><a>😘</a></li>
<li><a>👣</a></li>
<li><a>⬅️</a></li>
</ul>
</aside>
<footer>
<div id="footer">
<!-- 歌曲切换按钮，播放暂停按钮 -->
<div id="button" style="display:flex;justify-content: space-around; ">
<div><button id="prev" >⏮</button></div>
<div style="margin-left: 20px;"><button id="play" οnclick="audioPlay$Pause()">⏯</button></div>
<div style="margin-left: 20px;"><button id="next">⏭</button></div>
</div>
<!-- 专辑页面控制，点击打开歌词页面 -->
<div id="song-text">
<div id="songText" οnclick="get_songText()" ><img style="margin-top: 5px;margin-left: 20px; width: 20px;height: 23px;" src="./img/贾斯汀.jpg"></div></li>
</div>
<!-- 音频播放控件 -->
<div id="play">
<audio controls id=bg-music style="width: 500px;height: 20px;margin-top: 5px;" >
<source src="./audio/song1.mp3">
</audio>
</div>
<!-- 收藏歌单控制按钮，点击打开收藏歌单 -->
<div id="menu">
<button id="btn" οnclick="Show_Hidden()" >💙</button></li>
</div>
</div>
</footer>
</body>
<script type="text/javascript" src="./音乐网站.js"></script>
</html>
js部分：
//三个页面共用的js代码
//p1.右上角登录功能
var openLogin = document.querySelector('.open_Login');
var close = document.querySelector('.close');
var Login= document.querySelector('.Login');
var first = document.querySelector('.first');
openLogin.οnclick= function () {
Login.style.display = 'block';
}
close.οnclick=function () {
Login.style.display = 'none';
}
//p2.
var img3=document.getElementById("img3");
var audio=document.getElementById("bg-music");
var iframe=document.getElementById("iframe");
//播放/暂停绑定点击事件，点击将会播放歌词或者暂停播放
function audioPlay$Pause(){
// iframe.src="./音乐网站-歌词1.html";
if(audio.paused){
audio.play();
}else{
audio.pause();
}
}
//上一首绑定点击事件，点击将会切换上一首歌
{
var i=1;
prev.οnclick=function(){
i--;
if(i==0){
i=7;
};
audio.src="./audio/song"+i+".mp3";
// iframe.src="./音乐网站-歌词"+i+".html";
audio.play();
if(i==2){
img3.src="../新建文件夹/pages/image/Eason2.jpg";
}
}
}
//下一首绑定点击事件，点击将会切换下一首歌
{
var j=1;
var c=1;
next.οnclick=function(){
j++;
audio.src="./audio/song"+j+".mp3";
// iframe.src="./音乐网站-歌词"+j+".html";
audio.play();
if(j==7){
j=0;
};
}
}
//推荐页面用的js代码，用来实现图的轮播
//获取id为Rotation-img的img元素
var rotationImg= document.getElementById("Rotation-img");
//初始化第一张图片
var count=1;
function changeImagesrc(){
count++;
rotationImg.src="./img/Eason"+count+".jpg";
if(count==4){
count=0;
}
}
// window.setInterval(changeImagesrc,3000);
//创建对象，获取id属性为favor的元素
var obj={
obj1:document.getElementById("favor")
}
//“喜欢”绑定点击事件，点击会展示我的喜欢歌单列表
function Show_Hidden(){
for(var i in obj){//对象的遍历
if(obj[i].style.visibility=="hidden"){
obj[i].style.visibility='visible';
}else{
obj[i].style.visibility="hidden";
}
}
}
//歌词绑定点击事件，点击歌词将会显示歌词
var obj2=document.getElementById("article");
function get_songText(){
if(obj2.style.visibility=="hidden"){
obj2.style.visibility='visible';
}
else{
obj2.style.visibility='hidden';
}
}
//获取id属性为eason的li元素
var obj3=document.getElementById("eason");
function Song_playing(){
audio.src="./audio/song3.mp3";
audio.play();
iframe.src="./音乐网站-歌词3.html";
}
扫一扫
1156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
