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

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

如何用CSS进行网页布局

全部评论问答未解决精华

如初_Prime

.top{height:50px; background:gray;}
.main{height:400px;background:red;position:relative; }
.left{ width:200px; height:400px; background:blue;}
.right{height:400px;background:green;margin-left: 210px;position:absolute;}
.foot{ height:50px; background:orange;overflow:hidden;}

0 5-3 编程挑战

2016-09-20

慕斯6156963

.top{height:100px;background-color:red;}
.main{position:relative;}
.left{width:200px;height:400px;background-color:green;position:absolute;top:0;left:0;}
.right{height:400px;background-color:blue;margin-left:210px;}
.foot{height:50px;background-color:#f60;}

0 5-3 编程挑战

2016-09-19

莎莎思密达

.top{width:100%;height:60px;background:gray;}
.main{width:100%;height:800px;background:red;}
.left{ width:200px;height:800px;background:blue;float:left;}
.right{width:60%;height:800px;background:green;float:right;}
.foot{width:100%;height:60px;background:orange;clear:both;}
ok

0 5-3 编程挑战

2016-09-19

qq_玖零後_0

body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px; background:#ccc}
.main{background:red;}
.left{ width:200px; height:500px; background:blue;float:left; }
.right{ margin-left:210px;height:500px; background:#9C9;}
.foot{ height:50px; background:#F63;}

2016-09-19

不可以为空

main部分的高度是靠left撑起来的
.top {width:100%; background:grey;height:200px;}
.main{background:red;position:relative;width:100%;}
.left{ background:blue;width:200px;height:700px}
.right{background:green;position:absolute; height:700px;margin:0 0 0 210px;width:100%;}
.foot{background:orange;clear:both;}

0 5-3 编程挑战

2016-09-18

记忆1943

这是答案！。。。。。。。。。。。。。。表示这哥们做事好容易往简单方面想象

0 5-3 编程挑战

2016-09-16

xing_org1

先加载就是在html中在前面的意思吧

0 5-3 编程挑战

2016-09-16

我是谁从哪来去哪里

.main{width: 100%;height: 800px;position: relative;}
.left{width: 200px;height: 800px;margin-right: 10px;background:blue;position: absolute;left:0;top:0}
.right{height: 800px;background:green;margin-left: 210px;}
.foot{width: 100%;height: 200px;background:yellow;clear:both;}

0 5-3 编程挑战

2016-09-16

记忆1943

听不懂的同学可以先去听《网页布局基础》再回来听还是很好理解的

1 3-1 二列布局

2016-09-16

Stup1d3827839

.top{width:100%;height:80px;background-color:gray;}
.main{width:100%;height:500px;background-color:red;}
.left{ width:200px;height:500px;background-color:blue;float:left;}
.right{height:500px;background-color:green;position:absolute;left:210px;right:0px;}

0 5-3 编程挑战

2016-09-15

qq_慕尼黑2351491

.top{height:80px; width:500px; background:#ccc;}
.main{height:300px; width:500px;background:#f00;}
.left{height:300px; width:130px;background:#00f;float:left;}
.right{height:300px; width:360px;background:#9c9;float:right;}
.foot{height:40px; width:500px; background:#f63;}

0 5-3 编程挑战

2016-09-15

qq_慕尼黑2351491

用代码 position:absolute; 替换【任务1】
用代码 margin:0 310px 0 210px; 替换【任务2】
用代码 right:0;top:0; 替换【任务3】

1 4-3 编程练习

2016-09-15

精慕门4137357

.head,.main{ width:960px; margin:0 auto}
.left{ width:220px; height:600px; background:#ccc; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right}
.footer{ height:50px; background:#9F9; clear:both}

0 5-3 编程挑战

2016-09-15