接着上篇文章,我将HTML代码和CSS代码也总结一下。
HTML代码
<div style="background-color:#efefef;width:100%;padding:0px 0;position:relative;" id="wrap">
<div id="alert-div">
<div style="width:50%;height:60%;margin:10% auto;">
<img src="">
</div>
</div>
<div id="lottery" style="position:relative;">
<span class="btn" style="">
<a href="javascript:void(0);" style="color:white;text-decoration:none;display:block;">开始</a>
</span>
<table cellspacing="0">
<tr>
<td class=""></td>
<td class="lottery-unit lottery-unit-0" imgSrc="@Url.Content("~/images/img/1d.png")"><img src="@Url.Content("~/images/img/1.png")"></td>
<td class="lottery-unit lottery-unit-1" imgSrc="@Url.Content("~/images/img/15d.png")"><img src="@Url.Content("~/images/img/15.png")"></td>
<td class="lottery-unit lottery-unit-2" imgSrc="@Url.Content("~/images/img/4d.png")"><img src="@Url.Content("~/images/img/4.png")"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-3" imgSrc="@Url.Content("~/images/img/9d.png")"><img src="@Url.Content("~/images/img/9.png")"></td>
<td class="lottery-unit lottery-unit-4" imgSrc="@Url.Content("~/images/img/10d.png")"><img src="@Url.Content("~/images/img/10.png")"></td>
<td class="lottery-unit lottery-unit-5" imgSrc="@Url.Content("~/images/img/11d.png")"><img src="@Url.Content("~/images/img/11.png")"></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-6" imgSrc="@Url.Content("~/images/img/17d.png")"><img src="@Url.Content("~/images/img/17.png")"></td>
<td class="lottery-unit lottery-unit-7" imgSrc="@Url.Content("~/images/img/18d.png")"><img src="@Url.Content("~/images/img/18.png")"></td>
<td class="lottery-unit lottery-unit-8" imgSrc="@Url.Content("~/images/img/21d.png")"><img src="@Url.Content("~/images/img/21.png")"></td>
</tr>
</table>
</div>
</div>
CSS代码
<style type=text/css>
*{padding:0;margin:0;}
#lottery {
margin: 0px auto;
width: 100%;
background: url(@Url.Content("~/images/img/11aa.jpg")) no-repeat;
background-size:100% 100%;
height: 600px;
}
#lottery table{
width: 100%;
height:100%;
overflow:hidden;
cellspacing:0;
}
#lottery table tr{
border:0;
width: 100%;
height: 200px;
overflow:hidden;
}
#lottery table td {
width: 12.5%;
text-align:center;
height: 200px;
}
#lottery table td img{
width: 98%;
height: 180px;
display:block;
margin:10px auto;
}
#lottery table td.active {
background: yellow;
}
.btn{
display:block;
position:absolute;top:600px;width:100px;height:40px;line-height:40px;font-size:20px;background:red;text-align:center;right:10%;margin-left:-50px;margin-top:10px;
}
#alert-div{
position:absolute;top:0px;left:0;width:100%;height:100%;opacity:0.8;background:#000;z-index:1000;
display:none;-we
}
#alert-div img{
dispaly:block;
width:100%;
height:100%;
}
</style>
用css控制效果,用js控制逻辑,这个程序几乎不用后台,很完美。