1.删除增加游戏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>游戏推荐 </title> <style type="text/css" > *{ margin:0px; padding:0px; font-size:12px; } #listbox{ margin:10px; padding:15px; border:1px solid #CCCCCC; color:#0066FF; } dl{ display:inline-block; 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> </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> <input type="button" value='新增游戏' class='add'/> </div> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { var picture = new Array("dl:nth-of-type(1)","dl:nth-of-type(2)","dl:nth-of-type(3)") var pic; var pict; $("input[type=button]").click(function () { pic = Math.floor(Math.random()*3); pict = picture[pic]; var s=$(pict).clone(true); $(".clear").before(s); }) $(".del").click(function () { var len = $("dl").length if(len<=1){ alert("不能删了!") }else { $(this).parent().parent().remove(); } }) }) </script> </body> </html>
2.男生动感地带
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>男生地带 </title> <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> </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 黑色 <s>市场价:¥269</s> <font color="#FF0000">售价:69</font> </dd> </dl> </div> <div class='box'> <dl> <dt><img src='images/p1.gif' /></dt> <dd> 简约色彩系列带低帮帆布鞋12 黑色 <s>市场价:¥269</s> <font color="#FF0000">售价:69</font> </dd> </dl> </div> <div class='box'> <dl> <dt><img src='images/p2.gif' /></dt> <dd> 简约色彩系列带低帮帆布鞋12 黑色 <s>市场价:¥269</s> <font color="#FF0000">售价:69</font> </dd> </dl> </div> <div class='box'> <dl> <dt><img src='images/p3.gif' /></dt> <dd> 简约色彩系列带低帮帆布鞋12 黑色 <s>市场价:¥269</s> <font color="#FF0000">售价:69</font> </dd> </dl> </div> <div class='box'> <dl> <dt><img src='images/p4.gif' /></dt> <dd> 简约色彩系列带低帮帆布鞋12 黑色 <s>市场价:¥269</s> <font color="#FF0000">售价:69</font> </dd> </dl> </div> <div class='box'> <dl> <dt><img src='images/p4.gif' /></dt> <dd> 简约色彩系列带低帮帆布鞋12 黑色 <s>市场价:¥269</s> <font color="#FF0000">售价:69</font> </dd> </dl> </div> <div class='box'> <dl> <dt><img src='images/p2.gif' /></dt> <dd> 简约色彩系列带低帮帆布鞋12 黑色 <s>市场价:¥269</s> <font color="#FF0000">售价:69</font> </dd> </dl> </div> <div class='box'> <dl> <dt><img src='images/p1.gif' /></dt> <dd> 简约色彩系列带低帮帆布鞋12 黑色 <s>市场价:¥269</s> <font color="#FF0000">售价:69</font> </dd> </dl> </div> <div style='clear:both;'></div> </div> </div> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { $("img").bind({ mouseover:function () { $(this).css("opacity","0.6") }, mouseout:function () { $(this).css("opacity","1") } }) }) </script> </body> </html>