一个简单的音乐网站设计与实现(HTML+CSS)

夏洛洛 · 发表于 2022-12-4 16:18:26

> ⛵ 源码获取文末联系 ✈

Web前端开发技术 描述网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星音乐演唱会主题 | 爵士乐音乐 | 民族音乐 | 等网站的设计与制作 | HTML期末大学生网页设计作业

HTML：结构
CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识
JavaScript：做与用户的交互行为

@TOC
<hr/>前端学习路线

（1）html文件：其中index.html是首页、其他html为二级页面；（2）css文件：css全部页面样式,文字滚动, 图片放大等；（3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）
网页基本结构

(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个　　 (2)二级页面：从首页点击进入之后的页面叫做二级页面 (3)三级页面：从二级页面点击进入的页面
网页html：网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，网站就是由网页组成的 首页网站：首页是一个网站的入口网页，故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名 导航菜单：是指位于页面顶部或者侧边区域的，也称之为导航栏，它起着链接站点或者软件内的各个页面的作用. 网页页脚：是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。
<hr/>网页演示

在这里插入图片描述

在这里插入图片描述

HTML结构代码

<!doctype html>
<html lang=&#34;en&#34;>

<head>
<meta charset=&#34;utf-8&#34;>
<title>嘻哈音乐</title>
<link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;../css/xiha.css&#34; />
</head>

<body>

<div class=&#34;header w&#34;>
      <div class=&#34;logo&#34;>
         <img src=&#34;../images/图标.png&#34; width=&#34;198px&#34; height=&#34;42px&#34; alt=&#34;&#34;>
      </div>
</div>
<div class=&#34;nav w&#34;>
      <ul>
         <li><a href=&#34;xiha.html&#34;>主页</a></li>
         <li><a href=&#34;../html/文化发展.html&#34;>文化发展</a></li>
         <li><a href=&#34;../html/现代作品.html&#34;>现代作品</a></li>
      </ul>
      <div class=&#34;user&#34;>
         <a href=&#34;../html/form.html&#34;>登录</a>
      </div>
</div>
<div class=&#34;banner&#34;>
      <div class=&#34;w&#34;>
      </div>
</div>
<div class=&#34;part w&#34;>
      <div class=&#34;part-1&#34;>
         <ul>
            <p>好听励志嘻哈歌曲</p>
            <li>1.梦想启动 -— 周杰伦</li>
            <li>2.I Can Fly -— 陈冠希 MV</li>
            <li>3.有梦不难 -— 林俊杰 MV</li>
            <li>4.The Road -— 黄子韬</li>
            <li>5.Going Go -— T-T</li>
         </ul>
      </div>
      <div class=&#34;part-1&#34;>
         <ul>
            <p>rapper常用口头禅</p>
            <li>1.Drop the beat</li>
            <li>&nbsp;&nbsp;DJ来点节奏</li>
            <li>2.Make some noise：</li>
            <li>&nbsp;&nbsp;来点尖叫声</li>
            <li>&nbsp;&nbsp;。。。。。。。</li>
         </ul>
      </div>
      <div class=&#34;part-1&#34;>
         <ul>
            <p>中国新说唱冠军</p>
            <li>第一季：GAI</li>
            <li>第二季：艾热</li>
            <li>第三季：杨和苏</li>
            <li>第四季：李佳隆</li>
         </ul>
      </div>
      <div class=&#34;part-1&#34;>
         <img src=&#34;../images/jpeg_1.jpeg&#34; width=&#34;255px&#34; height=&#34;300px&#34;>
      </div>
      <div class=&#34;part-1&#34;>
         <ul>
            <p>Hiphop超酷短句</p>
            <li>1、Life is a sail trip full of chances and challenges.</li>
            <li>人生的航行充满了机遇与挑战。</li>
         </ul>
      </div>
      <div class=&#34;part-1&#34;>
         <ul>
            <li>2、Life is a lane but it is a rotative course.</li>
            <li>生命是单行道，但是一个循环的过程。</li>
         </ul>
      </div>
      <div class=&#34;part-1&#34;>
         <ul>
            <li>4、A happy family life is a wonderful asset for any one.</li>
            <li>快乐的家庭生活对每个人都是很大的一笔财富。</li>
         </ul>
      </div>
      <div class=&#34;part-1&#34;>
         <ul>
            <li>5、Without music, life is a journey through a desert.
            </li>
            <li>没有音乐，生命就如荒漠之旅。</li>
         </ul>
      </div>
</div>
<div class=&#34;text-3 w&#34;>
      <ul>
         <li>中文名&nbsp;:嘻哈音乐</li>
         <li>英文名&nbsp;:Hip-Hop、Hipa</li>
         <li>发源地&nbsp;:美国黑人社区</li>
         <li>包&nbsp;&nbsp;&nbsp;&nbsp;含&nbsp;:音乐、舞蹈、说唱、DJ技术等</li>
         <li>文&nbsp;&nbsp;&nbsp;&nbsp;化&nbsp;:街头文化</li>
         <li>代表人物&nbsp;:Biggie Smalls、Jay-Z</li>
      </ul>
</div>
<br/>
<div class=&#34;viedos w&#34;>
      <video poster=&#34;../images/封面.png&#34; controls=&#34;controls&#34; width=&#34;1100px&#34;>
      <source src=&#34;../videos/嘻哈音乐_百度百科.mp4&#34;>
      </video>
</div>
<div class=&#34;about &#34;>
      <span class=&#34;last &#34;>
                  关于嘻哈 | About XIHA MUSIC | 服务条款 | 用户服务协议 | 隐私政策 | 广告服务 | 企业招聘 | 客服中心 | 网站导航
            </span>
      <br>
      <span class=&#34;last &#34;>
                  Copyright  1998 - 2017 Tencent. All Rights Reserved.
            </span>
      <br>
      <span class=&#34;last &#34;>
                  xxx
            </span>
</div>
</div>
</div><hr/>学的反而越迷茫

有这种感觉很正常，因为你还没有真正去公司里面待过，也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看，你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。
当你以后真正进入公司，发现工作的难度和量大约只有你学习时期的大约20%，你可能就会发出一声叹息:原来工作也不过如此嘛。
这是很正常的，因为大部分公司是招你进去去干活的，写业务的，不是让你一个新人去研发公司架构的。都是现成的东西，你要做的就是在别人的教导下，手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这？
所以，放松心态吧，好好享受大学时光 —————————————————
<hr/>学习更多

关注我 | 点赞博文 | 每天带你涨知识
<hr/>

在这里插入图片描述

		自动登录	找回密码
密码			立即注册