CSS3垂直时间轴-Demo马航失联

来源：互联网发布：socket长连接 java 编辑：程序博客网时间：2024/06/10 19:44

1.Html中代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>css3垂直时间轴 </title>    <script src="js/modernizr.custom.js"></script>    .    <link rel="stylesheet" type="text/css" href="css/default.css" />    <!--必要样式-->    <link rel="stylesheet" type="text/css" href="css/component.css" /></head><body>    <div class="container">        <div class="main">            <ul class="cbp_tmtimeline">                <li>                    <time class="cbp_tmtime" datetime="2014-03-8 8:26"><span>3/8/14</span><span> 8:26</span></time>                    <div class="cbp_tmicon cbp_tmicon-phone">                    </div>                    <div class="cbp_tmlabel">                        <h2>                            马航失联事件-1</h2>                        <p>                            3月8日8时26分，中新社电：马来西亚航空公司表示，一架载有239人的飞机失去联系。 据BBC报道，该航班“MH370”计划由吉隆坡飞往北京，机上载有239人，其中227人为乘客（包括两名婴儿），12人为机组成员。</p>                    </div>                </li>                <li>                    <time class="cbp_tmtime" datetime="2014-03-8 11:10"><span>3/8/14</span><span> 11:10</span></time>                    <div class="cbp_tmicon cbp_tmicon-screen">                    </div>                    <div class="cbp_tmlabel">                        <h2>                            马航失联事件-2</h2>                        <p>                            11时10分，马航发表第二份声明： 马来西亚航空公司对与MH370航班失去所有联系的事件深表遗憾。该航班于今天凌晨0点41分由吉隆坡起飞前往北京，原计划于北京时间早晨6点30份抵达北京首都国际机场。苏邦空中交通管制台证实该航班于今天凌晨2点40分（马来西亚时间）与管制台失去联系。                            MH370航班由波音777-200机型执飞，该航班总共运载239人，包括227名乘客（2名婴儿）及12名机组人员，航班的乘客来自于13个国家。马来西亚航空公司目前正与搜寻与救援机构通力合作以确定飞机位置。工作人员正在与乘客和机组人员的亲属联系。航空公司与紧急工作组及有关当局紧密合作，提供全力支持。航空公司将会根据事件进展及时提供最新讯息。</p>                    </div>                </li>                <li>                    <time class="cbp_tmtime" datetime="2014-03-8 11:33"><span>3/8/14</span><span> 11:33</span></time>                    <div class="cbp_tmicon cbp_tmicon-mail">                    </div>                    <div class="cbp_tmlabel">                        <h2>                            马航失联事件-3</h2>                        <p>                            11时33分，新华社快讯：越南搜救人员在越南南部金瓯省西南120海里处，发现马来西亚飞北京航班失联客机信号。</p>                    </div>                </li>                <li>                    <time class="cbp_tmtime" datetime="2014-03-8 11:40"><span>3/8/14</span><span> 11:40</span></time>                    <div class="cbp_tmicon cbp_tmicon-phone">                    </div>                    <div class="cbp_tmlabel">                        <h2>                            马航失联事件-4</h2>                        <p>                            11时40分，马航在北京丽都饭店召开记者会，介绍航班失联事件情况，公布乘客名单。：乘客中有中国大陆152人和1名婴儿，中国台湾1人，马来西亚38人，印尼12人，澳大利亚7人，美国4人，法国3人。此外机上还有新西兰、乌克兰、加拿大、俄罗斯、意大利、奥地利和荷兰人。</p>                    </div>                </li>                <li>                    <time class="cbp_tmtime" datetime="2014-03-8 14:30"><span>3/8/14</span><span> 14:30</span></time>                    <div class="cbp_tmicon cbp_tmicon-earth">                    </div>                    <div class="cbp_tmlabel">                        <h2>                            马航失联事件-5</h2>                        <p>                            14点30分左右，马来西亚航空公司在北京简短召开发布会，会上马航仅证实目前MH370航班“失去联络”，并未就是否失事或降落发表信息，也未给记者提问机会。主持人离场时现场一片骚动，场外一片混乱。家属则称马航一再拖延通报具体情况，对此不满。</p>                    </div>                </li>                <li>                    <time class="cbp_tmtime" datetime="2014-03-8 17:00"><span>3/8/14</span><span> 17:00</span></time>                    <div class="cbp_tmicon cbp_tmicon-screen">                    </div>                    <div class="cbp_tmlabel">                        <h2>                            马航失联事件-6</h2>                        <p>                            17时左右，越南国家搜救中心向中国通报，马航失联客机可能在马来西亚和越南重叠海域坠落，中国海上搜救中心绘制出了该疑似位置。交通运输部派出大型专业救助船“南海救115”和“南海救101”轮向疑似坠落海域推进。</p>                    </div>                </li>                <li>                    <time class="cbp_tmtime" datetime="2014-03-8 19:05"><span>3/8/14</span><span> 19:05</span></time>                    <div class="cbp_tmicon cbp_tmicon-phone">                    </div>                    <div class="cbp_tmlabel">                        <h2>                            马航失联事件-7</h2>                        <p>                            19时05分左右，马来西亚总理纳吉布就马航客机失联向中方表示歉意。</p>                    </div>                </li>            </ul>        </div>    </div></body></html>

