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

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

如何用CSS进行网页布局

全部评论问答未解决精华

为什么我代码弄出来的布局和老师不一样？

已采纳回答 / Rikka1111

2 回答 505 浏览 5-1 混合布局

2016-03-13

绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白什么时候用定位，什么时候用浮动了。一个元素浮动或绝对定位后，它将自动...

2 回答 564 浏览 5-2 实践题

2016-03-13

混合布局的问题

最新回答 / 慕用4462629

duia

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

2016-03-13

高度自适应

最赞回答 / 小毛同学

height:xx%

3 回答 860 浏览 2-1 一列布局

2016-03-13

Shanemark

.main{ width:960px; height:600px; margin:0 auto;border: 1px solid black;}
.left{ width:300px; height:600px; background:#ccc; float:left;margin-left: 20px;}/*左浮动样式*/
.right{ width:600px; height:600px; background:#FCC; float: right;margin: 0 20px;}/*右浮动样式*/

0 3-3 编程练习

2016-03-13

Shanemark

imooc的这个web编辑器有问题，大家还是拷贝到本地编辑再调用浏览器比较好，再给main加个border这个更容易看出来

0 3-3 编程练习

2016-03-13

swmtl

.top{height:100px; background:#CCC;}
.main{height:300px; background:#F00;}
.left{width:200px; height:300px; background:#00F; position:absolute; left:0; top:100px;}
.right{width:100%; height:300px; background:#0FF; margin:0 0 0 210px;}
.foot{height:50px; background:#C67;}

0 5-3 编程挑战

2016-03-13

为什么实现不了右侧自适应？

已采纳回答 / KanoWill

自己解决了就好.....

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

2016-03-13

margin:0 300px 0 200px 是什么意思? 这个语法不太清楚，两个0是什么呢？

最赞回答 / 背着行囊独自流浪

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：div{margin:20px 10px 15px 30px;}也可以分开写：div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px;}

3 回答 1764 浏览 4-1 三列布局

2016-03-12

可乐太甜加点盐

div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0px 10px 10px 0px}
.left{ width:280px; height:600px; background:#ccc; float:left;}/*左浮动样式*/
.right{;width:650px; height:600px; background:#FCC; float:left;margin-left:20px;}/*右浮动样式*/
</style>
</head>

0 3-3 编程练习

2016-03-12

和光

.top{height:100px; background:#ccc;}
.main{height:500px; background:#FF0000;position:relative;}
.left{ width:200px; height:500px; background:#0033CC;position:absolute;top:0;}
.right{height:500px; background:#99FFFF; margin-left:210px;}
.foot{height:50px; background:#FF6633;}

0 5-3 编程挑战

2016-03-12

弑魂灬脩

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0px 310px 0px 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; left:870px;top:0; position:absolute; background:#FCC;}

0 4-3 编程练习

2016-03-12

氤薇伱╮値嘚*ˉ*

.top{height:100px; background:#666666}
.main{height:500px; background:#FF0000}
.left{width:200px; height:500px; background:#0033CC; float:left}
.right{height:500px; background:#99FFFF; margin:0 0 0 210px}
.foot{height:100px; background:#FF6633}

0 5-3 编程挑战

2016-03-12

qq_可能那不是我_0

.top{height:50px;background:black;}
.main{height:400px;background:red;}
.left{ width:200px;height:400px;background:blue;position:absolute;left:0;top:50px;}
.right{height:400px;background:green;margin:0 0 0 210px;}
.foot{height:30px;background:yellow;clear:both;}

0 5-3 编程挑战

2016-03-12