继昨天的“也来“玩”Metro UI之磁贴（一）”之后，还不过瘾，今天继续“玩”吧——今天把单选的功能加进来，还有磁贴的内容，还加了发光效果（CSS3，IE9+浏览器），当然，还是纯CSS，真的要感谢“现代”浏览器~~，废话少说，先上图，然后代码……

效果图：

鼠标经过时显示内容：

代码来了:)：

 <!DOCTYPE html>

 <html>

 <head>

     <meta name="viewport" content="width=device-width" />

     <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;

     overflow: hidden;

     background-color: blue;

     color: white;

     font-family: '微软雅黑';

     font-size: 30px;

     vertical-align: middle;

     cursor: pointer !important;

     box-shadow: 0px 0px 5px #eee;

 }

     .tile label {

         width: 200px;

         height: 100px;

         display: block;

     }

     .tile .title {

         display: inline-block;

         height: 100px;

         width: 200px;

         line-height: 100px;

         vertical-align: middle;

         text-align: center;

     }

     .tile .content {

         position: relative;

         height: 100px;

         padding: 5px;

         display: block;

         word-wrap: break-word;

         word-break: break-all;

         font-family: '微软雅黑';

         font-size: 14px;

     }

     .tile:hover {

         -moz-box-shadow: 0px 0px 5px #ddd;

         -webkit-box-shadow: 0px 0px 5px #ddd;

         box-shadow: 0px 0px 5px #ddd;

     }

         .tile:hover .content {

             margin-top: -100px;

         }

     .tile input[type='checkbox'], .tile input[type='radio'] {

         width: 40px;

         height: 40px;

         margin: 0;

         padding: 0;

         float: right;

         position: relative;

         outline: none !important;

         border: 0 !important;

         top: 0;

         right: 0;

         display: none;

     }

     .tile .symbol {

         display: inline-block !important;

         width: 40px;

         height: 40px;

         position: relative;

         top: 2px;

         right: 2px;

         float: right;

         margin-bottom: -40px;

         z-index: 10000;

     }

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

         background-image: url('../Images/tile_selected_symbol.png');

     }

 /*颜色*/

 .tile-blue {

     background-color: blue;

     color: white;

 }

     .tile-blue .content {

         background-color: white;

         color: blue;

     }

 .tile-yellow {

     background-color: yellow;

     color: blue;

 }

     .tile-yellow .content {

         background-color: blue;

         color: yellow;

     }

 .tile-green {

     background-color: green;

     color: white;

 }

     .tile-green .content {

         background-color: white;

         color: green;

     }

 .tile-pink {

     background-color: deeppink;

     color: white;

 }

     .tile-pink .content {

         background-color: white;

         color: deeppink;

     }

 </style>

 </head>

 <body>

     <p>

         Metro UI之磁贴（Tile） <span style="font-style:italic; font-size:12px; color:red;">IE9+</span>

     </p>

     <p>多选（input [ checkbox ]）</p>

     <div class="tile tile-blue">

         <label>

             <input type="checkbox" />

             <span class="symbol">

             </span><!--这个地方“<span class="symbol"></span>”刚才被编辑器直接过滤掉，也过于“智能”了吧，不是所有的空标签就真的是没有用的……好吧，这样“<span class="symbol">&nbsp;</span>”，终于把效果效果保住了——这可是关系到钩钩的显示-->
             <span class="title">

                 简单磁贴

             </span>

             <span class="content">这是磁贴的内容</span>

         </label>

     </div>

     <div class="tile tile-yellow">

         <label>

             <input type="checkbox" />

             <span class="symbol">

             </span>

             <span class="title">

                 简单磁贴

             </span>

             <span class="content">这是磁贴的内容</span>

         </label>

     </div>

     <div class="tile tile-green">

         <label>

             <input type="checkbox" />

             <span class="symbol">

             </span>

             <span class="title">

                 简单磁贴

             </span>

             <span class="content">这是磁贴的内容</span>

         </label>

     </div>

     <p>单选（input [ radio ]）</p>

     <div class="tile tile-green">

         <label>

             <input type="radio" name="tile_radio" />

             <span class="symbol">

             </span>

             <span class="title">

                 简单磁贴

             </span>

             <span class="content">这是磁贴的内容</span>

         </label>

     </div>

     <div class="tile tile-pink">

         <label>

             <input type="radio" name="tile_radio" />

             <span class="symbol">

             </span>

             <span class="title">

                 简单磁贴

             </span>

             <span class="content">这是磁贴的内容</span>

         </label>

     </div>

     <div class="tile tile-blue">

         <label>

             <input type="radio" name="tile_radio" />

             <span class="symbol">

             </span>

             <span class="title">

                 简单磁贴

             </span>

             <span class="content">这是磁贴的内容</span>

         </label>

     </div>

 </body>

 </html>

