Posted on 2007-03-16 16:12
青 阅读(268)
评论(0) 编辑 收藏 引用 所属分类:
java学习日记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Keyboard</title>
<link rel="stylesheet" type="text/css" href="Music.css" />
<script type="text/javascript" src="Music.js"></script>
<script type="text/javascript">
///window.onload=assignKeys;
</script>
</head>
<body>
<div id='keyboard' class='musicKeys'>
<div class='do musicButton'></div>
<div class='re musicButton'></div>
<div class='mi musicButton'></div>
<div class='fa musicButton'></div>
<div class='so musicButton'></div>
<div class='la musicButton'></div>
<div class='xi musicButton'></div>
<div class='do musicButton'></div>
</div>
<div id='console' class='console'>
</div>
</body>
</html>
对上面的Music.css的写法如下:
body
{
background-color:white;
}
.musicKeys
{
background-color:Gray;
border :solid maroom 2px;
width:536px;
height:69px;
top:24px;
left:24px;
margin:4px;
position:absolute;
overflow:auto;
}
.musicButton
{
border :solid navy 1px;
width:60px;
height:60px;
position:relative;
margin:2px;
float:left;
}
.do{background-color:Red;}
.re{background-color:orange;}
.mi{background-color:yellow;}
.fa{background-color:green;}
.so{background-color:blue;}
.la{background-color:indige;}
.xi{background-color:violet;}
.do{background-color:Red;}
div.console
{font-family:@Arial Unicode MS;
font-size:16px;
color:Navy;
background-color:White;
border:solid navy 2px;
width:536px;
height:320px;
top :106px;
left:24px;
margin:4px;
position:absolute;
overflow:auto;
}