SOURCE

console 命令行工具 X clear

                    
>
console
<script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>

<link rel='stylesheet prefetch' href='/css/reset.css'>
<div class="timeline-wrap" style="background-color: lightgrey">
    <ul class="timeline timeline--first">
        <li class="era">
            <h2 class="era__title">First Era</h2>
        </li>
        <li class="entry entry--left">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Bacon ipsum dolor amet ball tip jerky sirloin pancetta capicola prosciutto meatball pig leberkas cow pork chop shank meatloaf.</p>
            </div>
        </li>
        <li class="entry entry--right">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Ground round short ribs fatback, salami shoulder sausage chuck shankle landjaeger drumstick ribeye meatloaf doner.</p>
            </div>
        </li>
        <li class="entry entry--left">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Swine pork belly prosciutto jowl pork chop chicken filet mignon cupim doner boudin.</p>
            </div>
        </li>
    </ul>
</div>
<div class="timeline-wrap" style="background-color: silver">
    <ul class="timeline">
        <li class="era">
            <h2 class="era__title">Second Era</h2>
        </li>
        <li class="entry entry--right">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Jerky corned beef jowl cupim hamburger, alcatra meatball swine pork chop ribeye leberkas short loin tenderloin picanha venison.</p>
            </div>
        </li>
        <li class="entry entry--left">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Ribeye turducken flank cupim ball tip ham pork belly venison biltong pork chop jowl andouille spare ribs.</p>
            </div>
        </li>
        <li class="entry entry--right">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Jerky corned beef jowl cupim hamburger, alcatra meatball swine pork chop ribeye leberkas short loin tenderloin picanha venison. Ribeye turducken flank cupim ball tip ham pork belly venison biltong pork chop jowl andouille spare ribs.</p>
            </div>
        </li>
    </ul>
</div>
<div class="timeline-wrap" style="background-color: grey">
    <ul class="timeline">
        <li class="era">
            <h2 class="era__title">Last Era</h2>
        </li>
        <li class="entry entry--left">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Landjaeger cow flank ribeye meatball, corned beef tongue.</p>
            </div>
        </li>
        <li class="entry entry--left">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Landjaeger cow flank ribeye meatball, corned beef tongue.</p>
            </div>
        </li>
        <li class="entry entry--left">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Landjaeger cow flank ribeye meatball, corned beef tongue.</p>
            </div>
        </li>
        <li class="entry entry--right">
            <div class="entry__content">
                <h2>Bacon Ipsum</h2>
                <p>Landjaeger cow flank ribeye meatball, corned beef tongue.</p>
            </div>
        </li>
    </ul>
</div>
* {
    box-sizing: border-box;
}
body {
    background-color: #f1f1f1;
}
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 20px;
    background-color: inherit;
}
.timeline:after {
    content: '';
    position: absolute;
    width: 5px;
    background-color: #0065b3;
    left: 50%;
    top: 0;
    bottom: 0;
    margin-left: -2px;
}
.timeline--first:after {
    top: 20px;
}
.era {
    text-align: center;
    position: relative;
    z-index: 1;
    padding-bottom: 20px;
}
.era__title {
    background-color: #0065b3;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
}
.entry {
    padding: 10px 30px 40px 30px;
    width: 50%;
    position: relative;
    background-color: inherit;
}
.entry--right {
    margin-left: 50%;
}
.entry__content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
}
.entry:before {
    content: " ";
    height: 0;
    position: absolute;
    top: 20px;
    width: 0;
    z-index: 1;
}
.entry--left:before {
    right: 22px;
    border: medium solid transparent;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent white;
}
.entry--right:before {
    left: 22px;
    margin-left: 0;
    border: medium solid transparent;
    border-width: 8px 8px 8px 0;
    border-color: transparent white transparent transparent;
}
.entry:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    right: -19.75px;
    background-color: white;
    border: 4px solid #0065b3;
    top: 10px;
    border-radius: 50%;
    z-index: 1;
}
.entry--right:after {
    right: auto;
    left: -18.75px;
}
/* h2 {
    margin-bottom: 0.5em;
    font-family: sans-serif;
    font-size: 1.2em;
}
p {
    font-family: sans-serif;
    line-height: 1.4;
} */
@media all and (max-width: 500px) {
    .timeline:after {
        left: 33.75px;
    }
    .era {
        text-align: left;
        padding-left: 31.875px;
    }
    .entry {
        width: 100%;
        margin-left: 0;
        padding-left: 64px;
        padding-right: 20px;
    }
    .entry:before {
        right: auto;
        left: 56px;
        margin-left: 0;
        border: medium solid transparent;
        border-width: 8px 8px 8px 0;
        border-color: transparent white transparent transparent;
    }
    .entry:after {
        left: 15px;
    }
}