JSP綜合例項-應用DIV+CSS佈局許願牆主介面
阿新 • • 發佈：2018-12-18
樣圖如下：
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"/> </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> </li> <li style="color: #CD44D0 "> <a href="#">貼字條</a></li> <li> </li> <li><img src="16.png" width="60" height="40"/></li> <li style="color: #CD44D0 "> <a href="#">字條列表</a></li> </ul> </form> </div> </nav> </div> <div id="scrip1" class="style3" style="left:200px;z-index:1"> <p class='Num'> 字條編號：1 人氣： <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 © 2018 http://blog.csdn.net/iostream992 斌哥版權 如有雷同 純屬虛構</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+" 人氣：<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的剪下圖片上面我可是吃盡了苦頭，明明程式碼看起來很合理，就是因為圖片的問題導致整個頁面排版混亂，調了好久才調好（雖然還是有點醜）。
該實驗未實現功能：拖動許願字條，單機指定字條..