Material Design Lite 学习（三）网格

最新推荐文章于 2023-12-04 20:36:20 发布

汪星人来地球

最新推荐文章于 2023-12-04 20:36:20 发布

阅读量906

点赞数

分类专栏： HTML 文章标签： web html material design lite

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

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

上一篇博文介绍了MDL页面的布局。这篇博文主要介绍MDL页面中元素的布局。在MDL的设计中，根据设备的不同，会将页面的每一行划分成若干个列。具体来说，PC页面一行12列，平板一行8列，手机一行4列。MDL为这些列预定了边距（margin）。HTML页面中的每个元素都可以被定义成一个单元格类（mdl-cell）。每个单元格可以占用若干列。这些单元格按照从左到右，从上到下的顺序依次排列这些单元格。需要注意的是

如果当前行剩余的列数不足以放下当前的单元格时，该单元格会摆放在下一行。
如果一个单元格占用的列数比设备一行的总列数还多，那么让该单元格占用一整行。

由于不同设备每行的列数不同，因此可能造成同样的页面定义，在不同设备上的显示效果完全不同。

例如，假设有如下几个单元格：

单元格1： 5列

单元格2：2列

单元格3：2列

单元格4：3列

单元格5：3列

它在PC上显示效果为

单元格1					单元格2		单元格3		单元格4
单元格5

它在平板上显示效果为

单元格1					单元格2
单元格3		单元格4			单元格5

它在手机上显示效果为

单元格1
单元格2		单元格3
单元格4
单元格5

接下来，通过简单的示例介绍如何通过网格布局页面。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<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>
    <style>
        .gray-box{
            background-color: #dfdfdf;
        }
    </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">MDL 样例</span>
            </div>
        </header>
        <div class="mdl-layout__drawer">
            <span class="mdl-layout-title">MDL 教程</span>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link">概述</a>
                <a class="mdl-navigation__link">布局</a>
            </nav>
        </div>
        <main class="mdl-layout__content">
            <div class="mdl-grid">
                <div class="mdl-cell mdl-cell--5-col gray-box">单元格1</div>
                <div class="mdl-cell mdl-cell--2-col gray-box">单元格2</div>
                <div class="mdl-cell mdl-cell--2-col gray-box">单元格3</div>
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格4</div>
                <div class="mdl-cell mdl-cell--3-col gray-box">单元格5</div>
            </div>
        </main>
    </div>
</body>
</html>

代码第42-48行通过网格定义了一组div元素的布局。

首先，所有的单元格（mdl-cell）都必须在网格容器（mdl-grid）之内。

第二，一个单元格通常需要定义两个css类。一个是mdl-cell类，它指定当前元素是一个单元格。一个是mdl-cell--N-col类，这里N=1到12。它指定单元格所占的列数。

上面代码的运行效果如下图。

汪星人来地球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Material Design Lite 学习（三）网格

上一篇博文介绍了MDL页面的布局。这篇博文主要介绍MDL页面中元素的布局。在MDL的设计中，根据设备的不同，会将页面的每一行划分成若干个列。具体来说，PC页面一行12列，平板一行8列，手机一行4列。MDL为这些列预定了边距（margin）。HTML页面中的每个元素都可以被定义成一个单元格类（mdl-cell）。每个单元格可以占用若干列。这些单元格按照从左到右，从上到下的顺序依次排列这些单元格。需要
复制链接

扫一扫