Material.min.js 移动卡片管理应用页面模板

响应式+原质化设计的移动管理界面

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

第三方库
作品简介 2320
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(/uploads/150801/material.woff2) format('woff2');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.mdl-layout__header-row {
    padding-right: 15px;
}
.mdl-layout__header-row .mdl-layout-spacer {
    text-align: right;
}
.page-content button.mdl-button--fab {
    position: fixed;
    top: auto;
    right: 30px;
    bottom: 30px;
    left: auto;
    z-index: 9999;
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .25);
    box-shadow: 0 5px 5px rgba(0, 0, 0, .25);
}
.demo-card-wide.mdl-card {
    width: 90%;
    max-width: 512px;
    margin: 25px auto;
}
.demo-card-wide > .mdl-card__title {
    color: #fff;
    height: 176px;
    background-color: #fafafa;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-box-shadow: inset 0 -35px 25px rgba(0, 0, 0, .5);
    box-shadow: inset 0 -35px 25px rgba(0, 0, 0, .5);
}
.demo-card-wide > .mdl-card__menu {
    color: #fff;
}

HTML

<script src="/uploads/150801/material.min.js"></script>
<link rel="stylesheet" href="/uploads/150801/material.purple-yellow.min.css" />

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
            
            <span class="mdl-layout-title">AdminMyCCs</span>
            
            <div class="mdl-layout-spacer">
                <button id="demo-menu-lower-right" class="mdl-button mdl-js-button mdl-button--icon">
                    <i class="material-icons">more_vert</i>
                </button>

<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-right">
                    <li class="mdl-menu__item">Help & tips</li>
                    <li class="mdl-menu__item">Rate the app</li>
                    <li disabled class="mdl-menu__item">Disabled option</li>
                    <li class="mdl-menu__item">Known issues</li>
                </ul>
            </div>
            
        </div>
        
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Visa &mdash; 3452</a>
            <a href="#scroll-tab-2" class="mdl-layout__tab">MasterCard &mdash; 9850</a>
        </div>
    </header>
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Menu</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="#">News</a>
            <a class="mdl-navigation__link" href="#">Register</a>
            <a class="mdl-navigation__link" href="#">Login</a>
            <a class="mdl-navigation__link" href="#">FAQs</a>
            <a class="mdl-navigation__link" href="#">About</a>
        </nav>
    </div>
    <main class="mdl-layout__content">
        <div class="page-content">
            
            <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
                <div class="page-content">
                    
                    <div class="mdl-card mdl-shadow--2dp demo-card-wide">
                        <div class="mdl-card__title" style="background-image: url(https://i.imgur.com/fgJth7z.jpg);">
                            <h2 class="mdl-card__title-text">Pepé Wardrobe</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            You bought a <em>wardrobe</em> from the store <em>Ikea</em> at the price of <em>$120</em> and the payment was done using a <em>POSNET</em> at <em>2:43 PM</em>.
                        </div>
                        <div class="mdl-card__actions mdl-card--border">
                            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Check receipt
              </a>
                        </div>
                        <div class="mdl-card__menu">
                            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                                <i class="material-icons">delete</i>
                            </button>
                        </div>
                    </div>

<div class="mdl-card mdl-shadow--2dp demo-card-wide">
                        <div class="mdl-card__title" style="background-image: url(https://i.imgur.com/8a7Gfb9.jpg);">
                            <h2 class="mdl-card__title-text">Laminated Table</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            You bought a <em>table</em> from the store <em>Boxy</em> at the price of <em>$90</em> and the payment was done using a <em>POSNET</em> at <em>7:16 PM</em>.
                        </div>
                        <div class="mdl-card__actions mdl-card--border">
                            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Check receipt
              </a>
                        </div>
                        <div class="mdl-card__menu">
                            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                                <i class="material-icons">delete</i>
                            </button>
                        </div>
                    </div>

<div class="mdl-card mdl-shadow--2dp demo-card-wide">
                        <div class="mdl-card__title" style="background-image: url(https://i.imgur.com/glFsWmx.jpg);">
                            <h2 class="mdl-card__title-text">Set of Plates</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            You bought a <em>set of plates</em> from the store <em>Shiny Stuff</em> at the price of <em>$50</em> and the payment was done using a <em>Mobile Phone</em> at <em>8:52 AM</em>.
                        </div>
                        <div class="mdl-card__actions mdl-card--border">
                            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Check receipt
              </a>
                        </div>
                        <div class="mdl-card__menu">
                            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                                <i class="material-icons">delete</i>
                            </button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="mdl-layout__tab-panel" id="scroll-tab-2">
                <div class="page-content">
                    
                    <div class="mdl-card mdl-shadow--2dp demo-card-wide">
                        <div class="mdl-card__title" style="background-image: url(https://i.imgur.com/lINoN1I.jpg);">
                            <h2 class="mdl-card__title-text">Nomad Restó</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            You paid <em>dinner for two</em> at the restaurant <em>Nomad Restó</em> at the price of <em>$40</em> and the payment was done using a <em>POSNET</em> at <em>12:22 PM</em>.
                        </div>
                        <div class="mdl-card__actions mdl-card--border">
                            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Check receipt
              </a>
                        </div>
                        <div class="mdl-card__menu">
                            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                                <i class="material-icons">delete</i>
                            </button>
                        </div>
                    </div>

<div class="mdl-card mdl-shadow--2dp demo-card-wide">
                        <div class="mdl-card__title" style="background-image: url(https://i.imgur.com/Xvq8ZHl.jpg);">
                            <h2 class="mdl-card__title-text">Cab, NY</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            You paid a <em>cab trip</em> in <em>New York City</em> at the price of <em>$12</em> and the payment was done using a <em>Mobile Phone</em> at <em>2:30 PM</em>.
                        </div>
                        <div class="mdl-card__actions mdl-card--border">
                            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Check receipt
              </a>
                        </div>
                        <div class="mdl-card__menu">
                            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                                <i class="material-icons">delete</i>
                            </button>
                        </div>
                    </div>

<div class="mdl-card mdl-shadow--2dp demo-card-wide">
                        <div class="mdl-card__title" style="background-image: url(https://i.imgur.com/Xd604TA.jpg);">
                            <h2 class="mdl-card__title-text">Train to Austin, TX</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                            You bought a <em>ticket to Austin</em> departing the <em>25th of July</em> at the price of <em>$80</em> and the payment was done using a <em>POSNET</em> at <em>5:00 AM</em>.
                        </div>
                        <div class="mdl-card__actions mdl-card--border">
                            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                Check receipt
              </a>
                        </div>
                        <div class="mdl-card__menu">
                            <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                                <i class="material-icons">delete</i>
                            </button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="mdl-layout__tab-panel" id="scroll-tab-3">
                <div class="page-content">
                    
                </div>
            </section>
            <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
                <i class="material-icons">payment</i>
            </button>
        </div>
    </main>
</div>

响应式+原质化设计的移动管理界面

编辑器支持Emmet

快捷键

响应式+原质化设计的移动管理界面

Vue.JS + Tailwind.CSS魔法巫师帽电商移动网页应用模板

HTML5 Zepto.js 移动版本（微信H5）的2015春节回家温情动画网页应用模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：