1200字范文 > 大一新生HTML期末作业音乐网页制作作业

大一新生HTML期末作业音乐网页制作作业

时间：2022-09-27 08:56:07

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】

📂文章目录

二、📚网站介绍三、🔗网站效果▶️1.视频演示🧩 2.图片演示四、💒 网站代码🧱HTML结构代码🏠CSS样式代码五、🎁更多源码

二、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：

（1）📜html文件包含：其中index.html是首页、其他html为二级页面；

（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

W04JP-爱听音乐歌词滚动下载表单（6页）

🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>首页</title><link href="css/style.css" rel="stylesheet" type="text/css"></head><body><div class="web"><div class="top"><div class="logo"><img src="images/logo.jpg" /></div><div class="nav"><ul><li><a href="index.html">网站首页</a></li><li><a href="fenlei.html">歌单分类</a></li><li><a href="denglu.html">会员登陆</a></li><li><a href="zhuce.html">会员注册</a></li></ul></div><div class="sous"><form><input class="inut" /><button class="btn"></button></form></div></div><div class="banner"><img src="images/banner.jpg" /></div><div class="box1"><div class="bx"><img src="images/img1.jpg" /><p>每日30首</p></div><div class="bx"><img src="images/img2.jpg" /><p>猜你喜欢</p></div><div class="bx"><img src="images/img3.jpg" /><p>听见不同</p></div><div class="bx"><img src="images/img4.jpg" /><p>私人电台</p></div></div><div class="tit">热门艺人</div><div class="box2"><div class="bx2"><img src="images/img5.jpg" />五月天</div><div class="bx2"><img src="images/img6.jpg" />陈奕迅</div><div class="bx2"><img src="images/img7.jpg" />五月天</div><div class="bx2"><img src="images/img8.jpg" />五月天</div><div class="bx2"><img src="images/img9.jpg" />五月天</div></div><div class="tit">热门MV</div><div class="box3"><div class="bx3"><img src="images/img10.jpg" /><p>CLASS</p><p>陈奕迅</p></div><div class="bx3"><img src="images/img11.jpg" /><p>小爱情</p><p>梁静茹</p></div><div class="bx3"><img src="images/img12.jpg" /><p>老唱盘</p><p>S.H.E/洪敬尧</p></div></div><div class="tit">曲风流派</div><div class="box4"><div class="bx4"><img src="images/img13.jpg" /></div><div class="bx4"><img src="images/img14.jpg" /></div><div class="bx4"><img src="images/img15.jpg" /></div></div><div class="foot"><p>Copyright@1998- music.All Rights Reserved.</p><p>爱听音乐网版权所有</p></div></div></body></html>

🏠CSS样式代码

.web{width:1140px;height:auto;overflow:hidden;margin:0 auto;background:#FFF;padding:0px 30px;}.top{height:55px;padding-top:15px;}.logo{width:116px;height:39px;float:left;margin-right:50px;}.nav{width:720px;height:39px;float:left;}.nav ul{padding:0px;margin:0;}.nav ul li{height:39px;line-height:39px;float:left;margin:0px 20px;}.nav ul li a{font-size:18px;color: #000;}.sous{width:140px;height:39px;float:right;}.inut{width:110px;height:39px;border:none;border-bottom: 1px solid #000;float:left;}.btn{width:30px;height:30px;background:url(../images/btn.jpg) no-repeat;border:none;margin-top:10px;}.banner{width:1140px;height:364px;margin-bottom:25px;}.box1{width:910px;height:90px;margin:0 auto; margin-bottom:40px;}.box1 .bx{width:88px;height:90px;float:left;margin:0px 60px;text-align:center;font-size:14px;}.box1 .bx img{margin-bottom:10px;}.tit{height:60px;line-height:60px;padding-left:20px;font-size:26px;margin-bottom:15px;color:#464543;}