网页设计知识综合笔记

Css布局：

一、 排版

图像居中：

form {

position: absolute;

left: 50%;

top: 50%;

margin-left: -250px;

margin-top: -42px;

}

超级简洁居中

margin:0 auto;

右下角固定图像（广告窗）

.bottomFrame1{

position: fixed;/*设置为固定*/

left: 100%;

top: 100%;

margin-left: -200px;/*根据实际窗体大小调整*/

margin-top: -42px;

}

.bottomFrame2{

position: fixed;/*设置为固定*/

right: 0;

bottom: 0;

}

相对定位&绝对定位补充：

实例演示div+css的绝对定位和相对定位布局

概要：

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。

说明：

占位空间：元素在文档流中所占据的空间。

物理空间：元素本身所占据的空间。

下面分3种情况分别对相对定位和绝对定位进行讨论：

1.只使用css第一组属性布局定位元素的情况

2.只使用css第二组属性布局定位元素的情况

3.混合使用第一组和第二组属性的情况

图1为未定位时的初始效果，

层级关系为：

<div class="box_bg">

<div class="box box_01">box1</div>

<div class="box box_02">box2</div>

    <div class="box box_03">box3</div>

</div>效果图：

 
图1

一、用相对定位布局块级元素

元素设置position值：position:relative
此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）

1.仅使用left、right、top和bottom属性布局相对定位元素的情况
元素原本所占的占位空间仍保留，物理空间偏移。

图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。
层级关系为：
<div
 <div box1
 <div box2 ——– position:relative ; top:-60px; left:80px;
<div box3
效果图：

图2

2.仅使用margin属性布局相对定位元素的情况

用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值

图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值层级关系为：

 <div

<div box1 ——– position:relative ; margin-bottom:-100px;

<div box2 ——– position:relative ; margin-bottom:-100px; margin-left:110px;

 <div box3 ——– position:relative ; margin-bottom:-100px; margin-left:220px;

效果图：

图3

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况

此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。

图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px-30px)层级关系为：

 <div

 <div box1 ——- position:relative ; margin-bottom:-100px;

<div box2 ——- position:relative ; margin-bottom:-100px;margin-left:110px; flet:-30px;

 <div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;

效果图：

 
图4

二、用绝对定位布局块级元素
设置position值：position:absolute;
此属性值的设置，元素从文档流完全删除。

1.仅使用left、right、top和bottom属性布局绝对定位元素的情况

绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。

设置元素为绝对定位元素后，元素的Left、 Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、 Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已。

层级关系为：

 <div ———————————position:relative 参照物

<div—————————-没有设置为定位元素，不是参照物

<div———————-没有设置为定位元素，不是参照物

<div box1

<div box2 ——–absolute
<div box3

效果图： 

图5

以最近的祖先定位元素为参照物的情况
图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。
层级关系为：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————- position:relative 参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图：

图6

图7中，为改变参照物（橘色框）后的效果
层级关系为：

<div ——————————— position:relative;最近的祖先定位元素，参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图：

图7

图8中，参照物为最顶级的元素情况。
层级关系为：
<div ———————————没有设置为定位元素，不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; top:50px; left:120px;
      <div box3
效果图：

图8

2.仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。

图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
      <div box3
效果图：

图9

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
<div ——————————— position:relative; 不是参照物
  <div—————————-没有设置为定位元素，不是参照物
    <div———————-没有设置为定位元素，不是参照物
      <div box1
      <div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
      <div box3
效果图：

图10

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。
例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;
层级关系为：
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative; 参照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; left:-20px; top:50px;
      <div box3
效果图：

图11

b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。
层级关系为：
<div ———————————-不是参照物
  <div—————————–不是参照物
    <div———————–position:relative; 参照物
      <div box1
      <div box2 ———position:absolute; margin-left:120px; right:10px; top:50px;
      <div box3
效果图：

图12

总结：

· 相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。

· 绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。

· 绝对定位的元素以最近的定位祖先元素为参照物。

元素效果设置：

圆角+阴影

background-color: #FFFFFF;/*背景色*/

border-radius: 10px;/*圆角*/

box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.1);/*阴影*/

border-width:1px;/*边框*/

input获取焦点变色

input:FOCUS {

border-color: #4c4c4c;

}

JS综合运用：

基本功能：

JS中提交form内容：

function subForm(){

var form=document.getElementById("login");

form.submit();

}

禁止form内容提交：

form 的提交按钮调用：onclick="registerUp(event)" 

注：onfocus="registerUp(event)"不起作用

registerUp(event)验证：

