zoukankan html css js c++ java
html-css实例

<!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晚
查看全文
相关阅读:
2. Add Two Numbers
1. Two Sum
22. Generate Parentheses (backTracking)
21. Merge Two Sorted Lists
20. Valid Parentheses (Stack)
19. Remove Nth Node From End of List
18. 4Sum (通用算法 nSum)
17. Letter Combinations of a Phone Number (backtracking)
LeetCode SQL: Combine Two Tables
LeetCode SQL:Employees Earning More Than Their Managers
原文地址：https://www.cnblogs.com/zhzhang/p/5988688.html