2.Js中代码：

/* Modernizr 2.6.2 (Custom Build) | MIT & BSD download by http://www.codefans.net* Build: http://modernizr.com/download/#-shiv-cssclasses-load*/; window.Modernizr = function (a, b, c) { function u(a) { j.cssText = a } function v(a, b) { return u(prefixes.join(a + ";") + (b || "")) } function w(a, b) { return typeof a === b } function x(a, b) { return !! ~("" + a).indexOf(b) } function y(a, b, d) { for (var e in a) { var f = b[a[e]]; if (f !== c) return d === !1 ? a[e] : w(f, "function") ? f.bind(d || b) : f } return !1 } var d = "2.6.2", e = {}, f = !0, g = b.documentElement, h = "modernizr", i = b.createElement(h), j = i.style, k, l = {}.toString, m = {}, n = {}, o = {}, p = [], q = p.slice, r, s = {}.hasOwnProperty, t; !w(s, "undefined") && !w(s.call, "undefined") ? t = function (a, b) { return s.call(a, b) } : t = function (a, b) { return b in a && w(a.constructor.prototype[b], "undefined") }, Function.prototype.bind || (Function.prototype.bind = function (b) { var c = this; if (typeof c != "function") throw new TypeError; var d = q.call(arguments, 1), e = function () { if (this instanceof e) { var a = function () { }; a.prototype = c.prototype; var f = new a, g = c.apply(f, d.concat(q.call(arguments))); return Object(g) === g ? g : f } return c.apply(b, d.concat(q.call(arguments))) }; return e }); for (var z in m) t(m, z) && (r = z.toLowerCase(), e[r] = m[z](), p.push((e[r] ? "" : "no-") + r)); return e.addTest = function (a, b) { if (typeof a == "object") for (var d in a) t(a, d) && e.addTest(d, a[d]); else { a = a.toLowerCase(); if (e[a] !== c) return e; b = typeof b == "function" ? b() : b, typeof f != "undefined" && f && (g.className += " " + (b ? "" : "no-") + a), e[a] = b } return e }, u(""), i = k = null, function (a, b) { function k(a, b) { var c = a.createElement("p"), d = a.getElementsByTagName("head")[0] || a.documentElement; return c.innerHTML = "x<style>" + b + "</style>", d.insertBefore(c.lastChild, d.firstChild) } function l() { var a = r.elements; return typeof a == "string" ? a.split(" ") : a } function m(a) { var b = i[a[g]]; return b || (b = {}, h++, a[g] = h, i[h] = b), b } function n(a, c, f) { c || (c = b); if (j) return c.createElement(a); f || (f = m(c)); var g; return f.cache[a] ? g = f.cache[a].cloneNode() : e.test(a) ? g = (f.cache[a] = f.createElem(a)).cloneNode() : g = f.createElem(a), g.canHaveChildren && !d.test(a) ? f.frag.appendChild(g) : g } function o(a, c) { a || (a = b); if (j) return a.createDocumentFragment(); c = c || m(a); var d = c.frag.cloneNode(), e = 0, f = l(), g = f.length; for (; e < g; e++) d.createElement(f[e]); return d } function p(a, b) { b.cache || (b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag()), a.createElement = function (c) { return r.shivMethods ? n(c, a, b) : b.createElem(c) }, a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + l().join().replace(/\w+/g, function (a) { return b.createElem(a), b.frag.createElement(a), 'c("' + a + '")' }) + ");return n}")(r, b.frag) } function q(a) { a || (a = b); var c = m(a); return r.shivCSS && !f && !c.hasCSS && (c.hasCSS = !!k(a, "article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")), j || p(a, c), a } var c = a.html5 || {}, d = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i, e = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i, f, g = "_html5shiv", h = 0, i = {}, j; (function () { try { var a = b.createElement("a"); a.innerHTML = "<xyz></xyz>", f = "hidden" in a, j = a.childNodes.length == 1 || function () { b.createElement("a"); var a = b.createDocumentFragment(); return typeof a.cloneNode == "undefined" || typeof a.createDocumentFragment == "undefined" || typeof a.createElement == "undefined" } () } catch (c) { f = !0, j = !0 } })(); var r = { elements: c.elements || "abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video", shivCSS: c.shivCSS !== !1, supportsUnknownElements: j, shivMethods: c.shivMethods !== !1, type: "default", shivDocument: q, createElement: n, createDocumentFragment: o }; a.html5 = r, q(b) } (this, b), e._version = d, g.className = g.className.replace(/(^|\s)no-js(\s|$)/, "$1$2") + (f ? " js " + p.join(" ") : ""), e } (this, this.document), function (a, b, c) { function d(a) { return "[object Function]" == o.call(a) } function e(a) { return "string" == typeof a } function f() { } function g(a) { return !a || "loaded" == a || "complete" == a || "uninitialized" == a } function h() { var a = p.shift(); q = 1, a ? a.t ? m(function () { ("c" == a.t ? B.injectCss : B.injectJs)(a.s, 0, a.a, a.x, a.e, 1) }, 0) : (a(), h()) : q = 0 } function i(a, c, d, e, f, i, j) { function k(b) { if (!o && g(l.readyState) && (u.r = o = 1, !q && h(), l.onload = l.onreadystatechange = null, b)) { "img" != a && m(function () { t.removeChild(l) }, 50); for (var d in y[c]) y[c].hasOwnProperty(d) && y[c][d].onload() } } var j = j || B.errorTimeout, l = b.createElement(a), o = 0, r = 0, u = { t: d, s: c, e: f, a: i, x: j }; 1 === y[c] && (r = 1, y[c] = []), "object" == a ? l.data = c : (l.src = c, l.type = a), l.width = l.height = "0", l.onerror = l.onload = l.onreadystatechange = function () { k.call(this, r) }, p.splice(e, 0, u), "img" != a && (r || 2 === y[c] ? (t.insertBefore(l, s ? null : n), m(k, j)) : y[c].push(l)) } function j(a, b, c, d, f) { return q = 0, b = b || "j", e(a) ? i("c" == b ? v : u, a, b, this.i++, c, d, f) : (p.splice(this.i++, 0, a), 1 == p.length && h()), this } function k() { var a = B; return a.loader = { load: j, i: 0 }, a } var l = b.documentElement, m = a.setTimeout, n = b.getElementsByTagName("script")[0], o = {}.toString, p = [], q = 0, r = "MozAppearance" in l.style, s = r && !!b.createRange().compareNode, t = s ? l : n.parentNode, l = a.opera && "[object Opera]" == o.call(a.opera), l = !!b.attachEvent && !l, u = r ? "object" : l ? "script" : "img", v = l ? "script" : u, w = Array.isArray || function (a) { return "[object Array]" == o.call(a) }, x = [], y = {}, z = { timeout: function (a, b) { return b.length && (a.timeout = b[0]), a } }, A, B; B = function (a) { function b(a) { var a = a.split("!"), b = x.length, c = a.pop(), d = a.length, c = { url: c, origUrl: c, prefixes: a }, e, f, g; for (f = 0; f < d; f++) g = a[f].split("="), (e = z[g.shift()]) && (c = e(c, g)); for (f = 0; f < b; f++) c = x[f](c); return c } function g(a, e, f, g, h) { var i = b(a), j = i.autoCallback; i.url.split(".").pop().split("?").shift(), i.bypass || (e && (e = d(e) ? e : e[a] || e[g] || e[a.split("/").pop().split("?")[0]]), i.instead ? i.instead(a, e, f, g, h) : (y[i.url] ? i.noexec = !0 : y[i.url] = 1, f.load(i.url, i.forceCSS || !i.forceJS && "css" == i.url.split(".").pop().split("?").shift() ? "c" : c, i.noexec, i.attrs, i.timeout), (d(e) || d(j)) && f.load(function () { k(), e && e(i.origUrl, h, g), j && j(i.origUrl, h, g), y[i.url] = 2 }))) } function h(a, b) { function c(a, c) { if (a) { if (e(a)) c || (j = function () { var a = [].slice.call(arguments); k.apply(this, a), l() }), g(a, j, b, 0, h); else if (Object(a) === a) for (n in m = function () { var b = 0, c; for (c in a) a.hasOwnProperty(c) && b++; return b } (), a) a.hasOwnProperty(n) && (!c && ! --m && (d(j) ? j = function () { var a = [].slice.call(arguments); k.apply(this, a), l() } : j[n] = function (a) { return function () { var b = [].slice.call(arguments); a && a.apply(this, b), l() } } (k[n])), g(a[n], j, b, n, h)) } else !c && l() } var h = !!a.test, i = a.load || a.both, j = a.callback || f, k = j, l = a.complete || f, m, n; c(h ? a.yep : a.nope, !!i), i && c(i) } var i, j, l = this.yepnope.loader; if (e(a)) g(a, 0, l, 0); else if (w(a)) for (i = 0; i < a.length; i++) j = a[i], e(j) ? g(j, 0, l, 0) : w(j) ? B(j) : Object(j) === j && h(j, l); else Object(a) === a && h(a, l) }, B.addPrefix = function (a, b) { z[a] = b }, B.addFilter = function (a) { x.push(a) }, B.errorTimeout = 1e4, null == b.readyState && b.addEventListener && (b.readyState = "loading", b.addEventListener("DOMContentLoaded", A = function () { b.removeEventListener("DOMContentLoaded", A, 0), b.readyState = "complete" }, 0)), a.yepnope = k(), a.yepnope.executeStack = h, a.yepnope.injectJs = function (a, c, d, e, i, j) { var k = b.createElement("script"), l, o, e = e || B.errorTimeout; k.src = a; for (o in d) k.setAttribute(o, d[o]); c = j ? h : c || f, k.onreadystatechange = k.onload = function () { !l && g(k.readyState) && (l = 1, c(), k.onload = k.onreadystatechange = null) }, m(function () { l || (l = 1, c(1)) }, e), i ? k.onload() : n.parentNode.insertBefore(k, n) }, a.yepnope.injectCss = function (a, c, d, e, g, i) { var e = b.createElement("link"), j, c = i ? h : c || f; e.href = a, e.rel = "stylesheet", e.type = "text/css"; for (j in d) e.setAttribute(j, d[j]); g || (n.parentNode.insertBefore(e, n), m(c, 0)) } } (this, document), Modernizr.load = function () { yepnope.apply(window, [].slice.call(arguments, 0)) };

