也来“玩”Metro UI之磁贴（二）
继昨天的“也来“玩”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"> </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之磁贴（二）的更多相关文章
- 也来“玩”Metro UI之磁贴
也来“玩”Metro UI之磁贴 Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩, ...
- 也来“玩”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)使用的颜色集合(浅绿色,绿色,深绿色,品红,紫色等).可以查看每一种颜色的各种 ...
- Bootstrap看厌了？试试Metro UI CSS吧
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审 ...
- Metro UI 界面完全解析 (转载)
Metro在微软的内部开发名称为“ typography-based design language”(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro ...
- GitHub 上受欢迎的 Android UI Library 整理二
通知 https://github.com/Tapadoo/Alerter ★2528 - 克服Toast和Snackbar的限制https://github.com/wenmingvs/Notify ...
- 7 款免费的 Metro UI 模板
#1 – Free Metro Ui Style template by Asif Aleem 很棒的蓝色调 Metro UI 管理模板 #2: Metro-Bootstrap by TalksLab ...
- iOS开发～UI布局（二）storyboard中autolayout和size class的使用详解
一.概要:前一篇初步的描述了size class的概念,那么实际中如何使用呢,下面两个问题是我们一定会遇到的: 1.Xcode6中增加了size class,在storyboard中如何使用? 2.a ...
随机推荐
- jsp实现账户登录、注册！
jsp连接mysql数据库进行账户登录验证和账户注册 ~jsp: Login.jsp .LoginCl.jsp.Welcome.jsp.Register.jsp.login.css login.css ...
- 【Web应用-Kudu】Kudu 管理和诊断 azure web 应用
Azure Kudu是 GitHub 上的一个开源项目,Kudu 站点 (也称为网站控制管理 SCM) 提供了一系列的在线工具,可以帮助用户查看 web 应用的设置,诊断 web 应用,以及安装 w ...
- vba 两个表 信息合体一个表格
1 把Excel某一区域的内容读入到数组中: Dim strArray() As Variant Dim wk_data As Variant Set wk_data = Sheets("S ...
- （三）mybatis之对Hibernate初了解
前言:为什么会写Hibernate呢?因为HIbernate跟Mybatis一样,是以ORM模型为核心思想的,但是这两者有相似的地方也有差异的地方.通过这两种框架的比对,可以对mybatis有着更深的 ...
- pathForResource获取资源为nil的原因
利用NSbundle获取 资源文件的时候,如果是自己添加的文件,获取的时候纵使返回nil的解决办法.原因是因为该文件没有添加到资源文件中,只要在添加文件的时候选择添加到 Create Folder R ...
- 利用python进行数据分析3_Pandas的数据结构
Series #通过list构建Series ser_obj=pd.Series(range(10,20)) print(type(ser_obj))#<class 'pandas.core.s ...
- jquery动态实现填充下拉框
当点下拉框时动态加载后台数据. 后台代码 protected void doPost(HttpServletRequest request, HttpServletResponse response) ...
- Flask——蓝图
蓝图介绍 一个项目中,有不同的模块,但是只有一个入口,程序入口可以随便取名,一般叫做,app.py或者manage.py.当我们写一个程序,当然可以在一个文件中写完,但是有一定规模的项目,我们肯定不会 ...
- ios之UIActionSheet
UIActionSheet是在IOS弹出的选择按钮项,可以添加多项,并为每项添加点击事件. 为了快速完成这例子,我们打开Xcode 4.3.2, 先建立一个single view applicatio ...
- WebAssembly MDN简单使用
MDN 就是通过编译器编译完成c后生成的胶水代码 引入js 就能直接调用定义在c或者c++中的函数了 c代码如下: #include <stdio.h> #include <stdl ...