html+css设计一个音乐网站_html制作音乐网站代码资源-CSDN文库

共61个文件

jpg：28个

css：9个

html：9个

1星需积分: 48 61 浏览量 2020-12-21 20:16:25 上传评论 16 收藏 2.25MB RAR 举报

在构建一个音乐网站的过程中，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是两个核心的技术。HTML用于创建网页的结构和内容，而CSS则负责样式和布局的设计，使得网页更具视觉吸引力和用户体验。一、HTML基础 1. HTML元素：HTML由一系列的元素组成，每个元素都有其特定的含义，例如`<head>`定义头部信息，`<body>`定义网页主体，`<h1>`至`<h6>`定义标题，`<p>`定义段落，`<a>`定义超链接等。 2. 标签对：HTML标签通常成对出现，如`<div>`和`</div>`，表示一个区块元素。 3. 属性：元素可以有属性来提供更多细节，例如`<a href="http://example.com">`的`href`属性定义链接目标。 4. 内联元素与块级元素：内联元素（如`<span>`、`<a>`）不占据整行，而块级元素（如`<div>`、`<p>`）会自动换行。二、CSS基础 1. 选择器：CSS通过选择器来选取HTML元素，如标签选择器（`p {color: red;}`），类选择器（`.myClass {color: blue;}`），ID选择器（`#myId {color: green;}`）。 2. 属性与值：CSS由属性和对应的值组成，如`color`定义文本颜色，`background-color`定义背景色，`font-size`定义字体大小。 3. 嵌入式、内部和外部样式表：嵌入式样式写在`<style>`标签内，内部样式写在`<head>`的`<style>`标签内，外部样式写在单独的.css文件中并链接到HTML。 4. 盒模型：所有HTML元素都可以看作一个盒子，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。 5. 浮动与定位：`float`属性用于创建多列布局，`position`属性（static, relative, absolute, fixed）用于元素的定位。三、音乐网站特定应用 1. 音乐播放器：可以使用HTML5的`<audio>`标签来嵌入音频文件，通过JavaScript控制播放、暂停、音量等。 2. 播放列表：创建一个列表显示歌曲，使用`<ul>`和`<li>`标签，结合CSS实现可点击的列表项，点击后播放对应音乐。 3. 背景音乐：通过CSS的`background-image`属性设置背景图片，结合JavaScript动态切换背景音乐。 4. 响应式设计：利用媒体查询(`@media`)确保网站在不同设备和屏幕尺寸上都有良好的显示效果。 5. 动画效果：CSS3的动画（`animation`）和过渡（`transition`）可以增强用户体验，例如歌曲切换时的淡入淡出效果。四、实训报告注意事项 1. 实训目的：明确实训的目标，比如学习HTML和CSS的基本用法，掌握音乐网站的构建流程。 2. 实训步骤：详细记录从创建HTML结构到编写CSS样式的每一步，包括遇到的问题及解决方法。 3. 结果展示：提供网页截图或在线预览链接，展示网站完成后的外观和功能。 4. 总结与反思：总结实训中的收获，分析存在的问题，提出改进意见。通过这样的实践项目，你可以深入理解HTML和CSS的使用，并且能够运用到实际的音乐网站设计中，提升自己的前端开发技能。

资源详情

资源评论

资源推荐

收起资源包目录

新建文件夹.rar （61个子文件）

新建文件夹

images

网页

我们的旅行

唱片店

4.jpg 28KB

3.jpg 31KB

1.jpg 35KB

2.jpg 28KB

5.jpg 16KB

音乐人

4.jpg 46KB

3.jpg 247KB

6.jpg 23KB

1.jpg 23KB

2.jpg 45KB

5.jpg 48KB

尾部

20180504152317067.jpg 14KB

20171018111851746.jpg 6KB

20180506084848505.jpg 18KB

20171017124058348.jpg 14KB

20171016142428814.jpg 40KB

20180506085752456.jpg 44KB

contactus.jpg 37KB

排行榜

最新唱片

4.jpg 37KB

3.jpg 29KB

1.jpg 26KB

2.jpg 23KB

5.jpg 40KB

夏小桐

主页大图

20170803125939634[1].png 34KB

rz.jpg 2KB

logo[1].png 3KB

3.jpg 32KB

20170222185201828[1].jpg 80KB

20190422181939853[1].jpg 165KB

appxiazai

1556546951(1).jpg 621KB

html

app下载.html 1KB

Untitled-1.html 3KB

实验2.html 1KB

SpryAssets

SpryMenuBarDownHover.gif 55B

SpryMenuBarHorizontal.css 6KB

