**
项目一的拓展内容是做一个天天动听的界面
**
一看就不是很难，然后用了两天大概有20个小时的时间，搞出一个看起来还可以的样子。
要求是iphone6的尺寸，下面的播放按钮要实现播放和互动，我还没搞定
丑的一批！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
<body>
<div class="container">
<div class="header">
<img src="img/天天动听logo.jpg" width="350px" height="100px"/>
</div>
<div class="tt">
<a href="#" class="a1">下载天天动听客户端</a>
<img src="img/下载.png" class="dow"/>
</div>
<div class="tit">
<b style="text-align: center;float: left;">天天动听音乐</b>
</div>
<div class="o1">
<img src="img/1.jpg" class="t1"/>
<span class="s1">主打榜单</span>
<img src="img/三个点.png" class="t2"/>
<img src="img/播放.png" class="t3" />
<img src="img/双箭头-右.png" class="t4"/>
<hr align="center"/>
</div>
<div class="o1">
<img src="img/音乐光盘.jpg" class="t1"/>
<span class="s1">歌单精选</span>
<img src="img/三个点.png" class="t2"/>
<img src="img/播放.png" class="t3" />
<img src="img/双箭头-右.png" class="t4"/>
<hr align="center"/>
</div>
<div class="o1">
<img src="img/音乐会.jpg" class="t1"/>
<span class="s1">原创音乐榜</span>
<img src="img/三个点.png" class="t2"/>
<img src="img/播放.png" class="t3" />
<img src="img/双箭头-右.png" class="t4"/>
<hr align="center"/>
</div>
<div class="bai">
</div>
<div id="foot">
<img src="img/图片.jpg" class="active" id="_1">
<img src="img/上一首.png" id="_2">
<img src="img/播放(1).png" id="_3">
<img src="img/下一首.png" id="_4">
<progress value='70' max='100'></progress>
</div>
</div>
</body>
</html>
图片自己看着换换
下面的是css里面的代码，自己建一个demo2.css文件放进去，
同目录下可以直接引用
body{
background: white;
margin: 0;
padding: 0;
}
.a1{
font-size: 25px;
margin-right: 50px;
margin-top: 30px;
float: right;
display: block;
width: 350px;
text-align: center;
}
.dow{
width: 20%;
margin-right: 30px;
margin-top: -50px;
float: right;
}
img{
float: left;
}
.tt{
width: 350px;
height: 100px;
float: right;
}
b{
font-size: 30px;
width: 750px;
height: 50px;
color: white;
background-color: darkgrey;
text-align: center;
display: block;
}
.t1{
width: 15%;
height: 15%;
margin-left: 50px;
margin-top: 20px;
}
.s1{
font-size: 30px;
font-weight: bold;
float: left;
margin-left: 50px;
margin-top: 60px;
}
.t2{
width: 100px;
height: 100px;
margin-left: 90px;
margin-top: 25px;
}
.t3,.t4{
width: 50px;
height: 50px;
margin-left: 20px;
margin-top: 50px;
}
hr{
width: 100%;
}
.bai{
width: 750px;
height: 100px;
}
#foot{
width:750px;
height: 150px;
background-color: darkgrey;
position: relative;
margin-bottom: 20;
}
#_1{
display: block;
position: relative;
margin-top:10px;
margin-left: 50px;
width: 120px;
height: 120px;
}
#_2{
display: block;
position: absolute;
margin-top:10px;
margin-left: 200px;
width: 80px;
height: 80px;
}
#_3{
display: block;
position: absolute;
margin-top:10px;
margin-left: 350px;
width: 80px;
height: 80px;
}
#_4{
display: block;
position: absolute;
margin-top:5px;
margin-left: 500px;
width: 100px;
height: 100px;
}
progress{
width: 400px;
float: left;
position: relative;
margin-top: 110px;
margin-left: 40px;
}``
