【HTML】简单的静态音乐网页设计_千千静听PC版音乐窗定义到其他网址资源-CSDN文库

共109个文件

png：68个

jpg：19个

js：7个

HTML

网页设计

5星 · 超过95%的资源需积分: 47 98 浏览量 2018-11-18 16:40:54 上传评论 23 收藏 6.83MB RAR 举报

在本项目中，我们关注的是一个基于HTML的静态音乐网页设计。这个设计涵盖了网页的基本结构，包括首页、歌手详情页、音乐论坛以及注册页面。不过，需要注意的是，这个设计并没有包含任何数据后端交互功能，这意味着它仅仅是一个展示性的前端界面，用户无法进行实际的数据提交或获取动态内容。我们要理解HTML（HyperText Markup Language）是网页制作的基础，它是用来构建网页内容和结构的语言。在【index.html】中，我们可以看到HTML5的DOCTYPE声明，用于告诉浏览器以标准模式渲染网页。接着是HTML标签，它定义了整个文档的结构，包括<head>部分，存放元信息如字符编码（通常设置为UTF-8），以及<title>标签，定义了网页的标题，在浏览器标签页上显示。 <body>部分是网页的主体，其中包含了各种HTML元素，如<h1>至<h6>的标题、<p>段落、<a>超链接、<img>图像引用，以及布局元素如<div>。在这个音乐网站的设计中，可能会用到<ul>和<li>来创建列表，展示歌手或歌曲信息，<form>则用于构建注册表单，包含<input>输入框、<select>下拉菜单、<textarea>多行文本框等元素。在网页设计中，CSS（Cascading Style Sheets）用于控制样式和布局。尽管这里没有提供CSS文件，但可以推断在HTML文件中可能包含了内联样式或内部样式表，通过<style>标签定义了元素的颜色、字体、大小、位置等属性。例如，使用color、background-color、font-family、padding、margin等属性对元素进行美化。对于布局，可能运用了display属性（如block、inline-block、flex或grid）以及position属性（static、relative、absolute、fixed）来实现元素的定位。至于歌手详情页，可能会有歌手的照片、简介、代表作品等信息，这些可以通过HTML的结构化标签呈现，比如<header>、<article>、<footer>等。音乐论坛部分可能包含帖子列表，每个帖子由作者、时间、标题和内容组成，这可能需要用到<table>或者<ul>和<li>来组织。注册页面一般包含用户输入信息的字段，如用户名、密码、邮箱等，并且通常会有验证机制，例如<input type="email">确保输入正确的电子邮件格式，以及<input type="password">用于密码输入，通常会要求包含大小写字母、数字等组合。此外，可能还有<button>元素用于提交表单。这个静态音乐网页设计展示了HTML的基本应用，包括页面结构、内容展示和表单设计，但缺少了与服务器的交互功能。开发者或学习者可以在此基础上进一步学习如何引入JavaScript进行交互性增强，或者学习后端技术如PHP、Node.js、Python等，结合数据库（如MySQL、MongoDB）实现数据存储和检索，将这个静态网站转变为一个完整的动态音乐平台。

资源详情

资源评论

资源推荐

收起资源包目录

【HTML】简单的静态音乐网页设计（109个子文件）

login2.css 5KB

index_css.css 4KB

singer_css.css 2KB

content_css.css 1KB

login_css.css 1KB

forum_css.css 1KB

爱莫（Almo）音乐网站策划书.docx 51KB

实训报告书.docx 40KB

index.html 7KB

regist.html 5KB

singer.html 4KB

forum.html 3KB

content2.html 2KB

content1.html 1KB

btn.jpg 334KB

3.jpg 182KB

b1.jpg 182KB

2.jpg 157KB

11.jpg 116KB

huawen.jpg 106KB

accc.jpg 94KB

1.jpg 94KB

22.jpg 74KB

loginbg.jpg 47KB

song6.jpg 19KB

song3.jpg 16KB

song5.jpg 16KB

song1.jpg 14KB

song8.jpg 10KB

song2.jpg 10KB

song4.jpg 9KB

song7.jpg 7KB

jquery-1.8.2.min.js 91KB

jquery-1.9.0.min.js 91KB

jquery.min.js 90KB

jquery.indexSlidePattern.js 3KB

superbox.js 1KB

superbox.min.js 1KB

4.png 339KB

3zjl.png 185KB

16wf.png 172KB

11tf.png 157KB

untitled1.png 153KB

8zxy.png 152KB

03big.png 145KB

16big.png 137KB

14bo.png 134KB

08big.png 133KB

14big.png 129KB

6Alan.png 127KB

11big.png 126KB

bg2.png 120KB

10big.png 117KB

06big.png 114KB

10dzq.png 114KB

12xs.png 112KB

12big.png 106KB

02big.png 95KB

2ljj.png 88KB

01big.png 85KB

05big.png 84KB

04big.png 81KB

1xzq.png 79KB

15big.png 79KB

09big.png 77KB

5lrh.png 76KB

4big.png 75KB

07big.png 74KB

15wlh.png 74KB

13big.png 68KB

song3.png 66KB

song6.png 65KB

9cyx.png 62KB

untitled2.png 62KB

7zj.png 61KB

untitled.png 60KB

song5.png 54KB

13lyj.png 52KB

song1.png 49KB

song2.png 49KB

mp3.png 49KB

03.png 43KB

song8.png 39KB

08.png 38KB

song7.png 35KB

06.png 33KB

song4.png 29KB

02.png 25KB

05.png 23KB

09.png 22KB

07.png 18KB

共 109 条

