<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:

javascript 布局 第20节的更多相关文章

  1. Android零基础入门第20节：CheckBox和RadioButton使用大全

    原文:Android零基础入门第20节:CheckBox和RadioButton使用大全 本期先来学习Button的两个子控件,无论是单选还是复选,在实际开发中都是使用的较多的控件,相信通过本期的学习 ...

  2. javascript布局转换

    javascript布局转换是将原有的浮动布局通过JS里面的javascript属性 offsetLeft 和offsetTop默认值来给元素设置绝对定位. 原来的:缺点--我们想给网页中的图片添加拖 ...

  3. javascript常见的20个问题与解决方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 第7.20节 案例详解：Python抽象类之真实子类

    第7.20节 案例详解:Python抽象类之真实子类 上节介绍了Python抽象基类相关概念,并介绍了抽象基类实现真实子类的步骤和语法,本节结合一个案例进一步详细介绍. 一.    案例说明 本节定义 ...

  5. javascript函数 第14节

    <html> <head> <title>function</title> </head> <body> 1.函数形式<b ...

  6. 2014年辛星Javascript解读第四节 流程控制语句

    上一节我们介绍了函数,本小节我们介绍一下流程控制语句,对于不论什么一门编程语言来说,流程控制都是很重要的,也就是我们常说的顺序结构.选择结构和循环结构. ************选择结构******* ...

  7. javascript 知道这20个正则表达式，能让你少写1,000行代码

    正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑.熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升. 正则表达式经常被用于 ...

  8. 深入理解JavaScript系列（20）：《你真懂JavaScript吗？》答案详解

    介绍 昨天发的<大叔手记(19):你真懂JavaScript吗?>里面的5个题目,有很多回答,发现强人还是很多的,很多人都全部答对了. 今天我们来对这5个题目详细分析一下,希望对大家有所帮 ...

  9. 汤姆大叔 javascript 系列 第20课 最后的5到javascript题目

    博客链接:http://www.cnblogs.com/TomXu/archive/2012/02/10/2342098.html 原题: 大叔注:这些题目也是来自出这5个题目的人,当然如果你能答对4 ...

随机推荐

  1. 【解决】Microsoft Visual Studio 2012 打开2008下编译的silverlight3项目

    最近因为项目需要,老师要我搞一发流程设计器,毫无头绪呀妈蛋 .. 我考虑是用silverlight呢还是jquery .. 上网找了找  .. 有一个用silverlight3写的 貌似IDE用的是V ...

  2. C++ 类T T t;构造时分配的内存在静态数据区 T t=new T()分配的内存在堆 这样说对吗

    C++  类T   T t;构造时分配的内存在静态数据区   T t=new T()分配的内存在堆

  3. 【Java基础】成员变量和局部变量的区别

    在类中的位置不同 成员变量:在类内部方法外部 局部变量:在方法体内部定义的或者方法的参数中定义的在内存中的位置不同 成员变量:在堆内存,有初始化值,byte,short,int,long->0, ...

  4. HW5.9

    public class Solution { public static void main(String[] args) { System.out.printf("%s\t%s\t%s\ ...

  5. httpclient在抓取网页时出现速度慢的情况分析

    问题: 最近在使用httpclient3.0 来做项目,在一台机器部署系统后,发现此机器比其它机器在抓取页面的速度上慢了大概4s,左右. 项目是部署在局域内网,所以代码中都是直接写的IP地址 .在使用 ...

  6. Yii目录树扩展ztree，ctree等

    ztree: http://blog.csdn.net/jake451/article/details/7091449 http://hi.baidu.com/qiangtan/item/e85c48 ...

  7. JS 单元测试

    JS单元测试,我工作时主要以mocha + chai 下面时具体的文档: mocha: https://mochajs.org/#asynchronous-code Chai: http://chai ...

  8. Java通过JDBC连接Oracle之后查询结果和在sqlplus查询结果不一样

    问题描述: 在sqlplus 下 orcl数据库中创建一张表后,使用insert语句插入几条数据 然后用java查询数据,发现在终端中输出的结果和在sqlplus中查询结果不一样. 在sqlplus中 ...

  9. 线段树练习[单点更新] HDU 2795 Billboard

    题目大意:有一个h*w的公告榜,可以依次在上面添加信息.每个信息的长度为x,高为1. 优先在最上面加入,如果空间足够的话,然后优先放在最左面.统计每条公告最终的位置,即它所在的行数. 这里是线段树来存 ...

  10. oepn sync

    http://blog.csdn.net/cywosp/article/details/8767327 SYNOPSIS #include <sys/types.h> #include & ...