第一次撰写个人网站做的一点技术总结。由于现在我们还是学了jsp+servlet，所以技术有限。
第一，要有模块化思想，一个模块一个模块的写。先把网站的整体布局设计出来并实现它，然后再加功能，加功能时，把每个功能都另写为一个jsp文件，不要全都写在同一个jsp文件上。主模板的功能是布局网站的整个外观表现，然后就是加入各个功能模板的jsp文件，最好使用<jsp:include page = "xxx.jsp"></jsp:include>格式添加。
第二，使用css样式表时，定义好jsp中元素的div的id号(<div="xx">该元素</div>)定义元素时，不可随意嵌套。按照一层一层的思路，先定义最上面的容器，然后再一层层的往下剥。当定义了下面的元素的属性时，没反应。则应该检查上面的元素是不是做了改属性的限制。
第三，写网站的一点点小技巧。1.在jsp网页上动态显示时间。当然需要先加上<script type="text/javascript">
function getTime()
{
var d=new Date(); //创建now对象
var year=d.getFullYear(); //获取年份
var month=d.getMonth(); //获取月份
var date=d.getDate(); //获取日期
var week=d.getDay(); //获取星期
var hour=d.getHours(); //获取小时
var minu=d.getMinutes(); //获取分钟
var sec=d.getSeconds(); //获取秒钟
if(sec<10)
{
sec = "0"+sec;
}
if(minu<10)
{
minu = "0"+minu;
}
switch(week)
{
case 1:{week="一"}break;
case 2:{week="二"}break;
case 3:{week="三"}break;
case 4:{week="四"}break;
case 5:{week="五"}break;
case 6:{week="六"}break;
case 7:{week="日"}break;
}
var time=hour+":"+minu+":"+sec+" "+"星期"+week+" "+year+"年"+month+"月"+date+"日 "; //组合系统时间
document.getElementById("clock").innerHTML = time;
window.setTimeout("getTime()",1000);
}
window.onload = getTime;<div id="clock">
<td id="clock" />
</div>
2.文本框中显示文字，而且文字不可更改。
<textarea rows="10" cols="20" readonly="readonly"
style=" border-color:#ffffff;margin-left: 1px;">
设置readonly的属性设置文本框是否为只可读。
3.加入百度搜索服务。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>baidu</title>
</head>
<body>
<form name="f" action=" http://www.baidu.com/s" target="_blank">
<input type="text" name="wd" id="wd"size="14">
<input type="submit" value="百度一下" id="baidu">
</form>
</body>
</html>
main.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<link rel="stylesheet" language = "text/css" href = main.css>
<html>
<head>
<title>main.jsp</title>
</head>
<body>
<script type="text/javascript">
function CheckData(){
<span style="white-space:pre"> </span>if
(form1.name.value==""&&form1.psw.value=="")
<span style="white-space:pre"> </span>{
<span style="white-space:pre">
</span>window.alert("请输入您的姓名和密码！");
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>else
<span style="white-space:pre"> </span>if
(form1.name.value=="")
<span style="white-space:pre"> </span>{
<span style="white-space:pre">
</span>window.alert("请输入您的姓名！");
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>else if
(form1.psw.value==""){
<span style="white-space:pre">
</span>window.alert("请输入您的密码！");
<span style="white-space:pre"> </span>}else
<span style="white-space:pre"> </span>{
<span style="white-space:pre">
</span>form1.submit();
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>function getTime()
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>var d=new Date
(); //创建now对象
var year=d.getFullYear(); //获取年份
var month=d.getMonth(); //获取月份
var date=d.getDate(); //获取日期
var week=d.getDay(); //获取星期
var hour=d.getHours(); //获取小时
var minu=d.getMinutes(); //获取分钟
var sec=d.getSeconds(); //获取秒钟
if(sec<10)
{
<span style="white-space:pre"> </span>sec = "0"+sec;
}
if(minu<10)
{
<span style="white-space:pre"> </span>minu = "0"+minu;
}
switch(week)
{
<span style="white-space:pre"> </span>case 1:{week="一"}
break;
<span style="white-space:pre"> </span>case 2:{week="二"}
break;
<span style="white-space:pre"> </span>case 3:{week="三"}
break;
<span style="white-space:pre"> </span>case 4:{week="四"}
break;
<span style="white-space:pre"> </span>case 5:{week="五"}
break;
<span style="white-space:pre"> </span>case 6:{week="六"}
break;
<span style="white-space:pre"> </span>case 7:{week="日"}
break;
}
var time=hour+":"+minu+":"+sec+" "+"星期"+week+" "+year
+"年"+month+"月"+date+"日 "; //组合系统时间
<span style="white-space:pre">
</span>document.getElementById("clock").innerHTML = time;
<span style="white-space:pre">
</span>window.setTimeout("getTime()",1000);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>window.onload =
getTime;
</script>
<div id = "contain">
<span style="white-space:pre"> </span><!--header-->
<span style="white-space:pre"> </span><div id = "header">
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><div
id="logininfo">
<span style="white-space:pre"> </span><
%String message = (String)request.getAttribute("message");
<span style="white-space:pre"> </span>if
(message==null)
<span style="white-space:pre"> </span>
{message = "请您先登陆！";
<span style="white-space:pre"> </span>%>
<span style="white-space:pre"> </span><
%=message %>
<span style="white-space:pre"> </span><%}
else{%>
<span style="white-space:pre"> </span><
%=message %>
<span style="white-space:pre"> </span><%} %>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span><div id="nav">
<span style="white-space:pre"> </span><a
href="main.jsp">首页</a>
<span style="white-space:pre"> </span><a
href="news.jsp">新闻</a>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><div
id="clock">
<span style="white-space:pre"> </span><td
id="clock" />
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span><!--center1-->
<span style="white-space:pre"> </span><div id = "center">
<span style="white-space:pre"> </span><div id
= "right">
<span style="white-space:pre">
</span><div id = "right1">
<span style="white-space:pre">
</span><center>登陆</center>
<span style="white-space:pre">
</span></div>
<span style="white-space:pre">
</span><div id = "right2">
<span style="white-space:pre">
</span><div id="login">
<span style="white-space:pre">
</span><form action="CheckInfoServlet" method="post" name=
form1>
<span style="white-space:pre">
</span><tr><span style="white-space:pre"> </span>
<span style="white-space:pre">
</span>姓名:<input type = "text" name = "name"
size="17"/>
<span style="white-space:pre">
</span>
<span style="white-space:pre">
</span></tr><br/>
<span style="white-space:pre">
</span><br/>
<span style="white-space:pre">
</span><tr>
<span style="white-space:pre">
</span>密码:<input type = "password" name = "psw"
size="18"/>
<span style="white-space:pre">
</span></tr><br/><br/>
<span style="white-space:pre">
</span><div id="button"><tr>
<span style="white-space:pre">
</span><input type = "button" value = "确定"
οnclick="CheckData()"/>
<span style="white-space:pre">
</span><input type = "reset" value = "重置"/></div>
<span style="white-space:pre">
</span></tr>
<span style="white-space:pre">
</span></form>
<span style="white-space:pre">
</span></div>
<span style="white-space:pre">
</span></div>
<span style="white-space:pre">
</span><div id = "right3">
<span style="white-space:pre">
</span><center>搜索链接</center>
<span style="white-space:pre">
</span></div>
<span style="white-space:pre">
</span><div id = "right4">
<span style="white-space:pre">
</span><div id = "baidu"><jsp:include
page="baidu.jsp"></jsp:include></div>
<span style="white-space:pre">
</span></div>
<span style="white-space:pre">
</span><div id = "right5">
<span style="white-space:pre">
</span><center>科技链接</center>
<span style="white-space:pre">
</span></div>
<span style="white-space:pre">
</span><div id = "right6">
<span style="white-space:pre">
</span>
<span style="white-space:pre">
</span></div>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span><div id
= "left">
<span style="white-space:pre">
</span><div id="left1">
<span style="white-space:pre">
</span></div>
<span style="white-space:pre">
</span><div id="left2">
<span style="white-space:pre">
</span><div id="left21">
<span style="white-space:pre">
</span><td><center><span style="font-weight: bolder;">公司简介
</span></center></td>
<span style="white-space:pre">
</span><div id="textarea"><td><textarea rows="10" cols="20"
readonly="readonly"
<span style="white-space:pre">
</span>style=" border-color:#ffffff;margin-left: 1px;"> 苹果公司是美
国的一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和罗·韦恩(Ron
Wayne)等三人于1976年4月1日创立，并命名为美国苹果电脑公司（Apple
Computer Inc. ）， 2007年1月9日更名为苹果公司，总部位于加利福尼亚州的
库比蒂诺。
<span style="white-space:pre">
</span></textarea></td></div>
<span style="white-space:pre">
</span></div>
<span style="white-space:pre">
</span><div id="left22"></div>
<span style="white-space:pre">
</span></div>
<span style="white-space:pre">
</span><div id="left3"></div>
<span style="white-space:pre">
</span><div id="left4"></div>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><!--end-->
<span style="white-space:pre"> </span><div id = "end">
<span style="white-space:pre"> </span><center><span
style="color: yellow;">Copyright © 2015Crickets 湘ICP备10011451号
</span></center>
<span style="white-space:pre"> </span><hr>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span></div>
</body>
</html>@CHARSET "UTF-8";
*{
<span style="white-space:pre"> </span>margin: 0px;
<span style="white-space:pre"> </span>padding: 0px;
}
body{
<span style="white-space:pre"> </span>/* 设置全局变量*/
<span style="white-space:pre"> </span>background: url
("imager/background.jpg");
<span style="white-space:pre"> </span>font-family: "宋体";
}
#contain{
<span style="white-space:pre"> </span>width:725px;
<span style="white-space:pre"> </span>margin: 0px auto;//将整个页面居
中显示
}
#header{
<span style="white-space:pre"> </span>margin-top:0px;
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height: 249px;
<span style="white-space:pre"> </span>background: url
("imager/header.jpg");
}
#center{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:600px;
<span style="white-space:pre"> </span>margin-top: 30px;
}
#left{
<span style="white-space:pre"> </span>width: 74%;
<span style="white-space:pre"> </span>height: 100%;
<span style="white-space:pre"> </span>float: left;
}
#left1{
<span style="white-space:pre"> </span>height: 5%;
<span style="white-space:pre"> </span>background-color: #131e7a;
}
#left2{
<span style="white-space:pre"> </span>height: 30%;
<span style="white-space:pre"> </span>margin-top: 4px;
}
#left21{
<span style="white-space:pre"> </span>width:34%;
<span style="white-space:pre"> </span>height: 100%;
<span style="white-space:pre"> </span>background-color: #4396a4;
<span style="white-space:pre"> </span>float:left;
}
#textarea{
<span style="white-space:pre"> </span>margin-top: 10px;
}
#left22{
<span style="white-space:pre"> </span>width:65%;
<span style="white-space:pre"> </span>height: 100%;
<span style="white-space:pre"> </span>background: url
("imager/computer.jpg");
<span style="white-space:pre"> </span>float: right;
}
#left3{
<span style="white-space:pre"> </span>height: 32%;
<span style="white-space:pre"> </span>margin-top: 10px;
<span style="white-space:pre"> </span>background-color: #eaeaea;
}
#left4{
<span style="white-space:pre"> </span>height: 29%;
<span style="white-space:pre"> </span>margin-top: 4px;
<span style="white-space:pre"> </span>background-color: #eaeaea;
}
#right{
<span style="white-space:pre"> </span>width:25%;
<span style="white-space:pre"> </span>font-weight: bolder;
<span style="white-space:pre"> </span>float: right;
<span style="white-space:pre"> </span>height: 100%;
}
#right1{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height: 5%;
<span style="white-space:pre"> </span>background-color: #131e7a;
}
#denglu{
<span style="white-space:pre"> </span>margin-left: 50px;s
}
#right2{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height: 30%;
<span style="white-space:pre"> </span>background-color: #4396a4;
<span style="white-space:pre"> </span>float: right;
<span style="white-space:pre"> </span>margin-top: 4px;
}
#right3{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height: 5%;
<span style="white-space:pre"> </span>background-color: #131e7a;
<span style="white-space:pre"> </span>float: right;
<span style="white-space:pre"> </span>margin-top: 10px;
}
#right4{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height: 20%;
<span style="white-space:pre"> </span>background-color: #4396a4;
<span style="white-space:pre"> </span>float: right;
<span style="white-space:pre"> </span>margin-top: 4px;
}
#right4 a{
<span style="white-space:pre"> </span>margin-left: 1px;
}
#baidu{
<span style="white-space:pre"> </span>margin-top: 6px;
}
#right5{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height: 5%;
<span style="white-space:pre"> </span>background-color: #131e7a;
<span style="white-space:pre"> </span>float: right;
<span style="white-space:pre"> </span>margin-top: 10px;
}
#right6{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height: 29%;
<span style="white-space:pre"> </span>background-color: #4396a4;
<span style="white-space:pre"> </span>float: right;
<span style="white-space:pre"> </span>margin-top: 4px;
}
#end{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height: 20px;
<span style="white-space:pre"> </span>background-color: #000000;
}
#nav{
<span style="white-space:pre"> </span>margin-top:3px;
<span style="white-space:pre"> </span>font-weight: bolder;
}
#nav a{
<span style="white-space:pre"> </span>float: left;
<span style="white-space:pre"> </span>width: 70px;
<span style="white-space:pre"> </span>margin-top: 235px;
<span style="white-space:pre"> </span>margin-left: 20px;
}
#login{
<span style="white-space:pre"> </span>margin-top:40px;
}
#button{
<span style="white-space:pre"> </span>margin-left: 100px;
}
#clock{
<span style="white-space:pre"> </span>float: right;
<span style="white-space:pre"> </span>font-weight: bold;
<span style="white-space:pre"> </span>margin-top: 235px;
}
#logininfo{
<span style="white-space:pre"> </span>color: yellow;
<span style="white-space:pre"> </span>float:inherit;
<span style="white-space:pre"> </span>margin-left: 10px;
}当然还有servlet和baidu.jsp但由于这个上面已表述，这里不再另做强调。第一次总结至此。
2062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
