timeline css
CODE <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>order room - 离散度30min </title>
</head>
<body>
<style>
.gt-timeline { position: relative; width: 960px; height: 120px; border: 0px solid red; font-family: 'Helvetica Neue', Helvetica, Arial, serif; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); color: #6d6d6d; margin-left: auto; margin-right: auto; } .gt-timeline div.main_line { border: none; border-top: 3px solid #666666; clear: both; height: 0; width: 100%; position: absolute; top: 50px; left: 14px; z-index: 0; } .gt-timeline div.horizontal-line { border: 0px; border-left: 3px solid #666666; clear: both; height: 20px; width: 0px; position: absolute; z-index: 1; top: 30px; } .gt-timeline div.month-line { height: 15px; border-left: 2px solid #666666; } .gt-timeline div.even-month { top: 37px; } .gt-timeline div.even-month .month { position: relative; top: -18px; left: -10px; white-space: nowrap; } .gt-timeline div.odd-month { top: 41px; height: 10px; border-left: 1px solid #999999; } .gt-timeline .month { font-size: 12px; } </style>
<div class="gt-timeline" style="width:933px">
<div class="main_line" style="width:903px"></div>
<div class="horizontal-line month-line" style="left: 13px;top:35px;">
</div>
<div style="left:64px">
<span style="position: relative; ;width:50px;left:20px;top:30px;">会议室编号</span>
</div>
<div style="left:89px"></div>
<div class="horizontal-line month-line " style="left:114px; top:35px;">
</div>
<div style="left:139px">
<span style="position: relative; ;width:50px;left:120px;top:12px;">会议室信息</span>
</div>
<div style="left:164px">
</div>
<div style="left:189px">
</div>
<div style="left:214px">
</div>
<div style="left:239px"></div>
<div class="horizontal-line month-line even-month" style="left:264px">
<div class="month">08:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:289px"></div>
<div class="horizontal-line month-line even-month" style="left:314px">
<div class="month">09:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:339px"></div>
<div class="horizontal-line month-line even-month" style="left:364px">
<div class="month">10:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:389px"></div>
<div class="horizontal-line month-line even-month" style="left:414px">
<div class="month">11:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:439px"></div>
<div class="horizontal-line month-line even-month" style="left:464px">
<div class="month">12:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:489px"></div>
<div class="horizontal-line month-line even-month" style="left:514px">
<div class="month">13:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:539px"></div>
<div class="horizontal-line month-line even-month" style="left:564px">
<div class="month">14:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:589px"></div>
<div class="horizontal-line month-line even-month" style="left:614px">
<div class="month">15:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:639px"></div>
<div class="horizontal-line month-line even-month" style="left:664px">
<div class="month">16:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:689px"></div>
<div class="horizontal-line month-line even-month" style="left:714px">
<div class="month">17:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:739px"></div>
<div class="horizontal-line month-line even-month" style="left:764px">
<div class="month">18:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:789px"></div>
<div class="horizontal-line month-line even-month" style="left:814px">
<div class="month">19:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:839px"></div>
<div class="horizontal-line month-line even-month" style="left:864px">
<div class="month">20:00</div>
</div>
<div class="horizontal-line month-line odd-month" style="left:889px"></div>
<div class="horizontal-line month-line even-month" style="left:914px">
<div class="month">21:00</div>
</div>
</div> </body>
</html>
w活用border
<!doctype html>
<html>
<head>
</head>
<body>
<div style="margin: 2em;">
<div style="position: absolute;border-left:0.2em solid black;height: 2em;"></div>
<div style="position: relative;;border-bottom:0.1em solid black;top:2em;"></div>
<div style="position: absolute;left: 1.5em;;top:0.8em;">08:00</div>
<div style="position: absolute;left: 8em;border-left:0.1em dashed black;height: 1em;top:3em;"></div>
<div style="position: absolute;left: 14em;border-left:0.2em solid black;height: 2em;"></div>
<div style="position: absolute;left: 13.0em;;top:0.8em;">09:00</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
</head>
<body>
<div style="margin: 2em;">
<div style="position: relative;border-left:0.2em solid black;height: 2em;;border-bottom:0.1em solid black;"></div>
<div style="position: relative;left: -1.0em;;top:-3.2em;">08:00</div>
<div style="position: relative;left: 4em;border-left:0.1em dashed black;height: 1em;top:-2.4em;"></div> <div style="position: relative;left: 8em;border-left:0.2em solid black;height: 2em;top:-4.3em;"></div>
<div style="position: relative;left: 7.0em;;top:-7.3em;">09:00</div> </div>
</body>
</html>
timeline css的更多相关文章
- TimeLine CSS/Javascript 时间线
https://casbootadminserver.herokuapp.com/#/applications/23bd8218/trace
- 时间轴CSS的Demo
一.CSS代码(HTML5支持) /*time-line.css*/ .timeline { position: relative; padding: 20px 0 20px; list-style: ...
- 超炫的时间轴jquery插件Timeline Portfolio
Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...
- 超酷的JavaScript叙事性时间轴(Timeline)类库
在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...
- Thinkphp3.2中的模板继承
1:模板继承: 是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比 类的继承一样,模板也可以定义一个基础模板( ...
- bootstrap实战经验
凡是基本的布局需要float实现的,都可以考虑利用网格布局. 1,.jumbotron可以形成一个青灰色的背景,并自动调节对应边距 2,.panel的应用十分广泛,可以自动设置合适的padding.甚 ...
- MUI开发记录——我的考勤
已经好久没有更新技术博客了,因为最近一直在做跨平台web app应用的开发,由于是刚做这个,也没太多经验同大家分享,可我是一个闲不住的人,我还是决定于百忙之中抽空整理一篇,记录下开发历程......— ...
- HTML5 & MUI 界面样式
垂直居中+自动换行 样式效果如下所示,当文字没有超出一行时,显示如“备注信息”,当文字超出一行时,显示如“维修地点” HTML代码如下: <div class="mui-input-r ...
- js实现的时间轴效果
今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...
随机推荐
- NGINX + LUA实现复杂的控制
安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装,也可以直接用淘宝的OpenResty Centos和debian的安装就简单了.. 这里说下freebs ...
- 知乎日报 API 分析
声明 下面全部 API 均由 知乎(Zhihu.Inc) 提供,本人採取非正常手段获取. 获取与共享之行为或有侵犯知乎权益的嫌疑.若被告知需停止共享与使用.本人会及时删除此页面与整个项目. 请您暸解相 ...
- redhat6.8服务器版本 yum 源的配置
阿里云的源地址: http://mirrors.aliyun.com/ 打开后点击帮助: 有如下提示: 不过不能直接使用这个源,因为自己使用的是服务器版本,要修改一个变量,先将源文件下载下来. wge ...
- am335x alsa codec调试
root@phyCORE-AM335x:~ aplay -l**** List of PLAYBACK Hardware Devices ****card 0: audio [PCM051 audio ...
- 用Netty开发中间件：高并发性能优化(转)
用Netty开发中间件:高并发性能优化 最近在写一个后台中间件的原型,主要是做消息的分发和透传.因为要用Java实现,所以网络通信框架的第一选择当然就是Netty了,使用的是Netty 4版本.Net ...
- 实现cell显示一个删除button
假设想实现滑动cell时,cell右边就能显示一个删除button,则要实现tableview 下边方法: - (void)tableView:(UITableView *)tableView com ...
- MyBatis常用对象SqlSessionFactory和SqlSession介绍和运用
学习框架一个比较好的路径阅读源码.本文介绍的SqlSessionFactory和SqlSession.可以通过了解SqlSessionFactory接口和SqlSession接口以及两个的实现类入手, ...
- 嵌入式开发之gb281818
http://www.cnblogs.com/snake-hand/p/3157176.html http://blog.csdn.net/voipmaker/article/category/140 ...
- hdu 4709:Herding（叉积求三角形面积+枚举）
Herding Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- iOS 创建本地私有库 保存功能代码
创建本地私有库 >>> cd /Users/cxx/Desktop/Mange_JJH/Lib >>> pod lib create TZTools >> ...