Material Design Lite学习（二）布局

最新推荐文章于 2024-05-31 10:06:19 发布

汪星人来地球

最新推荐文章于 2024-05-31 10:06:19 发布

阅读量1.4k

点赞数

分类专栏： HTML 文章标签： html css ui web

本文链接：https://blog.csdn.net/hedan2013/article/details/52886675

版权

本文是Material Design Lite（MDL）学习系列的第二部分，聚焦于MDL页面布局。主要内容包括：mdl-layout__header用于定义页面头部，mdl-layout__drawer定义菜单，mdl-layout__content定义主体内容，mdl-layout__header-row规定头部布局，mdl-layout-title和span, nav标签分别用于设置标题和导航菜单。通过理解这些元素，读者可以构建出具有完整结构的MDL页面。" 137162010,11414049,Excel回归分析详解：阿里P7专家教你解读,"['数据挖掘', '人工智能', 'Python编程']

摘要由CSDN通过智能技术生成

上一篇博客介绍了如何创建MDL web页面。本篇博客将介绍MDL页面的布局。

通常一个标准的MDL页面定义如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Material Design Lite">
    <title>MDL 示例</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="static/css/material.min.css">
    <script src="static/js/material.min.js"></script>
</head>
<body>
    <div class="mdl-layout mdl-js-layout">
    </div>
</body>
</html>

当然，上面的代码会定义一个空的HTML页面。为了在页面中显示相关的内容。需要在上面代码的div标签下，添加相应的元素。本博客介绍的，主要介绍那些设置页面