當前位置:編程學習大全網 - 網站源碼 - 網頁設計,點擊彈出div 盒子

網頁設計,點擊彈出div 盒子

效果圖:

簡單的代碼:

<html>

<head>

<style>

*{margin:0;padding:0;}

#_outs{margin:0 auto;height:50px;width:200px;margin-top:200px;position:relative;}

#_ins{position:absolute;height:50px;width:200px;border:1px solid green;top:15px;left:100px;border-radius:5px;display:none;text-

align:center;line-height:50px;}

</style>

<script>

function tanchu(){

document.getElementById("_ins").style.display="block";

}

function guanbi(){

document.getElementById("_ins").style.display="none";

}

</script>

</head>

<body>

<div id="_outs">

<input type="button" value="點擊按鈕彈出div" onclick="tanchu()"></input>

<div id="_ins">彈出div

<input type="button" value="點擊按鈕關閉div" onclick="guanbi()"></input>

</div>

</div>

</body>

</html>

自己可以復制代碼運行下, 應該是妳要弄的效果吧。有不理解的可以追問我哦!記得采納哦。或者選為優質。謝謝啦。。。。。

  • 上一篇:求非常益智的遊戲不要解謎,急!!!!!!!!
  • 下一篇:東西丟了怎麽找回來
  • copyright 2024編程學習大全網