铱哥的趣屋
这里记录点东西.
Toggle navigation
铱哥的趣屋
首页
服务器
程序
技巧
生活
碎碎念
商品
硬件
归档
留言板
关于
网邻
歪歪扭扭的图片展示.
发布时间:2012-01-10
No Comments
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> ul.polaroids { width: 970px; margin: 0 0 18px -30px; } ul.polaroids li { display: inline; } ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); } ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; } ul.polaroids a:after { content: attr(title); } ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); } ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px; -moz-transform: none; } ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px; -moz-transform: rotate(5deg); } ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; } ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; } ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); } ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; } </style> </head><body><ul class="polaroids"><li><a href="http://www.flickr.com/photos/zurbinc/3971679981/" data-ke-src="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="Roeland!" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3985295842/" data-ke-src="http://www.flickr.com/photos/zurbinc/3985295842/" title="讨论"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="讨论" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3993123611/" data-ke-src="http://www.flickr.com/photos/zurbinc/3993123611/" title="丰盛的笑"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="丰盛的笑" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/4001991326/" data-ke-src="http://www.flickr.com/photos/zurbinc/4001991326/" title="邪马特编码"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="邪马特编码" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/4001992350/" data-ke-src="http://www.flickr.com/photos/zurbinc/4001992350/" title="阿曼达刺眼... ..."> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="阿曼达刺眼... ..." /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/4001229589/" data-ke-src="http://www.flickr.com/photos/zurbinc/4001229589/" title="涂鸦乱画..."> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="涂鸦" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3957026139/" data-ke-src="http://www.flickr.com/photos/zurbinc/3957026139/" title="该Dougernaut"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="该Dougernaut" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3428777148/" data-ke-src="http://www.flickr.com/photos/zurbinc/3428777148/" title="我看你!"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="我看你!" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3799720274/" data-ke-src="http://www.flickr.com/photos/zurbinc/3799720274/" title="石坚高尔夫球"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="石坚高尔夫球" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3799719490/" data-ke-src="http://www.flickr.com/photos/zurbinc/3799719490/" title="滚球球"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="滚球球" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3888563172/" data-ke-src="http://www.flickr.com/photos/zurbinc/3888563172/" title="鲍里斯“塔图”"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="鲍里斯“塔图”" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3427934527/" data-ke-src="http://www.flickr.com/photos/zurbinc/3427934527/" title="运动鞋和高跟鞋"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="运动鞋和高跟鞋" /> </a> </li></ul></body></html>
提示:您可以先修改部分代码再运行
纯css菜单显示
发布时间:2012-01-10
No Comments
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head><title>CSS3 jQuery style menu</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> * { margin:0; padding:0; } html {height: 100%;} body{ position: relative; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); } .navbox { position: relative; float: left; } ul.nav { list-style: none; display: block; width: 200px; position: relative; top: 100px; left: 100px; padding: 60px 0 60px 0; background: url(shad2.png) no-repeat; -webkit-background-size: 50% 100%; } li { margin: 5px 0 0 0; } ul.nav li a { -webkit-transition: all 0.3s ease-out; background: #cbcbcb url(border.png) no-repeat; color: #174867; padding: 7px 15px 7px 15px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; width: 100px; display: block; text-decoration: none; -webkit-box-shadow: 2px 2px 4px #888; } ul.nav li a:hover { background: #ebebeb url(border.png) no-repeat; color: #67a5cd; padding: 7px 15px 7px 30px; } </style> </head><body><div class="navbox"><ul class="nav"><li><a href="#" data-ke-src="#">XHTML</a></li><li><a href="#" data-ke-src="#">C++</a></li><li><a href="#" data-ke-src="#">Mootools</a></li><li><a href="#" data-ke-src="#">HTML5</a></li><li><a href="#" data-ke-src="#">CSS</a></li><li><a href="#" data-ke-src="#">jQuery</a></li><li><a href="#" data-ke-src="#">Ajax</a></li><li><a href="#" data-ke-src="#">PHP</a></li><li><a href="#" data-ke-src="#">Perl</a></li></ul></div><div class="navbox"><ul class="nav"><li><a href="#" data-ke-src="#">XHTML</a></li><li><a href="#" data-ke-src="#">HTML5</a></li><li><a href="#" data-ke-src="#">CSS</a></li><li><a href="#" data-ke-src="#">jQuery</a></li><li><a href="#" data-ke-src="#">Ajax</a></li><li><a href="#" data-ke-src="#">PHP</a></li></ul></div><div class="navbox"><ul class="nav"><li><a href="#" data-ke-src="#">XHTML</a></li><li><a href="#" data-ke-src="#">HTML5</a></li><li><a href="#" data-ke-src="#">CSS</a></li></ul></div></body></html>
提示:您可以先修改部分代码再运行
最新文章
RSS
Sublime Text 3.x (after Build 32XX)
lvm+zfs实现灵活扩容和最大利用不同容量磁盘
Synology DiskStation 7.2 试玩
idea-IU-222.4554.10 2022.2 破解和自动折叠方法,保存时格式化
麒麟v10安装docker
在arch下使用davinci-resolve
手机平板做电脑副屏
记一次转移大量照片
Ubuntu21.04当前可用的微信客户端
DaVinci Resolve 17 run 转 deb
热门文章
解包kktv的MstarUpgrade.bin文件
用aria2接管谷歌浏览器下载[停止更新]
ghostry电影订阅
Shadowsocks+ChinaDNS+redsocks2+openwrt自动分流上网
百度网盘+aria2神器,欧耶~抛弃迅雷离线
最近回复
RSS
热门标签
ubuntu
php
生活
openwrt
typecho
折腾
mysql
html
aria2
apache
Android
51单片机
Users
ipv6
git
docker
编译
游戏
插件
CSS
分类
服务器
(123)
程序
(125)
技巧
(26)
生活
(61)
碎碎念
(38)
商品
(7)
硬件
(10)
归档
September 2023
August 2023
June 2023
April 2023
November 2022
February 2022
November 2021
October 2021
September 2021
August 2021
July 2021
January 2021
December 2020
November 2020
October 2020
June 2020
May 2020
April 2020
February 2020
January 2020
December 2019
November 2019
October 2019
September 2019
August 2019
July 2019
June 2019
May 2019
April 2019
February 2019
January 2019
December 2018
November 2018
October 2018
September 2018
June 2018
March 2018
February 2018
January 2018
December 2017
November 2017
August 2017
July 2017
June 2017
May 2017
December 2016
November 2016
October 2016
September 2016
August 2016
July 2016
June 2016
May 2016
January 2016
November 2015
October 2015
September 2015
August 2015
July 2015
June 2015
May 2015
April 2015
March 2015
February 2015
December 2014
November 2014
September 2014
August 2014
July 2014
June 2014
May 2014
April 2014
March 2014
February 2014
January 2014
December 2013
November 2013
October 2013
September 2013
August 2013
June 2013
May 2013
April 2013
March 2013
February 2013
January 2013
December 2012
November 2012
October 2012
July 2012
June 2012
March 2012
February 2012
January 2012
其它
登录
Valid XHTML
Typecho
铱哥的趣屋
is powered by
Typecho
【京ICP备13005175号】
网站地图