Metro UI CSS ——开始之旅

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”以及本地的一个文档说明,(跟官网的文档是一模一样的)。

GitHub查看Metro下载Metro UI CSS源码

文件结构

在下载的压缩包中,你可以看到如下的文件结构和内容。所有文件都进行了分类存储,并且所有文件都未进行压缩。

将下载的文件解压缩之后就可以看到如下的文件结构:

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的文件结构。简单的介绍一下:

  1. 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设计的样式代码;
  2. fonts目录下放置是的四个制作icon的字体文件,有这四个文件,我们就可以通过"@font-face"属性制作字体icon图标;
  3. images目录底下是放了四张预加载的gif文件,你在实际项目中时,你需要使用到的图片可以往这个目录中添加;
  4. javascript目录下放置的是Metro UI CSS组件中需要使用的javascript文件,在实际项目中,你需要使用的javascript文件都可以往这里添加。
  5. Less目录下放置的是Metro UI CSS中的预编码文件,可以通过Less文件对Metro UI CSS有效的维护。实际项目中运用并不会使用这些Less文件,所以在你的项目中无需加载这些less文件。
  6. 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插件,可以实现一些交互功能,在这里主要包括:

  1. Tiles:应用程序子模块的表现方式,可以理解为web中的regions块;
  2. 菜单与导航:导航菜单和下拉菜单的组件;
  3. 侧边栏:页面的边栏效果;
  4. 多页控件(tabs):在Metro UI CSS中称为多页控件,其实就是我们经常看得到的tabs控件;
  5. 手风琴:这个组件效果大家应该是常见到的,但在Metro UI CSS中只提供了垂直的手风琴效果;
  6. 按钮设置:Metro UI CSS的按钮组件;
  7. 评分系统:一个五星评分系统;
  8. 进度条:一个完成进度的UI控件;
  9. 幻灯片:图片播放组件;
  10. 列表视图:类似于媒体对像的组件;
  11. 滑块:类似于jQuery UI中滑块组件;
  12. 通知:一个通知、警告、评论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

返回顶部