主要内容：介绍html和css，使用html和css实现一个简单的音乐播放网页，后面有源码；
工具：Dreamweaver
说明：自己在学习的过程的一些记录，和大家一起分享，若有错误之处和不当之处还望大家指出
d1：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 。
d2：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>