<!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晚
