saber 酱的抱枕

下图是fate stay nigth官网，作为一个游戏网站，突出了最新资讯的大图。

左侧是logo、导航、新闻推荐、活动链接、最新资讯的pv，右侧是最新资讯的大图展示，占据了大部分版面。大图不是背景图，而是右侧主体div里面的img标签，用width:100%;height:auto;来适应布局。当然作为body主体的wrap也设置了最小宽度。图片应该高度大于宽度，确保页面在最小布局的时候图片不会小于一屏。

底部贯通全屏，主体部分是横向排列的logo、大分类链接、新闻推荐、社交网站帐号、分享按钮。最底部是版权信息。

从整体配色上来看，黑白搭配，顶部色调深沉，底部则是淡雅的浅白色（查看所用的背景图片）。

所谓的大分类链接，就是和本站同等级的产品了，这几个链接除了出现在底部，还在顶部有显示。点击顶部的下拉三角按钮就会展开。

其实body里面是有一个全站通用背景的，在首页我们看不到，因为左侧被特意加了黑色背景，右侧则被大图遮挡了。在内页可以看到固定的背景图

备注：
在内页，左侧是有淡淡的黑色背景的。一般来说，我会考虑rgba属性，但是显然在ie里面会有兼容性问题。以前只能想到用背景图片来做兼容，现在查看此站左侧的css，如下：

第一句也是rgba，第二句也是，但是前缀"-pie-background"我看不懂，百度之，发现这句和第三句是联系在一起的，这个PIE.htc是在IE中实现css3一些效果的文件。又百度之，有空了可以参照此文研究研究。如果能用得了这个，则圆角、半透明背景色就可以不用切图了，善莫大焉。当然使用这个也是有一些限制的，要先仔细看看这篇文章。

网页布局分析——fsn ubw tv动画官网