我的博客网站设计

最新推荐文章于 2024-03-23 21:19:13 发布

qzshiyongjie

最新推荐文章于 2024-03-23 21:19:13 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaWeb

本文链接：https://blog.youkuaiyun.com/qzshiyongjie123/article/details/14054207

javaWeb 专栏收录该内容

6 篇文章

订阅专栏

本文档详细介绍了多个博客页面的设计思路与实现方法，包括主页、个人博客、好友博客等功能模块，涵盖了JSP页面布局、CSS样式设定及JavaScript交互逻辑等关键技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Jsp页面以及css,ja

css

editblog

@charset "utf-8";
/* CSS Document */

body{
	margin:0px;
	padding:0px;
}
div{
	margin-left:20px;
	margin-top:20px;
}
body{
	background-image:url(../images/enitarticalbg.jpg);
	background-repeat:repeat-y;
}
#editblog{
	width:800px;
	margin:100px auto 200px;
	background-color:#CCC;
}
#title input,#type input{
	width:70%;
}
#submit input{
	margin-left:300px;
	height:40px;
	background-color:#C2E6EA;
	font-size:24px;
}

head.css

@charset "utf-8";
/* CSS Document */
body{
	margin:0px;
	padding:0px;
	
}
#head{
	width:100%;
	height:300px;
	background-image:url(../images/indexbg.jpg);
	background-repeat:no-repeat;
}
a{
	color:#666;
	text-decoration:none;
}
.list{
	display:inline;

}
#name{
	border:1px solid #888;
	font-family: "宋体";
	font-size: 32px;
	color: #333;
	
}
#loginandregiest{
	width:700px;
	margin:50px 500px  0px;;
}
#showname{
	width:500px;
	margin:50px 500px  0px;;
}
#blog_a{
	width:600px;
	margin-top:150px;
	margin-left:500px;
}

masterblog

@charset "utf-8";
/* CSS Document */

body{
			background-color:#E2E2E2;
	}
	#center{
		width:800px;
		margin:0px auto 0px;
		min-height:500px;
	}
	#left{

		width:180px;
		margin:20px auto 10px;
		float:left;
	}
	#right{
		background-color:#FEFEFE;
		width:600px;
		margin:20px auto 10px;
		min-height:400px;
		float:right;
	}
	#friend{
		width:170px;
		margin:0px auto 10px;
		border:1px dotted #c3c3c3;
		background-color:#FEFEFE;
	}
	#word{
		width:170px;
		margin:0px auto 10px;
		border:1px dotted #c3c3c3;
	}
	.index{
		background-color:#F5F6F5;
		width:170px;
		display:block;
	}
	.index1{
		background-color:#F5F6F5;
		width:600px;
		display:block;
	}
	.index2{
		background-color:#F5F6F5;
		width:800px;
		display:block;
	}
	.adt{
	display: inline;
	}
	.title{
		font-family: "宋体";
		font-size: 24px;
		color: #919191;
		text-align: center;
	}
	.entity
	{
		border-bottom: 2px dotted #666;
		margin-top: 10px;
	}
	.ainfo{
		font-size: 18px;
		color: #606090;
		margin-left: 20px;
	}
	.aother{
	color:#666;
	margin-left: 300px;
	}
	.content{
		font-size: 16px;
		color: #444;
		margin-left: 20px;
	}
	#search{
	width: 60px;
	}
	#word{
	background-color:#FEFEFE;
	}
	#findfriend{
	background-color:#FEFEFE;
	width:170px;
	margin:0px auto 10px;
	}
	.frienddt{
	background-color: #ccc;
	border-bottom: 2px solid #fff;
	}
	#friendmessage{
	color: red;
	}
	.frienddd{
	color:#096;
	}
	#picture{
		width:800px;
		margin:0px auto 0px;
		min-height:100px;
		background-color:#FEFEFE;
	}
	img{
	width: 200px;
	height: 130px;
	}
	.photo{
	display: inline;
	}
	#worddl,#frienddl{
   margin: 0px;
   }
   .frienda
   {
   		display: block;
   		padding-left: 50px;
   		color: #519f22;
   }
   .frienda:HOVER {
	border-color: #008;
}

regiest

@charset "utf-8";
/* CSS Document */

