当前位置: 代码迷 >> Web前端 >> metroui――win8作风网页ui
  详细解决方案

metroui――win8作风网页ui

热度:406   发布时间:2013-02-24 17:58:56.0
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>


  相关解决方案