Win8出来已有一段时间了，个人是比较喜欢Metro UI的。一直以来想用Metro UI来做个自己的博客，只是都没有空闲~~今天心血来潮，突然想自己弄一个磁贴玩玩，动手……然后就有了本篇。

Win8中的磁贴可调整大小，分组，还有更好玩的动态信息显示。网上也有了比较完整的Web Metro UI框架库，比较好的一个——Metro UI template：http://metro-webdesign.info/，（这个是收费的），还有许多其它的，可参看园子里园友（梦想天空）列举的：http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html。

本篇的磁贴只实现了简单的磁贴样式和选中效果，用CSS实现。考虑到磁贴的可选中性，想到了html中的复选框，核心原理其实就是用css伪类来实现。

先看效果截图吧：

看代码（很简单，也可在这里http://runjs.cn/detail/mirwgdac fork一份，实现你自己的，同时向大家推荐runjs.cn，这个真不错，和jsfiddle有的比。也欢迎关注我x-strong :)）：

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>

             Metro UI试手之Tile

         </title>

 <style type='text/css'>

 body{font-family:'微软雅黑';

     background-color:#8b37f1;}

 p{color:white;}

 .tile{

     display:inline-block;

     width:200px;

     height:100px;

     margin:5px;

     padding:0;

     background-color:blue;

     color:white;

     font-family:'微软雅黑';

     font-size:30px;

     vertical-align:middle;

 }

 .tile-yellow{

     background-color:yellow;

     color:blue;

 }

 .tile-green{

     background-color:green;

     color:white;

 }

 .tile label{

     width:200px;

     height:100px;

     display:block;

 }

 .content{

     display:inline-block;

     height:100px;

     width:200px;

     line-height:100px;

     vertical-align:middle;

     text-align:center;

 }

 .tile input[type='checkbox']{

     float:right;

     display:none;

 }

 .symbol{

     display:inline-block !important;

     width:40px;

     height:40px;

     position:relative;

     top:2px;

     right:2px;

     float:right;

     margin-bottom:-40px;

 }

 .tile input[type='checkbox']:checked ~.symbol{

     background-image:url('http://sandbox.runjs.cn/uploads/rs/169/rvy7e5su/tile_selected_symbol.png');

 }

 </style>

     </head>

     <body>

         <p>

             Metro UI之磁贴（Tile）

         </p>

         <div class='tile'>

             <label>

                 <input type='checkbox' />

                 <span class='symbol'>

                      

                 </span>

                 <span class='content'>

                     简单磁贴

                 </span>

             </label>

         </div>

         <div class='tile tile-yellow'>

             <label>

                 <input type='checkbox' />

                 <span class='symbol'>

                      

                 </span>

                 <span class='content'>

                     简单磁贴

                 </span>

             </label>

         </div>

         <div class='tile tile-green'>

             <label>

                 <input type='checkbox' />

                 <span class='symbol'>

                      

                 </span>

                 <span class='content'>

                     简单磁贴

                 </span>

             </label>

         </div>

     </body>

 </html>

Metro UI之磁贴（Tile）

  简单磁贴
  简单磁贴
  简单磁贴

也来“玩”Metro UI之磁贴（一）的更多相关文章

  1. 也来“玩”Metro UI之磁贴

    也来“玩”Metro UI之磁贴 Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩, ...

  2. 也来“玩”Metro UI之磁贴（二）

    继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+浏览器),当然,还是纯CSS,真的要感谢 ...

  3. ”Metro UI之磁贴（二）

    也来“玩”Metro UI之磁贴(二) 继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+ ...

  4. 磁贴界面颜色 Metro UI Colors

    http://www.oschina.net/p/metro-ui-colors 介绍 包含了磁贴界面(Metro UI)使用的颜色集合(浅绿色,绿色,深绿色,品红,紫色等).可以查看每一种颜色的各种 ...

  5. 7 款免费的 Metro UI 模板

    #1 – Free Metro Ui Style template by Asif Aleem 很棒的蓝色调 Metro UI 管理模板 #2: Metro-Bootstrap by TalksLab ...

  6. Bootstrap看厌了？试试Metro UI CSS吧

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审 ...

  7. 使用WPF来创建 Metro UI程序

    本文转载:http://www.cnblogs.com/TianFang/p/3184211.html 这个是我以前网上看到的一篇文章,原文地址是:Building a Metro UI with W ...

  8. 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板

    1. BootMetro 基于 Twitter Bootstrap 的简单灵活的 HTML.CSS 和 Javascript 框架,Win8 风格,大爱啊! 立即下载     效果演示 2. Boot ...

  9. Metro UI 界面完全解析 (转载)

    Metro在微软的内部开发名称为“ typography-based design language”(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro ...

随机推荐

  1. WPF MATERAIL DESIGN TOOKIT

    最近有个程序需要用到WPF,本以为WEB可以做到很炫的,没有想到XAML也能做到如此之炫.心动了,那就行动吧. 搜到有各种款式的:METRO风格,RIBBON风格,MATERIAL风格…… 也许是玩W ...

  2. Redis学习笔记（一）五种数据类型

    1.字符串(String) 基本操作:SET(设置).GET(获取).DEL(删除)其他操作传送门 root@localhost:~# redis-cli > set msg hello OK ...

  3. C# 一维数组 二位数组 多维数组

    什么是数组? 数组是一组变量,就是把一些变量串在一起,放在一块. 数组的作用? 假设有一堆变量,每个变量都有一些程序,那么这堆程序放在一起  程序就会混乱,处理起来有些麻烦,那么数组就是把这些变量放在 ...

  4. vue+element ui项目总结点（四）零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  5. Mac终端给命令设置别名alias的办法

    在Mac里使用curl https://www.google.com,运行后得不到期望看到的google首页的HTML source code. vi ~/.bashrc, 输入下面两行内容. 以后每 ...

  6. 使用python模拟cookie登陆wooyun

    import urllib2 class SimpleCookieHandler(urllib2.BaseHandler): def http_request(self, req): simple_c ...

  7. 兼容IE6\7\8浏览器的html5标签的几个方案

    html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几 ...

  8. 团队作业-Beta冲刺第二天

    这个作业属于哪个课程 <https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass1> 这个作业要求在哪里 <https ...

  9. python自动化基础问题解析

      (1)自动化代码中用到的设计模式: po模式(page object): 1.PO提供了一种业务流程与页面元素操作分离的模式,这使得测试代码变得更加清晰. 2.页面对象与用例分离,使得我们更好的复 ...

  10. Bootstrap历练实例：表单帮助文件

    Bootstrap表单控件可以在输入框input上有一个块级帮助文本,为了添加一个占用整个宽度的内容块,请在input后添加help-block. 实例: <!DOCTYPE html>& ...