body,form{
	margin:0px;
	padding:0px;

}
body{
	background-image:url(../images/enitarticalbg.jpg);
}
form{
	background-color:#CCC;
	width:50%;
	margin:50px auto 100px;
}
td{
	width:50%;
}
th{
	text-align:center;
	font-size:24px;
}
.c1{
	font-size:18px;
	text-align:right;
	padding-right:50px;
}
#i1{
	text-align:center;
	font-size:18px;
}
#i2{
	font-size:12px;
	color:#666;
}
.error{
	background-color: red;
}

js

regiest

// JavaScript Document
$(document).ready(function()
{
	$("#username").focusout(function(){
		$.get("http://localhost:8080/UnShop/servlet/Login",$("username".val()),function(response)
				{
					$("#html").html(response);
			
				});
			
		//$("#name").html("用户名已经存在").css("color","red");
		
	});
	$("#repassword").focusout(function()
	{
		if($("#password").val()!=$("#repassword").val())
		{
			$("#repass").html("两次密码输入不一致").css("color","red");
		}
		else
		{
			$("#repass").html("");
		}
	});
})

jsp

editblog

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" href="../css/editartical.css"  rel="stylesheet"/>

	<title>无标题文档</title>
</head>
	<body>
	    <div id="editblog">
	    	<form action="${pageContext.request.contextPath }/servlet/ArticalForm" method="post">
	    		<div id="title">文章标题：<input type="text" name="title" value="${artical.title }"/></div>
	    		<div class="error">${articalerror.title }</div>
	    		<div id="comefrom">文章来源:<input type="text" name="comefrom" value="${artical.comeform }"/></div>
	    		<div class="error">${articalerror.comeform }</div>
	            <div >	
	            	文章类型：    		
		            <c:forEach var="at" items="${type }" >
		    			<input type="radio" name="articalType" value="${at.name }"/>${at.name }
		    		</c:forEach>
		    		<div class="error">${typeerror }</div>
	    		</div>
	    		<div id="info">
	                <dl>
	                	<dt>文章简介</dt>
	                    <dt><textarea cols="80"  name="info" rows="5" >${artical.info }</textarea></dt>
	                </dl>
	                <div class="error">${articalerror.info}</div>
	            </div>
	            <div id="content">
	            	<dl>
	                    <dt><textarea cols="80" id="content" name="content" rows="10">${artical.content }</textarea></dt>
	                </dl>
	                  <div class="error">${articalerror.content}</div>
	            </div>
	            <div id="submit"><input type="hidden" name="id" value="${artical.id }"/><input type="submit"  value="发表博文"/></div>
	        </form>
	    </div>
	</body>
</html>

friendartical

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>好友文章</title>
    <style type="text/css">
    	body{
			background-color:#E2E2E2;
	}
	#center{
		background-color:#FEFEFE;
		width:700px;
		margin:20px auto 10px;
		min-height:100px;
	}

	.index1{
		background-color:#F5F6F5;
		width:700px;
		display:block;
	}
	.title{
		font-family: "宋体";
		font-size: 24px;
		color: #919191;
		text-align: center;
	}
	.entity
	{
		margin-top: 10px;
	}
	.ainfo{
		font-size: 18px;
		color: #606090;
		margin-left: 20px;
	}
	.aother{
	color:#666;
	margin-left: 400px;
	}
	.adt{
	display: inline;
	}
	.content{
		font-size: 16px;
		color: #444;
		margin-left: 20px;
	}
	.rword{
	color: #62f3c4;
	font-family: "宋体";
	font-size: 22;
	
	}
	#word{
	display: none;
	}
	#showword{
	min-height: 100px;
	background-color: #efefef;
	}
	.masternames{
		margin-left: 100px;
		color: gray;
	}
	.wordcontent{
		margin-left: 100px;
		color:#667865;
	}
    </style>
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  
  	$("#giveword").click(function()
  	{
  		$("#word").slideToggle();
  	});
  	$("#upword").click(function(){
  		$.get("${pageContext.request.contextPath }/servlet/WordForm",{content: encodeURI($("#content").val()),id:$("#id").val()},function(response){
  		$("<dd></dd>").html(response).appendTo($("#showresponse"));
  		});
  	});
  	$("#blog").click(function()
  	{
  		$("#everyartical").slideToggle();
  	});
  });
  </script>


  </head>
  <body>
    <jsp:include page="/page/head.jsp"></jsp:include>
     <div id="center">
    	<div  id="artical">
        	<div class="index1" id="blog">博文</div>
        	<div class="entity" id="everyartical">
        		<div class="title">${artical.title }</div>
        		<div class="ainfo">简介：${artical.info }</div>
        		<div class="content"><span>${artical.content }</span></div>
        		<div class="aother">
        			<dt class="adt">阅读量[${artical.count }]	</dt>
        			<c:choose>
        				<c:when test="${empty master }">
        					<dt class="adt"><a href="#"  class="rword">请登录后评论</a></dt>
        				</c:when>
        				<c:otherwise>
        					<dt class="adt"><a href="#" id="giveword" class="rword">评论</a></dt>
        				</c:otherwise>
        			</c:choose>
        			
        		</div>
        	</div>
        </div>
        <div id="showword">
         <div class="index1">内容评论</div>
         <dl id="showresponse">
         	<c:forEach items="${listword }" var="word">
         		<dd><div calss="masternames">${word.master.name } :</div>
         			<div class="wordcontent">${word.content }</div> </dd>
         	</c:forEach>
         </dl> 
        </div>
        <div id="word">
	        <div class="index1">我要评论</div>
	        	<textarea rows="5" cols="80" name="content" id="content"></textarea>
	        	<input type="hidden" id="id" value="${artical.id }"/>
	        	<div  class="aother"><input type="button" value="提交评论" id="upword"/>
	        </div>
	    </div>
    </div>
    <jsp:include page="/page/root.jsp" ></jsp:include>
  </body>
