<!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. qt5.4 msvc2013_64安装 目标计算机不匹配问题

     本文主要解决一个问题:即在安装完成之后如下目标计算机不匹配问题. ------------------------------------------------------------------ ...

  2. PHP 发送与接收流文件

    http://blog.csdn.net/fdipzone/article/details/40098169

  3. HTML标签之<q> <blockquote>

    两个标签都表示“引用”. 不同的是,q标签是行内元素,在内容的开始和结尾处会包有“”,而 blockquote是块级元素,默认带有左右40px的外间距,不带“”. 从语义上讲,前者引用的是小段文字,后 ...

  4. 解决ubuntu下安装phpmyadmin访问不了的问题

    在/etc/apache2/sites-available下有个文件 000-default.conf 文件为只读,需要sudo 命令修改,  把DocumentRoot /var/www/html ...

  5. background: url 背景图片加时间戳不显示图片

    在项目中一段这样的代码 背景图片加时间戳图片显示不出来 <div id="header" class="header clearfix" style=&q ...

  6. JAVA修饰符类型(public,protected,private,friendly)

    转自:http://www.cnblogs.com/webapplee/p/3771708.html JAVA修饰符类型(public,protected,private,friendly) publ ...

  7. 在Swift中应用Grand Central Dispatch(下）

    在第一部分中, 你学到了并发,线程以及GCD的工作原理.通过使用dispatch_barrrier和dispatch_sync,你做到了让 PhotoManager单例在读写照片时是线程安全的.除此之 ...

  8. QTreeWidget创建

    QTreeWidget.顾名思义,这个类用来展示树型结构.同前面说的QListWidget类似,这个类需要同另外一个辅助类QTreeWidgetItem一同使用.不过,既然是提供方面的封装类,即便是看 ...

  9. Javascript操作Cookie的脚本 — CookieHelper

    var HttpCookie = function(name, value, expires, path, domain) { if (name) this.Name = name; if (valu ...

  10. pt-online-schema-change 实例

    pt-pmp (http://www.cnblogs.com/ivictor/p/6012183.html) pt-online-schema-change (http://blog.csdn.net ...