08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

Web大前端时代之：HTML5+CSS3入门系列：http://www.cnblogs.com/dunitian/p/5121725.html

大前端系列，主要就是使用CSS3.0来实现，注释我已经打在代码里面了，直接看代码就可以了，后面会说一下CSS3.0系列，这个就当一个引入吧：

简单版本：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <style type="text/css">

        body {

            font-size: 100%;

            color: #7f8c97;

            font-family: '微软雅黑';

            background-color: #e9f0f5;

        }

        /*容器*/

        .paw-container {

            width: 90%;

            margin: 0 auto;

        }

        /*创建一条垂直线*/

        #paw-timeline {

            position: relative;

            padding: 2em 0;

            margin-top: 2em;

            margin-bottom: 2em;

        }

            #paw-timeline::before {

                content: '';

                position: absolute;

                top: 0;

                left: 50%;

                height: 100%;

                width: 4px;

                background: rgba(0,0,0,0.1);

            }

        /*循环小容器*/

        .paw-timeline-block {

            position: relative;

            margin: 3em 0;

        }

            .paw-timeline-block:first-child {

                margin-top: 0;

            }

            .paw-timeline-block:last-child {

                margin-bottom: 0;

            }

        /*轴上的图标*/

        .paw-timeline-icon {

            position: absolute;

            top: 0;

            left: 50%;

            width: 1em;

            height: 1em;

            margin-left: -0.5em;

            border-radius: 50%;

            background: white;

            box-shadow: 0 0 0 3px rgba(9, 229, 34,0.5), 0 0 0 3px rgb(255,255,255);

        }

            /*光晕*/

            .paw-timeline-icon:hover {

                box-shadow: 0 0 0 5px rgba(9, 229, 34,0.5), 0 0 0 3px rgb(255,255,255);

            }

        /*日期*/

        .paw-timeline-datetime {

            position: absolute;

            margin-left: -6em;

            margin-top: -2em;

            width: 7em;

            font-weight: bold;

        }

        /*内容*/

        .paw-timeline-content {

            width: 45%;

            margin-left: 0;

            padding: 1em;

            background: white;

            border-radius: 0.5em;

            box-shadow: 0 3px 0 #d7e4ed;

            overflow: hidden;

            /*不加这个小尖角容易有点问题*/

            position: relative;

        }

            /*第一个元素*/

            .paw-timeline-content:first-child {

                margin-top: 0;

            }

            /*最后一个元素*/

            .paw-timeline-content:last-child {

                margin-bottom: 0;

            }

            /*标题颜色*/

            .paw-timeline-content h3 {

                color: #303e49;

            }

            /*阅读更多 按钮*/

            .paw-timeline-content .paw-read-more {

                float: left;

                color: white;

                border-radius: 0.25em;

                padding: 0.7em 1em;

                background-color: #424242;

                text-decoration: none;

            }

                /*阅读更多 按钮特效*/

                .paw-timeline-content .paw-read-more:hover {

                    background: #acb7c0;

                }

        /*小尖角*/

        .paw-timeline-main::before {

            content: '';

            top: 16px;

            height: 0;

            width: 0;

            left: 100%;

            position: absolute;

            border-left: 7px solid white;

            border: 7px solid transparent;

        }

        /*偶数个设置新样式*/

        .paw-timeline-content:nth-child(2n) {

            float: right;

        }

        /*清除浮动*/

        .paw-timeline-content:nth-child(2n+1) {

            clear: both;

        }

        .paw-timeline-content:nth-child(2n) .paw-read-more {

            float: right;

        }

        /*小尖角反向*/

        .paw-timeline-content:nth-child(2n) .paw-timeline-main::before {

            content: '';

            left: auto;

            right: 100%;

            border: 7px solid transparent;

            border-right: 7px solid white;

        }

    </style>

</head>

