Material.js/Material.css 一款漂亮的原质化设计网页模板

Source: http://www.getmdl.io

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header mdl-layout__header--transparent mdl-layout__header--waterfall">
        <div class="mdl-layout__header-row">
            
            <span class="mdl-layout-title">Title</span>
            
            <div class="mdl-layout-spacer"></div>

<form action="">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
                    <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
                        <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                        <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" />
                    </div>
                </div>
            </form>

</div>
    </header>
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="#">Link</a>
            <a class="mdl-navigation__link" href="#">Link</a>
            <a class="mdl-navigation__link" href="#">Link</a>
            <a class="mdl-navigation__link" href="#">Link</a>
        </nav>
    </div>
    <main class="mdl-layout__content">
        <div class="mdl-grid">
            <div class="mdl-cell mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title">
                    <h2 class="mdl-card__title-text">Welcome</h2>
                </div>
                <div class="mdl-card__supporting-text post-excerpt">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
                </div>
                <div class="mdl-card__actions mdl-card--border post-categories post-tags">
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--accent">
            Uncategorized
          </a>
                </div>
                <div class="mdl-card__actions post-categories post-tags">
                    <a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
            pets
          </a>
                    <a class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">
            cats
          </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">share</i>
                    </button>
                </div>
            </div>
        </div>
    </main>
</div>

Source: http://www.getmdl.io

编辑器支持Emmet

快捷键

Source: http://www.getmdl.io

HTML5 Three.js读取Kinect数据并在网页呈现（人体摇头晃脑动作的捕捉数据3D可视化）

HTML5+jQuery.waypoints旅行者的时间表页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：