如何用CSS进行网页布局_技术问答

首页免费课如何用CSS进行网页布局问答

如何用CSS进行网页布局

全部评论问答未解决精华

aliezhou

.top{width:100%;height:100px; background:#9CF;}
.main{height:300px;width:100%;background:blue;}
.right{height:300px;width:100%;background:red;position:absolute;left:210px;}
.left{width:200px;height:300px;background:yellow;position:absolute;left:0;}

.foot{width:100%;height:100px; background:#9CF;}

0 5-3 编程挑战

2017-01-01

SunmerKey

10行的花括号去掉一个，老师的目的应该是使用浮动加定位
.left{ width:300px;
height:600px;
background:#ccc;
float:left;}/*左浮动样式*/

.right{ width:660px;
height:600px;
background:#FCC;
float:right;
position:absolute;
left:320px;}/*右浮动样式*/

2 3-3 编程练习

2016-12-31

葉绯红

body{ margin:0; padding:0; font-size:30px;}
.top{height:100px; width:100%;}
.main{height:600px; width:100%;}
.left{height:600px; width:200px; float:left;}
.right{height:600px; width:100%; position:absolute; margin:0 0 0 210px;}/*margin可以改为left:210px;*／
.foot{height:50px; width:100%;}

1 5-3 编程挑战

2016-12-31

LUKAX

这里使用浮动更简单，计算right可以使用calc
.top{background:#ccc;height:100px;}
.main{background:red;height:400px;}
.left{background:#0000fe;height:400px;float:left;width:200px;}
.right{background:#9acc99;height:400px;float:right;width:calc(100% - 210px);}
.foot{background:#ff6634;height:50px;}

0 5-3 编程挑战

2016-12-30

qq_C_hiara_S_li_03273570

为什么吗我写的一样，却刷新不来底部

1 2-1 一列布局

2016-12-30

LUKAX

如果不是top：0的情况下这样貌似不行 middle div会将 right div压下去

0 4-1 三列布局

2016-12-30

qq_狼来了_0

djejaj

0 2-2 练习题

2016-12-28

啊哈哈哈哈百无聊赖

.body{margin:0;
padding:0}
.top{height:100px;background:#CCCCCC}
.main{width:500px;height:500px;background:red;margin:0 auto;}
.left{width:200px;height:500px;float:left;background:blue;}
.right{height:500px;margin:0 0 0 210px;background:#99FFCC;}
.footer{height:100px;background:#FF6600;}

0 5-3 编程挑战

2016-12-28

qq_坚持_16

右侧先加载，左侧后加载。不懂

1 5-3 编程挑战

2016-12-27

weibo_无有万相空_0

图中各区域RGB颜色：

top:204 204 204

main:252 3 1

left: 0 0 254
right: 154 204 153

foot:255 102 52

使用方法：.top{ background-color: rgb(204,204,204); }

1 5-3 编程挑战

2016-12-26

慕粉23145810

啊。救命，，，，，

0 5-1 混合布局

2016-12-25

调调37

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}

0 4-3 编程练习

2016-12-24