function registerUp(event){

event=event||window.event;//事件判断，如果是Firefox则为：event，如果是IE则是：window.event

var flag=false;

if(chatUserName()&&chatPwd_one()&&chatPwd_two()&&chatEmail()){//所有验证都满足

flag=true;

}

if(!flag){

if(event.preventDefault()){//非IE浏览器

event.preventDefault();//阻止默认方法：默认方法是提交

event.stopPropagation();//阻止冒泡（不再派发事件）：终止事件在传播过程的捕获、

//目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该

//事件的处理程序将被调用，事件不再被分派到其他节点。

}else{//IE浏览器

event.returnValue=false;//阻止默认方法：默认方法是提交

event.cancelBubble=true;//阻止冒泡（不再派发事件）：终止事件在传播过程的捕获、

//目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该

//事件的处理程序将被调用，事件不再被分派到其他节点。

}

}

}

event.stopPropagation()：

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

浏览器

事件

事件对象

IE

window.event

window.event.srcElement

Firefox

event

event.target

Opera

window.event

window.event.srcElement

或event.target

有关 event 和 window.event

在IE/Opera中：是window.event；

而在Firefox中：是event。

而事件的对象，

在IE中是：    window.event.srcElement；

在Firefox中是：event.target；

而在Opera中则两者都支持。

我们还是用例子来说明。

JS页面跳转：

function goPage(){

location.href="http://www.nyist.net";

}

页面刷新：

function refresh(){

location.reload();

}

登录：

function chatInfo(){/*提前校验减轻服务器负担*/

var pattern_user=/^[a-zA-Z][a-zA-Z0-9]{4,7}$/;/*用户名校验*/

var pattern_pwd=/^[^*?_]{6,9}/;/*密码名校验*/

var userName=document.getElementById("userName");

var pwd=document.getElementById("pwd");

var flag=true;

if(userName.value==""||pwd.value==""){

if(userName.value==""){

userName.focus();

flag = false;

}

else{

if(!(userName.value).test(pattern_user)){

flag=false;

alert("用户名,必须以字母开头，由数字和字母组成！");

}

else{

if(pwd.value==""){

pwd.focus();

flag=false;

}

else{

if(!(pwd.value).test(pattern_pwd)){

flag=false;

alert("密码，必须有字母和数字组成");

}

}

}

}

}

return flag;

}

日历控件添加：

日历控件：有很多开源日历插件，只需少加配置就可以用

<!-- Include Core Datepicker Stylesheet -->

<link rel="stylesheet" href="static/css/ui.datepicker.css" type="text/css" media="screen"  charset="utf-8" />

<!-- Include jQuery -->

<script src="static/js/jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>

<!-- Include Core Datepicker JavaScript -->

<script src="static/js/ui.datepicker.js" type="text/javascript" charset="utf-8"></script>

<script src="static/js/ui.datepicker-zh-CN.js" type="text/javascript" charset="utf-8"></script>

<!-- Attach the datepicker to dateinput after document is ready -->

<script type="text/javascript" charset="utf-8">

jQuery(function($){

$('#datepicker').datepicker({//控制id为datepicker的元素

yearRange: '1900:2099', //取值范围.

showOn: 'both', //输入框和图片按钮都可以使用日历控件。

buttonImage: 'static/img/calendar.gif', //日历控件的按钮

buttonImageOnly: true,

showButtonPanel: true

});

});

</script>

<input type="text" id="datepicker" name="birthday" value="生日" readonly="readonly">

Js获取<textarea></textarea>中的值

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.1//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>title</title>
</head>
<script type="text/javascript">
function done()
{
e = document.getElementById('ta');
 alert( e.firstChild.nodeValue)
}
</script>
<body>
<textarea id="ta" cols="10">123456789</textarea>
<br/>
<input type="button" value="加[U]" onclick="done();" />
</body>
</html>

CSS+DIV+JS综合：

登录：

注册：

注册用时的验证码问题：

验证码：为了不让恶意程序大量的在网站注册账户，为保证是人输入而不是程序的恶意输入。验证码是服务器端的一个插件，专门生成 图片+图片内容 对儿；图片发送给浏览器，图片内容保留在服务器端（用一个session保存）。最后将浏览器提交的数据进行处理，提取验证码，与服务器保存的图片内容进行对比（服务器中），从保证非程序恶意注册。

验证码机制： 是由验证码插件中的程序随机生成的图片，其中包含验证码+干扰线，干扰线必须和字体颜色相同，用于干扰自动扫描

一个开源验证码插件：http://code.google.com/p/kaptcha/wiki/ConfigParameters

分页原理：

一个博客：http://tank03.iteye.com/blog/1004804

易犯错误：

Servlet多次传递request对象：

当Servlet1收到一个get()或post()方式的request时，用doGet()或doPost()，转发给Servlet2时，Servlet2同样用doGet()或doPost()处理

Web项目：

与java项目不同，Web项目最好不要整体拷贝，因为其中包含其自身的详细配置信息，每个web项目的配置信息都不同；建议只拷贝其中的html,jsp,servlet,java和lib文件下的包文件；