<!DOCTYPE html>
<html>
<head>
<title>sj1.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
#pruduce{
width:947px;
background-color:#F2F2F2;
}
.top{
height:55px;
background:url(images/top.jpg) no-repeat 10px 10px;
}
.main{
text-align:center;
height:309px;
}
.box{
width:300px;
height:280px;
border:1px solid #999;
margin:0px 6px;
float:left;
cursor:pointer;
}
dl{
padding-top:3px;
}
dd{
line-height:30px;
}
div.btprice_1{
height:50px;
background:#FFF2CE url(images/bt1.jpg) no-repeat 5px 4px;
}
div.btprice_2{
height:50px;
background:#FFF2CE url(images/bt2.jpg) no-repeat 5px 4px;
}
div.btprice_3{
height:50px;
background:#FFF2CE url(images/bt3.jpg) no-repeat 5px 4px;
}
.hoverstyle{
background-color:#D51938;
color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
$("dl").hover(function(){
$(this).addClass("hoverstyle");
},function(){
$(this).removeClass("hoverstyle");
});
});
</script>
</head>
<body>
<div id="pruduce">
<div class="top"></div>
<div class="main">
<div class="box">
<dl>
<dt><img src="images/pic1.jpg" /></dt>
<dd>[包邮]亮点可移动儿童防身高帖(每个ID限20)</dd>
</dl>
<div class="btprice_1"></div>
</div>
<div class="box">
<dl>
<dt><img src="images/pic2.jpg" /></dt>
<dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd>
</dl>
<div class="btprice_2"></div>
</div>
<div class="box">
<dl>
<dt><img src="images/pic3.jpg" /></dt>
<dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
</dl>
<div class="btprice_3"></div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>sj2.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
#login{
position:relative;
height:282px;
width:494px;
background:url(images/bg1.jpg) no-repeat;
}
#login input.text{
position:absolute;
height:26px;
line-height:26px;
color:#999;
width:207px;
}
.username{
left:183px;
top:105px;
}
.passwrd{
left:183px;
top:145px;
}
input.btn{
position:absolute;
left:183px;
top:190px;
height:32px;
line-height:32px;
width:100px;
background:url(images/btn.jpg) no-repeat;
border:none;
}
</style>
<script type="text/javascript">
$(function(){
var uname='通行账号/邮箱';
var pwd='密码';
$("input").focus(function(){
$(this).val('');
});
$("input").blur(function(){
if($(this).attr("name")=="username"){
$(this).val(uname);
}else if($(this).attr("name")=="password"){
$(this).val(pwd);
}
});
});
</script>
</head>
<body>
<div id="login">
<form>
<input type="text" name='username' class='text username' value="通行账号/邮箱" />
<input type="text" name='password' class='text passwrd' value="密码"/>
<input type="submit" name='sub' class='btn' value=" "/>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>sj3.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" >
*{
font-size:12px;
}
tr{
text-align:center;
height:40px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".newone").live("click",function(){
var myid=$("<tr bgcolor='#FAF3E9'>"
+"<td>"
+"<input type='checkbox'/>"
+"</td>"
+"<td>张三</td>"
+"<td>男</td>"
+"<td>6565654315321321</td>"
+"<td>短工</td>"
+"<td>18625455412</td>"
+"<td>1995-12-09</td>"
+"<td>10,000.00</td>"
+"<td>"
+"<img class='add' src='images/add.jpg' />"
+"<img class='del' src='images/del.jpg' />"
+"</td>"
+"</tr>");
$("table").append(myid);
});
$(".del").bind("click",function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<table width="800" >
<tr class='ee' bgcolor="#EBE7DC">
<td><input type="checkbox"/></td>
<td>姓名</td>
<td>性别</td>
<td>卡号</td>
<td>会员级别</td>
<td>电话号码</td>
<td>出生年月日</td>
<td>消费金额</td>
<td> </td>
</tr>
<tr bgcolor="#FAF3E9">
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>6565654315321321</td>
<td>短工</td>
<td>18625455412</td>
<td>1995-12-09</td>
<td>10,000.00</td>
<td>
<img class='add' src="images/add.jpg" />
<img class='del' src="images/del.jpg" />
</td>
</tr>
<tr bgcolor="#FEFAF7">
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>6565654315321321</td>
<td>短工</td>
<td>18625455412</td>
<td>1995-12-09</td>
<td>10,000.00</td>
<td>
<img class='add' src="images/add.jpg" />
<img class='del' src="images/del.jpg" />
</td>
</tr>
<tr bgcolor="#FAF3E9">
<td><input type="checkbox"/></td>
<td>张三</td>
<td>男</td>
<td>6565654315321321</td>
<td>短工</td>
<td>18625455412</td>
<td>1995-12-09</td>
<td>10,000.00</td>
<td>
<img class='add' src="images/add.jpg" />
<img class='del' src="images/del.jpg" />
</td>
</tr>
</table>
<a href="#" class='newone'>新增</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>kh4.html</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
#listbox{
margin:10px;
padding:15px;
border:1px solid #CCCCCC;
color:#0066FF;
}
dl{
display:block;
float:left;
margin:15px;
}
dd{
font-size:14px;
color:#663300;
}
dd a{
text-decoration:none;
font-size:14px;
color:#FF3300;
}
dd a:hover{
text-decoration:underline;
}
.clear{
clear:both;
height:0px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".add").live("click",function(){
var myid=$("<dl>"
+"<dt><img src='images/p1.jpg' /></dt>"
+"<dd>街机三国</dd>"
+"<dd>"+"<a class='del' href='javascript:void(0);'>删除</a>"+"</dd>"
+"</dl>");
$("#listbox").append(myid);
});
$(".del").bind("click",function(){
$(this).parent().parent().remove();
});
});
</script>
</head>
<body>
<div id='listbox'>
<dl>
<dt><img src="images/p1.jpg" /></dt>
<dd>街机三国</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<dl>
<dt><img src="images/p2.jpg" /></dt>
<dd>霸域</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<dl>
<dt><img src="images/p3.jpg" /></dt>
<dd>斗破乾坤</dd>
<dd><a class='del' href='javascript:void(0);'>删除</a></dd>
</dl>
<div class='clear'></div>
</div>
<input type="button" value='新增游戏' class='add'/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>kh5.html</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css" >
{
margin:0px;
padding:0px;
font-size:12px;
}
#boxlist{
height:526px;
width:996px;
background:#fff url(images/bg.jpg) no-repeat 0px 0px;
}
.main{
margin-left:278px;
border:1px solid #CCC;
}
.box{
width:168px;
padding:23px 5px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
float:left;
cursor:pointer;
}
.transparent_class{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter:alpha(opacity=60);
opacity:0.6;
}
</style>
<script type="text/javascript">
$(function(){
$("dl").hover(function(){
$(this).addClass("transparent_class");
},function(){
$(this).removeClass("transparent_class");
});
});
</script>
</head>
<body>
<div id='boxlist'>
<div style='height:43px;' ></div>
<div class='main'>
<div class='box'>
<dl>
<dt><img src='images/p1.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<span>市场价:¥269</span>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p1.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<span>市场价:¥269</span>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p2.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<span>市场价:¥269</span>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p3.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<span>市场价:¥269</span>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p4.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<span>市场价:¥269</span>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p4.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<span>市场价:¥269</span>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p2.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<span>市场价:¥269</span>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div class='box'>
<dl>
<dt><img src='images/p1.gif' /></dt>
<dd>
简约色彩系列带低帮帆布鞋12 黑色
<span>市场价:¥269</span>
<font color="#FF0000">售价:69</font>
</dd>
</dl>
</div>
<div style='clear:both;'></div>
</div>
</div>
</body>
</html>