主要內容：介紹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>