今日闲来无事,自己用CSS+DIV做了个面板。图片在附件中。
效果如下:
因为时间原因,面板上几个工具对应的响应函数还没写上。
<html>
<head>
<style>
.panel{
overflow:hidden;
font-size:12px;
width:300px;
margin:20px;
}
.panel-header{
padding:5px;
line-height:15px;
color:#15428b;
font-weight:bold;
font-size:12px;
background:url('images/panel_title.png') repeat-x;
position:relative;
border:1px solid #99BBE8;
}
.panel-body{
overflow:auto;
border:1px solid #99BBE8;
border-top-width:0px;
height:200px;
}
.panel-tool{
position:absolute;
right:5px;
top:4px;
}
.panel-tool div{
display:block;
float:right;
width:16px;
height:16px;
margin-left:2px;
cursor:pointer;
opacity:0.6;
filter:alpha(opacity=60);
}
.panel-tool-close{
background:url('images/panel_tools.gif') no-repeat -16px 0px;
}
.panel-tool-min{
background:url('images/panel_tools.gif') no-repeat 0px 0px;
}
.panel-tool-max{
background:url('images/panel_tools.gif') no-repeat 0px -16px;
}
.panel-tool-restore{
background:url('images/panel_tools.gif') no-repeat -16px -16px;
}
</style>
</head>
<body>
<div class="panel">
<div class="panel-header">title
<div class="panel-tool">
<div class="panel-tool-close"></div>
<div class="panel-tool-min"></div>
<div class="panel-tool-max"></div>
<div class="panel-tool-restore"></div>
</div>
</div>
<div class="panel-body"></div>
</div>
</body>
</html>