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

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

如何用CSS进行网页布局

全部评论问答未解决精华

USAGI

先使用相对定位main父元素，然后在使用绝对定位，定位子元素left，top和left均为0。right设置margin-left:210px数值

2 5-3 编程挑战

2016-04-15

YAOWANGWUHU

中间位置怎么产生了仔边距，明明设置了，0 200 0 300

2016-04-14

a3538333

.main{width:100%;background:red;height:600px;position:relative;}
.left{position:absolute;background:blue;height:600px;width:200px;left:0px;top:0px;}
.right{background:#2effa4;height:600px;margin:0px 0px 0px 210px;}

1 5-3 编程挑战

2016-04-14

a3538333

.head,.main{ width:960px;margin:0px auto;}
.left{ width:220px; height:600px; background:#ccc;float:left;}
.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}
.r_sub_right{ width:200px; height:600px; background:#9FC; float:right;}
.footer{ height:50px; background:#9F9;clear:right;}

0 5-2 实践题

2016-04-14

Ankh_chan

.top{height:100px;background:#ccc;}
.main{height:500px; margin:0 auto; position:relative;}
.left{ width:200px; height:500px; position:absolute; left:0; top:0; background:blue;}
.right{ height:500px; margin-left:200px; background:yellow;}
.foot{height:50px;background:#F63;}
</style>

0 5-3 编程挑战

2016-04-14

醉逍遥neo

.main{ height:500px; margin:0 auto; position:relative; background:red;}
.left{ width:200px; height:500px; position:absolute; left:0; top:0; background:blue;}
.right{ height:500px; margin-left:210px; background:yellow;}

0 5-3 编程挑战

2016-04-13

醉逍遥neo

.main{ height:500px; margin:0 auto; position:relative;}
.left{ width:200px; height:500px; position:absolute; left:0; top:0; background:blue;}
.right{ height:500px; margin-left:200px; background:yellow;}

0 5-3 编程挑战

2016-04-13

Web小白小白

很简单，但也有深意。初学者顶！

2016-04-13

一剑飘飘

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

0 5-3 编程挑战

2016-04-13

一剑飘飘

.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; top:0; right:0px; background:#FCC;}

0 4-3 编程练习

2016-04-13

我吃炸土豆

老师讲到不错，赞一个！

1 5-1 混合布局

2016-04-13

opposite

为什么三行布局加文字后，设置浮动，不能并列？而要用定位？

2016-04-12

魔魇乾玲

.top{height:50px;background:gray;}
.main{height:500px;background:red;position:relative;}
.left{height:500px;width:200px;background:blue;position:absolute;top:0;left:0;}
.right{height:500px;background:green;margin-left:220px;}
.foot{height:100px;background:pink;}

0 5-3 编程挑战

2016-04-12

qq_也许丶或许_0

.top{background:#ccc;height:100px;}
.main{background:red;height:300px;}
.left{float:left;width:45%;background:blue;height:300px;}
.right{float:right;background:lightgreen;width:50%;height:300px;}
.foot{clear:both;height:60px;background:orange;}

1 5-3 编程挑战

2016-04-11

qq_也许丶或许_0

.left{ width:200px; height:600px; background:#ccc;float:left;}
.main{width:540px;float:left;height:600px; background:#9CF;margin-left: 10px;}
.right{ width:200px;height:600px;float:right; background:#FCC;}

0 4-3 编程练习

2016-04-11

首页上一页 78 79 80 81 82 83 84 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局