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

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

如何用CSS进行网页布局

全部评论问答未解决精华

我很高兴

看了几节实在看不下去了，讲的比较粗糙，不适合初学者、

1 4-1 三列布局

2016-09-10

独角兽王子

.top{width:918px;height:80px;background:#ccc;}
.main{width:900px;height:600px;background:red;margin:0 auto;}
.left{width:200px;height:600px;background:blue;float:left;margin-left:-20px;}
.right{width:700px;height:600px;background:green;float:right;}
.foot{width:918px;height:50px;background:#000;}

0 5-3 编程挑战

2016-09-09

慕勒1632382

点击播放的那瞬间he老zi一跳！能换个背景乐么？

0 1-1 内容简介

2016-09-09

enough2

.right{right:0}这个里面要加right:0;不然不行

0 4-3 编程练习

2016-09-09

lemeo12

颜色什么的，完全弄不了一模一样的。。。。

0 5-3 编程挑战

2016-09-09

Cre

.top{width:100%;background-color:#999;}
.main{width:80%;height:600px;margin:0 auto;background-color:red;}
.left{width:200px;height:600px;background:blue;float:left;margin-top:-600px;}
.right{background:green;height:600px;margin-left:210px;}
.foot{width:100%;background-color:orange;clear:both;}

0 5-3 编程挑战

2016-09-09

叶删号

.top{height:100px;background:#ccc;width:100%;}
.main{height:600px;width:100%;background:#CC0000;}
.left{width:200px;background:#000ccc;height:600px;float:left;}
.right{background:#00FF00;height:600px;float:right;}
.foot{width:100%;height:100px;background:#CC00CC;float:both;}

0 5-3 编程挑战

2016-09-07

慕用5675268

left{positon:absolute;margin-top:-500px;}
margin 用负值就好了。
这里如果按照给的答案来的话，会发现右边的块很正常，但是左边的的块就是上不去，空很大一块位置。因为div是块级元素，会占据一整行，虽然左边设置了margin，但是这个空间还是属于右边div的，由于right没有设置宽度，所以他的父级元素main,被完全占据了，导致left直接就被挤出来了。

2 5-3 编程挑战

2016-09-07

麦同学3946217

.top{height:100px;width:100%;background:#ccc;}

.main{height:350px;width:100%;background:red;}

.left{width:200px;height:350px;background:blue;float:left;}

.right{height:350px;background:#83E561;margin-left:205px;}

.foot{height:65px;width:100%;background:orange;}

注意！<body>里‘right’和‘left’层上下位置被我调换

0 5-3 编程挑战

2016-09-07

麦同学3946217

.top{height:100px;width:100%;background:#ccc;}
.main{height:350px;width:100%;background:red;}
.left{width:200px;height:350px;background:blue;float:left;}
.right{height:350px;background:#83E561;margin-left:205px;}
.foot{height:65px;width:100%;background:orange;}

0 5-3 编程挑战

2016-09-07

慕粉3948512

.top{height:100%;background:lightgrey;}
.main{height:500px;background:red;}
.left{height:500px;width:22%;background:blue;float:left;}
.right{height:500px;width:77%;background:lightgreen;float:right;}
.foot{height;background:#FF6633;}

0 5-3 编程挑战

2016-09-06

慕粉18221508921

.top{height:100px;background:lightgrey;}
.main{height:500px;background:red;}
.left{height:500px;width:22%;background:blue;float:left;}
.right{height:500px;width:77%;background:lightgreen;float:right;}
.foot{height:50px;background:#FF6633;}

0 5-3 编程挑战

2016-09-06