<body>

    <section id="paw-timeline" class="paw-container">

        <header><h2>2016年</h2></header>

        <!--循环-->

        <div>

            <h3>03月</h3>

            <!--循环-->

            <div class="paw-timeline-block">

                <!--时间-->

                <div class="paw-timeline-icon">

                    <span class="paw-timeline-datetime">2016-03-17</span>

                </div>

                <!--循环内容-->

                <div class="paw-timeline-content">

                    <header class="paw-timeline-main">

                        <h3>标题</h3>

                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>

                    </header>

                </div>

                <div class="paw-timeline-content">

                    <header class="paw-timeline-main">

                        <h3>标题</h3>

                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>

                    </header>

                </div>

                <div class="paw-timeline-content">

                    <header class="paw-timeline-main">

                        <h3>标题</h3>

                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>

                    </header>

                </div>

                <div class="paw-timeline-content">

                    <header class="paw-timeline-main">

                        <h3>标题</h3>

                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>

                    </header>

                </div>

            </div>

            <div class="paw-timeline-block">

                <!--时间-->

                <div class="paw-timeline-icon">

                    <span class="paw-timeline-datetime">2016-03-16</span>

                </div>

                <!--循环内容-->

                <div class="paw-timeline-content">

                    <header class="paw-timeline-main">

                        <h3>标题</h3>

                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>

                    </header>

                </div>

                <div class="paw-timeline-content">

                    <header class="paw-timeline-main">

                        <h3>标题</h3>

                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>

                    </header>

                </div>

                <div class="paw-timeline-content">

                    <header class="paw-timeline-main">

                        <h3>标题</h3>

                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>

                    </header>

                </div>

                <div class="paw-timeline-content">

                    <header class="paw-timeline-main">

                        <h3>标题</h3>

                        <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        <a href="#" class="paw-read-more" target="_blank">阅读全文</a>

                    </header>

                </div>

            </div>

        </div>

    </section>

</body>

</html>

逆天版本：在线浏览：http://dnt.dkill.net/dnt/pawchina/temp/note.html

note.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>欢迎来到PAW时光日记</title>

    <!--[if lte IE ]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->

    <link rel="stylesheet" href="assets/css/common.css" />

    <link rel="stylesheet" href="assets/css/note.css" />

</head>

<body style="background: url('images/bg.jpg') repeat fixed center 0;">

    <div class="bg-fixed"></div>

    <!--时间轴导航-->

    <nav>

        <ul>

            <li>

                <a href="#2016" class="nav-year">2016年</a>

                <ul class="nav-month">

                    <li><a href="#201603">03月</a></li>

                    <li><a href="#201602">02月</a></li>

                </ul>

            </li>

            <li>

                <a href="#2015" class="nav-year">2015年</a>

                <ul class="nav-month">

                    <li><a href="#201503">03月</a></li>

                </ul>

            </li>

        </ul>

    </nav>

    <!--顶部标题-->

    <header class="time-header">

        <h1>欢迎来到PAW时光日记 <span>Welcome to PAW the time diary</span></h1>

        <div class="time-header-links">

            <a class="fa fa-home" href="index.html" title="返回Home" target="_blank"></a>

            <a class="fa fa-mail-forward" href="index.html#pawnote" title="返回Note"></a>

        </div>

    </header>

    <!--每年循环-->

    <section class="paw-timeline paw-container">

        <div class="paw-timeline-icon">

            <h2><a name="">2016年</a></h2>

        </div>

        <!--每月循环-->

        <div class="paw-timeline-month">

            <div class="paw-timeline-icon">

                <h3><a name="">03月</a></h3>

            </div>

            <!--每天循环-->

            <div class="paw-timeline-block">

                <!--时间-->

                <div class="paw-timeline-icon">

                    <span class="paw-timeline-datetime">--</span>

                </div>

                <!--循环内容-->

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

            </div>

            <div class="paw-clear"></div>

            <!--每天循环-->

            <div class="paw-timeline-block">

                <!--时间-->

                <div class="paw-timeline-icon">

                    <span class="paw-timeline-datetime">--</span>

                </div>

                <!--循环内容-->

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

            </div>

            <div class="paw-clear"></div>

        </div>

        <!--每月循环-->

        <div class="paw-timeline-month">

            <div class="paw-timeline-icon">

                <h3><a name="">02月</a></h3>

            </div>

            <!--每天循环-->

            <div class="paw-timeline-block">

                <!--时间-->

                <div class="paw-timeline-icon">

                    <span class="paw-timeline-datetime">--</span>

                </div>

                <!--循环内容-->

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

            </div>

            <div class="paw-clear"></div>

            <!--每天循环-->

            <div class="paw-timeline-block">

                <!--时间-->

                <div class="paw-timeline-icon">

                    <span class="paw-timeline-datetime">--</span>

                </div>

                <!--循环内容-->

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

            </div>

            <div class="paw-clear"></div>

        </div>

    </section>

    <!--每年循环-->

    <section class="paw-timeline paw-container">

        <div class="paw-timeline-icon">

            <h2><a name="">2015年</a></h2>

        </div>

        <!--每月循环-->

        <div class="paw-timeline-month">

            <div class="paw-timeline-icon">

                <h3><a name="">03月</a></h3>

            </div>

            <!--每天循环-->

            <div class="paw-timeline-block">

                <!--时间-->

                <div class="paw-timeline-icon">

                    <span class="paw-timeline-datetime">--</span>

                </div>

                <!--循环内容-->

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

            </div>

            <div class="paw-clear"></div>

            <!--每天循环-->

            <div class="paw-timeline-block">

                <!--时间-->

                <div class="paw-timeline-icon">

                    <span class="paw-timeline-datetime">--</span>

                </div>

                <!--循环内容-->

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

                <div class="paw-timeline-content">

                    <a href="#" target="_blank">

                        <header class="paw-timeline-main">

                            <h3>标题</h3>

                            <p>内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。内容简介。。。</p>

                        </header>

                    </a>

                    <div>

                        <img src="http://dnt.dkill.net/Images/article/19.jpg" alt="" />

                    </div>

                </div>

            </div>

            <div class="paw-clear"></div>

        </div>

    </section>

    <hr />

    <footer class="copyright">

        Copyright &copy;  All rights<span>Author：<a href="#">Paw & DNT</a></span>

    </footer>

    <!--返回顶部-->

    <div id="pawtop">

        <div class="top-1"></div>

        <div class="top-2"></div>

    </div>

    <!-- 脚本引入 -->

    <script src="assets/js/jquery.min.js"></script>

    <!--[if lte IE ]><script src="assets/js/ie/respond.min.js"></script><![endif]-->

    <script src="assets/js/common.js"></script>

    <script type="text/javascript">

        $(function () {

            $('.nav-month').eq().css('display', 'block');

        });

        $('.nav-year').click(function () {

            $('.nav-month').fadeOut();

            $(this).next('ul').css('display', 'block');

        });

    </script>

