CSS3 原质化设计的移动消息列表

移动即时通讯Web应用/网页模板

CSS3，原质化，列表

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1496
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* ALERT */

@import url(http://fonts.googleapis.com/css?family=Raleway:500,600,700,800,900,400);
body {
    background: #4ebcff;
    font-family: 'Raleway', sans-serif;
    background-size: 100% 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}
body header {
    width: 80%;
    text-align: center;
    margin: auto;
}
body header h1 {
    margin-top: 40px;
    color: #fff;
    font-weight: 100;
}
body .container {
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
    width: 80%;
    text-align: center;
    height: 480px;
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    margin: auto;
    top: 0;
    bottom: 0;
}
body .container_heading {
    position: fixed;
    z-index: 9999;
    height: 60px;
    width: 80%;
    background: #333658;
}
body .container_heading .header_icon {
    float: left;
    text-align: left;
}
body .container_heading .header_icon img {
    margin: 17px 20px 20px 20px;
    cursor: pointer;
}
body .container_heading h1 {
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0;
    font-size: 16px;
    float: left;
    width: 33%;
    letter-spacing: 1px;
    line-height: 64px;
}
body .container_heading .header_icon {
    float: left;
    width: 33%;
    height: 40px;
}
body .container_heading .menu_icon {
    width: 33%;
    float: left;
    text-align: right;
    position: relative;
    top: 25px;
    right: 20px;
    cursor: pointer;
}
body .container_heading .menu_icon div {
    width: 21px;
    height: 2px;
    float: right;
    display: block;
    margin-bottom: 3px;
    border-radius: 1px;
    clear: both;
    background: rgba(0, 0, 0, 0.26);
}
body .container_ui {
    position: absolute;
    padding-top: 61px;
    width: 100%;
    background: white;
    height: 600px;
    overflow: scroll;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition-property: opacity, top;
    transition-property: opacity, top;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-animation: pop 0.5s forwards;
    animation: pop 0.5s forwards;
}
body .container_ui input[type="checkbox"] {
    display: none;
}
body .container_ui label:hover > .container_ui__item .face .color_bar {
    width: 100%;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
body .container_ui label:hover > .container_ui__item .face .color_bar span {
    opacity: 1;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}
body .container_ui label:hover > .container_ui__item .face .color_bar p {
    opacity: 0;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand {
    -webkit-transition-property: left, opacity;
    transition-property: left, opacity;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    left: 0;
    z-index: 2;
    opacity: 1;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
}
body .container_ui .container_ui__expand label {
    width: 10px;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #a6a6a6;
}
body .container_ui .container_ui__expand label:hover {
    color: #444;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand label {
    pointer-events: auto;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand .body .user .face img {
    -webkit-animation: pop 0.5s 0.5s forwards;
    animation: pop 0.5s 0.5s forwards;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand .body .user .details {
    -webkit-animation: popup 0.5s 0.5s forwards;
    animation: popup 0.5s 0.5s forwards;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand .body .content {
    -webkit-animation: popup 0.5s 0.7s forwards;
    animation: popup 0.5s 0.7s forwards;
}
body .container_ui input[type="checkbox"]:not(:checked) + label > .container_ui__expand .body .user .face img {
    -webkit-animation: poprev 0.5s 0.5s forwards;
    animation: poprev 0.5s 0.5s forwards;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__item .face .color_bar {
    right: auto;
    width: 150px;
    height: 71px;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__item .face .color_bar p {
    opacity: 1;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__item .face .color_bar span {
    display: none;
}
body .container_ui label {
    cursor: pointer;
    display: block;
    max-height: 71px;
    float: left;
    width: 100%;
    overflow: hidden;
}
body .container_ui label:hover > .container_ui__item {
    background-color: #eaeaea !important;
}
body .container_ui label .container_ui__item {
    pointer-events: none;
}
body .container_ui__item {
    width: 100%;
    float: left;
    height: 74px;
    text-align: left;
    color: white;
    background: #fff;
    cursor: pointer;
    border: 1px solid #eee;
}
body .container_ui__item h2,
body .container_ui__item h3,
body .container_ui__item h4 {
    color: black;
}
body .container_ui__item h2 {
    font-size: 11px;
    display: inline-block;
    color: #515151;
    text-transform: uppercase;
    font-weight: 800;
    margin: 10px 0px 0px 0px;
    padding-top: 0px;
}
body .container_ui__item h3 {
    font-size: 8px;
    font-weight: 800;
    margin: 5px 0px 10px 0px;
    text-transform: uppercase;
    color: #b2b2b2;
}
body .container_ui__item h4 {
    font-size: 10px;
    font-weight: 600;
    margin: 0;
    color: #919191;
}
body .container_ui__item .face {
    float: left;
    clear: left;
    margin: 0;
    margin-right: 10px;
    position: relative;
}
body .container_ui__item .face img {
    height: 81px;
}
body .container_ui__item .face .color_bar {
    float: right;
    width: 6px;
    background: #56b699;
    position: absolute;
    right: 0;
    text-align: center;
    height: 71px;
    top: 0;
    z-index: 1;
}
body .container_ui__item .face .color_bar p {
    opacity: 0;
    margin-top: 26px;
}
body .container_ui__item .face .color_bar span {
    opacity: 0;
    font-size: 12px;
    position: relative;
    top: -56px;
}
body .container_ui .dot {
    width: 6px;
    height: 6px;
    background: #0091ea;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    top: -1px;
    z-index: 0;
    left: 3px;
}
body .container_ui .active {
    background: #6cbe63;
}
body .container_ui__expand {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 61px;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    -webkit-transition-property: left, opacity;
    transition-property: left, opacity;
    opacity: 0;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    left: 0;
    z-index: -1;
    background: white;
}
body .container_ui__expand .body .content {
    width: 100%;
    text-align: left;
    opacity: 0;
    overflow: scroll;
    padding-bottom: 60px;
}
body .container_ui__expand .body .content img {
    width: 100%;
    max-width: 100%;
}
body .container_ui__expand .body .content p {
    text-align: left;
    font-size: 1em;
    line-height: 1.5em;
    padding: 5px 25px;
    color: #9b9b9b;
    font-weight: 500;
}
body .container_ui__expand .body .content p b {
    color: #444;
}
body .container_ui__expand .body .content span {
    display: block;
    padding: 0px 25px;
    font-weight: 800;
    position: relative;
    top: -10px;
    font-size: 10px;
    color: #7d7d7d;
}
body .container_ui__expand .body .content textarea {
    margin: 0px 25px;
    width: 295px;
    resize: none;
    border: 1px solid #e0e0e0;
    height: 60px;
    border-radius: 3px;
}
body .container_ui__expand .body .user .details {
    opacity: 0;
    top: 10px;
    padding-left: 40px;
    position: relative;
    float: left;
    width: 240px;
    text-align: left;
}
body .container_ui__expand .body .user .details h2 {
    font-size: 14px;
    display: inline-block;
    color: #515151;
    text-transform: uppercase;
    font-weight: 800;
    margin: 13px 0px 0px 0px;
    padding-top: 0px;
}
body .container_ui__expand .body .user .details h3 {
    font-size: 12px;
    font-weight: 300;
    margin: 5px 0px 10px 0px;
    text-transform: uppercase;
    color: #b2b2b2;
}
body .container_ui__expand .body .user .details h4 {
    font-size: 10px;
    font-weight: 600;
    margin: 0;
    color: #919191;
}
body .container_ui__expand .body .user .face {
    float: left;
}
body .container_ui__expand .body .user .face img {
    width: 40px;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    border-radius: 100%;
    border: 2px solid white;
    margin: 10px 25px;
}
body .container_ui__expand .heading {
    height: 10px;
    width: 100%;
    background: #56b699;
}
body .container_ui__expand .heading_head h1 {
    color: #aeb1d8;
    text-transform: uppercase;
    font-weight: 700;
    height: 10px;
    margin: 0;
    font-size: 12px;
    float: left;
    width: 100%;
    letter-spacing: 1px;
    line-height: 64px;
}
.one {
    background: #0091ea !important;
}
.two {
    background: #0091ea !important;
}
.three {
    background: #0091ea !important;
}
.four {
    background: #0091ea !important;
}
.five {
    background: #0091ea !important;
}
.six {
    background: #0091ea !important;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand a {
    pointer-events: auto;
}
@-webkit-keyframes pop {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes pop {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes poprev {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@keyframes poprev {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@-webkit-keyframes popup {
    from {
        top: 10px;
        opacity: 0;
    }
    to {
        top: 0px;
        opacity: 1;
    }
}
@keyframes popup {
    from {
        top: 10px;
        opacity: 0;
    }
    to {
        top: 0px;
        opacity: 1;
    }
}
.wrapper {
    -webkit-animation: bg 10s infinite;
    animation: bg 10s infinite;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
@-webkit-keyframes bg {
    0% {
        background-image: -webkit-radial-gradient(10% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    10% {
        background-image: -webkit-radial-gradient(20% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    20% {
        background-image: -webkit-radial-gradient(30% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    40% {
        background-image: -webkit-radial-gradient(40% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    50% {
        background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    60% {
        background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    70% {
        background-image: -webkit-radial-gradient(40% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    80% {
        background-image: -webkit-radial-gradient(30% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    90% {
        background-image: -webkit-radial-gradient(20% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    100% {
        background-image: -webkit-radial-gradient(10% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
}
@keyframes bg {
    0% {
        background-image: -webkit-radial-gradient(10% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    10% {
        background-image: -webkit-radial-gradient(20% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    20% {
        background-image: -webkit-radial-gradient(30% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    40% {
        background-image: -webkit-radial-gradient(40% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    50% {
        background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    60% {
        background-image: -webkit-radial-gradient(50% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    70% {
        background-image: -webkit-radial-gradient(40% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    80% {
        background-image: -webkit-radial-gradient(30% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    90% {
        background-image: -webkit-radial-gradient(20% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
    100% {
        background-image: -webkit-radial-gradient(10% 50%, ellipse cover, rgba(255, 255, 255, 0.3) 5%, rgba(0, 0, 0, 0.4) 100%);
    }
}
.alert {
    -webkit-animation: cc 3s linear 1s infinite alternate;
    animation: cc 3s linear 3s infinite alternate;
    color: #fff;
}
@-webkit-keyframes cc {
    0% {
        color: #fff;
    }
    50% {
        color: #edd;
        font-weight: 900;
    }
    100% {
        color: #fff;
    }
}
@keyframes cc {
    0% {
        color: #fff;
    }
    50% {
        color: #edd;
        font-weight: 900;
    }
    100% {
        color: #fff;
    }
}

HTML

<div class="wrapper">
    <header>
        <h1 class="alert">Mobile Messenger</h1>
    </header>
    <div class='container'>
        <div class='container_heading'>
            <h1>Material Example</h1>
        </div>
        <div class='container_ui'>
            <input id='message-1' type='checkbox'>
            <label for='message-1' href='#move'>
                <div class='container_ui__item'>
                    <div class='face'>
                        <img src='/assets/coolboy.jpg'>
                        <div class='color_bar one'>
                            <p>Now Reading</p>
                            <span>Read</span>
                        </div>
                    </div>
                    <h2>aspca</h2>
                    <div class='dot active'></div>
                    <h3>subj: thanks, you are amazing</h3>
                    <h4>Your generous donation saved 3 million puppies...</h4>
                </div>
                <div class='container_ui__expand' id='close'>
                    <div class='heading'>
                        <div class='heading_head'></div>
                        <label for='message-1'>x</label>
                    </div>
                    <div class='body'>
                        <div class='user'>
                            <div class='face'>
                                <img src='/assets/coolboy.jpg'>
                            </div>
                            <div class='details'>
                                <h2>aspca</h2>
                                <h3>subj: thanks you are amazing</h3>
                            </div>
                        </div>
                        <div class='content'>
                            <p><b>Email text</b>
                                </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus
                                in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.
                                <br/>
                                <br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis
                                rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
                            <span>Reply:</span>
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
            </label>
            <input id='message-2' type='checkbox'>
            <label for='message-2'>
                <div class='container_ui__item'>
                    <div class='face'>
                        <img src='/assets/coolgirl.jpg'>
                        <div class='color_bar two'>
                            <p>Now Reading</p>
                            <span>Read</span>
                        </div>
                    </div>
                    <h2>Nobel prize foundation</h2>
                    <div class='dot'></div>
                    <h3>subj: Your paper on molecular fusion</h3>
                    <h4>We are awarding you the nobel...</h4>
                </div>
                <div class='container_ui__expand'>
                    <div class='heading two'>
                        <div class='heading_head'>
                            <label for='message-2'>
                                x
                            </label>
                        </div>
                    </div>
                    <div class='body'>
                        <div class='user'>
                            <div class='face'>
                                <img src='/assets/coolgirl.jpg'>
                            </div>
                            <div class='details'>
                                <h2>Nobel prize foundation</h2>
                                <h3>subj: Your paper on molecular</h3>
                            </div>
                        </div>
                        <div class='content'>
                            <p><b>Email text</b>
                                </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus
                                in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.
                                <br/>
                                <br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis
                                rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
                            <span>Reply:</span>
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
            </label>
            <input id='message-1' type='checkbox'>
            <label for='message-1' href='#move'>
                <div class='container_ui__item'>
                    <div class='face'>
                        <img src='/assets/coolboy.jpg'>
                        <div class='color_bar one'>
                            <p>Now Reading</p>
                            <span>Read</span>
                        </div>
                    </div>
                    <h2>aspca</h2>
                    <div class='dot active'></div>
                    <h3>subj: thanks, you are amazing</h3>
                    <h4>Your generous donation saved 3 million puppies...</h4>
                </div>
                <div class='container_ui__expand' id='close'>
                    <div class='heading'>
                        <div class='heading_head'></div>
                        <label for='message-1'>x</label>
                    </div>
                    <div class='body'>
                        <div class='user'>
                            <div class='face'>
                                <img src='/assets/coolboy.jpg'>
                            </div>
                            <div class='details'>
                                <h2>aspca</h2>
                                <h3>subj: thanks you are amazing</h3>
                            </div>
                        </div>
                        <div class='content'>
                            <p><b>Email text</b>
                                </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus
                                in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.
                                <br/>
                                <br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis
                                rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
                            <span>Reply:</span>
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
            </label>
            <input id='message-2' type='checkbox'>
            <label for='message-2'>
                <div class='container_ui__item'>
                    <div class='face'>
                        <img src='/assets/coolgirl.jpg'>
                        <div class='color_bar two'>
                            <p>Now Reading</p>
                            <span>Read</span>
                        </div>
                    </div>
                    <h2>Nobel prize foundation</h2>
                    <div class='dot'></div>
                    <h3>subj: Your paper on molecular fusion</h3>
                    <h4>We are awarding you the nobel...</h4>
                </div>
                <div class='container_ui__expand'>
                    <div class='heading two'>
                        <div class='heading_head'>
                            <label for='message-2'>
                                x
                            </label>
                        </div>
                    </div>
                    <div class='body'>
                        <div class='user'>
                            <div class='face'>
                                <img src='/assets/coolgirl.jpg'>
                            </div>
                            <div class='details'>
                                <h2>Nobel prize foundation</h2>
                                <h3>subj: Your paper on molecular</h3>
                            </div>
                        </div>
                        <div class='content'>
                            <p><b>Email text</b>
                                </br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et commodo ipsum, ut rhoncus velit. Nullam placerat, ipsum sed pretium varius, magna metus ullamcorper magna, at porta quam libero ut est. Mauris cursus
                                in magna in fermentum. Integer mollis convallis quam, vel dignissim ligula rutrum in.
                                <br/>
                                <br/>Pellentesque ut purus porta, gravida tellus et, consectetur massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque egestas convallis urna. Aenean commodo leo eget felis
                                rhoncus blandit. Nam sed odio sed augue lobortis rutrum non vel est..</p>
                            <span>Reply:</span>
                            <textarea></textarea>
                        </div>
                    </div>
                </div>
            </label>
        </div>
    </div>
</div>

移动即时通讯Web应用/网页模板

CSS3，原质化，列表

编辑器支持Emmet

快捷键

移动即时通讯Web应用/网页模板

CSS3，原质化，列表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：