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

最新推荐文章于 2024-04-24 13:45:22 发布

欧麦噶没有昵称

最新推荐文章于 2024-04-24 13:45:22 发布

阅读量1.7k

点赞数 2

文章标签： HTML CSS JS

本文链接：https://blog.csdn.net/iostream992/article/details/83279807

版权

样图如下：

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的剪切图片上面我可是吃尽了苦头，明明代码看起来很合理，就是因为图片的问题导致整个页面排版混乱，调了好久才调好（虽然还是有点丑）。

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

欧麦噶没有昵称

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
JSP综合实例-应用DIV+CSS布局许愿墙主界面

样图如下：HTML代码如下： &lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;index&lt;/title&gt;&lt;link href="index.css" rel="stylesheet"
复制链接

扫一扫