CSS

如何清除浮动

浮动的块级元素在网页布局中经常用到,因为它灵活方便,但也有副作用,比如浮动的块级元素无法撑起父级元素的高度,本文介绍浮动元素为何无法撑起父级元素的高度,以及清除浮动的最佳方法。

Read More
工具网站

快速响应的Web设计案例大全

Greenbelt Festival

快速响应的Web设计,英文叫做Responsive Web Design。用户访问web的设备种类繁多,可以是手机、平板或者笔记本,屏幕尺寸不一,快速响应的Web设计就是为了让用户无论用何种尺寸屏幕访问网站,都能获得最佳体验。网页会根据屏幕尺寸自行调整,适应不同屏幕。

今天向大家介绍的是一个网站——MediaQueri.es

该站展示的网页全部符合Responsive Web Design的标准,如果你想找点灵感,这里绝对不容许错过。

下面是一些案例展示

Read More
工具网站

CanIUse.com -轻松 获取HTML5、CSS3各浏览器兼容性

caniuse.com

今天看Lynda.com视频,讲到一个很实用的网站叫做CanIUse.com,标语是“When can I use…Support tables for HTML5, CSS3, etc”。在这里你能找到所有web新特性在各个品牌浏览器以及各品牌浏览器不同版本的兼容性,当你知道你针对的用户都在使用什么浏览器时,这写table将对你建设网站有很大帮助。

Read More
Javascript

jQuery Mega Menu集合

Css Mega Menu

Mega Menu是多栏下拉菜单,通常下拉菜单只显示一栏,如果项目多了就会很长,Mega Menu下拉列表中将菜单显示成多栏,可以有效的利用空间,Mega Menu效果请参考本站导航菜单。

jQuery Mega Menu 1

jquery mega menu

Read More
CSS

又被DOCTYPE耍了

doctype

布局一个表单,想实现垂直居中的效果,用的方法很普通,就是设置高度=line height的把戏,在网上找了实例,例子管用,我copy了例子的html和css,却死活不管用。苦思冥想,得瑟了半天,才返现又掉进了DOCTYPE的陷阱。

Read More
CSS

用PhotoShop压缩PNG图片

Posterize

大的PNG图片尺寸动辄几百kb,网速慢会严重拖慢打开网页的速度,其实用Adobe PhotoShop的色调分离功能就可以有效的压缩PNG图片,并且质量是可控的。

Read More
Javascript

如何实现Pinterest布局

pinterest-layout

Pinterest布局是瀑布流布局的一种,完全使用javascript实现,自从看见Pinterest以后,就对这种布局的原理很好奇,我不懂前端的知识,看到这种布局的感觉是云山雾里,连自己到底不懂什么都不知道了。

pinterest-layout

Read More