<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. Java笔记(二十七)……IO流中 File文件对象与Properties类

    File类 用来将文件或目录封装成对象 方便对文件或目录信息进行处理 File对象可以作为参数传递给流进行操作 File类常用方法 创建 booleancreateNewFile():创建新文件,如果 ...

  2. eclipse svn安装

    SVN插件下载地址及更新地址,你根据需要选择你需要的版本.现在最新是1.8.x Links for 1.8.x Release: Eclipse update site URL: http://sub ...

  3. 关于Eclispse连接Mysql的Jdbc

    1.在Eclipse中新建Java工程 2.引入JDBC库(在bulid path 的extenrnal里) 3. 1)导入sql包(import java.sql.*) 2)加载(注册)mysql ...

  4. VisualBox会造成VPN连接不上问题

    今天连接VPN查找点资料,但是怎么也连接不上,一直出现651错误,开始以为是服务器配置原因,重新配置后发现问题依旧,后查找相关资料,发现有提到VisualPC, 感觉VisualBox跟VisualP ...

  5. map的基本操作函数及含义

    map的基本操作函数:      C++ Maps是一种关联式容器,包含“关键字/值”对      begin()          返回指向map头部的迭代器      clear()        ...

  6. 修改Tomcat Connector运行模式,优化Tomcat运行性能

    Tomcat是一个小型的轻量级应用服务器,也是JavaEE开发人员最常用的服务器之一.不过,许多开发人员不知道的是,Tomcat Connector(Tomcat连接器)有bio.nio.apr三种运 ...

  7. javascript-智能社-笔记

    JavaScript是什么 JavaScript就是修改样式 编写JS的流程 布局:HTML+CSS 属性:确定要修改哪些属性 事件:确定用户做哪些操作(产品设计) 编写JS:在事件中,用JS来修改页 ...

  8. linux下lighttpdserver的具体安装步骤 以及对flv流媒体的支持配置

    准备条件: a,创建/usr/local/lighttpd文件夹,用于安装lighttpd b,创建lighttpd用户password为lighttpd账号,用于lighttpd的启动用户 c,安装 ...

  9. Android SDK Manager无法更新问题解决

    有时候在网络不好的情况下,android sdk manager更新可能一直报错.原因跟国内对于google相关服务的访问受限有关系,需要设置代理访问. 最近也遇到了这个问题.解决方法如下. 启动An ...

  10. [Javascript] Create an Array concatAll method

    In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we ...