分类分类
2015-09-23 17:02作者：yezheng
Google Material Design Lite 是一种简洁惊艳的前端工具箱，本代码是Material Design设计语言的HTML/CSS/JS实现，可以供大家练习使用。现选取一节展示给大家，共有25个文件大家可以到Git上看看
1. [JavaScript]代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ex-1.1:welcome</title>
<link rel="stylesheet" href="lib/material.min.css">
<script src="lib/material.min.js"></script>
<link rel="stylesheet" href="lib/icon.css">
<style>
.section-1{
height:300px;
background:url(img/slide02.jpg) no-repeat;
background-size:cover;
}
.section-1 .intro{
padding:40px;
line-height:30px;
}
</style>
</head>
<body>
<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">Material Design Lite</span>
</div>
</header>
<div class="mdl-layout__drawer">
</div>
<main class="mdl-layout__content">
<div class="section-1">
<div class="mdl-typography--subheader intro">
不久的将来，你最喜欢的网站都会是安卓系统的即视感了。因为谷歌发布了Material Design Lite（MDL），并打算将安卓系统的设计规范带入到网页设计的CSS、Javascript和HTML语言中。
</div>
</div>
</main>
</div>
</body>
</html>
相关