时间轴制作（响应式）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: 0;
    left: 0;
    z-index: -1;
    background: url(../../images/icon/fixed.png) repeat;
}
/*时间轴导航*/
nav {
    right: 5%;
    z-index: 100;
    position: fixed;
    background: rgba(0,0,0,0.5);
}

ul {
    margin: 0;
    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:0;
}
/*标题*/
.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: 400;
            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: 0;
        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: 0;
        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: 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, 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: 0;
    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: 0;
        width: 0;
        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: 0;
}
/*动画效果*/
.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;
    }
}