Metro UI CSS的中文版本在W3cplus上发布，但官网上的对其介绍并不十分详细，如今借着学习Metro UI CSS的机会，我将自己的学习笔记整理了一些，希望这些教程对大家学习Metro UI CSS会有所帮助。
在学习Metro UI CSS之前，我们需要一些准备工作要做，这也是今天我要为大家介绍的——开始之旅。
下载Metro UI CSS
在下载之前，你需要确认你至少有一个代码编辑器和具有“HTML”和“CSS”相关的知识或工作经验。接下来的这些天，我们主要是根据Metro UI CSS的源文件进行一些入门讲解。
下载Metro UI CSS
可以通过GitHub下载到Metro UI CSS,下载下来的Metro UI CSS包括了“CSS”、“Javascript”、“fonts”以及本地的一个文档说明，（跟官网的文档是一模一样的）。
文件结构
在下载的压缩包中，你可以看到如下的文件结构和内容。所有文件都进行了分类存储，并且所有文件都未进行压缩。
将下载的文件解压缩之后就可以看到如下的文件结构：
Metro-UI-CSS/ ├──css/ │ ├──modern.css │ ├── modern-responsive.css │ ├── theme-dark.css ├──fonts/ │ ├── iconFont.eot │ ├── iconFont.svg │ ├── iconFont.ttf │ ├── iconFont.woff │ ├── license.txt ├──images/ │ ├── preloader-w8-cycle-black.gif │ ├── preloader-w8-cycle-white.gif │ ├── preloader-w8-line-black.gif │ ├── preloader-w8-line-white.gif ├──javascript/ │ ├── accordion.js │ ├── buttonset.js │ ├── carousel.js │ ├── dropdown.js │ ├── input-control.js │ ├── pagecontrol.js │ ├── rating.js │ ├── slider.js │ ├── tile-drag.js │ ├── tile-slider.js ├──less/ │ ├── .... ├──public/ │ ├── ....
上面就是下载下来的Metro UI CSS的文件结构。简单的介绍一下：
- CSS目录下放置三个样式文件“modern.css”、“modern-responsive.css”和“theme-dark.css”，其中“theme-dark.css”是Metro的另一个皮肤文件，我们在项目中使用Metro UI CSS的话，真正需要的是前两个样式文件，“modern.css”是Metro UI CSS的主要样式文件，而“modern-responsive.css”是用来实现Responsive设计的样式代码；
- fonts目录下放置是的四个制作icon的字体文件，有这四个文件，我们就可以通过"@font-face"属性制作字体icon图标；
- images目录底下是放了四张预加载的gif文件，你在实际项目中时，你需要使用到的图片可以往这个目录中添加；
- javascript目录下放置的是Metro UI CSS组件中需要使用的javascript文件，在实际项目中，你需要使用的javascript文件都可以往这里添加。
- Less目录下放置的是Metro UI CSS中的预编码文件，可以通过Less文件对Metro UI CSS有效的维护。实际项目中运用并不会使用这些Less文件，所以在你的项目中无需加载这些less文件。
- public目录下放置的是一份本地化的Metro UI CSS文档，可以帮助您更好的了解和学习Metro UI CSS。
注：组件中所有的javascript插件都是依赖于jQuery库。
Metro UI CSS包含了哪些东西
Metro UI CSS包含了实现Metro UI的“HTML”、“CSS”和“JS”，这些代码可以帮助你轻松的实现需要的一些UI效果，而且这些效果的简单使用都在Metro UI CSS 文档中有介绍。
文档的章节
1、框架
框架中包括了全局样式、布局与模板、网格系统和响应式设计四部分内容。
2、基本样式
基本样式中包括了Web设计中的“排版”、“表格”、“表单”、“按钮”、“图像”和“图标”六大部分，可以说涵盖了Web制作中常见的一些样式与结构。
3、组件
Metro UI CSS 也使用了一些javascript插件，可以实现一些交互功能，在这里主要包括：
- Tiles：应用程序子模块的表现方式，可以理解为web中的regions块；
- 菜单与导航：导航菜单和下拉菜单的组件；
- 侧边栏：页面的边栏效果；
- 多页控件（tabs）：在Metro UI CSS中称为多页控件，其实就是我们经常看得到的tabs控件；
- 手风琴：这个组件效果大家应该是常见到的，但在Metro UI CSS中只提供了垂直的手风琴效果；
- 按钮设置：Metro UI CSS的按钮组件；
- 评分系统：一个五星评分系统；
- 进度条：一个完成进度的UI控件；
- 幻灯片：图片播放组件；
- 列表视图：类似于媒体对像的组件；
- 滑块：类似于jQuery UI中滑块组件；
- 通知：一个通知、警告、评论UI组件。
基本的HTML模版
在使用Metro UI CSS时，我们都采用一个简单的模版，而且这个模版运用在所有的Metro UI CSS页面中。先来看一个简单的HTML模版结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Metro UI CSS的HTML模版</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
让这个模板能使用Metro UI CSS,这时需要调用Metro UI CSS的css和js（如果有用到交互组件）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Metro UI CSS的HTML模版</title>
<!-- Metro UI CSS -->
<link href="css/modern.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- drowndrop.js -->
<script src="javascript/dropdown.js"></script>
</body>
</html>
接下来你就可以使用Metro UI CSS开发任何Web网站或者Web应用。
下一步
下一步，我们会根据Metro UI CSS的文档进行深入的展开学习。
如需转载，烦请注明出处：http://www.w3cplus.com/css/metro-ui-css-start.html