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

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

如何用CSS进行网页布局

全部评论问答未解决精华

橘子和柠檬

.top{width:100%; height:200px; background-color:grey;}
.main{width:100% height:600px; background-color:red;}
.left{width:200px; height:600px; background-color:blue; float:left;}
.right{height:600px; background-color:green; margin-left:210px;}
.foot{width:100%; height:100px; background-color:yellow;}

0 5-3 编程挑战

2016-07-27

陪你Sunset

.top{width:100%;background:gray;}
.main{width:100%;height:600px; background:red;}
.left{width:200px;height:600px;background:blue;;position:absolute;}
.right{margin:0 0 0 210px; width:100%;height:600px;background:green;;position:absolute;}
.foot{width:100%;background:yellow;}

0 5-3 编程挑战

2016-07-27

float 和 positioning:absolute

最赞回答 / 冲吧少年

我感觉的话，float就是有点像磁铁，你用float浮动div，但是在一些情况下，他就算是float：left；还是会出现移位，就好像你用箱子里面放着2块异性磁铁，你另一个磁铁一直不断靠近它，它被逼到了边缘，但是，他还是有可能会上下移或者蹦飞起来。而绝对定位的是不会的，绝对定位就像2块铁块，你丢在就是在那，靠近顶多就是紧挨着或者重叠着。这是我的理解，不知道对不对。

1 回答 551 浏览 5-3 编程挑战

2016-07-27

关于清除浮动

最新回答 / qq_叫我小舒就好_03504119

上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。

1 回答 511 浏览 5-2 实践题

2016-07-27

橘子和柠檬

任务1position:absolutely;任务2margin:0 310px 0 210px;任务3right:0;

2 4-3 编程练习

2016-07-26

神王葬天

.top{height:100px;background:gray;}
.main{height:400px;background:red;}
.left{ width:200px; height:400px; float:left;background:blue;}
.right{height:400px;position:absolute;left:210px; top:100px;width:100%;background:green;}
.foot{background:orange;}

0 5-3 编程挑战

2016-07-26

慕粉3726649

.top{height:50px;background:#ccc;}
.main{height:600px;background:red;}
.left{width:200px;height:600px;position:absolute; left:0;background:blue;}
.right{height:600px;position:absolute; right:0;left:210px; background:#9acc99;}
.foot{background:#ff6634;width:100%; height:50px;}

0 5-3 编程挑战

2016-07-26

im肖

这课讲得挺好，布局思想

2016-07-26

这题的浮动我改用了相对定位看上去一样新人不知道是对是错

已采纳回答 / 一梦到红楼

在线运行了你的代码，效果没错。代码的话，不要太深究。没什么太标准的答案，实现一个界面可以用很多办法，有时候不去设置利用默认值都能实现效果。。。

2 回答 626 浏览 5-3 编程挑战

2016-07-26

网页布局错乱

已采纳回答 / qq_太久也会累_0

这个代码没问题，应该是兼容性问题，自己创建一个HTML文件可以正确运行

3 回答 750 浏览 4-3 编程练习

2016-07-26

qq_好嘛_1

强烈建议出响应式布局的这种课程

2016-07-26

belightning

怪不得我搞出来是错误的，第10行多了一个大括号

0 3-3 编程练习

2016-07-25

为什么灰色粉色一上一下

最新回答 / 十年wf

float:.left;}/*左浮动样式*/ left前面多了一个点，去掉。

2 回答 419 浏览 3-3 编程练习

2016-07-25

12只怕有心人

left框的宽度200px, right框宽度300px,margin 右侧左侧的距离必须分别大于300px和200px才能产生空白。

1 4-3 编程练习

2016-07-25

我有一个大锤子

先给main一个相对定位；position：relative 然后把左边的绝对定位；position；absolute；top：0；left：0；然后把右边的margin-left：210px

1 5-3 编程挑战

2016-07-25

T_xbo

大家测试我的，字数超了，背景bgc代替。
.top{bgc:gray; width:80%; margin:0 auto;}
.main{bgc:red; width:80%; position:relative; margin: 0 auto;}
.right{bgc:green; height:300px; margin-left:210px;}
.left{bgc:blue; width:200px; height:300px; position:absolute; top:0; left:0; }
.foot{bgc:yellow; width:80%; margin:0 auto;}

0 5-3 编程挑战

2016-07-25

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

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空