div+css面板

今日闲来无事,自己用CSS+DIV做了个面板。图片在附件中。

效果如下:

 


因为时间原因,面板上几个工具对应的响应函数还没写上。

div+css面板

 

 

<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>

你可能感兴趣的:(html,css)