<!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" /> <meta name="keywords" content="爱莫音乐,Almo,Almo音乐,音乐网站，爱莫能助" /> <meta name="author" content="15级物联网1班刘曦，黄浩小组" /> <title>Almo音乐，爱莫能助</title> <link href="Style/index_css.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="Style/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="Style/jquery.indexSlidePattern.js"></script> <script language="javascript"> $(document).ready(function(e){ var opt = { "speed" : "fast" , //变换速度,三速度可选 slow,normal,fast; "by" : "mouseover" , //触发事件,click或者mouseover; "auto" : true , //是否自动播放; "sec" : 2300 //自动播放间隔; }; $("#demo").IMGDEMO(opt); }); </script> </head> <body> <div id="All"> <div class="head"> <div class="logo"> <span><form action="#" method="post" class="list"> <input type="text" class="seektext" style="background-image: url(Images/btn.png); background-repeat: no-repeat; text-indent: 2em;" value=" 单曲/歌手/专辑/MV" /> <input type="button" class="btn" value="搜索一下" /><a href="content1.html"></a></form></span> </div> </div> <div id="navigate"> <ul> <li style="font-size:24px; float:left; line-height:35px; text-indent:1em;"><a href="index.html" target="_blank">首页</a> <li style="font-size:24px; float:left; line-height:35px; text-indent:2em;"><a href="regist.html" target="_self">登录注册</a> <li style="font-size:24px; float:left; line-height:35px; text-indent:2em;"><a href="singer.html" target="_self">热门歌手</a> <li style="font-size:24px; float:left; line-height:35px; text-indent:2em;"><a href="#">精选歌单</a> <li style="font-size:24px; float:left; line-height:35px; text-indent:2em;"><a href="#">歌曲分类</a> <li style="font-size:24px; float:left; line-height:35px; text-indent:2em;"><a href="#">畅销专辑</a> <li style="font-size:24px; float:left; line-height:35px; text-indent:2em;"><a href="#">下载专栏</a> <li style="font-size:24px; float:left; line-height:35px; text-indent:2em;"><a href="forum.html">爱莫论坛</a> </ul> <hr /> </div> <div> <ul id="demo"> <li class="active"> <a href="#"><img src="Images/1.jpg" /></a> <div><a href="#">十周年纪念专辑，王者回归</a></div> </li> <li> <a href="#"><img src="Images/2.jpg" /></a> <div><a href="#">MV精选</a></div> </li> <li> <a href="#"><img src="Images/22.jpg" /></a> <div><a href="3">零点乐话</a></div> </li> <li> <a href="#"><img src="Images/4.png" /></a> <div><a href="#">他家首发</a></div> </li> </ul> </div> <div class="main"> <div class="left"> <div class="mainlist"> <p style="font-size:28px; color:#C00;">热门歌手</p> </div> <div class="song"> <span> <a href="singer.html"><img src="Images/1xzq.png" width="140" height="140"/></a> <p style="line-height:90px; text-align:center; font-size:18px;">薛之谦</p> </span> </div> <div class="song"> <span> <a href="singer.html"><img src="Images/02.png" /></a> <p style="line-height:90px; text-align:center; font-size:18px;">林俊杰</p> </span> </div> <div class="song"> <span> <a href="singer.html"><img src="Images/03.png" /></a><br /> <p style="line-height:90px; text-align:center; font-size:18px;">周杰伦</p> </span> </div> <div class="song"> <span> <a href="singer.html"><img src="Images/04.png" /></a> <p style="line-height:90px; text-align:center; font-size:18px;">BIGBANG</p> </span> </div> <div class="song"> <span> <a href="singer.html"><img src="Images/05.png" /></a> <p style="line-height:90px; text-align:center; font-size:18px;">李荣浩</p> </span> </div> <div class="song"> <span> <a href="singer.html"><img src="Images/06.png" /></a><br /> <p style="line-height:90px; text-align:center; font-size:18px;">Alan Walker</p> </span> </div> <div class="song"> <span> <a href="singer.html"><img src="Images/07.png" /></a> <p style="line-height:90px; text-align:center; font-size:18px;">张杰</p> </span> </div> <div class="song"> <span> <a href="singer.html"><img src="Images/08.png" /></a> <p style="line-height:90px; text-align:center; font-size:18px;">庄心妍</p> </span> </div> <div class="song"> <span> <a href="singer.html"><img src="Images/09.png" /></a> <p style="line-height:90px; text-align:center; font-size:18px;">陈奕迅</p> </span> </div> </div> <div class="right"> <div class="mainlist"> <h2 style=" text-align:center; font-size:28px">登录艾莫音乐</h2> </div> <div class="sign"> <div class="signin"> <p style="font-family: Verdana, Geneva, sans-serif">查看并管理你收藏的私房音乐，</p> <br /> <p style="font-family:Verdana, Geneva, sans-serif">方便随时随地收听</p> <a href="login.html"><img src="Images/is.PNG" /></a> <a href="login.html"><img src="Images/Load.PNG" /></a> </div> </div> <div class="mainlist"> <p style="font-size:28px; color:#C00;">热歌排行</p> </div> <div class="leftmore"> <li style="text-indent:6em; float:left; font-size:14px; color:#999;">歌曲</span> <li style="text-indent:7em; float:left; font-size:14px; color:#999;">歌手</span> <li style="text-indent:7em; font-size:14px; color:#999;">时长</span> </div> <div class="mp3"> <a href="#"><img src="Images/mp3.png" /></a> </div> </div> </div> <div class="bottom"></div> </div> </body> </html>