javascript 布局 第20节 

<html>
	<head>
		<title>页面布局</title>
		<style type="text/css">
			body{
				margin:0px;
				padding:0px;
				text-align:center;/* */
			}
			.content {
				margin:0  auto;
				/* background-color:pink;*/				  
				width:85%;
				height:100%;
			}
			.top {
			   width:99%;
			   height:100px;
			   font-size:25px;
			   font-weight:bold;
			   color:white;
			   background-color:#CCFF66;
			}
			.left {
			   width:30%;
			   height:450px;
			   font-size:25px;
			   font-weight:bold;
			   color:white;
			   background-color:#FFFF99;
			   float:left;
			}
			.middle {
			   width:40%;
			   height:450px;
			   font-size:25px;
			   font-weight:bold;
			   color:white;
			   background-color:#00FFFF;
			   float:left;
			}
			.right {
			   width:29%;
			   height:450px;
			   font-size:25px;
			   font-weight:bold;
			   color:white;
			   background-color:#CCCC99;
			   float:left;
			}

			.foot {
			   width: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 + "\n" +  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:

posted @ 2015-08-19 17:11  影分身  阅读(116)  评论(0)    收藏  举报