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

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

如何用CSS进行网页布局

全部评论问答未解决精华

慕莱坞5075437

浏览器加载html页面是从上到下一行一行的下载和渲染的。
.top{height:100px; background:#ccc;}
.main{height:500px; background:red; position:relative;}
.right{height:500px; background:lightgreen; position:absolute; left:210px; width:100%;}
.left{width:200px; height:500px; background:blue;}
.foot{height:50px; background:orange;}

1 5-3 编程挑战

2016-07-14

两列布局中两个div无法并排显示

已采纳回答 / Fire1

float 写错了哈哈哈哈

1 回答 1708 浏览 3-1 二列布局

2016-07-14

Summer_夏

清楚浮动的方法综合一下答案：
一：clear:both(/left/right);

二：overflow:hidden;width:100%;

三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;}

四：margin:600px 0 0 0;

★★★推荐使用方法一和方法二，在给footer使用overflow的时候，千万不要忘记设置它的宽度。★★★

13 5-2 实践题

2016-07-14

Summer_夏

清楚浮动的方法综合一下答案：

一：clear:both(/left/right);

二：overflow:hidden;width:100%;

三：给main设置高度：.main{width:960px; {height:600px};margin:0 auto;}

四：margin:600px 0 0 0;

★★★推荐使用方法一和方法二，在给footer使用overflow的时候，千万不要忘记设置它的宽度。★★★

1 5-2 实践题

2016-07-14

Summer_夏

6666666666666666666

1 5-1 混合布局

2016-07-14

199129

Like this:
.top{width:100%;background:gray;}
.main{width:100%;background:red;}
.left{width:200px;background:blue;}
.right{margin-left:210px;width:100%;background:green;position:absolute;}
.foot{width:100%;background:#369;}

0 5-3 编程挑战

2016-07-14

franciswsl

代码无误但是看不见效果，把第9行的width改小一点

2 2-3 编程练习

2016-07-14

fujmi

.right{ width:740px; height:600px;background:#FCC; float:right}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC;float:right;}
.footer{ height:50px; background:#9F9;clear:both;}

0 5-2 实践题

2016-07-14

为啥中间输入背景颜色代码代码#999后仍然没有改变

最新回答 / i挫挫

去掉【任务2】，或者把【任务2】移到background:#xxx后面

2 回答 716 浏览 4-3 编程练习

2016-07-14

为什么把视频也看完了，在章节列表页面才是半个绿圈，不是整个绿圈啊

最新回答 / 甜筒儿

可能是习题没做完吧

3 回答 1595 浏览 1-1 内容简介

2016-07-13

关于absolute布局的问题

最新回答 / 秋风瑟瑟荒草成堆

看看你代码是不是分号啥的打多了我的sublime就是多打分号就出毛病，不是没有颜色就是布局不对

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

2016-07-13

勇敢的阿道克船长

老师hen亲切a

1 5-1 混合布局

2016-07-13

勇敢的阿道克船长

.main{ width:960px; height:600px; margin:0 auto}
.left{ width:290px; height:600px; background:#ccc; float:left;}/*左浮动样式*/
.right{ width:650px; height:600px; background:#FCC; float:right; }/*右浮动样式*/

1 3-3 编程练习

2016-07-13

勇敢的阿道克船长

.main,.footer{ width:50%; margin:0 auto;}

2 2-3 编程练习

2016-07-13