<!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. 在线生成CSS样式和兼容的字体格式

    http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.

  2. HDU 4777 Rabbit Kingdom （2013杭州赛区1008题，预处理，树状数组）

    Rabbit Kingdom Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  3. Map/Reduce个人实战--生成数据测试集

    背景: 在大数据领域, 由于各方面的原因. 有时需要自己来生成测试数据集, 由于测试数据集较大, 因此采用Map/Reduce的方式去生成. 在这小编(mumuxinfei)结合自身的一些实战经历, ...

  4. LintCode Balanced Binary Tree

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  5. CE 文件读写操作

    写入字符到文件中: // TODO: 写字符到文件 // 参数: CString类型的文件名FileName;char *类型的数据内容;unsigned int类型内容长度 // 返回: 成功返回T ...

  6. javascript的document.execCommand(转)

    document.execCommand()方法处理html数据时常用语法格式如下: 代码: document.execCommand(sCommand[,交互方式, 动态参数]) 其 中:sComm ...

  7. Content is not allowed in prolog.解决方法

    将xml配置文件利用记事本另存为Anis编码的文件可以解决.

  8. linux系统的初化始配置 IP 主机名 防火墙 selinux

    本次内容包括Linux:ip.主机名.关闭firewalld与selinux 开机临时生效和永久生效 ------------------------------------------------- ...

  9. c语言字符串操作大全

     C语言字符串操作函数 函数名: strcpy 功  能: 拷贝一个字符串到另一个 用  法: char *stpcpy(char *destin, char *source); 程序例: #incl ...

  10. activiti自定义流程之整合（六）：获取我的申请任务

    流程启动后,流程节点便进入到了任务相关的部分.可以看到我之前的做法是在启动节点就绑定了form表单,启动时就填写相关的数据.实际上在之前我的做法是不对开始节点做任何操作,知道任务节点的时候再填写相关的 ...