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

news2024/11/16 9:28:49

源码获取 文末联系

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

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

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

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

HTML结构代码



<!doctype html>
<html lang="en">

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

<body>
    <!--             导航栏                   -->
    <div class="header w">
        <div class="logo">
            <img src="../images/图标.png" width="198px" height="42px" alt="">
        </div>
    </div>
    <div class="nav w">
        <ul>
            <li><a href="xiha.html">主页</a></li>
            <li><a href="../html/文化发展.html">文化发展</a></li>
            <li><a href="../html/现代作品.html">现代作品</a></li>
        </ul>
        <div class="user">
            <a href="../html/form.html">登录</a>
        </div>
    </div>
    <div class="banner">
        <div class="w">
        </div>
    </div>
    <div class="part w">
        <div class="part-1">
            <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="part-1">
            <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="part-1">
            <ul>
                <p>中国新说唱冠军</p>
                <li>第一季:GAI</li>
                <li>第二季:艾热</li>
                <li>第三季:杨和苏</li>
                <li>第四季:李佳隆</li>
            </ul>
        </div>
        <div class="part-1">
            <img src="../images/jpeg_1.jpeg" width="255px" height="300px">
        </div>
        <div class="part-1">
            <ul>
                <p>Hiphop超酷短句</p>
                <li>1、Life is a sail trip full of chances and challenges.</li>
                <li>人生的航行充满了机遇与挑战。</li>
            </ul>
        </div>
        <div class="part-1">
            <ul>
                <li>2、Life is a lane but it is a rotative course.</li>
                <li>生命是单行道,但是一个循环的过程。</li>
            </ul>
        </div>
        <div class="part-1">
            <ul>
                <li>4、A happy family life is a wonderful asset for any one.</li>
                <li>快乐的家庭生活对每个人都是很大的一笔财富。</li>
            </ul>
        </div>
        <div class="part-1">
            <ul>
                <li>5、Without music, life is a journey through a desert.
                </li>
                <li>没有音乐,生命就如荒漠之旅。</li>
            </ul>
        </div>
    </div>
    <div class="text-3 w">
        <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="viedos w">
        <video poster="../images/封面.png" controls="controls" width="1100px">
        <source src="../videos/嘻哈音乐_百度百科.mp4">
        </video>
    </div>
    <div class="about ">
        <span class="last ">
					关于嘻哈 | About XIHA MUSIC | 服务条款 | 用户服务协议 | 隐私政策 | 广告服务 | 企业招聘 | 客服中心 | 网站导航
				</span>
        <br>
        <span class="last ">
					Copyright  1998 - 2017 Tencent. All Rights Reserved.
				</span>
        <br>
        <span class="last ">
					xxx
				</span>
    </div>
    </div>
    </div>


学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/31628.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

常见集群算法解析

Gossip协议 Gossip协议简介 定义 Gossip protocol&#xff0c;又叫 Epidemic Protocol &#xff08;流行病协议&#xff09;&#xff0c;也叫“流言算法” 、 “疫情传播算法”等。其名称已经形象的说明了算法的原理和工作方式 应用场景 分布式网络&#xff0c;无集中管理节…

同花顺l2数据接口的委托队列是什么?

我们都知道股票交易时有买方也有卖方&#xff0c;“买一”通俗理解就是此刻“买”价最“高”即第一的委托集合&#xff0c;卖一则是“卖”价最低的委托集合。 “一”并非指一笔委托或一手股票&#xff0c;它的背后是有多笔报价相同的买入或卖出委托组成&#xff0c;可能是主力…

cesium火箭发射,模型控制,模型动画,模型移动

起因&#xff1a;最近想做模型的动画&#xff0c;结果上网查资料&#xff0c;看到网上好多对于模型控制的文章都有限制。决定还是自己研究下。欢迎大家一起探讨&#xff0c;评论留言。 效果 火箭全部代码在最后 起步 模型控制&#xff0c;第一步当然是需要一个合适的模型&#…

链动2+1模式是否合法合规?它涉及多级传销吗?

根据国家《禁止传销条例》第2条规定&#xff0c;传销是指组织者或者经营者发展人员&#xff0c;通过对被发展人员以其直接或者间接发展的人员数量或者销售业绩为依据计算和给付报酬&#xff0c;或者要求被发展人员以交纳一定费用为条件取得加入资格等方式牟取非法利益&#xff…

【多线程】Thread的interrupt()

一、前言 如果子线程执行完毕终止状态&#xff0c;主线程再去调用interrupt()有什么效果&#xff1f;如果子线程还在执行过程中&#xff0c;主线程调用interrupt()有什么结果&#xff1f; 二、模拟实验 1、模拟子线程执行完毕再调用interrupt() ​ public class Test {publi…

2023年天津美术学院专升本报名考试须知

