<style type="text/css"> html,body{ height:100%; width:100%; margin:0px; min-width: 1200px; min-height: 600px; } .page{ height:100%; padding-top:35px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } .top{ height:35px; margin-top:-35px; margin-right:1.5px; } .main{ height:100%; } .left { height:665px; width:30%; border: 1px solid #DADADA; margin-top:2px; margin-right:2px; float: left; } .right { height:665px; width:69.3%; border: 1px solid #DADADA; margin-top:2px; float: left; } .right_top { height:50%; width:100%; border-bottom: 1px solid #DADADA; } .right_bottom { height:50%; width:100%; margin-top:2px; border-top: 1px solid #DADADA; } .left_top { height:30%; width:100%; } .left_bottom { height:70%; width:100%; } .left_top_text,.left_bottom_text { padding-top:35px; padding-left:60px; font-size:20px; } .left_top_tab { padding-left:30px; padding-right:30px; } .left_bottom_chart { height:89%; width:100%; } a:link {color: blue} a:hover { cursor:pointer } </style>
覆盖图片上的文字
<html>
<style type="text/css">
html,body {
height: 100%;
width: 100%;
margin: 0px;
min-width: 1252px;
min-height: 700px;
background-color:white ;
box-sizing:content-box;
}
.page {
height: 100%;
padding-top: 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.top {
height: 35px;
margin-top: -35px;
margin-right: 1.5px;
}
.main {
height: 100%;
}
.details
{
margin-top: 2px;
text-align:center;
}
a:hover {
cursor: pointer
}
</style>
<body>
<div class="page">
<div class="top">
</div>
<div class="main">
<div class="details">
<img alt="" src="test.png">
</div>
<div id="loadData">
<span id="buyElectric" style="position: absolute;top: 92px;left: 370px;color:#0080FF;font-size :17px;" ><a οnclick="loadDetails('')">680000.00</a></span>
<span id="SWElectric" style="position: absolute;top: 218px;left: 344px;color:red;font-size :22px;" ><a οnclick="loadDetails(1)">480000</a></span>
<span id="TDElectric" style="position: absolute;top: 386px;left: 348px;color:red;font-size :22px;" ><a οnclick="loadDetails(1)">80000</a></span>
<span id="DFElectric" style="position: absolute;top: 498px;left: 348px;color:red;font-size :22px;" ><a οnclick="loadDetails(1)">70000</a></span>
<span id="XGElectric" style="position: absolute;top: 572px;left: 348px;color:red;font-size :22px;" ><a οnclick="loadDetails(1)">50000</a></span>
</div>
</div>
</div>
</body>
</html>
Navigator 面板
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>Untitled Document</title>
<script language="javascript" src="jquery1.8.2.js" ></script>
<style>
/**节点导航面板*/
.center .nav{
border-bottom:2px solid #279CEA;
height:30px;
background:#FFFFFF;
margin-top:5px;
}
ul{
list-style:none;
margin:0;
padding:0;
height:100%;
}
li{
float:left;
margin-right:2px;
background:#D1D1D1;
height:100%;
width:60px;
text-align:center;
color:#333333;
cursor:pointer;
font:12px '宋体';
line-height:30px;
}
/**tab节点选中*/
.nav .selected{
background:#279CEA; color:#FFFFFF
}
/**tab节点未选中*/
.nav .noSelected{
background:#D1D1D1; color:#333333
}
/**节点导航面板 end*/
</style>
<script type="application/javascript">
window.onload = function(){
//节点点击事件
$(".nav ul > li").each(function(index, element) {
$(element).bind("click",(index+1),function(obj){
menuClick(obj.data);
});
});
}
//绑定事件
function menuClick(id)
{
for(var i = 1;i<=5; i++){
$(".menu_"+i).addClass("noSelected");
//内容信息页面id
//$("#detail_"+i).hide();
}
//如果不移除未选中样式直接添加选择样式会被前者覆盖
$(".menu_"+id).removeClass("noSelected").addClass("selected");
//内容信息页面id
//$("#detail_"+id).show();
alert("第"+id+"个tab 响应");
}
</script>
</head>
<body>
<div class="center">
<div class="nav">
<ul>
<li class="menu_1">Menu_01</li>
<li class="menu_2">Menu_02</li>
<li class="menu_3">Menu_03</li>
<li class="menu_4">Menu_04</li>
<li class="menu_5">Menu_05</li>
</ul>
</div>
</div>
</body>
</html>
table 样式 和 文字排版
<style>
.table_panel
{
width:100%;
text-align:center;
min-width:1200px;
}
table{
border-collapse:collapse;
background:#FFFFFF;
width:400px;
color:#F7530B;
text-align:right;
margin-top:2px;
margin-left:35%;
margin-bottom:2px;
align:center;
}
.table_header{
background:#EFEEEE;
font:bold 12px '宋体';
color:#333333;
text-align:center;
}
.detail_label{
color:#000;
font:12px '宋体';
background:#EDF8FE;
width:120px;
text-align:center;
}
td{
border: 1px solid #DADADA;
}
.content
{
font:10px '宋体';
margin:10px;
word-spacing:0.5em;
text-indent:2em;
vertical-align:middle;
text-align:left;
line-height:1.5;
}
.content-panel
{
width:600px;
height:600px;
border:1px solid #DADADA;
text-align:center;
overflow:hidden;
padding-bottom:5px;
}
</style>
<div class="content_top_right">
<div class="table_panel">
<span>列表测试</span>
<table >
<tr class="table_header">
<td></td>
<td>语文</td>
<td>数学</td>
</tr>
<tbody id="spot_check_info_id">
<tr>
<td class="detail_label">小明</td>
<td>89</td>
<td>78</td>
</tr>
<tr>
<td class="detail_label">小红</td>
<td>56</td>
<td>68</td>
</tr>
<tr>
<td class="detail_label">小花</td>
<td>78</td>
<td>99</td>
</tr>
</tbody>
</table>
</div>
<div class="content-panel">
<div style="font-size:20px;margin-top:10px;" >列表标志定位</div>
<div class="content">
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫。
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫。
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫。
</div>
<div class="content">
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫。
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫。士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫。
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫,
士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫士大夫,士大夫士大夫士大夫士大夫士大夫士大夫。
</div>
</div>
</div>
toggle方法例子 toggle(function1,function2)
<!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>TOGGLE演示</title>
<script type="text/javascript" language="javascript" src="jquery1.8.2.js">
</script>
<script language="javascript">
$(document).ready(function(){
$("#btn1").toggle(function(){
$("p").hide("slow");
},function(){
$("p").show("slow");
});
});
</script>
</head>
<body>
<p style="background:#3F3">this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
this is pi<br>
</p>
<input type="button" value="显示/隐藏" id="btn1">
</body>
</html>
panel例子
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="jquery1.8.2.js" ></script>
<script language="javascript" src="jquery.loadmask.min.js" ></script>
<link href="jquery.loadmask.css" rel="stylesheet" type="text/css">
<style type="text/css">
html,body{
height:99.9%;
margin:0;
}
.box{
width:99%;
margin:auto;
padding-top:30px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1px solid #DDDDDD;
margin-top:2px;
}
.box_top{
height:30px;
margin-top:-30px;
background:#F9F9F9;
cursor:pointer;
border-bottom:0px solid #DDDDDD;
}
.box_center{
height:300px;
background:#FFFFFF;
overflow:auto;
padding:5px 0 0 5px;
display:none ;
}
.box_title{
float:left;
height:100%;
font:bold 14px '宋体';
color:#00538D;
line-height:30px;
padding-left:5px;
}
.box_opera{
float:right;
height:100%;
text-align:right;
}
.top_shrink{
padding-right:5px;
font:bold 24px '宋体';
color:#666666;
/*cursor:pointer;*/
}
</style>
<script type="application/javascript">
window.onload = function(){
$(".box_top").bind("click",null,function(obj){
var box_content = $(this).parent().children(":last-child");
var top_shrink = $(this).children(":last-child").children();
var box_top = $(this);
if(box_content.is(":hidden")){
box_content.show();
top_shrink.html("-");
box_top.css("border-bottom","1px solid #DDDDDD");
}else{
$("body").mask("ddd");
box_content.hide();
top_shrink.html("+");
box_top.css("border-bottom","0px");
window.setTimeout(function(){
$("body").unmask();
},1000) ;
}
});
}
</script>
</head>
<body>
<div class="box">
<div class="box_top">
<div class="box_title">PANEL01</div>
<div class="box_opera">
<span class="top_shrink">-</span>
</div>
</div>
<div class="box_center">
</div>
</div>
<div class="box">
<div class="box_top">
<div class="box_title">PANEL02</div>
<div class="box_opera">
<span class="top_shrink">-</span>
</div>
</div>
<div class="box_center">
</div>
</div>
</body>
</html>