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"/> </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.****.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的剪切图片上面我可是吃尽了苦头,明明代码看起来很合理,就是因为图片的问题导致整个页面排版混乱,调了好久才调好(虽然还是有点丑)。
该实验未实现功能:拖动许愿字条,单机指定字条..