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

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

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

响应式布局,响应式布局主要针对宽度制定,简单点,一般对于手机宽度小于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 访问量:690