满屋花
效果图如下：
（需要素材的话可以dd我）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>满屋花</title>
<style type="text/css">
/*全局变量*/
*{
margin:0px;
padding:0px;
}
body{
margin:0 auto;
width:700px;
background-color:#ffd8d9;
}
ul{
list-style:none;
}
a{
display:block;
text-decoration:none;
color:#000;
}
h4{
background-color: #FFFFFF;
padding:3px 0px 1px 5px;
margin:0px 18px;
font-size:12px;
}
.clear{
clear:both;
}
/*顶部导航栏*/
.dbdhl li{
display:inline-block;
font-size:15px;
width:75px;
padding-right:20px;
}
.dbdhl a{
background-image: url(img/满屋花项目素材/button1.jpg);
width:100px;
height:30px;
text-align:center;
padding-top:7px;
font-size:12px;
}
.dbdhl a:hover{
color:#FFF;
background-image: url(img/满屋花项目素材/button1_bg.jpg);
text-decoration:underline;
}
/*左边导航栏*/
.left{
background-color:#fff;
width:180px;
float:left;
margin-top:0px;
}
.zbdhl ul{
margin:0px;
padding:5px 0px 0px 25px;
}
/*登录*/
.dl{
padding:40px 0px 10px 0px;
background:url(img/满屋花项目素材/login.jpg) no-repeat;
}
.dl a{
font-size:10px;
display:inline-block;
}
.dlym{ /*登录用户名和密码*/
margin:1px;
text-align:left;
padding:20px 0px 0px 25px;
font-size:13px;
}
.dlan{ /*登录按钮一排*/
text-align:left;
font-size:13px;
padding:5px 0px 0px 25px;
}
.dl form input.text{
border:1px solid black;
border-left:none;
border-top:none;
border-right:none;
padding:0px;
width:90px;
}
.dl form input.an{
border:1px solid black;
height:18px;
padding:0px;
background-color:#ffaa00;
}
.dl a:hover{
color:#666;
text-decoration:underline;
}
/*鲜花分类*/
.xhfl{
background:url(img/满屋花项目素材/category.jpg) no-repeat;
padding-top:50px;
font-size:13px;
}
.xhfl ul{
padding:5px 22px 15px 22px;
}
.xhfl ul li{
padding:1px 0px 1px 15px;
border-bottom:1px dashed black;
background:url(img/满屋花项目素材/icon1.gif) no-repeat 5px 10px;
}
.xhfl a:hover{
color:#666;
text-decoration:underline;
}
.kg{
margin-top:16px;
margin-bottom:-3px;
}
/*右边导航栏*/
.right{
float:left;
width:518px;
margin-left:1px;
font-size:12px;
}
/*本站快讯*/
.bzkx{
background:url(img/满屋花项目素材/latest.jpg) no-repeat;
padding-top:33px;
margin:1px 0px 1px 0px;
}
.bzkx_tp ul li{
display:inline-block;
}
.bzkx_tp img{
border:none;
padding-left:0px;
width:170px;
}
/*鲜花推荐*/
.xhtj{
background:url(img/满屋花项目素材/recommend.jpg) no-repeat;
padding-top:33px;
margin:5px 0px 3px 0px;
background-color:#FFF;
}
.xhtj ul,.xpss ul{
margin:0px;
padding:6px 5px 5px 8px;
}
.xhtj ul li,.xpss ul li{
text-align:center;
display:inline-block;
width:115px;
}
.xhtj ul li img,.xpss ul li img{
border:none;
margin:5px 0px 3px 0px;
padding:0px;
}
.xhtj a,.xpss a{
color:#999;
}
.xhtj a:hover{
color:red;
text-decoration:underline;
}
/*新品上市*/
.xpss{
background:url(./img/满屋花项目素材/new.jpg) no-repeat;
padding-top:33px;
margin:6px 0px 0px 0px;
background-color:#FFF;
}
.xpss a:hover{
color:red;
text-decoration:underline;
}
/*鲜花导购*/
.xhdg{
background:url(img/满屋花项目素材/tips.jpg) no-repeat;
padding-top:33px;
margin:5px 0px 10px 0px;
background-color:#FFF;
}
.xhdg ul{
margin:0px;
padding:5px 5px 5px 30px;
}
.xhdg ul li{
padding:1px 0px 1px 12px;
display:inline-block;
width:200px;
background:url(img/满屋花项目素材/icon2.gif) no-repeat 5px 5px;
}
.xhdg a:hover{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="qb">
<div class="top">
<div class="logo">
<img src="img/满屋花项目素材/banner.jpg" alt="logo">
</div>
<div class="dbdhl">
<ul>
<li><a href="#">鲜花礼品</a></li>
<li><a href="#">自助订花</a></li>
<li><a href="#">绿色植物</a></li>
<li><a href="#">花之物语</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">支付方式</a></li>
</ul>
</div>
</div>
<div class="left">
<div class="dl">
<form>
<p class="dlym">
用户:<input type="text" class="text"><br>
密码:<input type="password" class="text"><br>
</p>
<p class="dlan">
<input type="button" value="登录" class="an"/>
<input type="button" value="注册" class="an"/>
<a href="#">忘记密码</a>
</p>
</form>
</div>
<div class="xhfl">
<div class="yt">
<h4><span>用途</span></h4>
<ul>
<li><a href="#">爱情鲜花</a></li>
<li><a href="#">爱情鲜花</a></li>
<li><a href="#">爱情鲜花</a></li>
<li><a href="#">爱情鲜花</a></li>
<li><a href="#">爱情鲜花</a></li>
<li><a href="#">爱情鲜花</a></li>
<li><a href="#">爱情鲜花</a></li>
<li><a href="#">爱情鲜花</a></li>
</ul>
</div>
<div class="hc">
<h4><span>花材</span></h4>
<ul>
<li><a href="#">玫瑰花</a></li>
<li><a href="#">玫瑰花</a></li>
<li><a href="#">玫瑰花</a></li>
<li><a href="#">玫瑰花</a></li>
<li><a href="#">玫瑰花</a></li>
<li><a href="#">玫瑰花</a></li>
<li><a href="#">玫瑰花</a></li>
<li><a href="#">玫瑰花</a></li>
</ul>
</div>
<div class="jg">
<h4><span>价格</span></h4>
<ul>
<li><a href="#">100~200</a></li>
<li><a href="#">100~200</a></li>
<li><a href="#">100~200</a></li>
<li><a href="#">100~200</a></li>
<li><a href="#">100~200</a></li>
<li><a href="#">100~200</a></li>
<li><a href="#">100~200</a></li>
</ul>
</div>
<div class="kg"><img src="img/满屋花项目素材/leftbottom.jpg"></div>
</div>
</div>
<div class="right">
<div class="bzkx"></div>
<div class="bzkx_tp">
<ul>
<li><a href="#"><img src="img/满屋花项目素材/new1.jpg"></a></li>
<li><a href="#"><img src="img/满屋花项目素材/new2.jpg"></a></li>
<li><a href="#"><img src="img/满屋花项目素材/new3.jpg"></a></li>
</ul>
</div>
<div class="xhtj">
<ul>
<li><img src="img/满屋花项目素材/flower1.jpg"><br/><a href="#">幸福的味道</a>¥ 288元</li>
<li><img src="img/满屋花项目素材/flower2.jpg"><br/><a href="#">幸福的味道</a>¥ 288元</li>
<li><img src="img/满屋花项目素材/flower3.jpg"><br/><a href="#">幸福的味道</a>¥ 288元</li>
<li><img src="img/满屋花项目素材/flower4.jpg"><br/><a href="#">幸福的味道</a>¥ 288元</li>
<li><img src="img/满屋花项目素材/flower5.jpg"><br/><a href="#">幸福的味道</a>¥ 288元</li>
<li><img src="img/满屋花项目素材/flower6.jpg"><br/><a href="#">幸福的味道</a>¥ 288元</li>
<li><img src="img/满屋花项目素材/flower7.jpg"><br/><a href="#">幸福的味道</a>¥ 288元</li>
<li><img src="img/满屋花项目素材/flower8.jpg"><br/><a href="#">幸福的味道</a>¥ 288元</li>
</ul>
</div>
<div class="xpss">
<ul>
<li><img src="img/满屋花项目素材/flower9.jpg"><br /><a href="#">粉色迷情</a></li>
<li><img src="img/满屋花项目素材/flower10.jpg"><br /><a href="#">粉色迷情</a></li>
<li><img src="img/满屋花项目素材/flower11.jpg" ><br /><a href="#">粉色迷情</a></li>
<li><img src="img/满屋花项目素材/flower12.jpg"><br /><a href="#">粉色迷情</a></li>
</ul>
</div>
<div class="xhdg">
<ul>
<li><a href="#">各种鲜花所代表的含义</a></li>
<li><a href="#">各种鲜花所代表的含义</a></li>
<li><a href="#">各种鲜花所代表的含义</a></li>
<li><a href="#">各种鲜花所代表的含义</a></li>
<li><a href="#">各种鲜花所代表的含义</a></li>
<li><a href="#">各种鲜花所代表的含义</a></li>
<li><a href="#">各种鲜花所代表的含义</a></li>
<li><a href="#">各种鲜花所代表的含义</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
金山打字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>金山打字</title>
<style type="text/css">
.sp{
float:left;
margin-left: 5px;
margin-top: 5px;
display:block;
width:80px;
height:80px;
border:1px solid black;
text-align:center;
line-height:80px;
border-radius:5px;/*设置圆角*/
}
</style>
<script type="text/javascript">
function f1(){
//创建一个span标签
var sp=document.createElement("span");
//获取用户按下的键盘
sp.innerHTML=event.key.toUpperCase();
//给新创建的span元素添加样式
sp.className="sp";
//获取div
var div=document.querySelector("div");
//把span元素添加到div中
div.appendChild(sp);
}
</script>
</head>
<body onkeypress="f1()">
<!-- 键盘的按下事件 -->
<div>
<span class="sp">在键盘输入</span>
</div>
</body>
</html>
打地鼠
在EDGE浏览器中需要设置缩放，才能把排版美化做好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>打地鼠-JIUYI</title>
<style type="text/css">
body{
background: url(img/bg.jpg);
background-repeat: no-repeat;
}
#yxsj{
position:absolute;
left: 10%;
float:left;
width:380px;
height:180px;
margin-left: 300px;
}
#ta{
position:absolute;
left: 25%;
top:35%;
}
#sm{
position:absolute;
left: 63%;
width:180px;
height:200px;
/* border:1px solid red; */
}
#score{
width: 150px;
height: 60px;
}
</style>
<script type="text/javascript">
var hitNum=0;
var missNum=0;
var total=0;
var score=0;
var gameTime;//游戏时间
var remainTime;//地鼠出现的间隔时间
var stayTime;//地鼠的停留时间
var num=10;
var checkTime_id;
var flag=0;//标记
var obj2;
var goHome_id;
var dead_id;
function startGame(){
init();
checkTime();
showMouse();
}
function init(){
document.getElementById("gameTime").disabled=true;
document.getElementById("remainTime").disabled=true;
document.getElementById("stayTime").disabled=true;
document.getElementById("startBtn").disabled=true;
document.getElementById("stopBtn").disabled=false;
//获取游戏时间 地鼠出现的间隔时间 地鼠停留时间
gameTime=document.getElementById("gameTime").value;
remainTime=document.getElementById("remainTime").value;
stayTime=document.getElementById("stayTime").value;
//获取当前系统时间
startTime=new Date();
flag=1;
document.getElementById("score").innerHTML=
"打中"+hitNum+"只，溜掉"+missNum+"只，"+
"总分"+total+"，得分"+score+"分"
}
function checkTime(){
var currTime= new Date();//现在的系统时间减去刚才的系统时间，然后用游戏时间减去二者之差就是游戏的剩余时间
var leastTime=gameTime*60-parseInt((currTime-startTime)/1000);
document.getElementById("timeOut").innerHTML=leastTime+"秒";
checkTime_id=setTimeout("checkTime()",1000)
if(leastTime<1){
stopGame();
}
}
function showMouse(){/* 显示小老鼠 */
if(flag){
//显示老鼠的本质是在25个背景图片中随机显示一个老鼠图片
var i=Math.floor(Math.random()*25);
document.images[i].src="img/01.jpg";//显示小老鼠
mouseShowId=setTimeout("showMouse()",remainTime*1000);
//小老鼠消失的本质就是把图片改成背景图片
goHome_id=setTimeout("goHome("+i+")",stayTime*1000);
}
}
//让老鼠消失的函数
function goHome(i){
var imgNum=document.images[i].src.substr(document.images[i].src.length-6,2);
if(imgNum=="01"){
missNum++;//溜掉的老鼠+1
total+=100;
document.getElementById("score").innerHTML=
"打中"+hitNum+"只，溜掉"+missNum+"只，"+
"总分"+total+"，得分"+score+"分";
document.images[i].src="img/00.jpg";
}
}
//打老鼠
function hitMouse(obj){
var imgNum=obj.src.substr(obj.src.length-6,2);
if(imgNum=="01"){//表示用户点击的图片是老鼠图片
obj.src="img/02.jpg";
obj2=obj;
hitNum++;
total+=100;
score+=100;
document.getElementById("score").innerHTML=
"打中"+hitNum+"只，溜掉"+missNum+"只，"+
"总分"+total+"，得分"+score+"分"
//把带锤子的老鼠图片换回背景图片
dead_id=setTimeout("dead(obj2)",500);
}
}
function dead(obj){
obj.src="img/00.jpg";
}
function stopGame(){
document.getElementById("gameTime").disabled=false;
document.getElementById("remainTime").disabled=false;
document.getElementById("stayTime").disabled=false;
document.getElementById("startBtn").disabled=false;
document.getElementById("stopBtn").disabled=true;
clearTimeout(checkTime_id);
clearTimeout(mouseShowId);
clearTimeout(goHome_id);
clearTimeout(dead_id);
for(var i=0;document.images.length;i++){
document.images[i].src="img/00.jpg";
}
}
</script>
</head>
<body >
<div id="bg">
<div id="yxsj">
<form action="" method="post">
<table>
<tr>
<td>--游戏时间:--</td>
<td><input type="text" id="gameTime" name="yxsj" value="">分钟</td>
</tr>
<tr>
<td>--倒计时间:--</td>
<td><div id="timeOut"></div></td>
</tr>
<tr>
<td>--地鼠出现间隔:--</td>
<td><input type="text" id="remainTime" name="cxjg" value="">秒钟</td>
</tr>
<tr>
<td>--停留时间:--</td>
<td><input type="text" id="stayTime" name="tlsj" value="">秒钟</td>
</tr>
<tr >
<td>--得分情况:--</td>
<td><div id="score"></div></td>
</tr>
<tr>
<td><input type="button" id="startBtn" name="ksyx" value="开始游戏" onclick="startGame()"/></td>
<td><input type="button" id="stopBtn" name="jsyx" value="结束游戏" onclick="stopGame()"/></td>
</tr>
</table>
</div>
<div id="ta">
<table>
<tr>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
</tr>
<tr>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
</tr>
<tr>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
</tr>
<tr>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
</tr>
<tr>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
<td><img src="img/00.jpg" onclick="hitMouse(this)"/></td>
</tr>
</table>
</div>
<div id="sm">
<font>游戏说明<br/>点击“开始游戏”按钮，在下图中随机产生老鼠，老鼠消失前单击老鼠进行击打，打中一次即可获得100的积分，没有打中老鼠，扣取100积分，快快行动吧，考验你的反应和眼力
</font>
</div>
</form>
</div>
<audio src="audio/bgsound.MP3" controls="controls"></audio>
</body>
</html>
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
