console
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header mdl-color--deep-purple-900">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Logo</span>
<div class="mdl-layout-spacer"></div>
<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 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="waterfall-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample"
id="waterfall-exp">
</div>
</div>
</div>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--deep-purple-800">
<a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-800 mdl-color-text--grey-50 mdl-shadow--8dp">
<header class="demo-drawer-header">
<div class="mask"></div>
<img src="http://static.mengqing.org/extension/avatar.png" class="demo-avatar">
<div class="demo-avatar-dropdown">
<span>hello@example.com</span>
<div class="mdl-layout-spacer"></div>
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">arrow_drop_down</i>
<span class="visuallyhidden">Accounts</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
<li class="mdl-menu__item">hello@example.com</li>
<li class="mdl-menu__item">info@example.com</li>
<li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li>
</ul>
</div>
</header>
<nav class="demo-navigation mdl-navigation mdl-color--grey-50">
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--indigo-500 material-icons" role="presentation">home</i> Home</a>
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--blue-500 material-icons" role="presentation">inbox</i> Inbox</a>
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--cyan-500 material-icons" role="presentation">delete</i> Trash</a>
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--deep-purple-A700 material-icons" role="presentation">report</i> Spam</a>
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--purple-A700 material-icons" role="presentation">forum</i> Forums</a>
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--pink-A700 material-icons" role="presentation">flag</i> Updates</a>
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--orange-500 material-icons" role="presentation">local_offer</i> Promos</a>
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--amber-500 material-icons" role="presentation">shopping_cart</i> Purchases</a>
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--green-900 material-icons" role="presentation">people</i> Social</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href="###"><i class="mdl-color-text--deep-orange-A700 material-icons" role="presentation">help_outline</i> Help</a>
</nav>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
<div class="page-content">111</div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-2">
<div class="page-content">222</div>
</section>
<section class="mdl-layout__tab-panel" id="fixed-tab-3">
<div class="page-content">333</div>
</section>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col mdl-js-ripple-effect">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
<div class="mdl-cell mdl-cell--1-col">1</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<i class="material-icons" role="presentation">face</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="input_datepicker" data-toggle="datepicker" type="text" class="mdl-textfield__input" value="">
<label class="mdl-textfield__label" for="date-input">请选择日期</label>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-497413.jpg" data-fancybox>查看大图</a>
</div>
<div class="mdl-cell mdl-cell--4-col" id="fancyboxTest">4</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">6</div>
<div class="mdl-cell mdl-cell--4-col">4</div>
<div class="mdl-cell mdl-cell--2-col">2</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6 (8 tablet)</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4 (6 tablet)</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2 (4 phone)</div>
</div>
<div style="margin: 20px;">
<select class="mdl-textfield__input">
<option value="1">请选择</option>
<option value="1">湖北省</option>
<option value="1">上海市</option>
<option value="1">北京区</option>
<option value="1">深圳村</option>
</select>
</div>
</main>
</div>
.cm-select{
font-size: 16px;
width: 100%;
padding: 4px;
box-sizing: border-box;
background: none;
}
.demo-drawer-header{height: 112px;}
.mdl-cell{background-color: #eee; min-height: 100px;}
.demo-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
color: rgba(0, 0, 0, 0.54);
}
.mdl-layout__drawer .avatar {
margin-bottom: 16px;
}
.demo-drawer {
border: none;
overflow: hidden;
}
.demo-drawer .mdl-menu__container {
z-index: -1;
}
.demo-drawer .demo-navigation {
z-index: -2;
}
.demo-drawer .mdl-menu .mdl-menu__item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.demo-drawer-header {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 16px 16px 0;
height: 112px;
background-image:url(http://static.mengqing.org/extension/avatar.png);
background-position: center center;
background-size: cover;
position: relative; z-index: 1;
}
.demo-drawer-header .mask{
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
background: inherit;
filter: blur(10px);
transform: scale(1.3);
}
.demo-avatar-dropdown {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.demo-navigation {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.demo-navigation a.mdl-navigation__link{border-bottom: 1px solid #eee;}