也来“玩”Metro UI之磁贴

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 fock一份，实现你自己的，同时向大家推荐runjs.cn，这个真不错，和jsfiddle有的比。也欢迎关注我x-strong :)）：

  1 <!DOCTYPE html>

  2 <html>

  3     <head>

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

  5         <title>

  6             Metro UI试手之Tile

  7         </title>

  8 <style type='text/css'>

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

 10     background-color:#8b37f1;}

 11 p{color:white;}

 12 .tile{

 13     display:inline-block;

 14     width:200px;

 15     height:100px;

 16     margin:5px;

 17     padding:0;

 18     background-color:blue;

 19     color:white;

 20     font-family:'微软雅黑';

 21     font-size:30px;

 22     vertical-align:middle;

 23 }

 24

 25

 26 .tile-yellow{

 27     background-color:yellow;

 28     color:blue;

 29 }

 30

 31 .tile-green{

 32     background-color:green;

 33     color:white;

 34 }

 35 .tile label{

 36     width:200px;

 37     height:100px;

 38     display:block;

 39 }

 40 .content{

 41     display:inline-block;

 42     height:100px;

 43     width:200px;

 44     line-height:100px;

 45     vertical-align:middle;

 46     text-align:center;

 47 }

 48 .tile input[type='checkbox']{

 53     float:right;

 59     display:none;

 60 }

 61 .symbol{

 62     display:inline-block !important;

 63     width:40px;

 64     height:40px;

 65     position:relative;

 66     top:2px;

 67     right:2px;

 68     float:right;

 69     margin-bottom:-40px;

 70 }

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

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

 73 }

 74 </style>

 75     </head>

 76     <body>

 77         <p>

 78             Metro UI之磁贴（Tile）

 79         </p>

 80         <div class='tile'>

 81             <label>

 82

 83                 <input type='checkbox' />

 84                 <span class='symbol'>

 85                      

 86                 </span>

 87                 <span class='content'>

 88                     简单磁贴

 89                 </span>

 90             </label>

 91         </div>

 92         <div class='tile tile-yellow'>

 93             <label>

 94

 95                 <input type='checkbox' />

 96                 <span class='symbol'>

 97                      

 98                 </span>

 99                 <span class='content'>

100                     简单磁贴

101                 </span>

102             </label>

103         </div>

104

105         <div class='tile tile-green'>

106             <label>

107

108                 <input type='checkbox' />

109                 <span class='symbol'>

110                      

111                 </span>

112                 <span class='content'>

113                     简单磁贴

114                 </span>

115             </label>

116         </div>

117     </body>

118 </html>

Metro UI之磁贴（Tile）

 简单磁贴
 简单磁贴
 简单磁贴
 
 
 
标签: Metro, Tile, 前端, CSS, 伪类

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

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

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

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

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

  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. 房间计费系统改造E-R图纸设计

    简单的学习过程:     这几天忙得太混乱了,用了近一个星期才设计好.我在这段时间遇到的困难,就积极找师哥师姐指点迷津,如今多少总算是有些拿得出手的成果. 学习成果: Entity Relations ...

  2. monkey命令详解

    标准的monkey 命令 adb shell monkey [options] <eventcount> 例如: adb shell monkey -v    产生500次随机事件,作用在 ...

  3. 怎样用LINQ或EF生成NOT IN和IN语句

    例如:有一个问卷表Questionnaire和一个活动与问卷的关系表ActivityOption_Questionnaire,现在我们要找出不在活动中的问卷. 用lambda实现方法如下: var n ...

  4. Redis 上实现的分布式锁

    转载Redis 上实现的分布式锁 由于近排很忙,忙各种事情,还有工作上的项目,已经超过一个月没写博客了,确实有点惭愧啊,没能每天或者至少每周坚持写一篇博客.这一个月里面接触到很多新知识,同时也遇到很多 ...

  5. MVC验证05-自定义验证规则、验证2个属性值不等

    原文:MVC验证05-自定义验证规则.验证2个属性值不等 本文体验2个属性值不等.即当一个属性输入值,另外一个属性输入的值不能和第一个属性值相等.相关文章包括: MVC验证01-基础.远程验证   M ...

  6. Python 2.7.3 urllib2.urlopen 获取网页出现乱码解决方案

    出现乱码的原因是,网页服务端有bug,它硬性使用使用某种特定的编码方案,而并没有按照客户端的请求头的编码要求来发送编码. 解决方案:使用chardet来猜测网页编码. 1.去chardet官网下载ch ...

  7. WebStorm中Node.js项目配置教程（1）——创建项目

    Node.js绝对是一个web开发的热点话题,作为web神器的WebStorm也是开发Node.js的佼佼者. 接下来就Node.js项目在WebStorm的配置操作就行详细的讲解,首先是创建项目.两 ...

  8. C# TextBox实现全选

    A. 设置全局变量: 1.定义了个全局变量放本次点击的textbox的名字,默认为空. 2.textbox的Enter事件里SelectAll()一下 3.Click事件里判断全局变量是否是该text ...

  9. ASP.NET中XML转JSON的方法

    原文:ASP.NET中XML转JSON的方法 许多应用程序都将数据存储为XML的格式,而且会将数据以JSON的格式发送到客户端以做进一步处理.要实现这一点,它们必须将XML格式转换为JSON格式. X ...

  10. HTML 5 在Web SQL 使用演示样本

    Web sql 这是一个模拟数据库浏览器.可以使用JS操作SQL完成数据读取和写入,但是这件事情并不多,现在支持的浏览器,而其W3C规格已经停止支持.外形似它的前景不是很亮. W3C 规范:http: ...