文章目录
- 一、?网站题目
- 二、??网站描述
- 三、网站介绍
- 四、网站演示
- 五、?? 网站代码
-
- HTML结构代码
- CSS样式代码
- 六、 如何让学习不再盲目
- 七、更多干货
一、?网站题目 音乐网页设计 、仿网易云音乐、各大音乐官网网页、明星音乐演唱会主题、爵士乐音乐、民族音乐、等网站的设计与制作。
二、??网站描述 ?HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。
一套优质的网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有5-10个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
网站程序方面：计划采用最新的网页编程语言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结构代码
我为音乐狂 - 锐客网
文章图片
文章图片
我为音乐狂
CSS样式代码
/* CSS Document */
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;
padding:0;
border:0;
}
*{margin:0;
padding:0;
border:0;
}
body { font-family: "????";
font-size: 12px;
color:#000000;
line-height: 20px;
text-align:left}
td,th {font-family: "????";
font-size: 12px;
color: #000000;
}
a {color: #000000;
}
A:link {TEXT-DECORATION: none;
}
A:visited {TEXT-DECORATION: none;
}
A:hover {TEXT-DECORATION: underline;
}
ul,li{list-style-type:none;
}.clearit{clear:both;
}
.hSpace1 {height:1px;
line-height:1px;
overflow:hidden;
clear:both;
}
.hSpace5 {height:5px;
line-height:5px;
overflow:hidden;
clear:both;
}
.hSpace10 {height:10px;
line-height:10px;
overflow:hidden;
clear:both;
}
.hSpace5F {height:5px;
line-height:5px;
background:#FFFFFF;
overflow:hidden;
clear:both;
}
.p5 {padding:5px;
}
.borderU {border-right: 1px solid#75819e;
border-left: 1px solid#75819e;
border-bottom: 1px solid#75819e;
}
.borderU_p5 {border-right: 1px solid#75819e;
border-left: 1px solid#75819e;
border-bottom: 1px solid#75819e;
padding:5px;
}
.borderH {border-right: 1px solid#75819e;
border-left: 1px solid#75819e;
}
.borderH_p5 {border-right: 1px solid#75819e;
border-left: 1px solid#75819e;
padding:5px;
}.ding_bg{width:100%;
height:444px;
}
.ding{width:1037px;
margin:0 auto;
}.nav_bg{width:1037px;
height:43px;
background:#068465;
margin:0 auto;
margin-top:5px;
}
.nav{width:1004px;
margin:0 auto;
}
.nav p{font-weight:bold;
line-height:43px;
color:#000000;
font-size:14px;
}
.nav p a{color:#FFFFFF;
padding:0 25px;
}.page{width:100%;
min-height:560px;
}.content_bg{width:1037px;
margin:0 auto;
background:#fff;
}.content{width:1004px;
margin:0 auto;
padding:10px 0;
}
.shixun{width:1002px;
height:238px;
padding:10px 0;
border:1px solid #d3d3d3;
}
.shixun_tu{width:464px;
float:left;
margin-left:46px;
display:inline;
}
.shixun_zi{width:380px;
float:left;
margin-left:50px;
display:inline;
padding-top:20px;
}
.shixun_zi h2{font-size:16px;
font-weight:bold;
text-align:left;
color:#074673;
padding-left:44px;
}
.shixun_zi p{padding-top:20px;
line-height:20px;
text-indent:2em;
}
.shixun_zi h3{font-size:12px;
font-weight:normal;
margin-top:10px;
text-align:right;
padding-left:20px;
}
.shixun_zi h3 a{color:#074673;
}.part2{width:1004px;
margin:0 auto;
padding-bottom:30px;
overflow:hidden;
border-bottom:3px solid #d9d9d9;
}
.kecheng{width:478px;
float:left;
}
.kecheng h2{font-size:14px;
font-weight:bold;
line-height:30px;
color:#074673;
padding-left:20px;
no-repeat 0% 40%;
margin-bottom:10px;
}
.kecheng h2 span{font-family:Arial, Helvetica, sans-serif;
padding-left:20px;
font-size:12px;
color:#cfcfcf;
}
.kecheng_tu{width:134px;
overflow:hidden;
float:left;
}
.kecheng_zi{width:520px;
float:left;
margin-left:18px;
display:inline;
}
.kecheng_zi p{line-height:20px;
color:#333333}
.kecheng_zi h3{width:93px;
height:21px;
display:block;
text-align:center;
line-height:21px;
font-size:12px;
font-weight:normal;
float:right;
}
.kecheng_zi h3 a{color:#FFFFFF;
}.kecheng_zi2{width:520px;
float:left;
}
.kecheng_zi2 p{line-height:20px;
color:#333333}
.kecheng_zi2 h3{width:93px;
height:21px;
display:block;
text-align:center;
line-height:21px;
font-size:12px;
font-weight:normal;
float:right;
}
.kecheng_zi2 h3 a{color:#FFFFFF;
}.jiaoxue{width:744px;
border-bottom:2px solid #164880;
padding-top:10px;
}
.jiaoxue h2{font-size:14px;
font-weight:bold;
line-height:30px;
color:#074673;
padding-left:20px;
margin-bottom:10px;
}
.jiaoxue h2 span{font-family:Arial, Helvetica, sans-serif;
padding-left:20px;
font-size:12px;
color:#cfcfcf;
}
.jiaoxue_tu{width:154px;
overflow:hidden;
float:left;
}
.jiaoxue_tu2{width:154px;
overflow:hidden;
float:left;
margin-left:20px;
display:inline;
}.jiaoxue2{width:744px;
padding-top:10px;
}
.jiaoxue2 h2{font-size:14px;
font-weight:bold;
line-height:30px;
color:#074673;
padding-left:20px;
margin-bottom:10px;
}
.jiaoxue2 h2 span{font-family:Arial, Helvetica, sans-serif;
padding-left:20px;
font-size:12px;
color:#cfcfcf;
}.part3{width:1004px;
margin:0 auto;
overflow:hidden;
padding-bottom:20px;
}.jiaoan{width:484px;
float:left;
margin-left:5px;
display:inline;
}
.jiaoan h2{font-size:14px;
font-weight:bold;
line-height:30px;
color:#074673;
padding-left:20px;
margin-bottom:10px;
}
.jiaoan h2 span{font-family:Arial, Helvetica, sans-serif;
padding-left:20px;
font-size:12px;
color:#cfcfcf;
}
.jiaoan_tu{width:140px;
overflow:hidden;
float:left;
}
.jiaoan_tu h4{font-size:12px;
line-height:20px;
padding-top:15px;
font-weight:normal;
text-align:right;
}
.jiaoan_tu h4 a{ color:#b3b3b3;
}.jiaoan_zi{width:314px;
float:left;
margin-left:24px;
display:inline;
}
.jiaoan_zi ul li{line-height:26px;
color:#333333}
.jiaoan_zi ul li a{color:#333333}.gonggao{width:498px;
float:right;
}
.gonggao h2{font-size:14px;
font-weight:bold;
line-height:30px;
color:#074673;
padding-left:20px;
background:url("images/kecheng_h2.gif") no-repeat 0% 40%;
margin-bottom:10px;
}
.gonggao h2 span{font-family:Arial, Helvetica, sans-serif;
padding-left:20px;
font-size:12px;
color:#cfcfcf;
}
.gonggao_tu{width:153px;
overflow:hidden;
float:left;
}
.gonggao_tu h4{font-size:12px;
line-height:20px;
padding-top:15px;
font-weight:normal;
text-align:right;
}
.gonggao_tu h4 a{ color:#b3b3b3;
}.foot{width:1004px;
margin:0 auto;
padding:40px 0 10px 0;
}
.footA{width:121px;
float:left;
margin-left:50px;
display:inline;
}
.footB{width:780px;
float:left;
text-align:center;
}
.footB p{line-height:26px;
color:#074673}
.footB p a{ color:#074673}
.footB .footB_p{color:#aeabaa;
}.neirong{width:217px;
float:left;
min-height:400px;
_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>400?"400px":"");
margin-left:25px;
display:inline;
}
.neirongA{width:217px;
height:29px;
background:url("images/neirongA.gif") no-repeat;
}
.neirongA h2{font-size:14px;
font-weight:bold;
text-align:left;
line-height:29px;
text-indent:10px;
color:#ffffff;
}
.neirongB{width:215px;
margin:0 auto;
border-bottom:1px solid #a3a3a3;
border-left:1px solid #a3a3a3;
border-right:1px solid #a3a3a3;
}
.neirongB ul li{width:210px;
height:28px;
margin:0 auto;
background:url("images/neirongB_li1.gif") no-repeat right;
line-height:28px;
text-indent:16px;
border-bottom:1px solid #CCCCCC;
}
.neirongB ul li a:hover{font-weight:bold;
}.you{width:746px;
float:right;
}
.weizhi{width:746px;
line-height:24px;
text-align:left;
}
.weizhi p{color:#6b6b6b;
}
.weizhi p a{color:#6b6b6b;
}
.weizhi p span{font-weight:bold;
}.list{width:724px;
padding:10px;
border:1px solid #e3e3e3;
}
.listA{font-size:14px;
font-weight:bold;
text-indent:5px;
height:24px;
line-height:24px;
color:#0e5b94;
border-bottom:1px solid #0e5b94;
}.listB{width:716px;
margin:0 auto;
padding:5px 0;
}
.listB ul li{width:716px;
height:30px;
display:block;
overflow:hidden;
text-indent:14px;
line-height:30px;
border-bottom:dotted 1px #ddd;
position:relative;
}
.listB ul li span{position:absolute;
right:0;
bottom:0;
line-height:30px;
}.contentA{font-size:14px;
font-weight:bold;
text-align:center;
height:24px;
line-height:24px;
color:#0e5b94;
border-bottom:1px solid #0e5b94;
}.contentB{width:736px;
margin:0 auto;
padding:10px 0;
text-align:left;
line-height:28px;
color:#151515;
}
.contentB p{color:#151515;
}六、 如何让学习不再盲目 21年程序员总结给编程菜鸟的16条忠告
- 入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。
- 多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。
- 菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。
- 不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。
- 没积累足够知识和经验前，你是开发不出一个完整项目的。
- 把最新技术挂在嘴边，还不如把过时技术牢记心中。
- 活到老学到老，只有一招半式是闯不了江湖的。
- 看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。
- 书读百遍其义自见，别指望读一遍就能掌握。
- 请把教程里的例子亲手实践下，即使案例中有完整源码。
- 把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。
- 不要漏掉教程中任何一个习题——请全部做完并做好笔记。
- 水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。
- 每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
- 做好保存源文件的习惯，这些都是你的知识积累。
- 遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。
请 “点赞” “??评论” “收藏” 一键三连哦！2.
【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.
以上内容技术相关问题欢迎一起交流学习 【web课程设计网页规划与设计|一个超好看的音乐网站设计与实现(HTML+CSS)】
推荐阅读
- html期末大作业|学生HTML个人网页作业作品 使用HTML+CSS+JavaScript个人介绍博客网站 web前端课程设计 web前端课程设计代码 web课程设计
- html网页设计|web前端期末大作业（青岛旅游网页主题网站设计——青岛民俗4页 HTML+CSS 民俗网页设计与制作 web网页设计实例作业 html实训大作业）
- java|SpringBoot新闻管理系统——shiro+SpringCloud微服务
- javascript|性能吊打 Node.js 和 Deno 的新一代 javaScript 运行时-Bun.js
- javascript|vue实现HTML转PDF (已解决清晰、页边距、图片导出等问题)
- apache|Apache Log4j2远程代码执行漏洞（CVE-2021-44228）漏洞复现
- java|Web自动化神器，批量下载小姐姐美图，可直接导入使用
- JS|postcss7和postcss8的差异
- 前端发展历史|从输入url到看到页面经历了些什么（二）——浏览器渲染