翻译说明：

这是Solid State Group网站上的一篇很友好的文章，解决了我在设计中遇到的很多问题，故在此我翻译其文，并对原作者表示非常感谢！

查看原文：http://diger.cn/blog/?p=324
英文地址：http://www.solidstategroup.com/page/1592

Google的个性首页大家应该有印象吧，自由的移动布局效果相当不错，国内已经有很多页面采用这种方法了，这里是类似Google个性首页的页面自定义拖拽布局的代码，如果有兴趣的朋友可以修改修改，结合一下Cookies就更加好了

图片自动适应大小的问题在平时制作的时候是比较常见的问题，下面提供一个比较简单的解决方法：
div img {
max-width:600px;
//IE7、FF等其他非IE浏览器下最大宽度为600px;
width:600px;
//所有浏览器中图片的大小为600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
//当图片大小大于600px，自动缩小为600px;
overflow:hidden;
}

制作表单的时候，实现鼠标悬停交互效果有多种方法:
1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了，但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码增加，如果只是一个input输入框或许是无所谓的，如果是几十个几百个，增加的字节数就很宠大了。
　　2、在xhtml中加入小脚本，鼠标经过时可以切换CSS。具体内容请看这篇文章。虽然实现了内容、表现相分离，以后的修改也会很方便。但同样会让页面代码增加。

不款一错的CSS下拉菜单(多级)

手机中国新闻频道获悉，近日关于魅族科技的首款手机产品MiniOne(M8)又有新的消息传来，消息称，魅族将携M8参加明年1月7日至10日在美国拉斯维加斯举办的CES电子展，很有可能是M8的第一次公开亮相。而上市时间预计将会在2月—3月之间。相信这一消息会令很多希望在年内看到M8的魅族粉丝失望不已。

 
最新曝光的魅族M8手机效果图

只是一个实例，也有加注了说明，看一下应该能懂了！
页面所有代码如下：

方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。

引用CSS代码 view plaincopy to clipboardprint?ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}li{float:left;width:80px;height:80px;background-color:#83B1DF;}.demo