Metro UI CSS 学习笔记之 教手架
符号
阅读:593
2021-03-31 22:45:23
评论:0
全局样式:
(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>
效果展示:
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。