一、概述：

在前面的学习掌握了java C/S的开发模式，从今天开始就要进入B/S的学习中，在学习动态网站之前首先要学习静态网页技术，那首先就要了解静（动）态网页的概念，动态网站的意思：人的不同，内容会不一致，就是动态网页技术，那静态网站的所有内容都是一致，不会因为人的不同而引起内容的不同。在静态网页技术中，要掌握css以及javascript的技术。

二、CSS的用法

1、概念

CSS（层叠样式表），用来控制和修改网页的外观，是用来美化网页的页面。

1、 CSS语法

1、CSS的使用有三种方法：

1、 直接样式表 ：将样式写在页面元素的style属性中，此样式只能作用在单一的元素上。

css真好玩 样式表由很多对属性：值所构成，彼此之间采用分号分割。 样式表的属性用法要多去查阅css2的帮助文档或者在w3shool网站上查找。

2、 内部样式表 ：将样式表写在head标记对中。

p{color:red}

此样式能影响所有使用p的段落。

3、 外部样式表：将样式表写成一个扩展名为css的文件中，在页面中加入link比较

P{color:red;}

First.html

在href中，要注意的时路径问题当把样式放在style文件夹里是，前面要加上style/first.css。

2、选择器：

在内部样式表和直接样式表中需要给样式表取名称，有三种取名称的方法：

Ø html选择器：选择html中可以的标记

Ø 类选择器：可以自定义名称，在名称前面有点修饰，在需要的地方使用class属性。

Ø id选择器：可以自定义名称，在名称前面有#修饰，在需要的地方使用id属性。

类选择器和id选择器的区别：类选择器可以重复使用，id选择器只能使用一次。

3、技巧

在使用CSS中，可以一些特殊符号以及组合

1、*号，代码所有对象。

2、当需要对多个元素设置一个样式时，可以把多个选择符写在一起，并用逗号分隔

p,li,td{color:red;}

3、包含选择符：当使用在某一个特定标记中的字标记选用样式时，可以把标记和子标记写出来，用空格分隔。

td span{color:red;}

p#test {color:red}//只能在段落使用id选择符

4、子元素选择符：如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。

例如，如果您希望选择只作为h1 元素子元素的strong 元素，可以这样写：

h1 >strong {color:red;}

5、相邻兄弟选择符：选择紧接在另一元素后的元素，且二者有相同父元素。

例如，如果要增加紧接在h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

三、JS的用法

1、基本概念：javascript是有java所派生出来的弱类型的语言，有其他程序语言的特征。用来实现网页中表单的验证以及网页动画实现。通过在head标记对中或者在所需要的地方加入script标记嵌入html中。在javascript中声明变量不用指定变量的数据类型，是根据所赋值来决定是何数据类型，可以通过typeof运算符来查看数据类型。

四、综合示例

示例1：实现网页计算器。

解决问题方法：1、事件处理程序，在javascript中可以使用函数来表示处理函数；

2、 如何获得控件的值：通过document.getElementById()的形式来访问对象；

3、 如何把获得值放在html的标记之间通过innerText和innerHTML，两者之间的区别：innerText是文本，innerHTML可以用来写标记。

代码：

.pageWidth{margin:auto;width:600px} #lay{height:400px;background:#fba} table{text-align:center} .fot{padding-top:5px;}
计算器
第一个数		文本框填写内容不正确
运算符	+ - * /
第二个数
()"/>	0

在以上示例中还可以引申修改其中的样式，写法有两种：

1、通过document.getElementById().style后面接具体的样式，在写样式时要注意css的样式有两个以上单词构成时，去掉中间的连字符第一个单词之外，其他单词大写。

2、可以在head标记对中，或者在css文件中，预先定义类选择器，然后在js中只需要写：document.getElementById().className=”类选择器名称”

示例2：基于示例1实现对文本框内容的验证。

要求：文本框的内容只能为数字，让是字母时，出现错误提示。

解决问题方法：

1、 信息的显示和隐藏，在css中有display何visibility来实现，display隐藏时不占位置，visibility隐藏时保留控件所占的位置。由于我们的信息显示在一行的最后一个单元格中，所以在这里我们应该选择visibility来实现，如果我们是在下一行显示错误信息，那就应该选用display。

2、 如果验证是否为字符，这里有两种方法实现：

a) 通过循环遍历来判断;

b) 通过正则表达式来判断;

