Metro UI CSS 学习笔记之 教手架分析

符号 阅读:173 2021-03-31 22:45:23 评论:0

全局样式:

(1)必须使用HTML5 doctype

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. ...
  4. </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>
效果展示:










声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号