音乐线条可视化教程html,HTML5音乐可视化

index.css 代码如下：

*{

padding: 0;

margin: 0;

box-sizing:border-box;

}

html,

body{

height:100%;

}

body {

font: 14px "Lucida Grande",Helvetica,Arial,sans-serif;

background: 000;

color: #fff;

text-align: center;

}

header,

.left,

.right{

position: absolute;

}

header{

left: 10px;

top: 10px;

right: 10px;

height: 150px;

border: solid #fff 1px;

}

header h1{

font-size: 40px;

height: 60px;

line-height: 60px;

}

.left{

left: 10px;

top: 170px;

bottom: 10px;

width: 200px;

border: solid #fff 1px;

}

.left ul{

overflow: auto;

}

.left ul li{

height: 30px;

line-height: 30px;

cursor: pointer;

}

.left ul li.selected{

color: green;

}

.right{

right: 10px;

top: 170px;

bottom: 10px;

left: 220px;

border: solid #fff 1px;

}

查看全部