**
项目一的拓展内容是做一个天天动听的界面
**
一看就不是很难，然后用了两天大概有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;
}``
