也来“玩”Metro UI之磁贴
也来“玩”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 UI之磁贴的更多相关文章
- 也来“玩”Metro UI之磁贴（二）
继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+浏览器),当然,还是纯CSS,真的要感谢 ...
- 也来“玩”Metro UI之磁贴（一）
Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩,动手……然后就有了本篇. Win8 ...
- ”Metro UI之磁贴（二）
也来“玩”Metro UI之磁贴(二) 继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+ ...
- 磁贴界面颜色 Metro UI Colors
http://www.oschina.net/p/metro-ui-colors 介绍 包含了磁贴界面(Metro UI)使用的颜色集合(浅绿色,绿色,深绿色,品红,紫色等).可以查看每一种颜色的各种 ...
- 7 款免费的 Metro UI 模板
#1 – Free Metro Ui Style template by Asif Aleem 很棒的蓝色调 Metro UI 管理模板 #2: Metro-Bootstrap by TalksLab ...
- Bootstrap看厌了？试试Metro UI CSS吧
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审 ...
- 使用WPF来创建 Metro UI程序
本文转载:http://www.cnblogs.com/TianFang/p/3184211.html 这个是我以前网上看到的一篇文章,原文地址是:Building a Metro UI with W ...
- 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板
1. BootMetro 基于 Twitter Bootstrap 的简单灵活的 HTML.CSS 和 Javascript 框架,Win8 风格,大爱啊! 立即下载 效果演示 2. Boot ...
- Metro UI 界面完全解析 (转载)
Metro在微软的内部开发名称为“ typography-based design language”(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro ...
随机推荐
- jQuery本身方法（$.each,$.map,$.contains,$ajax）
常用工具方法 (1)$.trim $.trim方法用于移除字符串头部和尾部多余的空格. $.trim(' Hello ') // Hello (2)$.contains $.contains方法返回一 ...
- HDU 4052 Adding New Machine（矩形面积并）
Adding New Machine Problem Description Incredible Crazily Progressing Company (ICPC) suffered a lot ...
- SQL表连接
背景 在上次的自考科目<数据库系统原理>中.已经接触到了关于数据库表连接的一些知识,近期的学习过程中又用到了关于数据库表的连接问题,趁此再跟大家一起回想一下. 导图总结 首先用一张思维导图 ...
- Set Matrix Zeroes -- LeetCode
原题链接: http://oj.leetcode.com/problems/set-matrix-zeroes/ 这是一个矩阵操作的题目,目标非常明白,就是假设矩阵假设有元素为0,就把相应的行和列上面 ...
- Web API-属性路由
路由(Routing)就是Web API如何将一个URI匹配到一个action的过程.Web API 2 支持一个新的路由方式-属性路由(attribute routing).顾名思义,属性路由使用标 ...
- 日积月累系列之国籍控件（js源码）
一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件,navtionalit ...
- jekyll bootstrap搭建github blog
前提你必须有一个GitHub账号且本机安装有Git 一.创建一个新的仓库 去你的https://github.com主页新建一个仓库 名字为USERNAME.github.com USERNAME为你 ...
- Visual Studio Contact
Visual Studio Contact(); 直播笔记 昨天微软干了几件了不起的事:.NET开发环境将开源.跨平台支持(Mac OS X和Linux).多设备支持(WP.Android和iOS ...
- 在OpenWrt上编写自己的硬件操作程序
上一篇文章中有写到如何使用OPENWRT的SDK,这里继续,写怎么在上面开发自己的应用程序. 我欲在OpenWrt上编写一个软件,它能够去读取某个AD芯片的多通道采样值. 在看这篇文章之前请看这官方的 ...
- JSON数据转换方法 parse()和stringify()
将对象转换成JSON格式的文本数据 var str = JSON.stringify(data); 将对象转换成JSON对象的方法 var data = JSON.parse(str);