</body>

</html>

note.css

@import url("fonts.css");

@import url("font-awesome.min.css");

body {

    font-size: 100%;

    color: white;

    font-family: 'Source Sans Pro','微软雅黑', sans-serif;

    background-color: #e9f0f5;

}

.bg-fixed {

    width: 100%;

    height: 100%;

    position: fixed;

    top:;

    left:;

    z-index: -1;

    background: url(../../images/icon/fixed.png) repeat;

}

/*时间轴导航*/

nav {

    right: 5%;

    z-index:;

    position: fixed;

    background: rgba(0,0,0,0.5);

}

ul {

    margin:;

    padding: 0.5em;

    list-style: none;

}

    ul a {

        color: white;

        font-family: '宋体';

        font-weight: bold;

        text-decoration: none;

    }

        ul a:hover {

            color: rgb(3, 151, 255);

        }

.nav-month {

    display: none;

}

.nav-month a{

    color:#dbdbdb;

}

.nav-month li{

    margin-bottom:0.5em;

}

.nav-month li:last-child{

    margin-bottom:;

}

/*标题*/

.time-header {

    text-align: center;

    margin: 3em auto;

}

    .time-header h1 {

        font-weight: normal;

        letter-spacing: 0.1em;

    }

        .time-header h1 span {

            display: block;

            font-size: 60%;

            font-weight:;

            padding: 0.8em 0 0.5em 0;

            color: #dde1e5;

        }

/*超链接*/

.time-header-links {

    margin-top: -1em;

    margin-bottom: 0.5em;

    position: relative;

    display: inline-block;

    white-space: nowrap;

}

    /*图标*/

    .time-header-links a {

        color: rgba(0,0,0,0.5);

        text-decoration: none;

        font-size: 1.5em;

        padding: 0.1em 0.4em;

    }

        .time-header-links a:hover {

            color: #2fa0ec;

        }

    /*中间的分隔符*/

    .time-header-links::after {

        position: absolute;

        top:;

        left: 50%;

        margin-left: -1px;

        width: 2px;

        height: 100%;

        background: #dbdbdb;

        content: '';

        -webkit-transform: rotate3d(0,0,1,22.5deg);

        transform: rotate3d(0,0,1,22.5deg);

    }

