.Net Project/CSS 2.0

23장 레이아웃 스타일

Magic_kit 2009. 7. 29. 18:41
반응형


                                            →


<!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>23.레이어</title>
</head>
<body>

<div style="background-color:Silver; width:100px ; height:100px ; position:absolute; z-       index:0; left:150px ; top:120px ; ">
       1번 영역(레이어)
</div>

<div style="background-color:Yellow; width:100px ; height:100px ;position:absolute;
       z-index:0; left:120px ; top:100px ;  ">
       2번 영역(레이어)
</div>

<div style="background-color:Red;  width:100px ; height:100px;
       position:relative; z-index:10; overflow:scroll; white-space:nowrap; ">
       3번 영역(레이어) 안녕하세요 만나서 반갑습니다
</div>

<div style="background-color:Blue;  width:100px ;
  height :100px ;
  overflow:hidden;
  white-space:nowrap;">
  4번 영역(레이어)
</div>

<div id="five" style="background-color:Green;  width:100px ;
      height :100px ;
      visibility:hidden;
      display:block;
      left:0px; top:50px ;">
5번 영역(레이어) </div>

<script type="text/javascript">

 function ShowFive() {
 
 if (document.getElementById("five").style.visibility != "visible") {
   document.getElementById("five").style.visibility = "visible";
   document.getElementById("five").style.display = "block";
  }else
   {
    document.getElementById("five").style.visibility = "hidden";
    document.getElementById("five").style.display = "none";
   }
 }
</script>

 <input type="button"value="5번 레이어 보이기" onclick="ShowFive();" />

</body>
</html>

반응형