Metro UI CSS 学习笔记之教手架

来源：互联网发布：淘宝卖家下载什么软件编辑：程序博客网时间：2024/05/01 04:22

全局样式：

(1)必须使用HTML5 doctype

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

<!DOCTYPE html>
<htmllang="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

Metro UI CSS 学习笔记之 教手架

Metro UI CSS 学习笔记之教手架