/*容器*/

.paw-container {

    width: 90%;

    margin: 0 auto;

}

/*创建一条垂直线*/

.paw-timeline {

    position: relative;

    padding: 2em 0;

    margin-top: 2em;

    margin-bottom: 2em;

}

    .paw-timeline::before {

        content: '';

        position: absolute;

        top:;

        left: 50%;

        height: 100%;

        width: 4px;

        background: rgba(9, 138, 229, 0.68);

    }

/*年份容器*/

.paw-container .paw-timeline-icon h2 {

    position: absolute;

    margin-left: -1em;

    margin-top: -1.5em;

    width: 7em;

    color: rgba(0,0,0,0.7);

}

/*月份容器*/

.paw-timeline-month {

    margin-bottom: 5em;

}

    .paw-timeline-month:last-child {

        margin-bottom: -3em;

    }

    .paw-timeline-month .paw-timeline-icon {

        top: inherit;

    }

        .paw-timeline-month .paw-timeline-icon h3 {

            position: absolute;

            margin-left: -2.5em;

            margin-top: -3.5em;

            width: 7em;

            color: rgba(0,0,0,0.6);

        }

/*每天容器*/

.paw-timeline-block {

    position: relative;

    margin: 3em 0;

}

    .paw-timeline-block:first-child {

        margin-top:;

    }

    .paw-timeline-block:last-child {

        margin-bottom:;

    }

/*轴上的图标*/

.paw-timeline-icon {

    position: absolute;

    top:;

    left: 50%;

    width: 1em;

    height: 1em;

    margin-left: -0.5em;

    border-radius: 50%;

    background: white;

    box-shadow: 0 0 0 3px rgba(9, 138, 229, 0.68);

}

    /*光晕*/

    .paw-timeline-icon:hover {

        box-shadow: 0 0 0 5px rgba(9, 229, 34,0.5), 0 0 0 3px rgb(255,255,255);

    }

/*日期*/

.paw-timeline-datetime {

    position: absolute;

    margin-left: -5em;

    margin-top: -2em;

    width: 7em;

    font-weight: bold;

}

/*内容*/

.paw-timeline-content {

    width: 45%;

    padding: 1em;

    margin-left:;

    background: white;

    border-radius: 0.5em;

    box-shadow: 0 3px 0 #d7e4ed;

    /*不加这个小尖角容易有点问题*/

    position: relative;

}

    /*标题颜色*/

    .paw-timeline-content h3 {

        color: #303e49;

    }

    /*段落首行缩进*/

    .paw-timeline-content p {

        text-indent: 1em;

        line-height: 1.8em;

    }

    /*阅读更多 超链接*/

    .paw-timeline-content a {

        text-decoration: none;

        color: #7f8c97;

    }

        /*阅读更多 超链接*/

        .paw-timeline-content a:hover {

            color: #0094ff;

        }

    /*小尖角*/

    .paw-timeline-content .paw-timeline-main::before {

        content: '';

        top: 16px;

        height:;

        width:;

        left: 100%;

        position: absolute;

        border: 7px solid transparent;

        border-left: 7px solid white;

    }

/*展览图*/

.paw-timeline-block img {

    max-width: 100%;

    min-width: 100%;

}

/*偶数个设置新样式*/

.paw-timeline-content:nth-child(2n) {

    float: right;

}

/*清除浮动*/

.paw-timeline-content:nth-child(2n+1) {

    /*clear: right;*/

    margin-bottom: 2em;

}

/*小尖角反向*/

.paw-timeline-content:nth-child(2n) .paw-timeline-main::before {

    content: '';

    left: auto;

    right: 100%;

    border: 7px solid transparent;

    border-right: 7px solid white;

}

.paw-bottom-icon .paw-bottom-icon {

    top: inherit;

    bottom:;

}

/*动画效果*/

.paw-flash {

    -webkit-transition: all 2s ease;

    -moz-transition: all 2s ease;

    -o-transition: all 2s ease;

    transition: all 2s ease;

}

/*清除浮动*/

.paw-clear {

    clear: both;

}

