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

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

如何用CSS进行网页布局

全部评论问答未解决精华

铜方块

.top{height:50px;background:#657;}
.main{height:500px;background:#548;position:relative;}
.left{width:200px;height:500px;position:absolute;left:0;top:0px;background:#215;}
.right{height:500px;margin-left:210px;background:#954;}
.foot{height:60px;background:#147;}

0 5-3 编程挑战

2016-11-26

铜方块

.left{ width:280px; height:590px; float:left;background:#ccc;margin:0 10px 10px; 【任务1】}/*左浮动样式*/
.right{ width:640px; height:590px; float:right;background:#FCC;margin:0 10px 10px; 【任务2】}/*右浮动样式*/

0 3-3 编程练习

2016-11-26

粑粑粑粑瑜

效果图：第十行多的那个花括号去掉，去掉div中间的text-align:center。left和right加上左右浮动，再把他们的高度宽度各减去30px就OK 了

0 3-3 编程练习

2016-11-26

RunningIn

body{ margin:0; padding:0;}
.top{height:200px;background:gray;}
.main{background: red;}
.left{background:blue;height:600px;width:200px;float: left;position: absolute;left: 0;top: 200px;}
.right{margin-left: 220px; background:green;height:600px;}
.foot{height:100px;background:#E3860E;}

1 5-3 编程挑战

2016-11-25

虽然还是咸鱼

为啥我在任务三那里写了margin:0 auto;也正确显示了呢......

0 5-2 实践题

2016-11-25

蓝牌大师

.top{height:100px;background:grey;}
.main{height:600px;background:red;}
.left{ height:600px;background:blue;width:200px;position:absolute;float:left;}
.right{height:600px;background:green;margin-left:210px;position:absolute;float:left;width:100%;}
.foot{height:50px;background:orange;}

1 5-3 编程挑战

2016-11-25

慕粉3285389

.top{width:100%;background:gray;height:200px;}
.main{width:100%;background:red;height:500px;}
.left{ width:200px;height:100%;float:left; background:blue;}
.right{width:100%;float:right; background:green;margin-left:220px;position:absolute;}
.foot{width:100%;background:orange;height:100px;}

0 5-3 编程挑战

2016-11-25

慕运维7459866

真不错，对于我这种初学者来说超级受益。

2016-11-25

慕粉gogogo

同学代码怎么提交

0 5-3 编程挑战

2016-11-24

慕粉3978811

.top{width:800px; height:50px;background:#cccccc;}

.main{width:800px; height:300px;background:red;}

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

.right{height:300px;background:#9acc99;margin:0 0 0 210px;}

.foot{width:800px; height:50px;background:#ee6634;}

0 5-3 编程挑战

2016-11-24

慕仔1323624

老师讲的真不错～～对网页布局有更深入了解了～～

0 5-1 混合布局

2016-11-24

奈何南柯一梦

.top{width:100%; height:50px;background:#cccccc;}
.main{width:100%; height:300px;background:red;}
.left{width:200px;height:300px;background:blue;position:absolute;}
.right{left:210px;width:100%;height:300px;background:#9acc99;position:absolute;}
.foot{width:100%; height:50px;background:#ee6634;}

1 5-3 编程挑战

2016-11-23

qq_独家记忆_25

。。。。。

2016-11-23

久处不厌i

讲真，耳机福利

0 5-1 混合布局

2016-11-22

WilliamsZhang

.main{ height:600px; background-color:red; margin:0 auto; position:relative; }
.left{ width:200px; height:600px; background-color:blue; position:absolute; }
.right{height:600px;right:0;left:210px;background-color:green;position:absolute;}

由于浏览器从上往下读取html，所以"right"先于"left"加载。

0 5-3 编程挑战

2016-11-22

首页上一页 35 36 37 38 39 40 41 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局