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

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

如何用CSS进行网页布局

全部评论问答未解决精华

AllySu

.left{ width:200px; height:600px; background:#ccc;float:left;}
.main{ height:600px; margin:0px 310px 0px 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0;right:0; background:#FCC;}

只修改 .right 也是可以的。但是为什么用 clear：both 不可以呢？

1 4-3 编程练习

2017-08-10

AllySu

自适应需要使用百分比，就这么简单

1 3-1 二列布局

2017-08-10

hwan

.footer{ height:50px; background:#9F9; margin:0 auto【任务4】}

0 5-2 实践题

2017-08-10

qq_Question_0

布局真的是网页制作的基础中的基础。掌握了很重要。

3 5-1 混合布局

2017-08-10

小情好天气

.top{height:100px;background-color:#999;}
.main{height:600px;background-color:red;position:relative;}
.left{width:200px;height:600px;background-color:blue;position:absolute;}
.right{width:100%;height:600px;background-color:green;margin-left:210px;position:absolute;}
.foot{height:50px;color:}

0 5-3 编程挑战

2017-08-09

yeehom

.top{height:80px; background:#ccc;}
.main{width:80%;height:600px; background:red; margin:0 auto;position:relative;}
.left{ width:200px; height:600px; position:absolute;top:0;left:0; background:green;}
.right{height:600px;margin-left:210px; background:yellow;}
.foot{height:60px; background:orange;}

2 5-3 编程挑战

2017-08-08

慕沐5295118

官方答案是错的...

0 5-3 编程挑战

2017-08-08

qq_陈城逍遥游高级网管_0

新手很需要的一段课程，最不墨迹的老师，点赞！！！

1 3-1 二列布局

2017-08-08

lanrunsheng

本课程只教别人设置浮动，文档流与浮动的原理没说清楚，以及清除浮动的原理也没讲，小白看了【任务4】一脸懵逼，清除浮动才是最大的后手，不过再Chrome和新版的IE里面不清除浮动Footer也能正常显示，这课程留一手啊，坑爹啊。

10 5-2 实践题

2017-08-07

阿凡达女版

建议开设课程时可以把每个基本思路先概括一下。Anyway,thank you very much!

2017-08-06

xhuanhero

.footer{ height:50px; background:#9F9; margin:700px 0 0 0;}结果多了一行空白，margin改成600px就正常了，这margin是怎么算的

0 5-2 实践题

2017-08-05

一天一步一向前

.top{height:100px;}
.main{position:absolute;top:100px;bottom:50px;width:100%;}
.left{ width:200px;height:100%; position:absolute;left:0;top:0;}
.right{margin-left:210px;height:100%;}
.foot{height:50px;position:absolute;bottom:0;left:0;width:100%;}
全程自适应

1 5-3 编程挑战

2017-08-05

心陌灬琉璃梦

/*
1、宽度自适应：不设置宽度；
2、样式加载：样式按从上往下排序，写在前面的先加载；
3、兼容ie6：不能用浮动float，只能先设置父元素main为相对定位relative作为参照定位，后设置其子元素(right、left)为绝对定位absolute，并设置其具体位置。
*/
/*
1、如不给right设置外边距margin，则其自适应宽度会与其中的文字同宽；
2、由于left的width为200px，则right的margin-left为210px，因此right与left的间隔为10px；
3、由于right为main的首个子元素，因此默认叠加在main上面，无需设置绝对定位。
*/

13 5-3 编程挑战

2017-08-05

weibo_俊逸君故_0

.top{width:100%; height:50px;background:gray;}
.main{width:100%; height:400px;background:red;}
.left{width:25%; height:400px;background:blue; float:left;}
.right{width:74%; height:400px;background:green;float:right;}
.foot{width:100%; height:50px;background:yellow;}

0 5-3 编程挑战

2017-08-05

qq_Oak_2

.top{height:100px;background:#ccc;}
.main{height:500px;background:red;margin:0 auto;}
.left{width:25%;height:500px;background:blue;float:left;}
.right{width:70%;height:500px;background:green;float:right;}
.foot{height:50px;background:#F63;}

0 5-3 编程挑战

2017-08-03

首页上一页 12 13 14 15 16 17 18 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局