html-css实例

<!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晚

转载于:https://www.cnblogs.com/zhzhang/p/5988688.html

html-css实例相关推荐

html页脚显示不出来,CSS实例:让页脚保持在未满屏页面的底部
CSS实例:让页脚保持在未满屏页面的底部互联网发布时间:2008-10-17 19:20:27 作者:佚名我要评论在内容不超过一屏的情况下,当浏览器窗口变小那行页脚文字会跟着向上浮 ...
css实例——太极八卦图
css实例--太极八卦图分析: 可以看成是三个类型的圆组成,分别是大的圆,中等大小的圆,小的圆.这是一个整体的思路,具体的话就是去调整各个圆的位置 HTML代码部分 <!DOCTYPE htm ...
html5导航按钮,CSS实例:超酷的网站导航按钮
CSS实例:超酷的网站导航按钮互联网发布时间:2009-04-02 19:35:20 作者:佚名我要评论网页制作Webjx文章简介:本文一步一步手把手教你打造一个极酷的三层分离的标 ...
js+css实例超漂亮tab切换选项卡代码
效果图: 代码:切换效果,要点击才能实现. js+css实例超漂亮tab切换选项卡代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
html课程表对角线,html+CSS实例效果(6):模拟表格对角线
html+CSS实例效果(6):模拟表格对角线 (2012-01-12 13:51:59) 标签: 杂谈 /p> Transitional//EN" "http://www. ...
HTML和CSS实例讲解
转载地址:http://www.zcool.com.cn/article/ZMTYzNDA0.html 主要讲一个网页的HTML和CSS实例,怎么实现网页的效果图! 实际网页效果图的实现是简单兴趣是 ...
2020-11-05 css实例：轮播图上的小圆点
轮播图上的小圆点类似这种效果:(截图为京东代码) 选中当前图片时代码未选中当前图片时代码 css实例:轮播图上的小圆点 html代码:设置一个div盒子banner,里面放轮播图片和装圆点的容器 ...
CSS实例—以一个简单网页为例
CSS实例一.整体布局二.总览三.详述 3.1 header 3.1.1 title 内容:gsonya-CSS 3.1.2 search (1)input type:search: 动画效果: ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...
靠左靠右实际布局DIV CSS实例模块
靠左靠右布局与只靠左布局DIV CSS实例模块在实际css布局中常常会遇到,图标式超链接布局,以下为大家介绍一个使用float实现的图标布局. 采用css float布局效果截图本模块使用floa ...

html-css实例

html-css实例相关推荐

最新文章

热门文章