3.css中代码：

①component.css代码：

@font-face {font-family: 'ecoico';src:url('../fonts/timelineicons/ecoico.eot');src:url('../fonts/timelineicons/ecoico.eot?#iefix') format('embedded-opentype'),url('../fonts/timelineicons/ecoico.woff') format('woff'),url('../fonts/timelineicons/ecoico.ttf') format('truetype'),url('../fonts/timelineicons/ecoico.svg#ecoico') format('svg');font-weight: normal;font-style: normal;} /* Made with http://icomoon.io/ */.cbp_tmtimeline {margin: 30px 0 0 0;padding: 0;list-style: none;position: relative;} /* The line */.cbp_tmtimeline:before {content: '';position: absolute;top: 0;bottom: 0;width: 10px;background: #afdcf8;left: 20%;margin-left: -10px;}.cbp_tmtimeline > li {position: relative;    top: 0px;    left: 0px;}/* The date/time */.cbp_tmtimeline > li .cbp_tmtime {display: block;width: 25%;padding-right: 100px;position: absolute;}.cbp_tmtimeline > li .cbp_tmtime span {display: block;text-align: right;}.cbp_tmtimeline > li .cbp_tmtime span:first-child {font-size: 0.9em;color: #bdd0db;}.cbp_tmtimeline > li .cbp_tmtime span:last-child {font-size: 2.9em;color: #3594cb;}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {color: #6cbfee;}/* Right content */.cbp_tmtimeline > li .cbp_tmlabel {margin: 0 0 15px 25%;background: #3594cb;color: #fff;padding: 2em;font-size: 1.2em;font-weight: 300;line-height: 1.4;position: relative;border-radius: 5px;}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {background: #6cbfee;}.cbp_tmtimeline > li .cbp_tmlabel h2 { margin-top: 0px;padding: 0 0 10px 0;border-bottom: 1px solid rgba(255,255,255,0.4);}/* The triangle */.cbp_tmtimeline > li .cbp_tmlabel:after {right: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-right-color: #3594cb;border-width: 10px;top: 10px;}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {border-right-color: #6cbfee;}/* The icons */.cbp_tmtimeline > li .cbp_tmicon {width: 40px;height: 40px;font-family: 'ecoico';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;font-size: 1.4em;line-height: 40px;-webkit-font-smoothing: antialiased;position: absolute;color: #fff;background: #46a4da;border-radius: 50%;box-shadow: 0 0 0 8px #afdcf8;text-align: center;left: 20%;top: 0;margin: 0 0 0 -25px;}.cbp_tmicon-phone:before {content: "\e000";}.cbp_tmicon-screen:before {content: "\e001";}.cbp_tmicon-mail:before {content: "\e002";}.cbp_tmicon-earth:before {content: "\e003";}/* Example Media Queries */@media screen and (max-width: 65.375em) {.cbp_tmtimeline > li .cbp_tmtime span:last-child {font-size: 1.5em;}}@media screen and (max-width: 47.2em) {.cbp_tmtimeline:before {display: none;}.cbp_tmtimeline > li .cbp_tmtime {width: 100%;position: relative;padding: 0 0 20px 0;}.cbp_tmtimeline > li .cbp_tmtime span {text-align: left;}.cbp_tmtimeline > li .cbp_tmlabel {margin: 0 0 30px 0;padding: 1em;font-weight: 400;font-size: 95%;}.cbp_tmtimeline > li .cbp_tmlabel:after {right: auto;left: 20px;border-right-color: transparent;border-bottom-color: #3594cb;top: -20px;}.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {border-right-color: transparent;border-bottom-color: #6cbfee;}.cbp_tmtimeline > li .cbp_tmicon {position: relative;float: right;left: auto;margin: -55px 5px 0 0px;}}

4.default.css中代码：

/* General Blueprint Style */@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face {font-family: 'bpicons';src:url('../fonts/bpicons/bpicons.eot');src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),url('../fonts/bpicons/bpicons.woff') format('woff'),url('../fonts/bpicons/bpicons.ttf') format('truetype'),url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');font-weight: normal;font-style: normal;} /* Made with http://icomoon.io/ download by http://www.codefans.net*/*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }body, html { font-size: 100%; padding: 0; margin: 0;}/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */.clearfix:before, .clearfix:after { content: " "; display: table; }.clearfix:after { clear: both; }body {    font-family: 'Lato', Calibri, Arial, sans-serif;    color: #47a3da;}a {color: #f0f0f0;text-decoration: none;}a:hover {color: #000;}.main{width: 90%;max-width: 69em;margin: 0 auto;padding: 0 1.875em 3.125em 1.875em;}

5.fonts文件夹文件；（随后附上）

效果如图：

源代码下载

0 0