天津美术学院2023年高职升本科报考须知&#xff08;一&#xff09;专业考试1.报名方法&#xff1a; ①网上报名及缴费&#xff1a; 我校采取网上报名的方式,考生于2022年12月份&#xff08;具体时间关注公众号“高职接本科”另行公告&#xff09;(10:00-22:00)登录网站(网址&am…

web前端期末大作业 html+css学生心理 7页主题网页设计

⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业 | 家 | HTML期末大学生网页设计作业 HTML&#xff1a;结构 CSS&#xff1a;样式 在操作方面上运用了html5和css3&#xff0c; 采用了divcss结构、表单、…

Oculus Deeplink

DeepLink 初始化 platform sdk 后设置 应用启动回调判断应用打开的方式发起应用跳转 接收应用跳转 GroupPresence 本文档基于 GroupPresenceSample 脚本逻辑编写&#xff0c;展示通过群组状态发起用户邀请&#xff0c;以及响应对应回调。参考 Oculus 工程 SharedSpaces 使…

【安装教程】vscode安装教程(超详细)

Visual Studio Code&#xff08;简称 VSCode&#xff09;是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构功能&#xff0c;并且内置了命令行工具和 Git版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置&#xff0c;也可以…

想裁剪视频时长,用电脑怎么裁剪视频时长

大家有没有碰到过这种一种情况&#xff0c;就是我们在社交平台上发布视频时&#xff0c;会因为视频时长过长这个问题而导致视频发布失败。那我们要怎么处理这个问题呢&#xff1f;其实我们可以使用一些剪辑软件&#xff0c;将视频裁剪&#xff0c;只截取视频里面较为精彩的部分…

hadoop集群安装(三):创建同步工具并安装jdk

文章目录说明分享环境创建同步工具编写脚本设置为系统命令安装jdk总结说明 搭建好集群虚拟机&#xff0c;新建同步工具并安装jdk&#xff0c;同步工具方便管理集群&#xff0c;某些操作和一条命令&#xff0c;同步所有节点&#xff0c;增加集群操作效率。 分享 大数据博客列表…

组件之间通过bus中央事件总线进行通信

案例完整代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widt…

66. SAP ABAP Function Module 的动态调用方式使用方式介绍

在本教程前面的步骤 7,我们介绍了 ABAP Function Module 的基本使用方法: 7. ABAP function module 的使用最近我的知识星球有朋友提问: 大佬,我想问一下动态获取到物料主数据的字段名之后,如何将获取到的字段名去与bapi中的字段名对应起来从而去修改物料主数据中对应的字…

多维时序 | MATLAB实现CNN-GRU多变量时间序列预测

多维时序 | MATLAB实现CNN-GRU多变量时间序列预测 目录多维时序 | MATLAB实现CNN-GRU多变量时间序列预测基本介绍模型特点程序设计学习总结参考资料基本介绍 本次运行测试环境MATLAB2020b&#xff0c;MATLAB实现CNN-GRU多变量时间序列预测&#xff0c;卷积门控循环单元。 模型特…

ComponentAce FlexCompress强大功能

ComponentAce FlexCompress强大功能 FlexCompress是一个高速压缩库&#xff0c;旨在为您的应用程序提供归档功能。此解决方案提供了灵活的压缩和强大的加密算法&#xff0c;使您可以快速轻松地将归档或备份功能集成到程序中。 FlexCompress包括我们新的独特技术&#xff0c;即交…

分片架构设计技巧

Elasticsearch集群设计技巧 ES的基本架构 节点可以配置为不同角色&#xff0c;通过选举Master管理集群Coordinating&#xff1a;协调节点&#xff1b;Master&#xff1a;管理节点&#xff1b;Data&#xff1a;数据存储节点 数据是按照索引分片的&#xff0c;而不是按照节点分片…

在C#方法中 out、ref、in、params 关键字的用法

out&#xff1a;关键字&#xff1a; 指定的参数在进入函数时会清空自己&#xff0c;必须在函数内部赋初值 ref关键字&#xff1a; 指定的参数必须在进入函数时赋初值&#xff0c;在函数内部可以重新赋值 In关键字&#xff1a; 指定的参数必须在进入函数时赋初值&#xff0c;…

MySQL进阶篇(五)- 锁

一、概述&#xff08;P121&#xff09; 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中&#xff0c;除传统的计算资源&#xff08;CPU、 RAM、I/O&#xff09;的争用以外&#xff0c;数据也是一种供许多用户共享的资源。如何保证数据并发访问的一致性、有效性…

51、部署PaddleSeg的pp_liteseg到MNN框架、OpenVINO框架和OAK框架、NPU(RK3399 PRO)框架

基本思想&#xff1a;需要一个快的实例分割模型&#xff0c;由于需要配置oak使用&#xff0c;所以就记录和实现一下微软社区提供的思路&#xff0c;去部署PaddleSeg的轻量级(实际是语义)分割模型 所有的实验模型&#xff0c;花了两天。。。mmp 自己训练模型&#xff0c;开始整…

[附源码]java毕业设计药品销售管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…