在线“玩玩”或者Fork一份自己的：

Metro UI之磁贴（Tile） IE9+

多选（input [ checkbox ]）

  简单磁贴 这是磁贴的内容
  简单磁贴 这是磁贴的内容
  简单磁贴 这是磁贴的内容

单选（input [ radio ]）

  简单磁贴 这是磁贴的内容
  简单磁贴 这是磁贴的内容
  简单磁贴 这是磁贴的内容

觉得可以的请推荐哦:)

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

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

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

  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. Bootstrap看厌了？试试Metro UI CSS吧

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

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

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

  7. GitHub 上受欢迎的 Android UI Library 整理二

    通知 https://github.com/Tapadoo/Alerter ★2528 - 克服Toast和Snackbar的限制https://github.com/wenmingvs/Notify ...

  8. 7 款免费的 Metro UI 模板

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

  9. iOS开发～UI布局（二）storyboard中autolayout和size class的使用详解

    一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...

随机推荐

  1. mysql命令行执行时不输出列名(字段名)

    -N 即可 如:mysql -N -e "select * from test" 摘自:http://blog.csdn.net/eroswang/article/details/ ...

  2. nuget用法

    Update-Package -reinstall -ProjectName Cardin.HeartCare.Service.ChatService

  3. Java文件操作系列[2]——使用JXL操作Excel文件

    由于java流无法实现对Excel文件的读写操作,因此在项目中经常利用第三方开源的组件来实现.支持Excel文件操作的第三方开源组件主要有Apache的POI和开源社区的JXL. 总体来说,二者的区别 ...

  4. 中国区 Azure 和全球版 Azure：功能对比

    由世纪互联运营的 Microsoft Azure(文中简称为中国区 Azure)是在中国大陆独立运营的公有云平台,与全球其他地区由微软运营的 Azure (文中简称全球版 Azure)服务在物理上和逻 ...

  5. org.thymeleaf.exceptions.TemplateInputException: Error resolving template "/home/index2", template might not exist or might not be accessible by any of the configured Template Resolvers

    org.thymeleaf.exceptions.TemplateInputException: Error resolving template "/home/index2", ...

  6. javase(12)_集合框架_Queue

    一.Queue Queye接口体系图 体系分析: Deque实现类:ArrayDeque, LinkedList(数组和链表实现双向队列) BlockingDeque实现类:LinkedBlockin ...

  7. Mac更改显存

    今天尝试了 发现很有效果 不敢独享 所以贴一下,如果我火星了 ..就无视我吧 问题表现为: 1. 随机出现花屏,和 横线. 随机出现死机2. 随着再次渲染(例如桌面背景切换),花屏或横线会消失3. 当 ...

  8. Bzoj3170: [Tjoi2013]松鼠聚会 (切比雪夫距离)

    题目链接 显然,题目要求我们求切比雪夫距离,不会的可以去看一下attack的博客. 考虑枚举所有的点 转换为曼哈顿距离后. 那么对于这个点的路程和是. \[\sum_{i=1}^n | x_i - x ...

  9. PAT 乙级 1012

    题目 题目地址:PAT 乙级 1012 思路 最后一个测试点怎么也过不了,问题在于A2的判断,不能单纯地以0作为判断条件:假设满足A2条件的只有两个数6和6,计算结果仍然是0,但是输出A2的值是0不是 ...

  10. JavaScript正则表达式-字符类

    字符列表 在方括号内指定一个或者多个字符组成的字符列表,与字符列表中任意字符匹配,都被认为是匹配的.每次匹配只能匹配列表中的一个字符. str = "bird,head,fed,meadow ...