刚开始clone了这个主题感觉还不错，但是后来感觉着太花哨了，想自己搞一个主题，思来想去感觉着google 的质感设计还不错，想借着提供的库来搞一个。

开始

写的demo的时候用的是webstorm，新建的是一个空项目。

开始需要先引入，在需要引入的项目中的head添加：

1
2
3

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

然后就能快捷键一通操作，就下载了。

之后，先引入网上的一个demo

<body>
<!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">HTML5 Tutorial</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>
        </nav>
    </div>
    <main class="mdl-layout__content">
        <div class="page-content" style="padding-left:100px;">Hello World!</div>
    </main>
</div>
</body>

效果可见。

0.0%

开始