最近有一篇很火的文章，叫做《年全球网站的15个设计》。细细盘点了近些年来大火的一些网页前端设计理念。作为一只程序猿，天生缺乏艺术
一、网页布局方式——从表格到div在很久很久以前，那个网络刚刚兴起的年代，网页技术还远不及现在发达。因此，对于广大的前端程序猿们，最简洁有效的的布局技术，就是使用表格布局。何谓表格布局呢？就是使用HTML中的表格元素进行布局。这样说，或许没有一个直观的概念。那么，现在请闭上眼睛想像一下，你打开了一个EXCEL表格，然后把你想展现的内容按顺序填写到表格中，什么新闻啊、广告啊之类的，依次往表格里填，做出一个大表格来。恩，然后睁开眼睛看看下面这张以前的新浪首页的截图，你是否会发现，它的布局和你刚才的想像有许多相似之处呢？是的，这就是表格布局。也是曾经使用得十分广泛的布局方式。布局出来的网页工工整整，排满了各种内容。这种布局做出来的页面都长得大同小异，毕竟你再怎么牛，想把一个表格玩出花样来也是很困难的。
那么，现代网页的布局方式是怎样的呢？根据W3C的推荐，现代网页应当使用CSS+DIV的布局。什么是css+div布局呢？大概的意思就是将内容全部放在不同的层(DIV)中，然后通过CSS排版去调整层的具体排版方式，实现一种更为现代化的网页形式。以Firefox的下载页面为例，你看这种排版形式是否看上去就比表格好多了呢？
你或许会说，这么看还是不够直观啊，到底什么是层(div)啊？这里，我们使用火狐浏览器自带的一个开发者功能来更直观的观察一下层的样子。
上图中，以3D形式显示了刚才哪个网页中的层次结构。从上图就可以看出，现代的网页通过对不同的层做布局，产生更为灵活、独特的网页展现。相比起清一色的表格布局，层布局使得网页的样子有了更多的可能性。
你或许会说，刚才那个网页根本不算什么，做得好的表格布局也应该可以实现。那么，我们接下来展示的这个例子，将充分展现css+div这种布局形式强大的灵活性。下图截自impress.js的演示页面(北京最好白癜风专治医院白癜风药物