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

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

如何用CSS进行网页布局

全部评论问答未解决精华

塌鼻头先生

1.75陪的速度看到刚刚好

1 3-1 二列布局

2016-03-24

Rising_sune

body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%;background:RGB(204,204,204);height:100px;}
.main{background:red;position:relative;}/*使left以main为基准绝对定位*/

0 5-3 编程挑战

2016-03-23

Rising_sune

.left{ width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
.right{height:500px;background:RGB(154,204,153);margin-left:210px;}
.foot{width:100%;background:RGB(255,102,52);}/*因为是position实现排版,所以不需要清除浮动*/

1 5-3 编程挑战

2016-03-23

Web_Daibhid

建议给个参考答案，不然评论区里这么多都不知道哪些是对的，哪些更为简练，有参考代码可以适当调整。

0 5-3 编程挑战

2016-03-23

萌萌哒的虚耗

老师写代码居然都不带缩进

0 4-1 三列布局

2016-03-22

保卫家乡

源代码第十行最后多了一个 }

5 3-3 编程练习

2016-03-22

慕桂英5250780

/*solution 2:calc used*/
.left{float:left; width:200px; height:500px;}
.right{float:right; width:calc(100% - 205px); height:600px;}
.foot{clear:both;}

0 5-3 编程挑战

2016-03-22

慕桂英5250780

/*solution 1:div.left must shorter than div.right.*/
.top{width:100%;}
.main{position:relative;}
.left{width:200px; position:absolute; left: 0; top: 0; height:510px;}
.right{margin:0px 0px 0px 210px; height:500px;}
.foot{width:100%;}

0 5-3 编程挑战

2016-03-22

为什么main里面要加一个相对定位 position:relative???

已采纳回答 / 胡明桂

如果不加的话，里面div的定位就是对body进行定位了。

1 回答 999 浏览 5-3 编程挑战

2016-03-22

ganqibaoqi

.top{height:100px;background:#cfcfcf;}
.main{background:red;}
.left{width:200px;height:600px;background:blue; position:absolute; top:100px; left:0px;}
.right{background:#7bc69f;width:100%; margin:0 0 0 205px; height:600px;}
.foot{background:#e37411;}

0 5-3 编程挑战

2016-03-22

ganqibaoqi

父级元素里面添加 overflow:hidden 也可清除浮动

1 5-2 实践题

2016-03-22

Frank55

能说话大声点么？太小了。

0 2-1 一列布局

2016-03-22

xiangya_9186

.top{height:80px;margin:0 auto;background:gray;}
.main{height:500px;background:red;position:relative;}
.left{ width:200px;background:blue;height:500px;position:absolute;top:0;left:0;}
.right{width:100%;background:cyan;height:500px;margin:0 0 0 210px;}
.foot{bottom:0;height:50px;background:orange;}

0 5-3 编程挑战

2016-03-21