如何用CSS进行网页布局

• 1-1, 内容简介

image.png

使用 % 可以令网页自适应宽度

---

</br>

image.png

一般网页分为头部、 主体和底部~

• 单列布局
  Div{width:800px; height:500px; margin:0 auto}，上面这段样式，可以让 div 在页面的：居中对齐了.
• 两列布局
  1\ float浮动

.left{ width:220px; height:600px; background:#ccc; float:left;}
.right{ width:740px; height:600px;background:#FCC; float:right}

2\ 清除浮动
margin:0;padding:0;

• 三列布局
  position:absolute(绝对定位)

  
  image.png

.right{height:500px;width:200px;background:#ccc;position:absolute;right:0;top:0;}
.middle{height:500px;background:"orange";margin:0 300px 0 200px;}
.left{height:500px;width:200px;background:#bbb;position:absolute;left:0;top:0;}

.right用 right:0;top:0;
.left用 left:0;top:0;
middle不需设置width，width自适应 且需要设置外边距