Metro UI CSS 学习笔记之教手架

最新推荐文章于 2021-06-15 21:56:21 发布

在奋斗的大道

最新推荐文章于 2021-06-15 21:56:21 发布

阅读量1.3k

点赞数

分类专栏： Metro UI CSS 学习笔记 Metro UI CSS教程

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/43053897

版权

Metro UI CSS 学习笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

Metro UI CSS教程

11 篇文章 5 订阅

订阅专栏

全局样式：

(1)必须使用HTML5 doctype

Metro UI CSS 使用了HTML5 中一些标签属性（HTML5）和样式属性(CSS),所以如果我们需要使用Metro UI CSS 样式文件，首先必须确保引入：HTML5 doctype

<!DOCTYPE html>
<html lang="en">
...
</html>

(2)修改Html5 标签属性

Metro UI CSS 样式文件已经封装了一些Html5 标签的样式属性，如果我们需要修改Html5 标签的CSS 样式属性，可以修改Nicolas Gallaher编写的normalize.css样式文件。

(3)Heml5 标签颜色

Metro UI CSS 样式文件已经封装类选择器样式文件和标签选择器样式文件（包含响应式）[Nicolas Gallaher编写的modern.css和modern-responsive.css]。温馨提示:Metro UI CSS 封装的HTML5标签相关的样式，这里就不一一介绍，同志们，自己到指定的文件中去Serach+F吧。

Metro UI CSS 案例Demo(提示：我所提供的学习Metro UI CSS Demo 是已经全部包含响应式，如果阅读者还不知道什么是响应式的话，请先谷粉搜搜吧).

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--metro UI css 样式文件(组件基础)-->
    <link href="css/metro-bootstrap.css" rel="stylesheet">
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
    <!--metro UI css 样式文件(组件添加)-->
    <link href="css/modern.css" rel="stylesheet">
    <link href="css/modern-responsive.css" rel="stylesheet">
    <!--metro UI css 控件修改样式文件-->
    <link href="css/normalize.css" rel="stylesheet">
    <!--加载jquery js 文件-->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
    <!--加载metro js 文件-->
    <script src="js/metro/metro.min.js"></script>
</head>
<body class="metro">
<div class="grid">
    <div class="row">
        <!--设置背景元素时添加前缀bg,设置边框颜色时添加前缀 border-->
        <!--为组件(比如tile, 列表项,等等.)添加轮廓outline时使用前缀 outline-->
        <div class="span3 bg-color-green">
            <!--设置文本颜色时添加前缀 fg-->
            <span class="fg-color-blue"><h1>1</h1></span>
        </div>
        <div class="span3 bg-color-yellow">
            <span class="fg-color-blue"><h1>2</h1></span>
        </div>
        <div class="span3 bg-color-blueLight">
            <span class="fg-color-blue"><h1>3</h1></span>
        </div>
        <div class="span3 bg-color-greenDark">
            <span class="fg-color-blue"><h1>4</h1></span>
        </div>
    </div>
</div>
<div class="grid">
    <div class="row">
        <div class="span3 bg-color-darken">
            <span class="fg-color-blue"><h1>5</h1></span>
        </div>
        <div class="span3 bg-color-orange">
            <span class="fg-color-blue"><h1>6</h1></span>
        </div>
        <div class="span3 bg-color-greenLight">
            <span class="fg-color-blue"><h1>7</h1></span>
        </div>
        <div class="span3 bg-color-purple">
            <span class="fg-color-blue"><h1>8</h1></span>
        </div>
    </div>
</div>
<div class="grid">
    <div class="row">
        <div class="span3 bg-color-orangeDark">
            <span class="fg-color-blue"><h1>9</h1></span>
        </div>
        <div class="span3 bg-color-pink">
            <span class="fg-color-blue"><h1>10</h1></span>
        </div>
        <div class="span3 bg-color-blue">
            <span class="fg-color-blue"><h1>11</h1></span>
        </div>
        <div class="span3 bg-color-pinkDark">
            <span class="fg-color-blue"><h1>12</h1></span>
        </div>
    </div>
</div>


</body>
</html>

效果展示

布局模板：

