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的更多相关文章

  1. TimeLine CSS/Javascript 时间线

    https://casbootadminserver.herokuapp.com/#/applications/23bd8218/trace

  2. 时间轴CSS的Demo

    一.CSS代码(HTML5支持) /*time-line.css*/ .timeline { position: relative; padding: 20px 0 20px; list-style: ...

  3. 超炫的时间轴jquery插件Timeline Portfolio

    Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...

  4. 超酷的JavaScript叙事性时间轴(Timeline)类库

    在线演示 Timeline 是我见过的最酷的展示事件随时间发展的javascript实现.你可以基于时间使用讲故事的方式来创建时间轴特效,整个时间轴以幻灯的方式来展示,你可以穿插图片,视频或者是网站, ...

  5. Thinkphp3.2中的模板继承

    1:模板继承:   是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比 类的继承一样,模板也可以定义一个基础模板( ...

  6. bootstrap实战经验

    凡是基本的布局需要float实现的,都可以考虑利用网格布局. 1,.jumbotron可以形成一个青灰色的背景,并自动调节对应边距 2,.panel的应用十分广泛,可以自动设置合适的padding.甚 ...

  7. MUI开发记录——我的考勤

    已经好久没有更新技术博客了,因为最近一直在做跨平台web app应用的开发,由于是刚做这个,也没太多经验同大家分享,可我是一个闲不住的人,我还是决定于百忙之中抽空整理一篇,记录下开发历程......— ...

  8. HTML5 & MUI 界面样式

    垂直居中+自动换行 样式效果如下所示,当文字没有超出一行时,显示如“备注信息”,当文字超出一行时,显示如“维修地点” HTML代码如下: <div class="mui-input-r ...

  9. js实现的时间轴效果

    今天整理以前的资料发现以前写的一个时间轴效果,当时也是网上找了很久没有找到,就自己写了一个,现在发出来给有需要的人,代码写的可能有点乱. 效果图: 下面是美工做的设计图的效果(有个美工就是好): 下面 ...

随机推荐

  1. SVN 安装后报不是内部或外部命令

    SVN安装后报不是内部或外部命令,也不是可运行的程序 解决方法:windows安装svn的时候默认是不安装 svn command line这个东西的,重新打开svn的安装exe,选择modify,将 ...

  2. Nginx、PCRE和中文URL（UTF8编码）rewrite路径重写匹配问题

    最近遇到了使用Nginx 重写中文UTF8编码路径的问题. 才发现默认情况下Nginx的rewrite是不支持UTF8匹配的. 比如: rewrite ^/(..)$ /2个字符文章.html bre ...

  3. 每日英语：Is Bedtime Snacking Bad?

    It's a familiar scenario in many households: Hours after dinner, the stomach growls and the refriger ...

  4. 运用 Range 对象处理 Word 文档内容

    运用 Range 对象处理 Word 文档内容   在所有 Office 应用程序中,Microsoft Word 可能是应用最广泛的应用程序,它还经常在自定义 Office 解决方案中扮演重要的角色 ...

  5. 分享8个常用的jQuery焦点图插件

    现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微 ...

  6. HTML5关于上传API的一些使用（中）

    上一次写了关于HTML的上传API,XMLHttpRequest2.0的上传方式,以及HTML5中上传之前本地的预览,包括对于图片以及部分信息的预 览.这次我们就讲下HTML5中关于上传的一些各种个性 ...

  7. eclipse不能自动编译生成class文件的解决办法

    最近在项目项目开发过程中遇到eclipse不能自动编译生成class文件,当时很纳闷,每次修改代码后运行都是修改前的效果,没辙了,只好反编译原来的class文件,结果发现,class文件里并没有看到修 ...

  8. word 操作教程

    http://blog.163.com/haolongqin@126/blog/static/10999842220159993540527/ https://blog.csdn.net/ibigpi ...

  9. 扩展-Easyui Datagrid相同连续列合并扩展（一）

    一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){     $(this).datagrid("autoMerge ...

  10. 009Maven_建立私服——报错问题

    前一篇文章的建立私服一直出问题,这里的问题是: jdk6.0只支持nuxus2.5及以下的版本,要支持nexus2.6以上,必须要jdk7.0以上.不然报错,把nexus-2.6.2war包放在Tom ...