<!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. Simple Maven Project

    为pom.xml添加组织,法律和开发人员信息 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&qu ...

  2. import和from import陷阱一

    #from datetime import datetime import datetime format="output-%Y-%m-%d-%H%M%S.txt" str=&qu ...

  3. [转]深入理解学习GIT工作流

    深入理解学习Git工作流 字数13437 阅读2761 评论3 喜欢70 个人在学习git工作流的过程中,从原有的 SVN 模式很难完全理解git的协作模式,直到有一天我看到了下面的文章,好多遗留在心 ...

  4. 【转载】分享一些Qt学习资源，欢迎下载

    资源来源:http://bbs.csdn.net/topics/390358737 经过我一翻整理,把一些我收集到的Qt学习资源分享给大家,主要适合新手,老鸟可以直接忽略我.要说明一下,很多资源都是在 ...

  5. augustus, gene prediction, trainning

    做基因组注释 先用augustus训练,然后再用maker做基因注释 augustus提供一些训练好的,如果有和你的物种非常接近的,直接用提供的,没有的话再自己训练. 网址: http://bioin ...

  6. Erlang 103 Erlang分布式编程

    Outline 笔记系列 Erlang环境和顺序编程Erlang并发编程Erlang分布式编程YawsErlang/OTP 日期              变更说明 2014-11-23 A Outl ...

  7. 怎么实时查看mysql当前连接数

    如何实时查看mysql当前连接数? 如何实时查看mysql当前连接数? .查看当前所有连接的详细资料: ./mysqladmin -uadmin -p -h10. processlist .只查看当前 ...

  8. kibana ,logstash and filebeat

    https://www.elastic.co/guide/en/kibana/current/install.html https://www.elastic.co/guide/en/logstash ...

  9. input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色

    填写form表单时发现chrome的一个好坑啊! 当你之前有填写过表单,获取焦点时,input会有一个记录之前填写过的文本的下拉列表式的东东,就像这样:(抱歉丑了点,隐私问题打上了马赛克) 按理说,这 ...

  10. jsonpath

    1. java 类库 jayway/JsonPath maven 使用方法 <dependency> <groupId>com.jayway.jsonpath</grou ...