爱吾下载 ● 文章资讯

分类分类

Google Material Design Lite 练习代码

更新时间：2026-03-29 00:59:29作者：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>

展开全部

相关

手游推荐
说两句网友评论
    我要跟贴
    取消