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

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

如何用CSS进行网页布局

全部评论问答未解决精华

杰森伯恩

任务123删除，就可以了

1 4-3 编程练习

2016-05-14

UltramanNexus

我按照自己的想法写的，谢谢老师，学习了

0 5-3 编程挑战

2016-05-14

慕粉3348809

.top{width:100%;background:#ccc; height:100px;}
.main{width:100%;height:100%;background:#c66; }
.left{width:200px;height:300px;background:#333;}
.right{width:100%;height:300px;background:#666;position:absolute;left:210px;}
.foot{width:100%;background:#bce; height:50px;clear:both;}

0 5-3 编程挑战

2016-05-13

Vittorioyt

.head{width:100%; height:100px; background:#ccc; margin:0 auto;}最主要的是.head里的 margin:0 auto;别忘了敲，其他的宽度随便调都行，没有影响。

1 2-3 编程练习

2016-05-13

夏天_hello

.top{height:50px;background:gray;}
.main{height:300px;background:red;position:relative;}
.left{width:200px;height:300px;background:blue;position:absolute;left:0px;top:0px;}
.right{height:300px;background:green;position:absolute;left:210px;right:0px;top:0px}
.foot{height:50px;background:#369;}

0 5-3 编程挑战

2016-05-13

qq_呆呆枫_03234243

不愿意看就滚，老师不管是什么风格，免费教，哪来那么多事

3 5-1 混合布局

2016-05-10

qq_拉的洛克_0

居然不能回复，下面有位兄弟说不能自动换行大概和我踩了一样的坑，那就是输入数字或者纯字母了，因为一串数字或者一串字母是被当做一个整体的，所以浏览器默认不会破坏它的完整性所以不会换行，想换行的话需要增加这个属性word-wrap: break-word;就可以了

48 4-1 三列布局

2016-05-10

Ultrame

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

0 5-3 编程挑战

2016-05-10

一朵大白天

.top{background:gray;width:100%;}
.main{background:red;position:relative;overflow:hidden;}
.left{background:blue; width:200px;float:left;height:500px;}
.right{background:green;width:100%;position:absolute;margin-left:210px;height:500px;}
.foot{background:orange;width:100%;}
对不对

0 5-3 编程挑战

2016-05-10

JYDLQ

.top{width:100%; height:100px; background:#DDD;}
.main{width:100%; height:600px;background:red; margin:0 210px 0 0;}
.left{ width:200px; height:600px; background:blue; float:left;}
.right{ width:85%; height:600px; background:#9D9; float:right;}
.foot{width:100%; height:60px; background:#F50;}

0 5-3 编程挑战

2016-05-10

所以一直搁浅

...楼下不说还好一说都没心思听课了都在听 “啊”

1 5-1 混合布局

2016-05-09

张小丹and

锦囊中的代码并不能实现那样的效果好伐

0 5-3 编程挑战

2016-05-09

oufei

纠结了半天看视频得到解决记录下来问题()：
.main,.footer{ width:960px; [任务1]} /*都是原来的代码, 注意最开始设置了个定值根据之前讲解定值块居中显示的 3点宽度定值 margin:auto 或者视频讲解 margin:0 auto */
.head{.....}
.main{ height:600px; background:#fcc; margin:auto;}
.footer{ height:500px background:#ccc: margin:auto;}

0 2-3 编程练习

2016-05-09

徐若兮

div{ text-align:left; line-height:50px ;}
.main{ width:960px; height:600px; margin:0 auto; background:white;}
.left{ width:260px; height:600px; background:#ccc; float:left; margin:0 20px;}/*左浮动样式*/
.right{ width:620px; height:600px; background:pink; float:right;margin:0 1px}/*右浮动样式*/
结果图ok，但改的有点多了把。

0 3-3 编程练习

2016-05-07

轩辕剑3226831

.main{ width:960px; height:600px; margin:0 auto}
.left{ width:300px; height:600px; background:#ccc;float:left;}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC;float:right;}

好逗啊！左右的宽度都等于父标签了，中间咋会有空隙呢？？？？

2 3-3 编程练习

2016-05-07

首页上一页 73 74 75 76 77 78 79 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局