Metro UI CSS 提供的布局模板没有什么多少可以讲解的，为节约大家的宝贵时间，我这里就不进一步进行相关的讲解(Metro UI CSS 文档说明:http://www.bootcss.com/p/metro-ui-css/layout.html#).温馨提示: 在使用Metro UI CSS 提供的页面布局模板，你必须先确保你已经成功搭建Metro UI CSS 开发环境，如果没有你是无法成功使用Metro UI CSS 提供的模板,大家可以参考Metro UI cSS学习笔记一：Metro UI CSS 学习笔记之一:简介和环境搭建。

网格系统：

1、默认网格系统页面模板：

    <div class="grid">
        <div class="row">
            <div class="spanN">...</div>
               网格页面模板
            <div class="spanN">...</div>
        </div>
    </div>

温馨提示：网格没有 max-width 值和父容器设置100%. 单元格都具有从 span1 到 span12 这样的类名spanN。类spanN设置了 margin-left 等于20px和 margin-bottom 等于5px.

2、网格系统嵌套（页面模板）：网格中嵌套网格

  <div class="grid">
        <div class="row">
            <div class="spanN">
                <div class="row">
                    <div class="spanN">
                       网格嵌套
                    </div>
                </div>
            </div>
        </div>
    </div>

3、网格偏移：类名offsetN可以用来给任何标签设置 margin-left 的值（offsetN=margin-left）.

Metro UI CSS 案例Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--metro UI css 样式文件(组件基础)-->
    <link href="css/metro-bootstrap.css" rel="stylesheet">
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
    <!--metro UI css 样式文件(组件添加)-->
    <link href="css/modern.css" rel="stylesheet">
    <link href="css/modern-responsive.css" rel="stylesheet">
    <!--metro UI css 控件修改样式文件-->
    <link href="css/normalize.css" rel="stylesheet">
    <!--加载jquery js 文件-->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
    <!--加载metro js 文件-->
    <script src="js/metro/metro.min.js"></script>
</head>
<body class="modern-ui">
<!--Metro 默认网格布局-->
<div class="grid">
    <div class="row">
        <div class="span3 bg-color-green">
            <span class="fg-color-blue"><h1>1</h1></span>
        </div>
        <div class="span3 bg-color-yellow">
            <span class="fg-color-blue"><h1>2</h1></span>
        </div>
        <div class="span3 bg-color-blueLight">
            <span class="fg-color-blue"><h1>3</h1></span>
        </div>
        <div class="span3 bg-color-greenDark">
            <span class="fg-color-blue"><h1>4</h1></span>
        </div>
    </div>
</div>
<!--Metro 网格系统偏移-->
<div class="grid">
    <div class="row">
        <div class="span3 offset1 bg-color-darken">
            <span class="fg-color-blue"><h1>5</h1></span>
        </div>
        <div class="span3  offset1 bg-color-orange">
            <span class="fg-color-blue"><h1>6</h1></span>
        </div>
        <div class="span3 offset1 bg-color-greenLight">
            <span class="fg-color-blue"><h1>7</h1></span>
        </div>
        <div class="span3 offset1 bg-color-purple">
            <span class="fg-color-blue"><h1>8</h1></span>
        </div>
    </div>
</div>


<!--Metro 网格系统嵌套-->
<div class="grid">
    <div class="row">
        <div class="span3 bg-color-orangeDark">
            <div class="row">
                <div class="span2"><span class="fg-color-blue"><h6>嵌套1</h6></span></div>
                <div class="span1"><span class="fg-color-blue"><h6>嵌套2</h6></span></div>

            </div>

        </div>
        <div class="span3 bg-color-pink">
            <div class="row">
                <div class="span1"><span class="fg-color-blue"><h6>嵌套3</h6></span></div>
                <div class="span2"><span class="fg-color-blue"><h6>嵌套4</h6></span></div>

            </div>
        </div>
        <div class="span3 bg-color-blue">
            <div class="row">
                <div class="span2"><span class="fg-color-blue"><h6>嵌套5</h6></span></div>
                <div class="span1"><span class="fg-color-blue"><h6>嵌套6</h6></span></div>

            </div>
        </div>
        <div class="span3 bg-color-pinkDark">
            <div class="row">
                <div class="span1"><span class="fg-color-blue"><h6>嵌套7</h6></span></div>
                <div class="span2"><span class="fg-color-blue"><h6>嵌套8</h6></span></div>

            </div>
        </div>
    </div>
</div>

</body>
</html>

效果展示:

在奋斗的大道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Metro UI CSS 学习笔记之教手架

全局样式：(1)必须使用HTML5 doctype Metro UI CSS 使用了HTML5 中一些标签属性（HTML5）和样式属性(CSS),所以如果我们需要使用Metro UI CSS 样式文件，首先必须确保引入：HTML5 doctypelang="en">... (2)修改Html5 标签属性Metro UI CSS 样式文件已经
复制链接

扫一扫