主要内容：介绍html和css，使用html和css实现一个简单的音乐播放网页，后面有源码；
工具：Dreamweaver
说明：自己在学习的过程的一些记录，和大家一起分享，若有错误之处和不当之处还望大家指出
1：html文本标记语言
html是一种文本标记语言，用多组标签来实现不同的显示内容，通常标签是成对出现，例如<p></p>就是一组段落标签，把段落的内容写在中间;也有独个出现的标签，如<img src="1.jpg" />就是一个图片的标签；其中多个属性值用空格隔开。
DW(Dreamweaver)是一款非常方便的前端编辑器，自动生成html基本框架，打开DW,选择文件->新建，html文档类型选择html5，确定创建后进入编辑页面，先保存到一个自定义的项目文件夹，以便于后面的文件链接位置选择；
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> </body> </html>
可以从中看出，html网页包括head和body两个部分组成，head部分包括编码格式（<meta>）、标题和link的内容等，要显示的网页主题内容就写在body部分了，接下来是一些html常见标签的使用。
<h1><h2><h3><h4><h5><h6> <p> 显示文字的，可以添加多属性， align文字显示位置，如文字居中显示等，style文字效果，如颜色等。
<img> 显示图片的，图片用src属性标注，可选择属性width height高度宽度，数值可以用像素也可以用百分百，alt：图片无法显示时的代替文本。
<a> 超链接标签，属性href来标记打开的链接，不打开别的链接用 #；
<ul> <ol> 无序表和有序表 ，列表项目用<li>；
<div> 块级元素，用来分块显示内容；
<form> 表单，<input>输入 type内容 ，text是文本框，submit是提交
<input type="text" name="name" /> <input type="submit" value="Submit" />
<button> 一个按钮；
<audio> 音频文件标签。先介绍这么多了，更多可见W3school 。
2：css（层叠样式表 Cascading Style Sheets）
a.属性和属性值
属性是规定修饰的内容，如color是文本的颜色属性，属性值在不同属性有数值量和百分比。
b.选择器
b.a类型选择器
方法： 元素类型{属性}
a{ color:red} 就是把a元素的字设置为红色；
b.b简单属性选择器
class属性：
.name{ 属性} 使用的时候用class=“name”
id属性：ID属性的操作类似于CLASS属性,ID选择器的标志符是散列符号（#）
下面列举一些常用的css
1.定位
1.1 position ：
relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不 会影响常规流中的任何元素。
absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到 body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
1.2 top bottom left right 距离上下左右的偏移量
2.布局
2.1 float 元素浮动 取值 none left right 不浮动，左、右浮动
2.2 display 取值
none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间；
inline：指定对象为内联元素。
block：指定对象为块元素
list-item：指定对象为列表项目
2.3 clear 取值
none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
3.尺寸及补白
3.1 width&height 宽度高度，（对于img元素可以将其尺寸比例缩放）
3.2 margin 外边距，就是盒子和其他盒子的边距
3.3 padding 内边距，就是盒子和里面元素的边距
通过下面两个图对比，margin修改了盒子和其他盒子的边距，padding修改了盒子和里面元素的边距
4.背景边框
background & border
border取值：none：无边框 hidden：隐藏边框。 dotted：点状边框。 dashed:虚线边框
solid:实线边框 double：双线边框
5.字体文本
5.1 font 字体
5.2 text-align 文本居左、居中、居右
5.3 text-decoration 文本装饰
6.元素选择符
6.1 通配选择符 作用于全体 语法规则： *{rule}
6.2 类型选择符 以文档语言类型作为选择符 语法规则：p{ font-size: 20px;}
6.3 ID选择符 语法规则：#subtitle { font-size: 20px;}
6.4 类选择符 语法规则： .a { color: #f00; } 不同于ID选择符的唯一性，类选择符可以同时定义使用多个,如 class=“a b” ，而id=“a b”错误；
7.关系选择符
7.1 包含选择符和子选择符,
<style> /* 包含选择符(E F) 0123都有边框*/ .demo div { border:1px solid #ff0; } /* 子选择符(E>F) 0才有边框*/ .demo > div { border:1px solid #f00; } </style> <div class="demo"> <div> 0 <div>1</div> <div>2</div> <div>3</div> </div> </div>
7.2 相邻选择符和兄弟选择符
<style> /* 相邻选择符(E+F) 只有p1会变红色，h也不会变色*/ h3 + p { color: #f00; } /* 兄弟选择符(E~F) p1p2p3都变红色 */ h3 ~ p { color: #f00; } </style> <h3>标题</h3> <p>p1</p> <p>p2</p> <p>p3</p>
8.伪类选择符
8.1 E：hover{} 鼠标悬停的样式
好了，到这里html、css的基础内容已经介绍差不多了，下面进入音乐之家项目内容；
- 设计样式 -------先直接来预览一下最终样式吧
我给它分为ABCD四个区块；
A区做音乐播放控制；B区做账号登录注册；C区显示主体内容；D区显示页脚；
在这里主要使用html和css，不考虑js，能够做出来的效果也不多；
A区 音乐播放用一个audio标签，切换歌曲暂时没想到好的办法，就模拟一下，做了多个网页来播放不同的音乐，用超链接连起来。
B区 没用到js，登录注册也没法做，在这里也用模拟一下吧，设置为超链接直接跳转。
这样要让他们操作可以同时进行，就做成框架吧，用frame标签分为各个部分。
C区 歌单的页面显示，二级菜单，为了好看一点，没办法，还是加入一点点js吧，做一个图片轮播来；
- 写html
既然是做成框架，那就要多个html页面了； - 写css
主要是二级菜单的实现（新歌首发的歌单，热门歌手的图片内容，选择不同的标签显示不同内容），
选择就用hover就可以了，鼠标放在哪个标签显示出哪个标签（display none），然后再做一下位置的定位（position）显示在合适的内容。
热门电台只要把图片显示为圆形就可以了
下面插入代码部分：
首页框架：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>music home</title> <link rel="shortcut icon" type="image/x-icon" href="image/icon1.jpg"/> <link rel="stylesheet" href="css/cs01.css"/> </head> <frameset rows="15%,75%,10%" frameborder="no" bordercolor="#D6D6D6"> <frame src="head.html"/> <frameset cols="20%,80%"> <frame src="left.html"/> <frame src="center.html"/> </frameset> <frame src="bottom.html"/> </frameset><noframes></noframes> </html>
A区：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>music</title> <link rel="stylesheet" href="css/cs01.css"/> <style type="text/css"> div{ float:left; padding-left:25px; } div1{ float: right; padding-right:500px; } </style> </head> <body class="head" > <div1> <h2 class="hfont">音乐之家</h2> </div1> <div> <audio controls/> </div> <button><a href="playhtml/head5.html">上一曲</a></button> <button><a href="playhtml/head1.html">下一曲</a></button><br> <p>歌名：无</p> </body> </html>
B区：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>注册</title> <link rel="stylesheet" href="css/cs01.css"/> </head> <body background="image/count.jpg"> <div align="center" style="color:#C00"> <h3>欢迎加入音乐之家</h3> </div> <form action="incount.html" method="post"> <label for="user">登录名</label> <input id="user" type="text" name="user" placeholder="用户名"/> <br> <label for="psw">密 码</label> <input id="psw" type="text" name="psw" placeholder="密码" /> <br> <label for="email">邮 箱</label> <input id="email" type="email" name="mail" value="@qq.com"/> <input type="submit"/> </form> </body> </html>
C区：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>center</title> <link rel="stylesheet" href="css/center.css"/> </head><!--音乐--> <body class="center0"> <topleft> <span><p>新歌首发</p></span> <div class="topleft1"> <a href="indo.html">华语</a> <ul class="topleft2"> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">肖战、宋祖儿-最好的夏天</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">范丞丞-雨爱</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">易烊千玺-I Adore You</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">黄子韬、摩登兄弟-带风的少年</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">成龙、雷佳、王力宏、谭维维-和平的薪火</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">任然-心旅</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">崔子格-时间停止</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">任妙音-相思阙</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">无限王者团-千灯之约</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">房东的猫-远在咫尺的爱</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">许诗茵-烟雨行舟</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">欧阳朵-暂停</a> </li> </ul> </div> <div class="topleft1"> <a href="indo.html">欧美</a> <ul class="topleft2"> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">take me to your heart</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">See you again</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">500Miles</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Hello</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">It's My Life</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">yesterday</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">don't cry--guns n' roses</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">fade to black</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">careless whisper</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">my heart will go on</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">yesterday once more</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">your song--Elton john</a> </li> </ul> </div> <div class="topleft1"> <a href="indo.html">日韩</a> <ul class="topleft2"> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">overdose</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Hands Up</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">一天到晚只想着你</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Gee</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Backset</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Girls Girls Girls</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Nobody</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Super Girl</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Forever young</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Shadow</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">Something</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">empty</a> </li> </ul> </div> <div class="topleft1"> <a href="indo.html">其他</a> <ul class="topleft2"> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">出山——王胜男</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">多年以后——大</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">盗将行——马雨阳</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">再也——李智</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">生僻字——陈柯宇</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">沙漠骆驼——夏雨菲</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">崔子格-时间停止</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">任妙音-相思阙</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">学猫叫——小峰峰</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">房东的猫-远在咫尺的爱</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">红昭愿——音阙诗听</a> </li> <li> <img src="image/icon1.jpg" height="18" width="18"/> <a href="indo.html">纸短情长——烟把儿</a> </li> </ul> </div> <div class="runphoto"> <img class="topleftp img1" src="image/run1.jpg"/> <img class="topleftp img2" src="image/run2.jpg"/> <img class="topleftp img3" src="image/run3.jpg"/> <img class="topleftp img4" src="image/run4.jpg"/> </div> </topleft> <topright> <span> <h2>推荐MV</h2> <a href="indo.html">更多</a> </span> <div class="topra"> <a href="indo.html">年少有为-李荣浩</a> </div> <div class="toprb"> <a href="indo.html">说好不哭-周杰伦</a> </div> <div class="toprc"> <a href="indo.html">张学友演唱会</a> </div> </topright> <bottomleft> <span><p>热门电台</p></span> <div> <img src="image/pc1.jpg"></img> <a href="indo.html">中国好歌曲</a> </div> <div> <img src="image/pc2.jpg"></img> <a href="indo.html">KTV必点</a> </div> <div> <img src="image/pc3.jpg"></img> <a href="indo.html">最近热歌</a> </div> <div> <img src="image/pc4.jpg"></img> <a href="indo.html">网络红歌</a> </div> <div> <img src="image/pc5.jpg"></img> <a href="indo.html">新歌</a> </div> <div> <img src="image/pc6.jpg"></img> <a href="indo.html">老歌</a> </div> <div> <img src="image/pc7.jpg"></img> <a href="indo.html">经典</a> </div> <div> <img src="image/pc8.jpg"></img> <a href="indo.html">成名曲</a> </div> <div> <img src="image/pc9.jpg"></img> <a href="indo.html">动漫</a> </div> <div> <img src="image/pc10.jpg"></img> <a href="indo.html">轻音乐</a> </div> </bottomleft> <bottomright> <span> <p>热门歌手</p> </span> <div class="botdiv"> <ul class="title"> <li> <a href="indo.html">华语</a> <ul class="bshow"> <li> <img src="image/pd1.jpg"/> <a href="indo.html">刘德华</a> </li> <li> <img src="image/pd2.jpg"/> <a href="indo.html">周杰伦</a> </li> <li> <img src="image/pd3.jpg"/> <a href="indo.html">梁静茹</a> </li> <li> <img src="image/pd4.jpg"/> <a href="indo.html">许嵩</a> </li> </ul> </li> </ul> <ul class="title"> <li> <a href="indo.html">欧美</a> <ul class="bshow"> <li> <img src="image/pd11.jpg"/> <a href="indo.html">喵喵</a> </li> <li> <img src="image/pd22.jpg"/> <a href="indo.html">喵喵喵</a> </li> <li> <img src="image/pd33.jpg"/> <a href="indo.html">喵喵</a> </li> <li> <img src="image/pd44.jpg"/> <a href="indo.html">喵喵喵喵喵</a> </li> </ul> </li> </ul> <ul class="title"> <li> <a href="indo.html">其他</a> <ul class="bshow"> <li> <img src="image/pd111.jpg"/> <a href="indo.html">喵喵喵喵</a> </li> <li> <img src="image/pd222.jpg"/> <a href="indo.html">喵喵</a> </li> <li> <img src="image/pd333.jpg"/> <a href="indo.html">喵喵喵</a> </li> <li> <img src="image/pd444.jpg"/> <a href="indo.html">喵</a> </li> </ul> </li> </ul> <ul class="title"> <li> <a href="indo.html">日韩</a> <ul class="bshow"> <li> <img src="image/pd1111.jpg"/> <a href="indo.html">喵喵喵</a> </li> <li> <img src="image/pd2222.jpg"/> <a href="indo.html">喵</a> </li> <li> <img src="image/pd3333.jpg"/> <a href="indo.html">喵喵</a> </li> <li> <img src="image/pd4444.jpg"/> <a href="indo.html">喵</a> </li> </ul> </li> </ul> </div> </bottomright> </body> <script type="text/javascript"> var index=0; //改变图片 function ChangeImg() { index++; var a=document.getElementsByClassName("topleftp"); if(index>=a.length) index=0; for(var i=0;i<a.length;i++) { a[i].style.display='none'; } a[index].style.display='block'; } //设置定时器，每隔两秒切换一张图片 setInterval(ChangeImg,1500); </script> </html>