SpryMenuBarDown.gif 55B

SpryMenuBar.js 22KB

SpryMenuBarRight.gif 55B

SpryMenuBarRightHover.gif 55B

Untitledshiyan.html 1KB

玫瑰博士乐队.html 1KB

夏小桐.html 1KB

JAHA乐队.html 1KB

入驻.html 375B

others

css

SpryAssets

SpryMenuBarDownHover.gif 55B

SpryMenuBarHorizontal.css 6KB

SpryMenuBarDown.gif 55B

SpryMenuBar.js 22KB

SpryMenuBarRight.gif 55B

SpryMenuBarRightHover.gif 55B

JAHA乐队.css 1KB

Untitled-3.css 42B

夏小桐.css 1KB

APP下载.css 785B

Untitled-425.css 2KB

Untitled-shiyan.html 1KB

玫瑰博士乐队.css 1KB

4.25 43B

Untitled-2.css 41B

desktop.ini 174B

jar

sqljdbc4.jar 571KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>九月音乐</title> <link rel="stylesheet" href="../css/Untitled-425.css" /> </head> <body><div id="top"><a href="入驻.html"><img src="../images/网页/主页大图/rz.jpg" /></a><div id="logo"><a href="Untitled-1.html"><img src="../images/网页/主页大图/logo[1].png" /></a></div><div id="text"><ul><li id="2ji"><a href="#">乐库</a><ul id="lanse"><li>发现</li><li>唱片</li><li>音乐人</li></ul></li> <li><a href="app下载.html">app下载</a></li></ul></div></div> <div id="top2"></div> <div id="center"></div> <div id="lr"><div id="left"><div id="left-t"></div><div id="left-b"></div></div> <div id="right"><ul> <li><div id="hz"><a href="#"><font color="#FF9933"></font>即时热门单曲</font></a></div></li> <li><div class="hezi"><div class="no">No.1</div><div class="gq"><a class="box" href="#">友谊地久天长 </br>王源</a></div><div class="st"><font color="#FF0000">8691</font>人在听</div></div></li> <li><div class="hezi"><div class="no">No.2</div><div class="gq"><a class="box"class="a" href="#"><a href="#">明天 </br>谢俊奇</a></div><div class="st"><font color="#FF0000">56641</font>人在听</div></div></li> <li><div class="hezi"><div class="no">No.3</div><div class="gq"><a class="box" href="#">Chemicals </br>Epidemic Sound</a></div><div class="st"><font color="#FF0000">12312</font>人在听</div></div></li> <li><div class="hezi"><div class="no">No.4</div><div class="gq"><a class="box" href="#">你敢不敢再傻一次 </br>吴克群</a></div><div class="st"><font color="#FF0000">2122</font>人在听</div></div></li> <li><div class="hezi"><div class="no">No.5</div><div class="gq"><a class="box" href="#">Trip N Fall </br>Epidemic Sound</a></div><div class="st"><font color="#FF0000">6666</font>人在听</div></div></li> </ul></div></div> <div id="bo1"><div id="bl"><div class="tp"><div class="mz"><a href="夏小桐.html">夏小桐</a></br></br> 民谣</div><img src="../images/网页/音乐人/1.jpg" /></div><div class="sm"><a href="夏小桐.html">夏小桐</a>,来自威海的90后独立音乐人自幼学习京剧，17岁考入上戏。传统与流行相结合的音乐风格。代表作《少年弦》，《初》等。</div></div> <div id="bc"><div id="bl"><div class="tp"><div class="mz"><a href="玫瑰博士乐队.html">玫瑰博士乐队</a></br></br> 摇滚</div><img src="../images/网页/音乐人/2.jpg" /></div><div class="sm"><a href="#"></a>Dahlia Rosea</a>a href="玫瑰博士乐队.html">玫瑰博士乐队</a>,新声代另类摇滚乐队。一支拥有玫瑰语言的乐队。 90年代另类之声与现代艺术基因碰撞。 2017发行乐队首张原创专辑《净》，《初》等。</div></div> <div id="br"><div id="bl"><div class="tp"><div class="mz"><a href="JAHA乐队.html">JAHA乐队</a></br></br> 摇滚</div><img src="../images/网页/音乐人/3.jpg" /></div><div class="sm"><a href="#"></a><a href="JAHA乐队.html">JAHA乐队</a></a>来自内蒙，成立于2015年。乐队以蒙古文化为创作源泉。以科尔沁好来宝的联韵为独特风格。 16年发行乐队同名EP《JAHA》。《初》等。</div></div></div> <div id="last"><img src="../images/网页/尾部/contactus.jpg"</div> </body> </html>