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空间时间轴的更多相关文章

  1. 08. Web大前端时代之：HTML5+CSS3入门系列~H5 Web存储

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

  2. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  3. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

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

  4. 01.Web大前端时代之：HTML5+CSS3入门系列~初识HTML5

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!--文档类型申明,html代表是ht ...

  5. 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  6. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  7. 04. Web大前端时代之：HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  8. 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  9. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

随机推荐

  1. C++-文件【1】-按行读文本文件的两种方法

    测试环境—— 系统:Win7 64bit 编译器:TDM-GCC 4.9.2 64-bit Release #include <iostream> #include <fstream ...

  2. 【原】iOS学习之NSDate在项目中的一些类目扩展

    在项目中,我们可能会面对各种各样的对于时间的需求,在这里提供几种可能会用到的需求代码 1.与今天的时间做比较,返回日期差值 代码: - (NSInteger)compareWithToday { NS ...

  3. nginx：文件下载指定保存文件名的配置

    一般在我们上传完资源文件之后,为了避免文件名冲突,会将文件名改成毫无意义的一段字符.这个字符,可能是MD5产生的,或者是其他方式产生的字符串.这时候,下载的时候,默认保存的文件名会是这段毫无意义的文件 ...

  4. Ubuntu 14.04(amd64)安装Oracle11g XE(x64)

    下载Oracle安装包 下载地址：Oracle Database Express Edition 11g Release 2 for Linux x64 安装办法 1、建立oracle用户及属主 ad ...

  5. ajax内调用WCF服务

    WCF可以当作WebService一样被调用,在html内通过ajax调用WCF服务的方法如下: 1.新建一个WCF服务的网站项目: 2.在项目内增加一个新项:启用了ajax的WCF服务: 3.在对应 ...

  6. mysql单列去重复group by分组取每组前几条记录加order by排序

    mysql分组取每组前几条记录(排名) 附group by与order by的研究,需要的朋友可以参考下 --按某一字段分组取最大(小)值所在行的数据 复制代码代码如下: /* 数据如下: name ...

  7. 异常处理_Maven多模块web项目整合ssm+dubbo

    异常如下: [ERROR][org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader. ...

  8. USACO翻译：USACO 2012 JAN三题（2）

    USACO 2012 JAN(题目二) 一.题目概览 中文题目名称 叠干草 分干草 奶牛联盟 英文题目名称 stacking baleshare cowrun 可执行文件名 stacking bale ...

  9. XCod5 SVN

    近日开始学习IOS开发, 涉及版本管理问题,老大说要使用SVN, 在Windows系统中使用SVN的经验使得俺以为需要首先安装SVN,然后再配置等等, 殊不知XCode5中已经内置了SVN, 在百度一 ...

  10. DBImport v3.5 中文版发布：数据库定时同步及文档生成工具（IT人员必备）

    前言: 趁着最近的休息时间,只能多勤快些:多写代码,多更新文章. 因为一旦投入新的工作,估计博客又会恢复到一年才产几篇的状态. 对于DBImport,因为用户的意见,增加了一个亮点功能,让软件B格升为 ...