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

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

如何用CSS进行网页布局

全部评论问答未解决精华

ahao430

下面代码正常，.right里一加float就错误，奇怪
.main{background:red;}
.left{width:200px;height:800px;background:blue;float:left;}
.right{height:800px;background:green;margin-left:210px;}
.foot{height:200px;background:orange;clear:both;}

0 3-3 编程练习

2016-04-29

awen1987

用浮动布局也可以如下：
.top{width:100%;height:100px;background:#ccc;}
.main{width:100%;height:500px;background:red;}
.left{width:200px;height:100%;background:blue;float:left;margin-top:-500px;}
.right{height:100%;background:#9acc99;margin-left:210px;}
.foot{width:100%;height:50px;background:#ff6634;}

1 5-3 编程挑战

2016-04-28

awen1987

这个布局才是正确的
.top{width:100%;background:#ccc;height:80px;}
.main{width:100%; height:500px; background:red;position:relative;}
.left{width:200px;background:blue;height:100%;position:absolute;top:0px;}
.right{background:green;height:100%;margin-left:210px;}
.foot{width:100%;background:sandybrown;}

1 5-3 编程挑战

2016-04-28

qq_心比纸薄_0

看了半天各种答案，虽然有效果但是还是楼下的答案最好，因为这节课学的就是这个。

0 5-2 实践题

2016-04-27

小王子在路上

答案给错了

0 5-3 编程挑战

2016-04-27

すずみや丶Ym

.top{background:#ccc;height:100px;}
.main{background:red;height:500px;position:relative;}
.left{background:blue;width:200px;height:100%;}
.right{background:#9acc99;height:100%;position:absolute;margin-left:210px;width:100%;}
.foot{background:#ff6634;height:50px;}

0 5-3 编程挑战

2016-04-27

火柴天堂

en ,hen

0 1-1 内容简介

2016-04-27

慕沐6560815

后面的分号可有可无没影响，规范问题

2 3-1 二列布局

2016-04-26

慕沐6560815

清除浮动布局就不会乱

0 3-1 二列布局

2016-04-26

慕沐6560815

定义初始样式 *{margin:0;padding:0}

1 2-1 一列布局

2016-04-26

house菩提树下

.top{
height:200px;background:#ccc;
}
.main{
height:500px;background:red;
}
.left{
height:500px;width:200px;background:blue;float:left;
}
.right{
height:500px;background:#9c9;margin-left:210px;
}
.foot{
height:50px;background:#F63;
}
</style>

0 5-3 编程挑战

2016-04-26

晚饭

.top{width:800px;height:100px;margin:0 auto;background:gray;}
.main{width:800px;height:900px;background:red;margin:0 auto;}
.left{width:280px;height:900px;background:blue;float:left}
.right{width:510px;height:900px;background:green;float:right;}
.foot{width:800px;height:80px;margin:0 auto;}

1 5-3 编程挑战

2016-04-26

house菩提树下

absolute脱离了文档流，所以middle可以用margin 设置后位于中间。

0 4-1 三列布局

2016-04-26

一朵大白天

.top{width:100%; height:60px; background:#ccc;}
.main{width:100%; height:300px; background:red;}
.left{width:28%; height:300px; float:left; background:blue;}
.right{width:70%; height:300px; float:right; background:green;}
.foot{width:100%; height:40px; background:orange; clear:both; }

0 5-3 编程挑战

2016-04-26

泽拉斯的飞升之地

声音真好听

0 5-1 混合布局

2016-04-25

首页上一页 75 76 77 78 79 80 81 下一页尾页

该课程已下架

课程须知: 1.你需要掌握html+css样式基础知识 2.有一定的前端实际开发经验

老师告诉你能学到什么？: 1.掌握网页布局的相关知识 2.能对不同的网页进行布局结构划分 3.掌握固定宽度和自适应宽度的实现方法

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局