</html>

friendblog

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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>
  <link rel="stylesheet" href="../css/masterblog.css" />
   <style >
   		#information{
   		margin: 0px;
   		}
   		.frienddt{
   		height: 50px;
   		padding-left: 10px;
   		padding-top:18px;
   		color: blue;
   		background-color: ddd;
   		}
   </style>
   <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  
  	$("#blogartical").click(function()
  	{
  		$("#everyartical").slideToggle();
  	});
  	$("#blogphoto").click(function()
  	{
  		$("#everyphoto").slideToggle();
  	});
  });
  </script>
   
  </head>
  
  <body>
 <jsp:include page="/page/head.jsp"></jsp:include>
<div id="center">
	<div id="left">
    	<div id="friend">
    		<div id="blogmaster">
	        	<dl id="information" >
	        		<dt class="index">博主简介</dt>
	        		<dt class="frienddt">博主姓名：${friendmaster.name }</dt>
	        		<dt class="frienddt">博主性别：${friendmaster.sex }</dt>
	        		<dt class="frienddt">博主QICQ：${friendmaster.QICQ }</dt>
	        	</dl>
        	</div>
		</div>
    </div>
    <div id="right">
    	<div  id="artical">
        	<div class="index1" id="blogartical">博文</div>
        	<div id="everyartical">
        	<c:forEach items="${articallist }" var="artical">
        	<div class="entity" >
        		<div class="title">${artical.title }</div>
        		<div class="ainfo">简介：${artical.info }</div>
        		<div class="content"><span>${artical.content }</span></div>
        		<div class="aother">
        			<dt class="adt">阅读量[${artical.count }] </dt>
        			<dt class="adt"><a href="${pageContext.request.contextPath }/servlet/ShowFriendArtical?id=${artical.id }">评论</a> </dt>
        			<dt class="adt"><a href="${pageContext.request.contextPath }/servlet/ShowFriendArtical?id=${artical.id }">查看全文</a></dt>
        		</div>
        	</div>
        	</c:forEach>
        	</div>
        </div>
    </div>
</div>
<div id="picture">
	<div class="index2" id="blogphoto">博主相册</div>
	<div id="everyphoto">
		<c:forEach items="${photolist }" var="photo">
			<dd class="photo"><img src="${pageContext.request.contextPath }/${photo.pathname }" alt="${photo.name } "/></dd>
		</c:forEach>
	</div>
</div>
<jsp:include page="/page/root.jsp" ></jsp:include>
</body>
</html>

