JSP综合实例-应用DIV+CSS布局许愿墙主界面

样图如下：

HTML代码如下： 

	

	
 
		 
让 我 们 的 愿 望 久 久 挂 在 墙 上
 
	    
	 
		

		
	
	
  
	
	

		

		  

			  

		    

			
请输入字条编号：
			
  
			

			

				
  
			
 贴字条
				
  
			

			
 字条列表
		
	
	
			
        
	
	
	

		
	    

		    字条编号：1  人气：
			30
		    
		
		

		

		
			琪琪
			

			愿你健康快乐地成长！
		
		
爸爸、妈妈
		
[支持]
		
2018-10-22 20:19:13
	
	

	
	
	
	
  
	

		

		    
CopyRight © 2018 http://blog.csdn.net/iostream992 斌哥版权 如有雷同 纯属虚构
			
本站请用IE9.0或火狐浏览1280*1024为最佳效果
		
		
	
	

CSS代码如下：

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



body{
	margin: 0px;
	front-size:12px;
}
a:hover{
	color: #FF4400;
}
a{
	color: #3c404d;
	text-decoration:none;
}
.noborder{
	border: 0px;
	
}
header{
	padding-top:15px;  
	background:url(12.png) repeat-x;
	height:70px;
}
nav{
	background:url(13.png) repeat-x;
	height: 80px;                /*设置高度*/
	line-height:80px;            /*设置行高*/
	padding-top: 4px;            /*设置顶内边距*/
	padding-left: 27%;           /*设置左内边距*/
}

nav ul{
	/*list-style-type: none*/
    /*margin:0px;*/
	list-style: none;   /*去除无序列表的小点*/
}
nav li{
	float: left;
	padding: 0px 2px 2px 0px;
	line-height: 22px;
}
nav a{
	text-decoration: underline;
	fron-weight:bold;
	color:#f54292;
}
nav a:hover{
	text-decoration: underline;
	fron-weight:bold;
	color:#ff6600;
}
.navigation_input{
	color:#333333;
	border:1px solid #7b98b1;
	height:19px;
}
#main{
	background: url(17.jpg);
	height:1000px;
}
footer{
	background: #E29092;
	text-align:center;
	padding-top:1px;
	padding-button:1px;
}
footer ul{
	list-style: none;/*去除无序列表的小点*/
	line-height:20px;
}
.style3{
	background:url(20.png); /*设置背景颜色且不重复*/
	position:absolute;
	cursor:move;
	width:494px;
	height:356px;
	filter:alpha(opacity=90);
}
.style3.wishMan{
	color:aqua;
}
.style3.wellWisher{
	color:aqua;
}
.style3.wishMan,.wellWisher{
	color:aqua;
}

.Num{
	margin:6px 0 0 30px;
}
.Num img{
	float:right;
	cursor:pointer;
	margin:2px 10px 0 0;
}
.Detail{
	margin:5px 10px 0 20px;
	height:113px;
	overflow:hidden;
	word-rap:break-word;
}
.wellWisher{
	margin:0 10px 0 0;
	text-align: right;
}
.commer{
	margin:5px 0px 0px 10px;
	font-size:9pt;
	float:left;
}
.Date{
	margin:5px 10px 0 0;
	text-align:right;
	font-size:9pt;
}

JS代码如下：

// JavaScript Document
function outScrip(id,face,color,wishMan,wellWisher,contentdate,hits){
	var lefDistance=parseInt(Math.random()*(920-5+1)+5); //左边的距离
	var topDistance=parseInt(Math.random()*(376-184+1)+184); //顶边的距离
	var scrip="
";
	
	scrip+="
字条编号："+id+"  人气："+hits+"
";
	
	scrip+="
";
	scrip+="
";
	scrip+="";
	scrip+=""+wishMan+"";
	scrip+="
";
	scrip+=content+"
";
	scrip+="
"+wellWisher+"";
	scrip+="
[支持]
";
	scrip+="
"+date+"
";
	scrip+="
";
	return scrip;
}

网页截图：

实验总结：

这个实验第一眼看来觉得应该很好上手，结果大大出乎我的意料，一个网页花了半天才马马虎虎写完，这个实例综合了HTML，CSS，JS还有对PS的应用能力，尤其是在PS的剪切图片上面我可是吃尽了苦头，明明代码看起来很合理，就是因为图片的问题导致整个页面排版混乱，调了好久才调好（虽然还是有点丑）。

该实验未实现功能：拖动许愿字条，单机指定字条..