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

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

如何用CSS进行网页布局

全部评论问答未解决精华

独角兽王子

.top{width:918px;height:80px;background:#ccc;}
.main{width:900px;height:600px;background:red;margin:0 auto;}
.left{width:200px;height:600px;background:blue;float:left;margin-left:-20px;}
.right{width:700px;height:600px;background:green;float:right;}
.foot{width:918px;height:50px;background:#000;}

0 5-3 编程挑战

2016-09-09

慕勒1632382

点击播放的那瞬间he老zi一跳！能换个背景乐么？

0 1-1 内容简介

2016-09-09

enough2

.right{right:0}这个里面要加right:0;不然不行

0 4-3 编程练习

2016-09-09

lemeo12

颜色什么的，完全弄不了一模一样的。。。。

0 5-3 编程挑战

2016-09-09

Cre

.top{width:100%;background-color:#999;}
.main{width:80%;height:600px;margin:0 auto;background-color:red;}
.left{width:200px;height:600px;background:blue;float:left;margin-top:-600px;}
.right{background:green;height:600px;margin-left:210px;}
.foot{width:100%;background-color:orange;clear:both;}

0 5-3 编程挑战

2016-09-09

视频问题？

最新回答 / Oscaner

我去，为什么截图截出来又有图像，有毒

1 回答 240 浏览 4-1 三列布局

2016-09-08

没加clear：both为什么一样能出效果是我的代码错误了吗

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

0 回答 584 浏览

2016-09-08

叶删号

.top{height:100px;background:#ccc;width:100%;}
.main{height:600px;width:100%;background:#CC0000;}
.left{width:200px;background:#000ccc;height:600px;float:left;}
.right{background:#00FF00;height:600px;float:right;}
.foot{width:100%;height:100px;background:#CC00CC;float:both;}

0 5-3 编程挑战

2016-09-07

慕用5675268

left{positon:absolute;margin-top:-500px;}
margin 用负值就好了。
这里如果按照给的答案来的话，会发现右边的块很正常，但是左边的的块就是上不去，空很大一块位置。因为div是块级元素，会占据一整行，虽然左边设置了margin，但是这个空间还是属于右边div的，由于right没有设置宽度，所以他的父级元素main,被完全占据了，导致left直接就被挤出来了。

2 5-3 编程挑战

2016-09-07

麦同学3946217

.top{height:100px;width:100%;background:#ccc;}

.main{height:350px;width:100%;background:red;}

.left{width:200px;height:350px;background:blue;float:left;}

.right{height:350px;background:#83E561;margin-left:205px;}

.foot{height:65px;width:100%;background:orange;}

注意！<body>里‘right’和‘left’层上下位置被我调换

0 5-3 编程挑战

2016-09-07

麦同学3946217

.top{height:100px;width:100%;background:#ccc;}
.main{height:350px;width:100%;background:red;}
.left{width:200px;height:350px;background:blue;float:left;}
.right{height:350px;background:#83E561;margin-left:205px;}
.foot{height:65px;width:100%;background:orange;}

0 5-3 编程挑战

2016-09-07

慕粉3948512

.top{height:100%;background:lightgrey;}
.main{height:500px;background:red;}
.left{height:500px;width:22%;background:blue;float:left;}
.right{height:500px;width:77%;background:lightgreen;float:right;}
.foot{height;background:#FF6633;}

0 5-3 编程挑战

2016-09-06

慕粉18221508921

.top{height:100px;background:lightgrey;}
.main{height:500px;background:red;}
.left{height:500px;width:22%;background:blue;float:left;}
.right{height:500px;width:77%;background:lightgreen;float:right;}
.foot{height:50px;background:#FF6633;}

0 5-3 编程挑战

2016-09-06

Hugejjyang3837365

任务3和任务4求解啊啊啊啊

0 5-3 编程挑战

2016-09-06

慕粉1469715202

欲穷千里目，更上一层楼

0 5-3 编程挑战

2016-09-06

qq_seven琦_0

艺术+技术的融合=前端

0 1-1 内容简介

2016-09-06

首页上一页 75 76 77 78 79 80 81 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空