posts - 72, comments - 19, trackbacks - 0, articles - 0

样式表

Posted on 2007-03-16 16:12 阅读(184) 评论(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;
}

只有注册用户登录后才能发表评论。