首页 > 代码库 > html-css实例

html-css实例

2024-08-17 12:41:10   217人阅读

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

 

html-css实例


联系
我们