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

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

如何用CSS进行网页布局

全部评论问答未解决精华

海子de微博

点赞。。。。

1 5-3 编程挑战

2017-03-31

Frank810

我觉得应该在外边加一个父容器进行包裹，然后给父容器设置position：relative，这样更加合理些。

2 4-1 三列布局

2017-03-29

改名字啦已经

其实我记不清兼容ie6哪些应该这样。。。。

0 5-3 编程挑战

2017-03-27

改名字啦已经

老师说的很好诶之前看其他网站的教程我都要疯了这里我就知道了加油吧

0 5-1 混合布局

2017-03-27

Ajayy

.top{width:100%; height:50px;background:gray}

.main{width:100%; height:300px;background:red;position:relative}

.left{width:200px;height:300px;background:blue;position:absolute;top:0; left:0;}

.right{margin-left:210px;height:300px;background:green}

.foot{width:100%; height:50px;background:#369}

2 5-3 编程挑战

2017-03-27

Ajayy

“要求右侧（right）先加载，左侧（left）后加载”的意思就是在html布局中right在left的前面。重置代码（原来的代码）可以看到left在right后面。

1 5-3 编程挑战

2017-03-27

Ajayy

大家不觉得这道题有问题吗？
left为200px不变，右侧为继承父元素的100%，导致浏览器下面有横向的滚动栏

1 5-3 编程挑战

2017-03-26

大家不觉得这道题有问题吗？

最赞回答 / __没有人

没有滚动条(即使加上overflow)，不设置margin-left就有部分重叠，因为右侧默认与父容器等宽，换句话说，如果有滚动条，左侧你拉动的距离就是右侧盒子与父容器的宽差，就不满足等宽了

4 回答 570 浏览 5-3 编程挑战

2017-03-26

大大大虾仁

属性排成顺眼的方式就容易发现问题啦！
*{ margin:0; padding:0;}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ width:300px; height:600px; background:#FCC; position:absolute; top:0;right:0;}
</style>

0 4-3 编程练习

2017-03-26

大大大虾仁

第一：第十行右边多了一个花括号
第二：要想和效果图一样，把main的width改成大于960即可。970,980都可以

0 3-3 编程练习

2017-03-26

聰_0

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

0 5-3 编程挑战

2017-03-26

慕粉mammon

66666

0 5-1 混合布局

2017-03-25

慕粉4270678

.top{width:80%;background:gray;height:200px;}
.main{width:80%;height:300px;background:red;}
.left{ width:30%;height:300px;background:blue;float:left;}
.right{width:69%;height:300px;;background:green;float:right;}
.foot{width:80%;height:100px;background:orangered;}

0 5-3 编程挑战

2017-03-25