亲宝软件园·资讯

展开

常见页面布局

double-shuang 人气:0
1、一列布局
  (1)通栏布局
    直接利用块状元素独占一行和默认宽度100%的特性实现
  (2)居中布局
    div {width:1200px;height:500px;margin:0 auto;}
  (3)全屏布局
    第一种:div {height:100vh;}
    第二种:html,body {height:100%};div {height:100%}
 
2、两列布局
  (1)两列自适应
    设置两个div都加浮动,他们的宽度都使用%获取vw
  (2)一列固定一列自适应
    第一种:固定的侧边栏标签在前,自适应的主体内容标签在后
      <aside></aside>
      <main></mian>
      侧边栏在左
        aside {width:300px;height:500px;float:left;}
        main {height:800px;margin-left:300px;}
      侧边栏在右
        aside {width:300px;height:500px;float:right;}
        main {height:800px;margin-right:300px;}
    第二种:自适应的主体内容标签在前,固定的侧边栏标签在后
      <main></mian>
      <aside></aside>
      侧边栏在左
        aside {float:left;width:300px;height:500px;margin-left:-100%;}
        main {float:left;width:100%;height:800px;box-size:border-box;padding-left:300px;}
      侧边栏在右
        aside {float:left;width:300px;height:500px;margin-left:-300px;}
        main {float:left;width:100%;height:800px;box-size:border-box;padding-right:300px;}

 

3、三列布局
  两列固定一列自适应
  (1)固定侧边栏标签在前,自适应主体内容标签在后
    <div class="l"></div>
    <div class="r"></div>
    <div class="c"></div>
    .l {float:left;width:200px;height:300px;}
    .r {float:right;width:400px;height:500px;}
    .c {margin-left:200px;margin-right:400px;}
  (2)自适应主体内容标签在前,固定侧边栏标签在后
    <div class="c"></div>
    <div class="l"></div>
    <div class="r"></div>
    .l {float:left;width:200px;height:300px;margin-left:-100%;}
    .r {float:;width:400px;height:500px;margin-left:-400px}
    .c {float:left;width:100%;height:100px;box-size:border-box;padding-left:200px;padding-right:400px;}

加载全部内容

相关教程
猜你喜欢
用户评论