admin管理员组文章数量:1794759
静态HTML个人音乐网页 大学生网页设计作业 简单音乐娱乐网页制作 DW个人网站模板下载 大学生简单音乐网页作品代码
🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】 🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
📂文章目录
- 一、👨🎓网站题目
- 二、✍️网站描述
- 三、📚网站介绍
- 四、💠网站演示
- 五、⚙️ 网站代码
- 🧱HTML结构代码
- 💒CSS样式代码
- 六、🥇 如何让学习不再盲目
- 七、🎁更多干货
一、👨🎓网站题目
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。
二、✍️网站描述
🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用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代码）。
四、💠网站演示
五、⚙️ 网站代码 🧱HTML结构代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../css/index.css"> </head> <body> <header> <div class="middle"> <div class="left"> <img src="../images/logo.png" alt=""> </div> <div class="right"> <div>首页</div> <div class="Qi">视频集 <div> <div>第一季视频</div> <div>第二季视频</div> <div>第三季视频</div> </div> </div> <div>第四季</div> <div>第三季</div> <div>第二季</div> <div>第一季</div> <div>CCTV-10科教频道</div> </div> </div> </header> <div class="content"> <div class="zj"> <div class="zjL"> <img src="../images/video1.jpg" alt=""> <div class="zs"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> </div> </div> <div class="link"> <div class="bottom"> <div class="top"> <button>友情链接</button> </div> <div class="big"> xxxxxx </p> <p> 人力资源服务许可证|互信服务资格证|广播电视节目制作经营许可证|违法信/未成年人举报：4000188888 47362939@qq|员工舞弊举报：47362939@qq|记账许可证 </p> </div> </body> <script> var num=0 var Qi=document.querySelector(".Qi") var li=document.querySelectorAll("ul li") var big=document.querySelectorAll(".zjr>div img") console.log(big) var zjL=document.querySelector(".zjL>img") console.log(zjL) for(let i=0;i<big.length;i++){ big[i].onclick=function(){ zjL.src=this.src num=i for(let i=0;i<li.length;i++){ li[i].style.background="#39233c" } li[num].style.background="plum" } } var arr=["../images/video1.jpg","../images/video2.jpg","../images/video3.jpg","../images/video4.jpg"] setInterval(function(){ num++ if(num>3){ num=0 } for(let i=0;i<li.length;i++){ li[i].style.background="#39233c" } li[num].style.background="plum" zjL.src=arr[num] },3000) </script> </html> 💒CSS样式代码 *{ padding: 0; margin: 0; box-sizing: border-box; } html, body { height: 100%; margin:0px; padding:0px; } header{ background: #e8ebf1; display: flex; align-items: center; } .middle{ width: 1330px; margin: auto; display: flex; justify-content: space-between; } .right{ display: flex; align-items: center; font-size: 18px; } .right div{ margin: 0 10px; padding: 0 10px; font-weight: bold; } .right>div:hover{ background: #563576; color: white; cursor: pointer; } .content{ width: 100%; background: #1e0b21; height: 500px; } .poetry{ width: 100%; background: #e8ebf1; height: 180px; } .font{ width: 1330px; margin: auto; padding-top: 30px; } .font h2{ font-size: 30px; margin-bottom: 20px; } .font p{ font-size: 14px; margin-left: 100px; } .tab{ width: 1330px; margin: auto; display: flex; padding-top: 50px; } .number{ display: flex; justify-content: space-around; flex-wrap: wrap; width: 1090px; margin-left: 30px; } .key{ color: #bd0404; font-weight: bold; } .number div{ padding: 0 10px; margin: 0 15px; margin-bottom: 10px; } .number div:hover{ background: #bd0404; color: white; cursor: pointer; } .starts{ width: 1330px; margin: auto; margin-top: 30px; margin-bottom: 60px; } .starts p{ margin-bottom: 20px; } .six img{ width: 190px; } .six span{ color: orange; font-weight: bold; } .six{ display: flex; justify-content: space-between; } .Tang{ width: 1330px; margin: auto; } .Shi{ display: flex; justify-content: space-between; } .Shi>div{ width: 350px; border: 1px solid #cccccc; padding: 10px; } .Shi h3{ color: #c02020; border-bottom:1px solid #cccccc ; margin-bottom: 10px; } .Shi h3 img{ vertical-align: middle; } .photo{ display: flex; justify-content: space-between; } .photo img{ width: 120px; height: 80px; margin-right: 10px; } .photo h5{ font-size: 16px; } .photo span{ font-size: 12px; } .Shi p{ margin-top:5px ; } .Tang{ margin-bottom: 50px; } .link{ width: 100%; background: #e8ebf1; height: 500px; } .bottom{ margin: auto; width: 1330px; } .top{ height: 100px; display: flex; align-items: center; justify-content: flex-end; } .top button{ width: 140px; height: 40px; background: #1e0b21; color: white; border-radius: 5px; border: none; } .head{ font-size: 20px; font-weight: bold; margin-bottom: 30px !important; } .head img{ vertical-align: middle; } .big p{ width: 100%; line-height: 25px; } .big{ width: 1330px; display: flex; justify-content: space-between; } .big div{ width: 300px; margin: 0 10px; } .foot{ width: 100%; background:#8d858e; height: 200px; padding-top: 50px; } .foot p{ text-align: center; color: #645e64; } .zj{ width: 1330px; margin: auto; height: 100%; margin-top: 20px; display: flex; background: #1a1a1a; } .zjL{ height: 100%; } .zjL img{ height: 90%; width: 1100px; } .zjr{ background: #1a1a1a; padding: 10px; } .zjr img{ width: 200px; height: 100px; } .zs ul{ width: 280px; height: 30px; margin: auto; padding-left: 50px; } .zs ul li{ float: left; background: #39233c; height: 30px; width: 30px; border-radius: 50%; list-style: none; margin: 0 10px; } .zs ul li:first-child{ background: plum; } .Qi{ position: relative; } .Qi>div{ position: absolute; width:146px; left: -50px; display: none; } .Qi>div>div{ border-bottom: 1px solid #eaeef1; height: 30px; background: rgba(255, 255, 255, 0.3); font-size: 13px; font-weight: normal; text-align: center; line-height: 30px; } .Qi:hover>div{ display: block; color: black; }
六、🥇 如何让学习不再盲目
21年程序员总结给编程菜鸟的16条忠告
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬版权声明：本文标题：静态HTML个人音乐网页 大学生网页设计作业 简单音乐娱乐网页制作 DW个人网站模板下载 大学生简单音乐网页作品代码 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686573687a83408.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论