一、总的来说这个阶段主要学习了一下这些方面的知识
(1)对已经掌握了的HTML进一步熟悉和细化
(2)以前不大熟悉的CSS有个更进一层的认识的掌握
(3)在VBscript的基础上全面学习了javascript,脚本语言块可以说基本的都应该能做的出来。
(4)前期也对java中的TCP协议和UDP协议系统的学习了一遍,也就是SOCKET编程一块的掌握了一些...
哎..一个月结束了才学了这么点东西 ,太慢了。
二、接下来我想对Serverlet服务器端的编程技术了解一点...
前期的例子总结:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学生信息>>录入</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="top">
<div id="topleft"><img src="images/log.jpg" /></div>
<div id="topright"> <a href="#" >录入信息首页</a><span class="body1"> |</span> <a href="#"> 兰州城市学院</a></div>
</div>
<div id="daohang">
<ul>
<li><a href="#">学生信息注册</a></li>
<li><a href="#">老师信息注册</a></li>
</ul>
</div>
<form id="student" action="" method="get" οnsubmit="check(this);return false" >
<div class="fordiv">
<div class="head">个人信息:</div>
<div class="fenge"></div>
<div class="biaodan">
<div id="xinxi">
<p><span class="spanf">学号:</span>
<input type="text" size="40" name="stu_num" οnkeydοwn="toNext1(this.form);" />
<span id="span1" >*必填</span> </p>
<p><span class="spanf">身份证号:</span>
<input type="text" size="40" name="stu_ID" οnkeydοwn="toNext(this.form)" />
</p>
<p><span class="spanf">姓名:</span>
<input type="text" size="20" name="stu_name" οnkeydοwn="toNext2(this.form)" />
<span id="span2" >*必填</span> </p>
<p><span class="spanf">性别:</span>
<input type="radio" name="stu_sex" id="nan" style="border-color:#FFFFFF;" checked="checked" οnkeydοwn="toNext(this.form)"/>
男
<input type="radio" name="stu_sex" id="nv" style="border-color:#FFFFFF;" οnkeydοwn="toNext(this.form)"/>
女</p>
<p><span class="spanf">出生年月:</span>
<select id="year" size="1"οnkeydοwn="toNext(this.form)" >
</select>
年
<select id="month" size="1"οnkeydοwn="toNext(this.form)" >
</select>
月
<select id="day" size="1"οnkeydοwn="toNext(this.form)" >
</select>
日 </p>
<p><span class="spanf">所在院系:</span>
<select id="engine" size="1" οnblur="ch_dp(this.form)">
</select>
院
<select id="department" size="1"οnkeydοwn="toNext(this.form)" >
</select>
系
<select id="direction" size="1" οnkeydοwn="toNext(this.form)">
</select>
方向 </p>
<p><span class="spanf">所在宿舍:</span>
<select id="lou" size="1" οnkeydοwn="toNext(this.form)" >
</select>
楼
<select id="sushe" size="1" οnkeydοwn="toNext(this.form)">
</select>
号
<select id="xiaosushe" size="1" οnkeydοwn="toNext(this.form)" >
</select>
室 </p>
<p><span class="spanf">毕业院校:</span>
<input type="text" size="40" name="from_school" οnkeydοwn="toNext3(this.form)" />
<span id=span3 >*必填</span> </p>
<p><span class="spanf">手机:</span>
<input type="text" size="12" name="ph_num" οnkeydοwn="toNext(this.form)" />
座机:
<input type="text" size="13" name="tel_num" οnkeydοwn="toNext4(this.form)" />
<span id="span4" >*必填一个</span> </p>
</div>
<div id="zhaopian" ><img src="#" name="image" id=images /><br />
<br />
<br />
<input name="file" type="file" size="30" maxlength="32" style="margin-left:50px;" οnkeydοwn="toNext(this.form)" οnblur="setSrc(this.form)" />
</div>
</div>
</div>
<div class="fordiv">
<div class="head">家庭信息:</div>
<div class="fenge"></div>
<div class="biaodan">
<p><span class="spanf">家长姓名:</span>
<input type="text" size="20" name="fam_name" οnkeydοwn="toNext5(this.form)"/>
称呼
<select name="chenghu" οnkeydοwn="toNext(this.form)">
<option selected="selected">父亲</option>
<option >母亲</option>
</select>
<span id="span5" >*必填</span> </p>
<p><span class="spanf">家庭住址:</span>
<input type="text" size="40" name="fam_sta" οnkeydοwn="toNext6(this.form)" />
<span id="span6" >*必填</span> </p>
<p><span class="spanf">手机:</span>
<input type="text" size="12" name="fmph_num" οnkeydοwn="toNext(this.form)"/>
座机:
<input type="text" size="13" name="fmtel_num" οnkeydοwn="toNext7(this.form)" />
<span id="span7" >*必填一个</span> </p>
<p><span class="spanf">备注:</span>
<textarea name="beizhu" cols="40" rows="7" οnkeydοwn="toNext(this.form)"></textarea>
</p>
</div>
</div>
<div class="fordiv">
<div class="head">确认提交:</div>
<div class="fenge"></div>
<div class="biaodan" align="center" style="padding-bottom:30px;">
<input type="submit" value="确 认 并 提 交" />
<input type="reset" value="重新填写" name="chongtian" />
</div>
</div>
</form>
<div id="foot">
<div id="footright" style="float:left; width:60%; height:30px; padding-top:1px; padding-left:10%;"><p>Copyright@ 1998-2010 Tencent Inc. All Rights Reserved</p>
</div>
<div id="footleft" style="float:left; width:29%; height:30px; padding-top:1px; padding-left:0px;"><p>蔡晓龙 版权所有</p>
</div>
</div>
<script language="javascript" src="stu_info.js">
</script>
</body>
</html>
其中的style.css文件内容
/* CSS Document */
a:link {
color: #0b6ac8;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0b6ac8;
}
a:hover {
text-decoration: none;
color: #0b6ac8;
font-size:13px;
}
a:active {
text-decoration: none;
color: #0b6ac8;
}
a {
font-size: 12px;
}
.body1 {
color: #666666;
font-size: 12px;
}
span{
color: #CCCCCC;
margin-left:5px;
}
body
{ margin-top:0px;
margin-left:0px;
}
#top{
width:100%;
height:85px;
padding-bottom:0px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
/*border:#CCCCCC thin dashed;*/
}
#topleft
{ width:29%;
height:60px;
float:left;
background-repeat:no-repeat;
padding-left:20%;
/*border:#CCCCCC thin dashed;*/
}
#topright{
width:34%;
height:60px;
float:right;
padding-left:15%;
padding-right:0px;
padding-bottom:2px;
/*border:#CCCCCC thin dashed;*/
}
#daohang{
background-image:url(images/header-bg.gif);
background-repeat:repeat-x;
width:60%;
height:35px;
padding-top:0px;
padding-right: 20%;
padding-bottom: 0px;
padding-left: 20%;
float:left;
/*border:#CCCCCC thin dashed;*/
}
#daohang li{
float:left;
list-style-type:none;
}
#daohang li a{
text-decoration:none;
font-weight:600;
font-size:12px;
padding-top:4px;
/*margin-top:6%;
margin-top:7px;
line-height:24px;*/
display:block;
width:110px;
text-align:center;
background-color:#f2fbff;
margin-left:3px;
}
#daohang li a:hover{
background-color:#b9e2fe;
font-size:13px;
color:#0b6ac8;
}
#foot{
width:100%;
height:40px;
border-top: #8297a6 thin solid;
background-color:#f6fbff;
float:left;
}
#foot p{
font-size:12px;
font-weight:600;
color:#666666;
font-family:"Courier New", Courier, monospace;
}
.fordiv{
width:70%;
padding-left:15%;
padding-right:15%;
padding-top:20px;
float:left;
}
.head{
padding-left:20px;
font-size:14px;
color: #666666;
}
.fenge{
width:100%;
height:15px;
background-image:url(images/fenge.jpg);
background-repeat:repeat-x;
}
.biaodan{
padding-left:90px;
padding-right:0px;
padding-top:15px;
font-size:12px;
font-family:"宋体";
}
#xinxi{
float:left;
}
#zhaopian{
float:left;
}
#zhaopian img{
width:180px;
height:200px;
margin-top:20px;
margin-left:80px;
border:#999999 1px solid ;
}
.biaodan .spanf{
display:block;
text-align:right;
width:100px;
height:23px;
float:left;
margin-right:10px;
margin-top:3px;
color:#000000;
letter-spacing:3px;
}
.biaodan input{
border: #7f9cba 1px solid;
color: #333333;
font-weight:600;
font-family:Arial, Helvetica, sans-serif;
}
.biaodan select{
width:70px;
border: #7f9cba 1px solid;
color: #333333;
font-weight:500;
font-family:Arial, Helvetica, sans-serif;
}
.biaodan textarea{
border: #7f9cba 1px solid;
color: #333333;
font-weight:600;
font-family:Arial, Helvetica, sans-serif;
}
还有stu_info.js文件的内容
//添加年
var yuanxi=[["信息工程学院","数学学院","化学学院","文学院","体育学院"],[["计算机科学与技术"],["计算机外包"],["计算机网络"],["计算机教育"]],[["数学学院1"],["数学院2"]],[["环学院1"],["环学院2"]],[["文学院1"],["文学院2"]],[["体育学院1"],["体育学院2"]]];
//alert(yuanxi[0][4]);
//添加学院
for(var i=0;i<yuanxi[0].length;i++)
{
var option1=document.createElement("OPTION");
option1.text=yuanxi[0][i];
option1.value=yuanxi[0][i];
document.getElementById("engine").add(option1);
}
//添加系别
var j=0;
function ch_dp(frm)
{
j=0;
var temp=frm.engine.value;
for(var i=0;i<yuanxi[0].length;i++)
{
if(temp.match(yuanxi[0][i]))
{
j=i;
for(var k=0;k<frm.department.options.length;k++)
{
frm.department.removeChild(frm.department.options[k]);
}
var temp1=yuanxi[j+1].length;
for(var i=0;i<temp1;i++)
{
var option1=document.createElement("OPTION");
option1.text=yuanxi[j+1][i];
option1.value=yuanxi[j+1][i];
frm.department.add(option1);
}
}
}
//清空options项
}
for(var i=1900;i<2010;i++)
{
var option1=document.createElement("OPTION");
option1.text=i;
option1.value=i;
document.getElementById("year").add(option1);
}
//添加月
for(var i=1;i<13;i++)
{
var option1=document.createElement("OPTION");
option1.text=i;
option1.value=i;
document.getElementById("month").add(option1);
}
//添加宿舍楼
for(var i=1;i<20;i++)
{
option1=document.createElement("OPTION");
option1.text=i+"#";
option1.value=i;
document.getElementById("lou").add(option1);
}
//添加宿舍号
for(var i=100;i<111;i++)
{
option1=document.createElement("OPTION");
option1.text="# "+i;
option1.value=i;
document.getElementById("sushe").add(option1);
}
//添加卧室号
for(var i=1;i<4;i++)
{
option1=document.createElement("OPTION");
option1.text=i +"#";
option1.value=i;
document.getElementById("xiaosushe").add(option1);
}
function setSrc(frm)
{
//alert(frm.file.value);
frm.image.src=frm.file.value;
}
function toNext(frm)
{
if(window.event.keyCode==13)
{
window.event.keyCode=9;
}
}
function toNext1(frm)
{
if (window.event.keyCode==13&&frm.elements[0].value==""){
//span1.innerText="学号不能为空";
span1.style.color="FF0000";
frm.elements[0].focus();
window.event.returnValue=false;
}
else if(window.event.keyCode==13 && frm.elements[0].value!=""){
window.event.keyCode=9;
span1.style.color="CCCCCC";
}
}
function toNext2(frm)
{
if (window.event.keyCode==13&&frm.stu_name.value==""){
//span1.innerText="学号不能为空";
span2.style.color="FF0000";
frm.elements[2].focus();
window.event.returnValue=false;
}
else if(window.event.keyCode==13 && frm.elements[2].value!=""){
window.event.keyCode=9;
span2.style.color="CCCCCC";
}
}
function toNext3(frm)
{
if (window.event.keyCode==13&&frm.from_school.value==""){
//span1.innerText="学号不能为空";
span3.style.color="FF0000";
frm.from_school.focus();
window.event.returnValue=false;
}
else if(window.event.keyCode==13 && frm.from_school.value!=""){
window.event.keyCode=9;
span3.style.color="CCCCCC";
}
}
function toNext4(frm)
{
if (window.event.keyCode==13 &&(frm.ph_num.value=="" && frm.tel_num.value=="")){
span4.style.color="FF0000";
frm.ph_num.focus();
window.event.returnValue=false;
}
else if(window.event.keyCode==13 && (frm.ph_num.value!=""||frm.tel_num.value!="")){
window.event.keyCode=9;
span4.style.color="CCCCCC";
}
}
function toNext5(frm)
{
if (window.event.keyCode==13&&frm.fam_name.value==""){
//span1.innerText="学号不能为空";
span5.style.color="FF0000";
frm.fam_name.focus();
window.event.returnValue=false;
}
else if(window.event.keyCode==13 && frm.fam_name.value!=""){
window.event.keyCode=9;
span5.style.color="CCCCCC";
}
}
function toNext6(frm)
{
if (window.event.keyCode==13&&frm.fam_sta.value==""){
//span1.innerText="学号不能为空";
span6.style.color="FF0000";
frm.fam_sta.focus();
window.event.returnValue=false;
}
else if(window.event.keyCode==13 && frm.fam_sta.value!=""){
window.event.keyCode=9;
span6.style.color="CCCCCC";
}
}
function toNext7(frm)
{
if (window.event.keyCode==13&&(frm.fmph_num.value==""&&frm.fmtel_num.value=="")){
//span1.innerText="学号不能为空";
span7.style.color="FF0000";
frm.fmph_num.focus();
window.event.returnValue=false;
}
else if(window.event.keyCode==13 && (frm.fmph_num.value!=""||frm.fmtel_num.value!="")){
window.event.keyCode=9;
span7.style.color="CCCCCC";
}
}
function check(frm)
{
if(frm.stu_num.value=="")
{
span1.style.color="FF0000"
if(frm.stu_name.value=="")
{
span2.style.color="FF0000";
if(frm.from_school.value=="")
{
span3.style.color="FF0000";
if(frm.tel_num.value==""&&frm.ph_num.value=="")
{
span4.style.color="FF0000"
if(frm.fam_name.value=="")
{
span5.style.color="FF0000";
if(frm.fam_sta.value=="")
{
span6.style.color="FF0000";
if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
{
span7.style.color="FF0000"
}
}
}
}
}
}
}
else if(frm.stu_name.value=="")
{
span2.style.color="FF0000";
if(frm.from_school.value=="")
{
span3.style.color="FF0000";
if(frm.tel_num.value==""&&frm.ph_num.value=="")
{
span4.style.color="FF0000"
if(frm.fam_name.value=="")
{
span5.style.color="FF0000";
if(frm.fam_sta.value=="")
{
span6.style.color="FF0000";
if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
{
span7.style.color="FF0000"
}
}
}
}
}
}
else if(frm.from_school.value=="")
{
span3.style.color="FF0000";
if(frm.tel_num.value==""&&frm.ph_num.value=="")
{
span4.style.color="FF0000"
if(frm.fam_name.value=="")
{
span5.style.color="FF0000";
if(frm.fam_sta.value=="")
{
span6.style.color="FF0000";
if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
{
span7.style.color="FF0000"
}
}
}
}
}
else if(frm.tel_num.value==""&&frm.ph_num.value=="")
{
span4.style.color="FF0000"
if(frm.fam_name.value=="")
{
span5.style.color="FF0000";
if(frm.fam_sta.value=="")
{
span6.style.color="FF0000";
if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
{
span7.style.color="FF0000"
}
}
}
}
else if(frm.fam_name.value=="")
{
span5.style.color="FF0000";
if(frm.fam_sta.value=="")
{
span6.style.color="FF0000";
if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
{
span7.style.color="FF0000"
}
}
}
else if(frm.fam_sta.value=="")
{
span6.style.color="FF0000";
if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
{
span7.style.color="FF0000"
}
}
else if(frm.fmtel_num.value==""&&frm.fmph_num.value=="")
{
span7.style.color="FF0000"
}
else
{
frm.submit();
}
}
整体实现了这样一个表单验证的页面,里面的select子元素都是通过js动态添加的整个的布局也采用纯粹的css布局没用用到一点表格。当然里面表单的样式也是css改写过的.算是我的一份作业吧!