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

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

如何用CSS进行网页布局

全部评论问答未解决精华

Justhaf

.main{ height:500px; background:#F00; position:relative;}
.left{ width:200px; height:500px; background:#00F; position: absolute;}
.right{ width:calc(100% - 205px); height:500px; margin:0 0 0 205px; background:#90EE90; position: absolute;}

0 5-3 编程挑战

2016-03-16

qq_白杨_4

很不错，简洁明了

2016-03-15

如何在div中设置标签<p>的位置

最新回答 / 走走道儿丢了

直接在div中写p标签就行<div> <p>test</p></div>如果需要顶格，需要取出body的padding与margin

2 回答 7626 浏览 3-3 编程练习

2016-03-15

SilkyheartFeng

.top{height:100px;background:#ccc;}
.main{height:800px;background:red;}
.left{height:800px;width:200px;position:absolute;top:100px;left:0;background:blue;}
.right{height:800px;margin:0 0 0 200px;background:green;}
.foot{height:100px;background:orange;}

0 5-3 编程挑战

2016-03-15

为什么会出现空白

已采纳回答 / 南雄

是不是比例弄错了

3 回答 669 浏览 5-2 实践题

2016-03-15

为什么right会下去了一大块呢？

已采纳回答 / 2016_Maybe

把div中的main那个文字去掉就好了<...图片...>

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

2016-03-15

为什么左右两块设置float的时候会是视频中的布局？

已采纳回答 / 玖零儛

中间没设置宽度，继承父物体body宽度，左边设置为200px，左边剩余空间放不下默认宽的中间，中间被挤下来独占一排，剩下的右边也是在另外一行的右边

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

2016-03-14

三分之三

.top{height:100px;background:#ff4100;}
.main{height:600px;background:#ffe400}
.left{ width:200px;height:600px;background:#25f006;position:absolute;left:0;top:100px}
.right{height:600px;background:#0897f9;margin-left:210px}
.foot{height:100px;background:#e433ee}

0 5-3 编程挑战

2016-03-14

yinyun

老师是山东人？

0 2-1 一列布局

2016-03-14

有浮动right背景粉色在浏览器中没有

已采纳回答 / 我乐意

把左浮动那行多的大括号删掉试试

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

2016-03-14

硪佐伱佑

.left{ width:200px; height:600px; background:#ccc; position:absolute;【任务1】; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px;【任务2】; background:#9CF;font-size:10px;}
.right{ height:600px; width:300px; position:absolute; top:0;right:0; 【任务3】; background:#FCC;}
实现不了的任务二后面加个分号，字号随意

0 4-3 编程练习

2016-03-14

硪佐伱佑

.left{ width:300px; height:600px; background:#ccc;float:left;text-align:left; 【任务1】}/*左浮动样式*/
.right{ width:640px; height:600px;background:#FCC;float:right;margin-left:20px;text-align:left;【任务2】}/*右浮动样式*/

0 3-3 编程练习

2016-03-14

wjlwcl

请问浮动为什么脱离文档流了？

0 4-1 三列布局

2016-03-13

秋雨梧桐叶落时0

上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。
解决方法有两个：1.清除浮动， clear:both;
2.为main设置高度， .main{
width:860px;height:600px;margin:0 auto;background:#9FC;
}

128 5-2 实践题

2016-03-13