/*分割线*/

hr {

    margin-top: -2em;

}

/*版权系列*/

.copyright {

    text-align: center;

    font-size: 1em;

    font-family: '微软雅黑';

}

    .copyright span {

        padding-left: 1.25em;

    }

    .copyright a {

        color: #d8d3d3;

        text-decoration: none;

    }

        .copyright a:hover {

            color: black;

        }

@media only screen and (max-width: 1170px) {

    /*时间轴*/

    .paw-timeline-icon, .paw-timeline::before {

        left: 0;

    }

    /*年份容器*/

    .paw-container .paw-timeline-icon h2 {

        margin-left: -1em;

        margin-top: -1.3em;

    }

    /*月份容器*/

    .paw-timeline-month .paw-timeline-icon h3 {

        margin-left: -0.7em;

        margin-top: -3em;

    }

    /*时间*/

    .paw-timeline-datetime {

        margin-left: 1.5em;

        margin-top: -2em;

    }

    .paw-timeline-content {

        width: 80%;

        position: relative;

        margin: 2em 3em;

    }

        .paw-timeline-content:nth-child(2n) {

            float: none;

        }

        .paw-timeline-content:nth-child(2n+1) .paw-timeline-main::before {

            right: 100%;

            left: auto;

            border: 7px solid transparent;

            border-right: 7px solid white;

        }

    .copyright span {

        display: block;

    }

}

有网友需要，那我就源码奉上了：http://pan.baidu.com/s/1jHKcBL8

08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴的更多相关文章

08. Web大前端时代之：HTML5+CSS3入门系列~H5 Web存储
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html
Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...
02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素可以理解为语义话标记,比如:以前这么写&l ...
03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...
04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入概述音频文件或视频文件都可以看做是一个容器文 ...
06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

随机推荐

install hdp 2.2 on ubuntu 14.04
http://www.swiss-scalability.com/2014/12/install-hdp-22-on-ubuntu-1404-trusty.html 在新加节点上运行 sed -e & ...
Ubuntu 树莓派2b交叉编译环境
在一个平台上生成另一个平台上的可执行代码.为什么要大费周折的进行交叉编译呢?一句话:不得已而为之.有时是因为目的平台上不允许或不能够安装所需要的编译器,而又需要这个编译器的某些特征:有时是因为目的平台 ...
js与多行字符串
JS里并没有标准的多行字符串的表示方法,但是在用模板的时候,为了保证模板的可阅读性,我们又不可避免的使用多行字符串,所以出现了各种搞法,这里以一段jade的模板作为示例,简单总结和对比一下. 字符串相 ...
Web前端性能测试-性能测试知多少---深入分析前端站点的性能
针对目前接手的web前端的性能,一时间不知道从什么地方入手,然后经过查找资料,发现其实还是蛮简单的. 前端性能测试对象: HTML.CSS.JS.AJAX等前端技术开发的Web页面影响用户浏览网页速 ...
weex append
append有两个值:其中的一个是tree, 另外一个是node. 不会像数据绑定一样对最后的渲染结果有影响.但它决定是否会影响整个节点的重绘还是只是某一个地方的内容会重绘. append=" ...
国内外三个不同领域巨头分享的Redis实战经验及使用场景
Redis不是比较成熟的memcache或者Mysql的替代品,是对于大型互联网类应用在架构上很好的补充.现在有越来越多的应用也在纷纷基于Redis做架构的改造.首先简单公布一下Redis平台实际情况 ...
druid sql黑名单报异常 sql injection violation, part alway true condition not allow
最近使用druid,发现阿里这个连接池真的很好用,可以监控到连接池活跃连接数开辟到多少个连接数关闭了多少个,对于我在项目中查看错误问题,很有帮助, 但是最近发现里面有条sql语句被拦截了, ...
移动前端不得不了解的html5 head 头标签
本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...
day3 Linux基础
1.正文处理命令及tar命令 1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) cat /etc/passwd /etc/group >1.txt2) 将用户信 ...
【转】GitHub 排名前 100 的安卓、iOS项目简介
GitHub Android Libraries Top 100 简介排名完全是根据 GitHub 搜索 Java 语言选择 (Best Match) 得到的结果, 然后过滤了跟 Android 不 ...

08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴的更多相关文章

随机推荐

热门专题