1. 程式人生 > >JSP綜合例項-應用DIV+CSS佈局許願牆主介面

JSP綜合例項-應用DIV+CSS佈局許願牆主介面

樣圖如下:

HTML程式碼如下: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>

<body><header>
	<div>
	<div> 
		 <h1 align="center"  style="color: #CD44D0  ;font-family:'Times New Roman'">讓 我 們 的 願 望 久 久 掛 在 牆 上</h1> 
	    </div>
	 
		<div>
		<img src="11.png" width="240" height="140"/>
	</div>
	</div>  
	</header>
	<div>
		<nav>
		  <div>
			  <form id="form1" name="form1" method="post" action="">
		    <ul>
			<li style="color: #453D40">請輸入字條編號:</li>
			<li><input type="text" name="keyID" id="keyID" class="navigation_input"/>&nbsp;&nbsp;</li>
			<li><input type="image" width="40" height="40" name="imageField" src="14.png" class="noborder"/></li>
			<li><img src="15.png" width="40" height="40"/></li>
				<li>&nbsp;&nbsp;</li>
			<li style="color: #CD44D0 ">&nbsp;<a href="#">貼字條</a></li>
				<li>&nbsp;&nbsp;</li>
			<li><img src="16.png" width="60" height="40"/></li>
			<li style="color: #CD44D0 ">&nbsp;<a href="#">字條列表</a></li>
		</ul>
	
	</form>
			</div>
        </nav>
	</div>	
	<div id="scrip1" class="style3" style="left:200px;z-index:1">
		
	    <p class='Num'>
		    字條編號:1&nbsp;&nbsp;人氣:
			<span id="hitsValuel">30</span>
		    <img src="19.png" alt="關閉">
		</p>
		<br/>
		<p class="Detail">
		<img src="21.png">
			<span class="wishMan">琪琪</span>
			<br/>
			願你健康快樂地成長!
		</p>
		<p class="wellWisher">爸爸、媽媽</p>
		<p class="comment"><a href="#">[支援]</a></p>
		<p class="Date">2018-10-22 20:19:13</p>
	</div>
	<div id="main">
	<script type="text/javascript">
		window.onload=function(){
			var scrip=outScrip(1,21,"琪琪","爸爸、媽媽","願你健康,快樂的成長!",
							  "2018-10-22 20:19:13",30)
			+outScrip(1,21,"琪","爸爸、媽媽","願你健康,快樂的成長!",
							  "2018-10-22 20:19:13",30);
			document.getElementById("main").innerHTML=scrip;
		}
		</script>
	</div>
	
	<div id="copyright">  
	<footer>
		<ul>
		    <li style="color: #A78F8F">CopyRight &copy; 2018 http://blog.csdn.net/iostream992 斌哥版權&nbsp;如有雷同&nbsp;純屬虛構</li>
			<li style="color: #A78F8F">本站請用IE9.0或火狐瀏覽1280*1024為最佳效果</li>
		</ul>
		</footer>
	</div>
	
</body>
</html>

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="<div id='scrip'"+"'class='Style"+color+"'style='left:"+leftDistance+"px;top:"+topDistance+"px;z-index:"+id+"'onmousrdown='Move(this,event)'ondblclick=\"Show(" +id+",'shadeDiv')\">";
	
	scrip+="<p class='Num'>字條編號:"+id+"&nbsp;&nbsp;人氣:<span id='hitValue"+id+"'>"+hits+"</span><img src='19.png'alt='關閉' onClick='myClose("+id+")'></p>";
	
	scrip+="<br/>";
	scrip+="<p class='Detail'>";
	scrip+="<img src="+face+".png'>";
	scrip+="<span class='wishMan'>"+wishMan+"</span>";
	scrip+="<br/>";
	scrip+=content+"</p>";
	scrip+="<p class='wellWisher'>"+wellWisher+"</span>";
	scrip+="<p class='comment'><a href='#'>[支援]</a></p>";
	scrip+="<p class='Dae'>"+date+"</p>";
	scrip+="</div>";
	return scrip;
}

網頁截圖:

實驗總結:

這個實驗第一眼看來覺得應該很好上手,結果大大出乎我的意料,一個網頁花了半天才馬馬虎虎寫完,這個例項綜合了HTML,CSS,JS還有對PS的應用能力,尤其是在PS的剪下圖片上面我可是吃盡了苦頭,明明程式碼看起來很合理,就是因為圖片的問題導致整個頁面排版混亂,調了好久才調好(雖然還是有點醜)。

該實驗未實現功能:拖動許願字條,單機指定字條..