<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>求签</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: "微软雅黑",arial,sans-serif;
}
body{
background: url(img/bg.png);
}
div{
font-size: 10px;
}
.container{
width: 400px;
margin: 50px auto;
}
.container >.title{
color: white;
font-weight: bold;
margin-bottom: 10px;
background: -webkit-gradient(linear,left top,
left bottom, from(#321def), to(#654abc), color-stop(0.5,#1a2b3c));
padding: 5px 15px;
font-size: 120%;
text-align: center;
}
.date{
font-size: 17px;
font-weight: bold;
line-height: 30px;
text-align: center;
border-bottom: 1px solid #999999;
}
.info{
text-align: center;
color: red;
font-size: 9px;
}
.info strong{
background: crimson;
color: white;
padding: 0 3px;
margin: 0 1px;
}
.check_luck{
padding-top: 10px;
}
.selecttable{
width: 100%;
}
.selecttable td{
color: white;
text-align: center;
padding: 10px 0;
margin: 1px;
background: -webkit-gradient(linear,left top,
left bottom, from(#321def), to(#654abc), color-stop(0.5,#1a2b3c));
cursor: pointer;
width: 20%;
border-radius: 2px;
}
.selecttable td:hover{
background: rgba(0,0,0,0.5);
}
/*点击时候给每个td上类的属性*/
.selecttable td.selected{
background: #333333;
color: #ffffff;
}
.roll{
height: 200px;
border: 1px solid #fafafa;
margin-top: 10px;
overflow: hidden;
position: relative;
}
.card{
background: white;/**/
text-align: center;
line-height: 200px;
border-top: 1px dashed #fafafa;
position: absolute;
top: 201px;
width: 100%;
}
.card.clickable{
background: crimson;
color: white;
cursor: pointer;
}
.card .title{
font-size: 70px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="title">
程序员求签
<sup>sxt</sup>
</div>
<div class="date"></div>
<div class="info">
<strong>求</strong>婚丧嫁娶亲友疾病升级跳槽陨石核弹各类吉凶
</div>
<div class="check_luck">
<table class="event_table selecttable">
<tr>
<td data-event="100">编码</td>
<td data-event="200">测试</td>
<td data-event="300">修改bug</td>
<td data-event="400">提交代码</td>
<td data-event="500">其他</td>
</tr>
</table>
</div>
<div class="roll">
<div class="card" style="top:-1px;font-size: 20px;">
请点击所求之事
</div>
<div class="card clickable">
<div class="title">
求
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var weeks=["日","一","二","三","四","五","六"];
var today=new Date();
function getTodayString(){
return "今天是"+today.getFullYear()+"年"+(today.getMonth()+1)
+"月"+today.getDate()+"日"+today.getHours()+":"+today.getMinutes()
+"星期"+weeks[today.getDay()];
}
/*时间显示到浏览器之上*/
$(‘.date‘).html(getTodayString());
</script>
</body>
</html>
by北京尚学堂视频直播公开课的部分代码
2016-10-22晚
时间： 2024-10-18 09:50:40