<html> <head> <title>页面布局</title> <style type="text/css"> body{ margin:0px; padding:0px; text-align:center;/* */ } .content { margin:0 auto; /* background-color:pink;*/ 85%; height:100%; } .top { 99%; height:100px; font-size:25px; font-weight:bold; color:white; background-color:#CCFF66; } .left { 30%; height:450px; font-size:25px; font-weight:bold; color:white; background-color:#FFFF99; float:left; } .middle { 40%; height:450px; font-size:25px; font-weight:bold; color:white; background-color:#00FFFF; float:left; } .right { 29%; height:450px; font-size:25px; font-weight:bold; color:white; background-color:#CCCC99; float:left; } .foot { 99%; height:40px; font-size:25px; font-weight:bold; color:white; background-color:#7CFC00; float:left; } </style> <script type="text/javascript"> //封装通过id取对象的函数 function $(id) { return document.getElementById(id); } function login() { // var name = document.getElementById("username").vlaue;//节点 var name = $("username").value; var pwd = $("password").value; // alert(name.nodeName); alert(name + " " + pwd); var re = $("right"); $("panel").removeChild(re); } </script> </head> <body> <div class="content" id="panel"> <div class="top">top</div> <div class="left">left</div> <div class="middle">middle</div> <div class="right" id="right"><br/> <input type="text" name="usernme" id="username" /><br/><br/> <input type="password" name="password" id="password"/><br/><br/> <input type="button" value="登录" onclick="login()"/><br/> </div> <div class="foot">foot</div> </div> </body> </html>
rs: