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

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

如何用CSS进行网页布局

全部评论问答未解决精华

为什么显示不出来那个效果？求大神指点哪里错了

最赞回答 / 噼里啪啦稀里哗啦啊啊啊

你设置的margin，是距离left这个div的上外边距为0，所以会下沉应该加上position:absolute;top:0; 这样才是距离父级元素body的上外边距为0

3 回答 684 浏览 4-3 编程练习

2017-01-03

为什么显示不出来。求大神指点

最新回答 / 张土土

点击全屏，会得到你想要的结果！

2 回答 693 浏览 4-1 三列布局

2017-01-03

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

我又点懵逼。什么时候要用浮动的，什么时候要用positon？

最赞回答 / 敬的男人

当布局按比例来分，宽度不确定时用浮动，当有宽度确定时需要用position进行绝对定位

2 回答 460 浏览 5-3 编程挑战

2016-12-30

这个div的标题一定要写么？为什么我没写会没有反应。显示不出结果

最赞回答 / jcssjszgr

高度是height，不是weight。。。。类是class，不是clasee。。

1 回答 398 浏览 5-1 混合布局

2016-12-30

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

我这个代码对吗？请大神们帮忙看下谢啦

最新回答 / EricZoo

.top{background:#ccc;height:100px;}.main{background:red;height:600px;}.left{background:blue;height:600px;width:200px;}.right{background:yellow;height:600px;width:100%;left:210px;position:absolute;}.foot{background:orange;height:50px;}这是我测试的最少代码实现了，疑问或错误欢迎...

3 回答 446 浏览 5-3 编程挑战

2016-12-28

5-3节，最后的编程题

最赞回答 / EliPec

个人认为：right和left是在main下的块状元素，属于块嵌套着块，当left设定了绝对定位后，right不设置宽度为自适应，所以宽度为main的宽度减去left的宽度。->我的答案，亲测无误。.top{width:100%;background:gray;height:50px;}.main{width:100%;background:red;height:500px;}.left{ width:30%;float:left; background:blue;height:500px;}.ri...

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

2016-12-27