<!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实例的更多相关文章

  1. CSS实例

    CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的的背景图片 如何在水平方向重复背景图像 如何定位背景图像 一个固定的背景图片(这个图片不会随页面 ...

  2. LESS CSS 实例

    值得参考的 10 个 LESS CSS 实例   2 收藏(185) LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员.你可以使用变量.函数.混合 ...

  3. CSS：CSS 实例

    ylbtech-CSS:CSS 实例 1.返回顶部 1. CSS 实例 CSS背景 设置页面的背景颜色 设置不同元素的背景颜色 设置一个图像作为页面的背景 错误的背景图片 如何在水平方向重复背景图像 ...

  4. CSS实例 display display 边距

    CSS学习大纲 在标签上设置style属性: background-color:#2459a2 ; height:48px ; 编写CSS样式: 1.标签的style属性 2.写在head里面,sty ...

  5. CSS实例练习

    蓝色导航为图片,用background-image实现. 排版用到ul,li标签,下划线运用border-bottom中的dashed,右边文字用到CSS浮动float. 实例: 代码: <!D ...

  6. div+css实例教程

    DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离. 对于初学者来说,可能比较模糊不熟悉.毕竟,样式布局需要通 ...

  7. CSS实例详解：Flex布局

    本文由云+社区发表 本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现,可以对比 ...

  8. CSS实例：图片导航块

    1.认识CSS的 盒子模型. 2.CSS选择器的灵活使用. 3.实例: a.图片文字用div等元素布局形成HTML文件. b.新建相应CSS文件,并link到html文件中. c.CSS文件中定义样式 ...

  9. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

  10. HTML+CSS实例——漂亮的背景（一）

    一.网址:http://www.csszengarden.com/?cssfile=213/213.css 二.效果 三.CSS body { background-color:#F0ECD6; ba ...

随机推荐

  1. IOS--手势控制的使用

    手势识别是具有互斥的原则的,比如单击和双击,如果它识别出一种手势,其后的手势将不被识别 // 添加单击的手势UITapGestureRecognize UITapGestureRecognizer * ...

  2. linux命令基础学习

    谨慎使用 rm -rf /* 命令 谨慎在SSH执行“rm -rf /*”,若不了解这个命令,可能导致整个Linux系统文件全部被删除. 这个删除命令只有 “root” 权限的帐号才可以执行,其它未取 ...

  3. H5版俄罗斯方块(1)---需求分析和目标创新

    前言: 俄罗斯方块和五子棋一样, 规则简单, 上手容易. 几乎每个开发者, 都会在其青春年华时, 签下"xx到此一游". 犹记得大一老师在布置大程作业的时候提过: "什么 ...

  4. 深入分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  5. 如何取Android设备日志

    安装Android SDK 运行 adb 命令 adb devices 查看链接的设备 adb logcat 日志相关

  6. Java使用Jdbc操作MySql数据库(一)

    这个示例是Java操作MySql的基本方法. 在这个示例之前,要安装好MySql,并且配置好账户密码,创建一个logininfo数据库,在数据库中创建userinfo数据表.并且在表中添加示例数据. ...

  7. JSBinding / Code Snippets

    new a gameobject & overloaded methds var go1 = new UnityEngine.GameObject.ctor(); var go2 = new ...

  8. maven的SNAPSHOT版本和正式版本不同

    转载文章: http://www.huangbowen.net/blog/2016/01/29/understand-official-version-and-snapshot-version-in- ...

  9. SQL SERVER调用textcopy写文件

    SET @PATH = 'textcopy /S ' + @LServer + ' /U '+ @LUser + ' /P '+ @LPass + ' /D '+ @LDB + ' /T '+@tab ...

  10. HackerRank "TBS Problem" ~ NPC

    It is marked as a NPC problem. However from the #1 code submission (https://www.hackerrank.com/Charl ...