head

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link type="text/css" rel="stylesheet" href="../css/head.css" />
<div id="head">
<div>~~~~~~~~~~~~~~~</div>
<c:choose>
	<c:when test="${empty master }">
    <div id="loginandregiest">
    <form action="${pageContext.request.contextPath }/servlet/LoginForm" method="post">
    	<dl>
    		
	    		<dt class="list">用户名<input type="text" name="name"/></dt>
	    		<dt class="list">密码<input type="text" name="password"/></dt>
	        	<dt class="list"><input type="submit" value="登入"/></dt>
	        	<dt class="list"><a href="${pageContext.request.contextPath }/page/regiest.jsp">注册</a></dt>     
        </dl>
      </form>
    </div>
    </c:when>
    <c:otherwise>
    <dl id="showname">
    <dt class="list" id="name">${master.name }</dt>
   	<dt class="list"> <a href="${pageContext.request.contextPath }/servlet/CencalMaster">注销</a></dt>
   	</dl>
   	 <div id="blog_a">
        <dl>
            <dt class="list"><a href="${pageContext.request.contextPath }/servlet/ShowIndex">首页</a></dt>
            <dt class="list"><a href="${pageContext.request.contextPath }/servlet/MasterBlog">我的博客</a></dt>
            <dd class="list"><a href="${pageContext.request.contextPath }/servlet/ListArtical">博文目录</a></dd>
            <dd class="list"><a href="${pageContext.request.contextPath }/servlet/ShowPhoto">我的相册</a></dd>
            <dd class="list"><a href="${pageContext.request.contextPath }/page/photoupload.jsp">上传照片</a></dd>
            <dd class="list"><a href="${pageContext.request.contextPath }/servlet/ShowArtical">写博文</a></dd>
        </dl>
    </div>
    </c:otherwise>
   </c:choose>
   
</div>

index

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <style type="text/css">
  
  body{
			background-color:#E2E2E2;
	}
	#center{
		width:800px;
		margin:0px auto 0px;
		min-height:500px;
	}
	#left{

		width:180px;
		margin:20px auto 10px;
		float:left;
		padding: 0px;
	}
	#right{
		background-color:#FEFEFE;
		width:600px;
		margin:20px auto 10px;
		min-height:100px;
		float:right;
	}
	#friend{
		width:170px;
		background-color:#FEFEFE;
		min-height: 150px;
	}
	.index{
		background-color:#F5F6F5;
		width:170px;
		display:block;
	}
	.index1{
		background-color:#F5F6F5;
		width:600px;
		display:block;
	}
	.adt{
	display: inline;
	}
	.title{
		font-family: "宋体";
		font-size: 24px;
		color: #919191;
		text-align: center;
	}
	.entity
	{
		border-bottom: 2px dotted #666;
		margin-top: 10px;
	}
	.ainfo{
		font-size: 18px;
		color: #606090;
		margin-left: 20px;
	}
	.aother{
	color:#666;
	margin-left: 300px;
	}
	.content{
		font-size: 16px;
		color: #444;
		margin-left: 20px;
	}
   dl{
   margin: 0px;
   }
   	.frienddt{
	background-color: #ccc;
	border-bottom: 2px solid #fff;
	}
   .frienda
   {
   		display: block;
   		padding-left: 50px;
   		color: #519f22;
   }
   #frienddl dt a:HOVER {
	border-color: #008;
}

  
  
  </style>
     <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  
  	$("#blogartical").click(function()
  	{
  		$("#everyartical").slideToggle();
  	});
  	$("#bastmaster").click(function()
  	{
  		$("#frienddl").slideToggle();
  	});
  });
  </script>

  </head>
  
  <body>
  <jsp:include page="/page/head.jsp"></jsp:include>
  <div id="center">
	<div id="left">
    	<div id="friend">
    		<div class="index" id="bastmaster">优秀博主</div>
        	<dl id="frienddl" >
        	
        		<c:forEach items="${friendlist }" var="friend">
        			<dt class="frienddt"><a href="${pageContext.request.contextPath }/servlet/ShowFriendBlog?id=${friend.QICQ }" class="frienda">${friend.name }</a></dt>
        		</c:forEach>
        		
        	</dl>
		</div>
    </div>
    <div id="right">
    	<div  id="artical">
        	<div class="index1" id="blogartical">精彩博文</div>
        	<div id="everyartical">
        	<c:forEach items="${articallist }" var="artical">
        	<div class="entity">
        		<div class="title">${artical.title }</div>
        		<div class="ainfo">简介：${artical.info }</div>
        		<div class="aother">
        			<dt class="adt">阅读量[${artical.count }] </dt>
        			<dt class="adt"><a href="${pageContext.request.contextPath }/servlet/ShowFriendArtical?id=${artical.id }">评论</a> </dt>
        			<dt class="adt"><a href="${pageContext.request.contextPath }/servlet/ShowFriendArtical?id=${artical.id }">查看全文</a></dt>
        		</div>
        	</div>
        	</c:forEach>
        	</div>
        </div>
        <jsp:include page="/page/root.jsp" ></jsp:include>
    </div>
</div>

  </body>
</html>

