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