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

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

如何用CSS进行网页布局

全部评论问答未解决精华

和光

.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

特立独行的zz

终于搞明白了为什么footer块会跑到head块下面了。由于main块没有设置高度,里面的元素（left块,right块）又被设置成了浮动显示,所以main块没有被撑开,就像一条线一样紧贴在head块的下面,所以footer块会越位跑到head块下面。

65 5-2 实践题

2016-03-11

zihan_free

.main{ height:400px; background:#FF6699; }
.left{ width:200px; height:400px; background:#FFFF00; float:left; position:absolute; }
.right{ height:400px; background:#CC3300; float:left; margin-left:210px; width:100%; }
.foot{ height:100px; background:#CCCCCC; clear:both; }

0 5-3 编程挑战

2016-03-11

zihan_free

footer上面main里有四个div都用到了float，不占文档层，即浮动在最上面。footer如果不用清除层的话，会自动紧跟top层(此层没用到float)。故footer要用clear:both ,把浮动层都去掉，自己再另占一行。

6 5-2 实践题

2016-03-11

宝慕林8288924

这老师太棒了吧！解决了我这些天的疑惑，本来都快烦死了，现在豁然开朗，谢谢可爱的老师，希望还可以看见你的教程

3 5-1 混合布局

2016-03-11

zihan_free

.left{ height:600px; width:200px; position:absolute; top:0; background:#0066FF;}
.main{ height:600px; background:#FFCC00; margin:0px 310px 0px 210px;}
.right{ width:300px; height:600px; background:#CCCCCC; position:absolute; right:0; top:0}

0 4-3 编程练习

2016-03-11

mc812614137

能把开场声音关了么？

0 1-1 内容简介

2016-03-10

tb浅浅路

tgrewg

1 5-1 混合布局

2016-03-10

5580655

这种挺好都用浮动的话中间部分的宽度没办法自适应

0 4-1 三列布局

2016-03-10

宝慕林4266761

.top{height:100px;background:#ccc;}
.main{height:600px;background:red}
.left{height:600px;width:200px;float:left;background:blue;position:absolute;}
.right{height:600px;;float:right;width:80%;;background:indigo;}
.foot{height:100px;background:orange}

0 5-3 编程挑战

2016-03-09

今儿晚上太阳不错

.top{height:30px;background-color:#ccc;}
.main{background:#fb0000;overflow:hidden;position:relative;}
.left{ width:200px;background-color:#0000fe;height:600px;position:absolute;top:0;left:0;}
.right{background-color:#ccc;height:600px;margin-left:210px;}
.foot{height:30px;background-color:#ff6634;}

0 5-3 编程挑战

2016-03-09

weibo_杨幂河道洗脚莫名五杀_0

css做布局的简单的介绍学完了挺好的

2016-03-09

首页上一页 87 88 89 90 91 92 93 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局