listblog

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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=utf-8" />
<title>无标题文档</title>
<style>
body{
	background-color:#E2E2E2;
}
#center{
	width:800px;
	margin-left: 500px;
}
td{
	width:120px;
}
</style>
</head>

<body>
<jsp:include page="/page/head.jsp"></jsp:include>
<div id="center">
	<table>
    	<thead>
        	<tr>
            	<td><h3>博文ID</h3></td><td><h3>博文标题</h3></td><td ><h3>博文简介</h3></td><td><h3>编辑</h3></td><h3></td><td><h3>删除</h3></td>
            </tr>
        </thead>
        <tbody>
        	<c:forEach items="${articallist }" var="artical">
        	<tr><td>${artical.id }</td><td>${artical.title }</td><td>${artical.info }</td><td><a href="${pageContext.request.contextPath }/servlet/ReEditBlog?id=${artical.id }">修改</a></td><td><a href="${pageContext.request.contextPath }/servlet/DeleteArtical?id=${artical.id }">删除</a></td></tr>	
        	</c:forEach>
        </tbody>
    </table>
</div>
<jsp:include page="/page/root.jsp" ></jsp:include>
</body>
</html>

masterblog

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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=utf-8" />
<script type="text/javascript" src="../js/jquery.js"></script>
<link rel="stylesheet" href="../css/masterblog.css" />
<title>博客</title>
<script >
	$(document).ready(function()
	{
		$("#search").click(function()
		{
			$.get("${pageContext.request.contextPath }/servlet/SearchFriend",{friendname:$("#friendname").val()},function(response)
			{
				
				$("#friendmessage").html(response);
			});
		});
		$("#savefriend").click(function()
		{
			$.get("${pageContext.request.contextPath }/servlet/AddFriend",{friendname:$("#friendname").val()},function(response)
			{
				$("#friendmessage").html("");
				
				$("<dt></dt>").html(response).appendTo($("#frienddl")).css("color","#F66");
			});
		});
		$("#blogartical").click(function()
	  	{
	  		$("#everyartical").slideToggle();
	  	});
	  	$("#blogphoto").click(function()
	  	{
	  		$("#everyphoto").slideToggle();
	  	});
	  	$("#masterfriend").click(function()
	  	{
	  		$("#frienddl").slideToggle();
	  	});
	});
</script>
</head>

<body>
  <jsp:include page="/page/head.jsp"></jsp:include>
<div id="center">
	<div id="left">
    	<div id="friend">
    	<div id="masterfriend" class="index">我的好友</div>
        	<dl id="frienddl" >
        		<c:forEach items="${friendlist }" var="friend">
        			<dt class="frienddt"><a href="${pageContext.request.contextPath }/servlet/ShowFriendBlog?id=${friend.QICQ }" class="frienda">${friend.name }</a></dt>
        		</c:forEach>
        		
        	</dl>
		</div>
		<div id="findfriend">
		      <dl >
        		<dt class="index">查找好友</dt>
        		<dt>好友名:<input type="text"  id="friendname"/></dt>
        		<dt><input id="search" type="button" value="  查找  "/>     <input type='button' value='  添加  ' id='savefriend'/></dt>
        		<dt><div id="friendmessage"></div></dt>
        		
        	</dl>
			
		</div>
        <div id="word">
        	<dl id="worddl">
        		<dt class="index">留言</dt>
        	</dl>
        </div>
    </div>
    <div id="right">
    	<div  id="artical">
        	<div class="index1" id="blogartical">博文</div>
        	<div id="everyartical">
	        	<c:forEach items="${articallist }" var="artical">
	        	<div class="entity">
	        		<div class="title">${artical.title }</div>
	        		<div class="ainfo">简介：${artical.info }</div>
	        		<div class="content"><span>${artical.content }</span></div>
	        		<div class="aother">
	        			<dt class="adt">阅读量  [${artical.count }] </dt>
	        			<dt class="adt"><a href="#">评论</a> </dt>
	        			<dt class="adt"><a href="${pageContext.request.contextPath }/servlet/ShowFriendArtical?id=${artical.id }">查看全文</a></dt>
	        		</div>
	        	</div>
	        	</c:forEach>
        	</div>
        </div>
    </div>
</div>
<div id="picture">
	<div class="index2" id="blogphoto">我的相册</div>
	<div id="everyphoto">
	<c:forEach items="${photolist }" var="photo">
		<dd class="photo"><img src="${pageContext.request.contextPath }/${photo.pathname }" alt="${photo.name } "/></dd>
	</c:forEach>
	</div>
