Css+div页面布局的基本知识

页面整体布局,对称并不美

显示页面的时候,最开始的是整体布局,有的时候对称布局并不美,对于双栏布局举例,下图是一个双栏布局,常见于新闻,视频网站。经过多番对比,发现看起来舒服的布局,通常都并不遵循对称原则,例如下图左右侧间隔明显不同,但我们第一看看这个布局,并不会觉得左右侧宽度有多少差距。所以说页面布局考虑的更多的是人眼的感受,而不是具体的数字…原来对称并不美。

阅读舒适性是第一诉求

同样是上图,双栏布局看起来并不舒服.原因是左边距小于右边距.虽然感觉还算对称,但左边距小的后果就是导致50%宽度的主要内容更加靠近屏幕的左侧而不是中央,作为主要内容最舒服的位置是屏幕的中间,侧边栏只是点缀.所以上图双栏布局可以修改为左边距为15而右边距为10.还有主要内容的宽度要适中,没有,宽度宽超过1100px阅读变得不舒服,一般使用960px进行设计.

响应式布局

响应式布局,响应式布局主要针对宽度制定,简单点,一般对于手机宽度小于601,对于平板宽度小于601~901,对于电脑宽度大于901.对于上面的布局,我们想要在屏幕宽度小于601px时,将侧边栏(24%)移动到页面主要内容(50%)下面,而大于901px时,放在左侧。另外使用流动布局,宽度多使用距离单位em而不是px。

只有当屏幕宽度大于901px(最小为901),才启用里面的css样式,

@media screen and (min-width:901px) {
    .blogSiderBar {
        display: block;
        width: 32%;
        margin-left:3%;
        float: left;
        background-color: white;
    }
}


常见的内容布局

    上图是我常见到的4个内容布局,布局123适合带图片或者视频的内容列表排列,布局4适合文字为主的布局。布局1相比布局2,区别在于布局1更注重文字给用户的体验,布局3重点在于吸睛,用一张大图片引起你的注意力。当然布局不止以上几种。不同布局运用到不同场景中,应该看需求采用。

作者:songshizhao 发表于:2017-04-19T05:44:15 访问量:1040
评论 [发表评论]