Div弹出框
1.Div实现弹出登录窗口
JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域，并在开始时将其隐藏，只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来。
具体详见代码：（注意，本div弹出层还不能被拖动，拖动效果有待进一步的实现）
<html>
<head>
<title>jQueryDialog</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js"></script>
<style type="text/css">
#win{
border:1px solid;
width : 300px;
height: 200px;
background-image: url(light.jpg);
top : 100px;
left: 800px;
position : relative;
display : none;
}
#title{
background-image: url(dark.jpg);//图片的url
color : red;
}
#content{
background-color: white;
padding-top: 0px;
}
.textLength
{
padding:0;
margin:0;
width:150px;
}
.textLength22
{
padding:0px;
margin-left:10px;
width:150px;
}
</style>
<script type="text/javascript">
function showWin(){
var winNode = $("#win");
winNode.fadeIn("slow");
}
function hide(){
var winNode = $("#win");
//winNode.css("display", "none");
winNode.fadeOut("slow");
// winNode.hide("slow");
}
</script>
</head>
<body>
<div align="center">
<a onclick="showWin()" href="#" mce_href="#">Click here</a>
<br/>
<input type="text" id="text1">
<br/>
<input type="button" value="click">
</div>
<div id="win">
<div id="title"><span id=”spanTitle” style="padding-left: 3px;margin-right:160px">Dialog Testing</span><span id="spanClose" style=” cursor: pointer; ” onclick ="hide()">[close]</span></div>
<p style="text-align: center">Welcome to this site</p>
<div align="center">
<p> Your Name: <input type="text" id="tUname" class="textLength"></p>
<p> Password: <input type="password" id="tPwd" class="textLength22"></p>
<input type="button" value="Log In" id="loginButton" style="margin-left: 80px; width: 60px">
<span style="margin-left: 20px" ><a href="http://www.baidu.com">Register</a><span>
</div>
</div>
</body>
</html>
2.用CSS设置文本框的长度：
<input class="kuang" type="text" value="aa"/>
Css代码是：.kuang {padding:0;margin:0;width:50px;}
这样就行了
3.Margin是元素之间的边距，padding是子元素与父元素之间的边距。
详见上述代码中的spanTitle与spanClose以及id为title的div与spanTitle之间的margin与padding的设置效果。
4.html注释符号为<!—这是注释的内容-->，跨行同样有效。
5.简写CSS样式的格式
例如为<span>或<div>定义样式，则可简写为<span style="样式内容1;样式内容2;… ">，具体如<span style="padding-left: 3px;margin-right:160px">
