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

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

如何用CSS进行网页布局

全部评论问答未解决精华

同光与尘

声音好小，听着不舒服。

0 1-1 内容简介

2016-11-29

迷彩虎

.head,.main{ width:960px; margin:0 auto;}

.left{ width:220px; height:600px; background:#ccc;float:left;}

.r_sub_right{ width:200px; height:600px; background:#9FC;float:right;}

.footer{ height:50px; background:#9F9; margin:600px 0 0 0;}
或.footer{ height:50px; background:#9F9; clear:both;}

0 5-2 实践题

2016-11-28

迷彩虎

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

0 4-3 编程练习

2016-11-28

鱼丸粗面a

老师讲的真的很好，浅显易懂~

0 5-1 混合布局

2016-11-28

建议没个视频教学都把相应的代码放在旁边方便学员自己在编辑器里面试手

2 2-1 一列布局

2016-11-28

慕的地3779124

.top{ width:100%;height:100px;background:#aaa;}
.main{ width:100%;background:red;position:relative;}
.left{ width:200px;height:400px;background:blue;}
.right{ height:100%;background:yellow;position:absolute;margin:0 0 0 210px;width:100%;}
.foot{ background:orange;clear:both;}

0 5-3 编程挑战

2016-11-28

慕的地3779124

.top{ width:100%;height:100px;background:#aaa;}
.main{ width:100%;background:red;overflow:hidden;position:relative;}
.left{ width:200px;height:400px;background:blue;}
.right{ height:100%;background:yellow;position:absolute;margin:0 0 0 210px;width:100%;}
.foot{ background:orange;clear:both;}

0 5-3 编程挑战

2016-11-28

慕的地3779124

1 5-3 编程挑战

2016-11-28

片布斯尼ing

第一小节的声音是不是有问题呢？其他还好，不过存在小错误，希望改进。不过总得来说，还是非常适合我这样的小白学习者。支持赞一个哈！

2016-11-27

片布斯尼ing

.top{margin:0 auto;background:gray;height:100px;}
.main{position:relative;background:red;height:300px;}
.left{ width:200px;height:300px;background:blue;float:left;}
.right{height:300px;position:absolute;left:210px;background:green;margin:0 auto;width:100%;}
.foot{margin:0 auto;background:pink;}

2 5-3 编程挑战

2016-11-27

片布斯尼ing

此处不能使用overflow:hidden,这样main会遮盖住footer，可以用clear，或者用margin属性设置footer位置。

1 5-2 实践题

2016-11-27

片布斯尼ing

body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:

0 4-3 编程练习

2016-11-27

片布斯尼ing

.left{ width:300px; height:600px; background:#ccc; float:left;}}

多了一个花括号，小错误，可是这有些误人子弟哈，望修正

0 3-3 编程练习

2016-11-27

片布斯尼ing

这是最简单的文档流布局，居中做法前面已经讲过了
margin：0 auto; width:90% /*若前面「此例设置为了960」设置过了width为固定像素，那么要局中的话width属性一定要设置为非100%，可以随意设置为50%，80%，90%*；如果前面的未设置width属性，那么我们就要设置好width值，小于显示器宽度就能看出效果了／
不这么做的结果就是显示器有多宽，显示就有多

0 2-3 编程练习

2016-11-27

香槟御客

.top{width:100%;height:300px;background:#ccc}
.main{height:500px;}
.left{width:200px;height:500px;background:#999;position:absolute;}
.right{width:65%;height:500px;background:#fcc;position:absolute;}
.foot{height:100px;background:#9fc}

1 5-3 编程挑战

2016-11-26

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

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局