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

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

如何用CSS进行网页布局

全部评论问答未解决精华

AmJanney

很柔和的雄性生音！

0 1-1 内容简介

2016-03-16

九斤面皮

这个是觉得是对“Clear:both”解释比较清楚，大家可以看下 http://www.divcss5.com/jiqiao/j406.shtml

3 5-2 实践题

2016-03-16

Justhaf

.main{ height:500px; background:#F00; position:relative;}
.left{ width:200px; height:500px; background:#00F; position: absolute;}
.right{ width:calc(100% - 205px); height:500px; margin:0 0 0 205px; background:#90EE90; position: absolute;}

0 5-3 编程挑战

2016-03-16

qq_白杨_4

很不错，简洁明了

2016-03-15

SilkyheartFeng

.top{height:100px;background:#ccc;}
.main{height:800px;background:red;}
.left{height:800px;width:200px;position:absolute;top:100px;left:0;background:blue;}
.right{height:800px;margin:0 0 0 200px;background:green;}
.foot{height:100px;background:orange;}

0 5-3 编程挑战

2016-03-15

三分之三

.top{height:100px;background:#ff4100;}
.main{height:600px;background:#ffe400}
.left{ width:200px;height:600px;background:#25f006;position:absolute;left:0;top:100px}
.right{height:600px;background:#0897f9;margin-left:210px}
.foot{height:100px;background:#e433ee}

0 5-3 编程挑战

2016-03-14

yinyun

老师是山东人？

0 2-1 一列布局

2016-03-14

硪佐伱佑

.left{ width:200px; height:600px; background:#ccc; position:absolute;【任务1】; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px;【任务2】; background:#9CF;font-size:10px;}
.right{ height:600px; width:300px; position:absolute; top:0;right:0; 【任务3】; background:#FCC;}
实现不了的任务二后面加个分号，字号随意

0 4-3 编程练习

2016-03-14

硪佐伱佑

.left{ width:300px; height:600px; background:#ccc;float:left;text-align:left; 【任务1】}/*左浮动样式*/
.right{ width:640px; height:600px;background:#FCC;float:right;margin-left:20px;text-align:left;【任务2】}/*右浮动样式*/

0 3-3 编程练习

2016-03-14

wjlwcl

请问浮动为什么脱离文档流了？

0 4-1 三列布局

2016-03-13

秋雨梧桐叶落时0

上面的代码没有给main设置高度，而main里的内容又设置成了浮动，所以footer会跑到head的下面。
解决方法有两个：1.清除浮动， clear:both;
2.为main设置高度， .main{
width:860px;height:600px;margin:0 auto;background:#9FC;
}

128 5-2 实践题

2016-03-13

Shanemark

.main{ width:960px; height:600px; margin:0 auto;border: 1px solid black;}
.left{ width:300px; height:600px; background:#ccc; float:left;margin-left: 20px;}/*左浮动样式*/
.right{ width:600px; height:600px; background:#FCC; float: right;margin: 0 20px;}/*右浮动样式*/

0 3-3 编程练习

2016-03-13

Shanemark

imooc的这个web编辑器有问题，大家还是拷贝到本地编辑再调用浏览器比较好，再给main加个border这个更容易看出来

0 3-3 编程练习

2016-03-13

swmtl

.top{height:100px; background:#CCC;}
.main{height:300px; background:#F00;}
.left{width:200px; height:300px; background:#00F; position:absolute; left:0; top:100px;}
.right{width:100%; height:300px; background:#0FF; margin:0 0 0 210px;}
.foot{height:50px; background:#C67;}

0 5-3 编程挑战

2016-03-13

可乐太甜加点盐

div{ text-align:center; line-height:50px}
.main{ width:960px; height:600px; margin:0px 10px 10px 0px}
.left{ width:280px; height:600px; background:#ccc; float:left;}/*左浮动样式*/
.right{;width:650px; height:600px; background:#FCC; float:left;margin-left:20px;}/*右浮动样式*/
</style>
</head>

0 3-3 编程练习

2016-03-12

首页上一页 86 87 88 89 90 91 92 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局