正则表达式的用法：

在js中要实现正则表达式，首先就要创建正则表达式的对象，创建对象有两种方法：

方法一：

var reg = /[0-9]{3}/;

方法二

var reg = new RegExp(“[0-9]{3}”);

在正则表达式中，字符的含义：

[0-9]，数字0到9

{n}，至少匹配n次

+,匹配1次或者多次

*匹配0次或者多次

^开头

$结尾

代码：

方法一： function check(){ var obj = document.getElementById("num1"); var str = obj.value; var flag=false; for (var chr in str) { if(str.charAt(chr)<'0' || str.charAt(chr)>'9'){ flag = true; break; }else{ flag = false; } } if(flag){ document.getElementById("mess").style.visibility ="visible"; }else{ document.getElementById("mess").style.visibility="hidden"; } } 方法二： function chkReg(){ var obj = document.getElementById("num1"); var str = obj.value; var flag=false; var reg = new RegExp(" [0-9]{1,10} "); if(!reg.test(str)){ document.getElementById("mess").style.visibility ="visible"; }else{ document.getElementById("mess").style.visibility="hidden"; } }调用代码
计算器
第一个数	onblur="check()"/>	*文本框填写内容不正确
运算符	+ - * /
第二个数
	0

示例3：实现日历

解决问题方法：

代码：

");

for(var i=0;i<7;i++){

document.write("

");

}

document.write("

");

for(var i=0;i

document.write("

");

for(var j=0;j<7;j++){

if(i==0 && j

document.write("

");

}

else{

var sid= "t"+d;

//alert(sid);

document.write("

");

if(d==current_day){

var cid = "t"+current_day;

document.getElementById(cid).style.background="#f00";

}

d++;

if(d>days[date.getMonth()]){

d = days[data.getMonth()];

}

}

}

document.write("

");

}

document.write("

var titles=["日","一","二","三","四","五","六"]; var days=[31,28,31,30,31,30,31,31,30,31,30,31]; var date = new Date(); var current_day=date.getDate(); date.setDate(1); var d =1; var week =date.getDay(); var date_rows = Math.round((days[date.getMonth()]+week+6)/7); document.write(" "); document.write("
"+titles[i]+"
	"+d+"

");

示例4：改进版日历：

代码：

#lay2{height:100px;width:150px} test

慎用JavaScript:void(0)

JavaScript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下：
1. javascript:void (expression)
2. javascript:void expression
expression是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的，但是写上去是一个好习惯。我们可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。面的代码创建了一个超级链接，当用户点击以后不会发生任何事。当用户点击链接时，void(0) 计算为 0，但在JavaScript 上没有任何效果。

单击此处什么也不会发生

也就是说，要执行某些处理，但是不整体刷新页面的情况下，可以使用void(0),但是在需要对页面进行refresh的情况下，那就要仔细了。

其实我们可以这样用，这句话会进行一次submit操作。那什么情况下用void(0)比较多呢，无刷新，当然是Ajax了，看一下Ajax的web页面的话，一般都会看到有很多的void(0)，：）　，所以在使用void(0)之前,最好先想一想,这个页面是否需要整体刷新。

收件箱

示例6：动态显示时间

在js中，所有动画的实现都需要用window对象的方法，setTimeout和setInterval，这个两个方法。

#lay{width:100px;height:30px;background:#fba}

示例7：通过键盘的方向键控制层的移动。

解决问题的方法：

1、首先通过键盘事件，onkeydown、onkeyup和onkeypress，其中onkeypress无法获得功能键及小数字键的值。

2、如何获得按键的值，在这里可以通过event对象，event是javascript中关于事件的对象信息。

代码：

#lay{width:100px;height:30px;background:#fba;left:0px;position:relative;top:0px}

注意，在要实现层的移动时，一定要对层进行定位，层默认的布局是static，如未指定位置，则层不会一定。

在这里的代码仅仅实现方向键向右移动时，层会移动，其余方向以及到边界问题大家自行补充。

示例8：选项卡的制作。

代码：

#lay{width:150px;height:30px;} li{list-style:none;width:30px;float:left} .now{background:#fba;} 1 2 3 first second third

示例9：给下列表添加年。

Dom：是操作html或者xml的标准方法。可以在不同的浏览器中都能运行。在dom中把所有元素都当作对象来处理。Dom的结构如下图所示：

代码1：