metroui——win8风格网页ui
【前言】
公司需要做一个win8风格的网页，
找到了metroui，挺好的。
网址：
中文网（http://www.bootcss.com/p/metro-ui-css/index.html）
官网（http://metroui.org.ua/）
效果不错，写这篇文章完全是照办中文网的内容，加深下记忆。
【readme】
<!DOCTYPE html><html><head><meta charset="utf-8"><title>index.html</title><!-- modern.css 最主要的css --><link href="css/modern.css" rel="stylesheet"><link href="css/site.css" rel="stylesheet" type="text/css"><!-- 响应式css以及配套meta --><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="modern-responsive.css" rel="stylesheet"><!-- 网页代码高亮css --><link href="js/google-code-prettify/prettify.css" rel="stylesheet" type="text/css"><!-- jquery --><script type="text/javascript" src="js/assets/jquery-1.9.0.min.js"></script><!-- 解决鼠标滚轮的插件 --><script type="text/javascript" src="js/assets/jquery.mousewheel.min.js"></script><!-- 下拉菜单插件 --><script type="text/javascript" src="js/modern/dropdown.js"></script><!-- 对话框插件 --><script type="text/javascript" src="js/modern/dialog.js"></script><!-- 手风琴效果插件 --><script type="text/javascript" src="js/modern/accordion.js"></script><!-- 按钮组插件 --><script type="text/javascript" src="js/modern/buttonset.js"></script><!-- 幻灯片插件 --><script type="text/javascript" src="js/modern/carousel.js"></script><!-- 表单插件 --><script type="text/javascript" src="js/modern/input-control.js"></script><!-- 多页标签 --><script type="text/javascript" src="js/modern/pagecontrol.js"></script><!-- 评分插件 --><script type="text/javascript" src="js/modern/rating.js"></script><!-- 滑块插件 --><script type="text/javascript" src="js/modern/slider.js"></script><!-- tile滑动插件 --><script type="text/javascript" src="js/modern/tile-slider.js"></script><!-- tile拖拽插件 --><script type="text/javascript" src="js/modern/tile-drag.js"></script></head><body><!-- 颜色------------------------ --><!-- 背景颜色，使用bg-color-* --><div class="bg-color-red">...</div><!-- 字体颜色，使用fg-color-* --><span class="fg-color-blue">...</span><!-- 边框颜色，使用border-color-* --><div class="border-color-red">...</div><!-- 轮廓颜色，使用outline-color-* --><div class="tile outline-color-red">...</div><!-- 布局------------------------ --><!-- 默认页面布局 --><div class="page"><div class="page-header"><div class="page-header-content">...</div></div><div class="page-region"><div class="page-region-content">...</div></div></div><!-- 二级页面布局 --><div class="page secondary"><div class="page-header"><div class="page-header-content">...</div></div><div class="page-region"><div class="page-region-content">...</div></div></div><!-- fill view --><div class="page fill">...</div><!-- snapped view --><div class="page snapped">...</div><!-- 应用栏 --><div class="app-bar">...</div><!-- charms --><div class="charms">...</div><!-- 消息对话框 --><div class="message-dialog">...</div><!-- 通知对话框 --><div class="error(info, warning)-bar">...</div><!-- 网格系统------------------------ --><!-- 网格 --><div class="grid"><div class="row"><!-- spanN，可以用在任何标签上，用来设置宽度 --><div class="spanN">...</div>...<!-- offsetN，与spanN相对应 --><div class="offsetN">...</div></div></div><!-- 文本------------------------ --><!-- h1到h6都是可以使用的 --><!-- 一些文本 --><div class="body-text">...</div><p class="body-secondary-text">...</p><p class="tertiary-text">...</p><p class="tertiary-secondary-text">...</p><p class="indent">...</p><p class="long-text">...</p><!-- 小字体 --><small>...</small><!-- 加粗字体 --><strong>...</strong><!-- 斜体字 --><em>...</em><!-- 缩略语 --><abbr title="Title of abbreviation">...</abbr><!-- 地址 --><address>...</address><!-- 引用块 --><blockquote>...</blockquote><!-- 向右的引用块 --><blockquote class="place-right"></blockquote><!-- 无样式列表 --><ul class="unstyled"><li>...</li></ul><!-- 表格------------------------ --><!-- 条纹表格 --><table class="striped">...</table><!-- 表框表格 --><table class="bordered">...</table><!-- 悬浮表格 --><table class="hovered">...</table><!-- tr中可以添加error,success,warning,info,selected-row --><!-- 表单------------------------ --><!-- 多选 --><label class="input-control checkbox"> <input type="checkbox"><span class="helper">CheckBox Caption</span> </label><!-- 单选 --><label class="input-control radio"><input type="radio"><span class="helper">CheckBox Caption</span> </label><!-- 开关 --><label class="input-control switch"> <input type="checkbox"><span class="helper">CheckBox Caption</span> </label><!-- 按钮 --><input type="button" value="Button"/> <input type="submit" value="Submit"/><input type="reset" value="Reset" /><input type="button" disabled value="Button" /><!-- 文本框 --><div class="input-control text"><input type="text" /><button class="helper"></button></div><!-- 密码框 --><div class="input-control password"><input type="password" /><button class="helper"></button></div><!-- 搜索框 --><div class="input-control text"><input type="text" /><button class="btn-search"></button></div><!-- 手机号 --><div class="input-control text"><input type="phone" /><button class="helper"></button></div><!-- email --><div class="input-control text"><input type="email" /><button class="helper"></button></div><!-- 网址 --><div class="input-control text"><input type="url" /><button class="helper"></button></div><!-- 下拉选择框 --><div class="input-control select"><select><option>...</option></select></div><!-- multi下拉框 --><div class="input-control select"><select multiple=""><option>...</option></select></div><!-- 文本域 --><div class="input-control textarea"><textarea> </textarea></div><!-- fieldset --><fieldset><legend>...</legend>...</fieldset><!-- input使用spanN --><div class="input-control text spanN"><input type="text" /><button class="helper"></button></div><!-- 按钮------------------------ --><!-- 普通按钮 --><button>按钮</button><button class="default">按钮</button><button disabled>按钮</button><a class="button">按钮</a><!-- 命令按钮 --><button class="command-button">是的，分享和链接 <small>使用这个选项为家庭或工作</small></button><button class="command-button default">...</button><button class="command-button" disabled>...</button><!-- 工具条 --><div class="toolbar"><button />...<button /></div><!-- 按钮组合工具条 --><div class="toolbar"><div class="toolbar-group"><button />...<button /></div>...<div class="toolbar-group"><button />...<button /></div></div><!-- 垂直工具条 --><div class="toolbar-vertical"><button />...<button /></div><!-- 图片按钮 --><button class="image-button">标题 <img /></button><button class="image-button bg-color-darken fg-color-white">下载<img src="images/down.png" /></button><!-- 按钮大小 --><button class="mini">按钮标题</button><button>按钮标题</button><button class="big">按钮标题</button><!-- 图标按钮 --><button><i class="icon-*"></i>按钮标题</button><button>按钮标题<i class="icon-*"></i></button><button class="default"><i class="icon-*"></i>按钮标题</button><!-- 分页导航 --><div class="pagination"><ul><li class="first"><a></a></li><li class="prev"><a></a></li><li><a>1</a></li> ...<li class="active"><a>1</a></li><li class="disabled"><a>1</a></li><li class="spaces"><a>...</a></li> ...<li><a>N</a></li><li class="next"><a></a></li><li class="last"><a></a></li></ul></div><!-- 图像------------------------ --><!-- 带有文字的图像 --><div class="image-container"><img /><div class="overlay">覆盖文本</div></div><div class="image-container light"><img /><div class="overlay">覆盖文本</div></div><div class="image-container bg-color-blue"><img /><div class="overlay">覆盖文本</div></div><!-- 图像集16*9 --><div class="image-collection"><div><img /></div>...<div><img /></div></div><!-- 图像集4*3 --><div class="image-collection p4x3"><div><img /></div></div><!-- 选中的图片 --><div class="image-collection"><div class="selected"><img /></div></div><!-- 带有朦板的图像 --><div class="image-collection"><div><img /><div class="overlay">Sample text</div></div></div><!-- 无图像 --><div class="image-collection"><div></div></div><!-- tile------------------------ --><!-- 水平和长度，可以使用.double(-vertical), .triple(-vertical), .quadro(-vertical)来定义 --><div class="tile"></div><div class="tile double"></div><div class="tile selected"></div><div class="tile bg-color-orange"></div><!-- 内容 --><div class="tile"><div class="tile-content">...content here...</div></div><!-- 内置类 --><div class="tile icon(image)"><div class="tile-content"><img /></div></div>------------<div class="tile image-set"><div class="tile-content"><img /></div><div class="tile-content"><img /></div><div class="tile-content"><img /></div><div class="tile-content"><img /></div><div class="tile-content"><img /></div></div>------------<div class="tile image-slider" data-role="image-slider"><div class="tile-content"><img /></div>...<div class="tile-content"><img /></div></div><!-- 状态 --><div class="tile double bg-color-green"><div class="brand"><div class="badge">12</div><img class="icon" src="images/Mail128.png"></div></div><!-- 徽章 --><div class="tile"><div class="brand"><div class="badge activity"></div></div></div><!-- 导航条------------------------ --><div class="nav-bar"><div class="nav-bar-inner"><span class="element">项目名称</span> <span class="divider"></span><ul class="menu"><li data-role="dropdown"><a href="#">菜单名称 1</a><ul class="dropdown-menu"><li><a href="#">子菜单名称</a></li> ...<li><a href="#">子菜单名称</a></li></ul></li><li><a /></li><li class="divider"></li><li><a /></li></ul></div></div><!-- 侧边栏------------------------ --><!-- 布局 --><div class="page [secondary] with-sidebar"><div class="page-header" /><div class="page-sidebar" /><div class="page-region" /></div><!-- 默认 --><div class="page-sidebar"><ul><li><a>Item</a></li> ...<li><a>Item</a></li></ul></div><!-- 彩色贴纸 --><div class="page-sidebar"><ul><li class="sticker sticker-color-blue"><a>Item</a></li></ul></div><!-- 二级菜单 --><div class="page-sidebar"><ul><li><a>菜单名称</a><ul class="sub-menu">...</ul></li></ul></div><!-- 二级下拉菜单 --><div class="page-sidebar"><ul><li data-role="dropdown"><a>菜单标题</a><ul class="sub-menu sidebar-dropdown-menu">...</ul></li></ul></div><!-- 高亮显示二级菜单 --><div class="page-sidebar"><ul><li><a>Item</a><ul class="sub-menu light">...</ul></li></ul></div><!-- 标签页------------------------ --><div class="page-control" data-role="page-control">=== Tabs ===<ul><li class="active"><a href="#frame1">页面标题</a></li>...<li><a href="#frameN">页面标题N</a></li></ul>=== Tabs content ===<div class="frames"><div class="frame active" id="frame1">...页面标题对应的页面内容...</div>...<div class="frame" id="frameN">...页面标题N对应的内容...</div></div></div><!-- 手风琴------------------------ --><ul class="accordion" data-role="accordion"><li class="active"><a href="#"> 标题 </a><div>...内容...</div></li>...<li><a href="#"> 标题 </a><div>...内容...</div></li></ul>==== Dark ===<ul class="accordion dark" data-role="accordion">...</ul><!-- 按钮组------------------------ --><div class="button-set" data-role="button-set"><button class="active">...</button><button>...</button></div>------------<div class="button-set" data-role="button-set"><button class="tool-button active">...</button><button class="tool-button">...</button></div><!-- 评分------------------------ --><!-- 静态 --><div class="rating" data-role="rating" data-param-vote="off" data-param-rating="3.7"></div><!-- 静态小 --><div class="rating small" data-role="rating" data-param-vote="off" data-param-rating="3" data-param-stars="6"></div><!-- 动态 --><div class="rating" data-role="rating"></div><!-- 进度条------------------------ --><div class="progress-bar"><div class="bar bg-color-*" style="width: 75%"></div></div><!-- 幻灯片------------------------ --><div class="carousel" data-role="carousel"><div class="slides"><div class="slide image" id="slide1"><img /><div class="description">Description text here...</div></div><div class="slide mixed" id="slide2"><img /><div class="description">Description text here...</div></div>...</div><span class="control left">?</span> <span class="control right">?</span></div><!-- 列表视图------------------------ --><!-- 普通 --><ul class="listview"><li><div class="icon"><img /></div><div class="data"><h4>Title</h4>...<p>text</p></div></li></ul><!-- 流体列表 --><ul class="listview fluid"> ... </ul><!-- 图像列表 --><ul class="listview image"> ... </ul><!-- 图标列表 --><ul class="listview iconic">...</ul><!-- 滑块------------------------ --><!-- 结构 --><div class="slider" data-role="slider"><div class="complete"></div><div class="marker"></div></div><!-- 自定义 --><div class="slider" data-role="slider"></div><div class="slider" data-role="slider" data-param-init-value="35"></div><div class="slider" data-role="slider" data-param-accuracy="20"></div><div class="slider vertical" data-role="slider"></div><!-- 通知和回复------------------------ --><!-- 回复 --><ul class="replies"><li class="bg-color-*"><div class="avatar"><img /></div><div class="reply"><div class="date">...</div><div class="author">...</div><div class="text">...</div></div></li></ul>=========================================================<div class="replies"><div class="bg-color-*"><div class="avatar"><img /></div><div class="reply"><div class="date">...</div><div class="author">...</div><div class="text">...</div></div></div></div><!-- 带标签的回复 --><ul class="replies"><li class="bg-color-*"><b class="sticker sticker-left(right) sticker-color-*"></b><div class="avatar"><img /></div><div class="reply"><div class="date">...</div><div class="author">...</div><div class="text">...</div></div></li></ul><!-- 通知 --><div class="notices"><div class="bg-color-*"><a href="#" class="close"></a><div class="notice-icon"><img /></div><div class="notice-image"><img /></div><div class="notice-header">...</div><div class="notice-text">...</div></div></div></body></html>
