Css 요약
15200 단어 사업 총결산
<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 onclick="loadDetails('')">680000.00</a></span>
<span id="SWElectric" style="position: absolute;top: 218px;left: 344px;color:red;font-size :22px;" ><a onclick="loadDetails(1)">480000</a></span>
<span id="TDElectric" style="position: absolute;top: 386px;left: 348px;color:red;font-size :22px;" ><a onclick="loadDetails(1)">80000</a></span>
<span id="DFElectric" style="position: absolute;top: 498px;left: 348px;color:red;font-size :22px;" ><a onclick="loadDetails(1)">70000</a></span>
<span id="XGElectric" style="position: absolute;top: 572px;left: 348px;color:red;font-size :22px;" ><a onclick="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>
좋은 웹페이지 즐겨찾기
