<!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. C# winform应用程序仅能打开一个进程运行

    判断程序是否已经运行,使程序只能运行一个实例: 方法1: //这种检测进程的名的方法,并不绝对有效.因为打开第一个实例后,将运行文件改名后,还是可以运行第二个实例. private static bo ...

  2. javascript 封装（给自己看）

    HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  3. Python变量、数据类型6

    1.Python变量 变量,即代表某个value的名字. 变量的值存储在内存中,这意味着在创建变量时会在内存中开辟一个空间. !!!即值并没有保存在变量中,它们保存在计算机内存的深处,被变量引用.所以 ...

  4. mm/kmalloc.c

    /* *  linux/mm/kmalloc.c * *  Copyright (C) 1991, 1992  Linus Torvalds & Roger Wolff. * *  Writt ...

  5. ODOO从哪里开始？？OpenERP的第一根线头儿

    Windows下ODOO源码启动: python odoo-bin -w odoo -r odoo --addons-path=addons,../mymodules --db-filter=mydb ...

  6. linux之tmpwatch命令

    系统使用时间长后会产生临时文件(/tmp下),需要清理.但清理的时候不推荐使用rm -rf.这样有时会引起程序的僵死. tmpwatch的说明: [root@AY121231034820cd91077 ...

  7. SQL ServerOVER 子句,over开窗函数,SQL SERVER 开窗函数

    https://technet.microsoft.com/zh-cn/library/ms189461(v=sql.105).aspx http://www.cnblogs.com/85538649 ...

  8. MySQL性能优化总结（转）https://yq.aliyun.com/articles/24249

    摘要: 一.MySQL的主要适用场景 1.Web网站系统 2.日志记录系统 3.数据仓库系统 4.嵌入式系统 二.MySQL架构图:   三.MySQL存储引擎概述 1)MyISAM存储引擎 MyIS ...

  9. Android中如何监听GPS开启和关闭

    转自 chenming 原文 Android中如何监听GPS开启和关闭   摘要: 本文简单总结了如何监听GPS开关的小技巧 有时需要监听GPS的开关(这种需求并不多见).实现的思路是监听代表 GPS ...

  10. Python招聘需求与技能体系

    目前国内的招聘Python,基本都是偏向web后台开发,偶有高大上的数据挖掘&机器学习. 这是之前(2012年)找工作整理的一些JD,在梳理几年来的笔记,顺带理一理 可以以此建立自己的技能体系 ...