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. 24 WHEN CAN WE STOP TESTING?

    24 WHEN CAN WE STOP TESTING? 2015-09-25 THERE IS NO simple way of deciding when a system is complete ...

  2. 0073 javacTask: 源发行版 1.8 需要目标发行版 1.8

    今天在编译执行下面这段代码的时候,编译报错:javacTask: 源发行版 1.8 需要目标发行版 1.8 public class Test { public static void main(St ...

  3. 使用ICSharpCode.TextEditor制作一个语法高亮显示的XML编辑器

    使用ICSharpCode.TextEditor制作一个语法高亮显示的XML编辑器 品高工作流 的流程模拟器中使用了一个具有语法高亮和折叠功能的XML编辑器,其核心就是用了SharpDevelop中的 ...

  4. openvpn 移植之生成证书和私钥

    openvpn 是通过 openssl 的各种验证进行连接的,生成证书的过程可以在 Ubuntu 的环境下生成. 步骤如下: 一. 在Ubuntu下安装 openvpn // 这是在 Ubuntu 1 ...

  5. C++成员函数的存储方式

    用类去定义对象时,系统会为每一个对象分配存储空间.如果一个类包括了数据和函数,要分别为数据和函数的代码分配存储空间. 按理说,如果用同一个类定义了10个对象,那么就需要分别为10个对象的数据和函数代码 ...

  6. RabbitMQ之路由（Routing）【译】

    在上一节中,我们创建了一个简单的日志系统,可以广播消息到很多接收者. 这一节,我们将在上一节的基础上加一个功能--订阅部分消息.例如,我们只将严重错误信息写入到日志文件保存在磁盘上,同时我们能将所有的 ...

  7. 除去Scala的糖衣(13) -- Default Parameter Value

    欢迎关注我的新博客地址:http://cuipengfei.me/ 好久没有写博客了,上一次更新竟然是一月份. 说工作忙都是借口,咋有空看美剧呢. 这半年荒废掉博客说到底就是懒,惯性的懒惰.写博客这事 ...

  8. php -- 对象遍历

    对象遍历:foreach,遍历对象的公有属性(将公有属性的值和属性名赋值给对应$value和$key) 遍历某一个属性的数组,实现Iterator接口 接口iterator:类实现Iterator接口 ...

  9. 【BZOJ】1670: [Usaco2006 Oct]Building the Moat护城河的挖掘（凸包）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1670 裸打了凸包.. #include <cstdio> #include <cs ...

  10. Unity Shaders and Effects Cookbook (3-5) 金属软高光

    书上这一节看得我头昏脑胀,数学渣表示自理不能-- 并且也不了解这个效果的实际意义. 先记录下来,后面真正看懂了再来补充具体理论. 通过一张纹理贴图,定义高光的形状,利用到的纹理贴图有三种 这里并非把纹 ...