</div>
<jsp:include page="/page/root.jsp" ></jsp:include>
</body>
</html>

photoupload

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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=utf-8" />
<title>上传照片</title>
<style>
body{
	margin:0px;
	padding:0px;
}
div{
	margin-left:20px;
	margin-top:20px;
}
body{
	background-image:url(../images/enitarticalbg.jpg);
	background-repeat:repeat-y;
}
#center{
	width:500px;
	margin:100px auto 100px;
	min-height:200px;
	background-color:#CCC;
}
#name input,#picture input,#info input{
	width:90%;
}
#submit input{
	margin-left:180px;
	height:40px;
	background-color:#C2E6EA;
	font-size:24px;
}
</style>
</head>

<body>
<div id="center">
    <form action="${pageContext.request.contextPath }/servlet/PhotoUpLoad" enctype="multipart/form-data" method="post">
    	<div id="name"><dl><dt>图片名:</dt><dt><input type="text"  name="name"/></dt></dl></div>
        <div id="picture"><dl><dt>图片:</dt><dt><input type="file" name="picture"/></dt></dl></div>
        <div id="info"><dl><dt>图片描述:</dt><dt><input type="text" name="photoinfo"/></dt></dl></div>
        <div id="submit"><input type="submit" value="提交照片" name="up"/></div>
    </form>
</div>
</body>
</html>

regiest

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!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=utf-8" />
<link type="text/css" rel="stylesheet" href="../css/regiset.css"/>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/regiest.js"></script>
<title>注册</title>
</head>

<body>
<form action="${pageContext.request.contextPath }/servlet/MasterFormAction" method="post">

	<table>
        <thead>
        <th colspan="2">用户注册</th>
        </thead>
        <tbody>
        	<tr>
            	<td class="c1">用户名</td><td id="i2"><dl>
                					<dt><input type="text" name="name" id="username"/></dt>
                                    <dt id="name"></dt>
                                   	<dt>6~18个字符，可使用字母、数字、下划线，需以字母开头</dt>
                                   	<dt class="error">${error.name }</dt>
                                   </dl></td>
            </tr>
             <tr>
            	<td class="c1">性别</td><td><dl>
                					<dt><input type="radio" name="sex" value="Woman">女性</input>
                                     <input type="radio" name="sex" value="Man" checked>男性 </<input /></dt>
                                    <dt></dt>
                				</dl></td>
            </tr>
            <tr>
            	<td class="c1">密码</td><td><dl>
                					<dt><input type="password" name="password" id="password"/><dt>
                					<dt class="error">${error.password }</dt>
                                 <dl></td>
            </tr>
            <tr>
            	<td class="c1">确认密码</td><td><dl>
                						<dt><input type="password" name="repassword" id="repassword"/><dt>
                						<dt class="error">${error.repassword }</dt>
                                        <dt id="repass"></dt>
                                    </dt></td>
            </tr>
            <tr>
            	<td class="c1">邮箱</td><td><dl>
                					<dt><input type="text" name="email" id="email"/></dt>
                                    <dt class="error">${error.email }</dt>
                				</dl></td>
            </tr>
            <tr>
            	<td class="c1">验证码</td> <td><input type="text" name="code"/>  <td><td><img  src="" /><td>
            </tr>
             <tr>
            	<td colspan="2" id="i1"><input type="submit" value="立即注册" /></td>
            </tr>
        </tbody>
    </table>

    
</form>
</body>
</html>

root

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

   <div id="root" style="min-height: 50px;text-align: center;font-size: 12px;	background-color:#E2E2E2; margin-top: 100px">
       版权信息	ytdxsyj © syjblog.com
   		
   </div>

showphoto

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
	<head>
	<style type="text/css">
		img{
		width: 500px;
		height: 300px;
		}
		dt{
		display: inline;
		}
		#picture{
		width: 80%;
		margin: 50px auto 50px;
		}
		body{
		background-color:#E2E2E2;
		}
	</style>
	</head>
	<body>
		  <jsp:include page="/page/head.jsp"></jsp:include>
					<dl id="picture">
						<c:forEach items="${photolist }" var="photo">
						<dt>
							<a class="thumb" name="${photo.name }" href="${pageContext.request.contextPath }/${photo.pathname }" title="${photo.pathname }">
								<img src="${pageContext.request.contextPath }/${photo.pathname }" alt="${photo.name }" />
							</a>
							
						</dt>
						</c:forEach>

					</dl>
	<jsp:include page="/page/root.jsp" ></jsp:include>
	</body>
</html>