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

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

如何用CSS进行网页布局

全部评论问答未解决精华

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

2 2-1 一列布局

2016-11-28

right{里面的width:100%}

+ 我来回答回答最高可+2积分

4 回答 896 浏览 5-3 编程挑战

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

如何清除浮动？

最赞回答 / lsnFor

清除浮动有以下三种方式：1.父元素清除浮动设置--->.box{overflow:hidden;}<div class="box"> <div class="left"></div> <div class="right"></div></div>2.浮动元素后添加空div清除浮动设置--->.clear{clear:both;}（通常情况both）<div class="left"></div...

2 回答 763 浏览 5-2 实践题

2016-11-26

铜方块

.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

css布局问题

已采纳回答 / 慕粉4013882

在html里面先写right 再写 left就行了啊

2 回答 1004 浏览 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

首页上一页 53 54 55 56 57 58 59 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空