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

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

如何用CSS进行网页布局

全部评论问答未解决精华

慕桂英5250780

/*solution 1:div.left must shorter than div.right.*/
.top{width:100%;}
.main{position:relative;}
.left{width:200px; position:absolute; left: 0; top: 0; height:510px;}
.right{margin:0px 0px 0px 210px; height:500px;}
.foot{width:100%;}

0 5-3 编程挑战

2016-03-22

ganqibaoqi

.top{height:100px;background:#cfcfcf;}
.main{background:red;}
.left{width:200px;height:600px;background:blue; position:absolute; top:100px; left:0px;}
.right{background:#7bc69f;width:100%; margin:0 0 0 205px; height:600px;}
.foot{background:#e37411;}

0 5-3 编程挑战

2016-03-22

ganqibaoqi

父级元素里面添加 overflow:hidden 也可清除浮动

1 5-2 实践题

2016-03-22

Frank55

能说话大声点么？太小了。

0 2-1 一列布局

2016-03-22

xiangya_9186

.top{height:80px;margin:0 auto;background:gray;}
.main{height:500px;background:red;position:relative;}
.left{ width:200px;background:blue;height:500px;position:absolute;top:0;left:0;}
.right{width:100%;background:cyan;height:500px;margin:0 0 0 210px;}
.foot{bottom:0;height:50px;background:orange;}

0 5-3 编程挑战

2016-03-21

woshidaxiong

简单明了我

1 1-1 内容简介

2016-03-21

Python程序猿

代码完全一样，为什么我的页面中间显示的是红色，底部是灰色；还有就是foot里不添加margin:0 auto也是居中效果啊？？？

1 2-1 一列布局

2016-03-21

Python程序猿

sublime也可以实现，为什么要用Dreamweaver???

0 2-3 编程练习

2016-03-21

Python程序猿

代码完全一样，显示结果不同。

2 2-1 一列布局

2016-03-21

youyou55

这节代码没有给出详细的尺寸，做起来有点费劲。

0 5-3 编程挑战

2016-03-21

Even_hui

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

.middle {
height: 500px;
background: red;
margin: 0 210px 0 210px;
}
.right {
width: 200px;
height: 500px;
background: green;
position: absolute;
right: 0px;
top: 0px;
}

0 4-3 编程练习

2016-03-21

thqy39

讲的好简单啊，没啥重点

0 3-1 二列布局

2016-03-20

Lufi3

.top{height:100px; background:#ccc}
.main{height:400px; background:red; position:relative}
.left{ position:absolute; height:400px; width:125px; top:0; left:0; background:blue}
.right{position:absolute; height:400px; width:240px; margin-left:130px; background:#9c9}
.foot{height;50px; background:#f63}

0 5-3 编程挑战

2016-03-19