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

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

如何用CSS进行网页布局

全部评论问答未解决精华

慕少5092935

.top{height:200px;background:#CCCCCC;}
.main{height:600px;background:red;position:relative;}
.left{width:200px;height:600px;background:#0000FE;position:absolute;top:0px;left:0px;}
.right{height:600px;background:#9ACC99;margin-left:210px;}
.foot{height:200px;background:#FF6634}

0 5-3 编程挑战

2017-07-17

慕粉1606344302

.top{width:960px;margin:0 auto;background:#ccc;}
.main{width:960px;margin:0 auto;}
.left{float:left;width:297px;background:blue;border-right:3px solid red;height:500px;}
.right{float:right;width:660px;background:green;height:500px;}
.foot{width:960px;height:50px;margin:0 auto;background:#123;}

0 5-3 编程挑战

2017-07-17

梧桐呓语

.top{height:100px;background:grey}
.main{width:1000px;height:600px;background:#ed1c24;margin:0 auto}
.left{width:300px;height:600px;background:blue;float:left}
.right{width:690px;height:600px;background:#3cb878;float:right;}
.foot{height:50px;background:#c88614;}

0 5-3 编程挑战

2017-07-15

梧桐呓语

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; background:#9CF;margin:0 310px 0 210px}
.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}

4 4-3 编程练习

2017-07-15

镜像__梦ing

说实话，在观看的基本上都是新手，页面处理的要明显点，比如刚才说到吗父级main，现在是做页面效果，应该加个border，更加形象，两列显示在里面。我就是说说自己观点，勿喷。慕课网我一直很支持的，加油。

2 3-1 二列布局

2017-07-15

慕函数9061126

.top{height:200px;background:orange;}
.main{height:600px;background:#f2f2f2;}
.left{height:600px;width:200px;background:blue;float:left;}
.right{height:600px;background:green;float:right;}
.foot{background:purple;}

0 5-3 编程挑战

2017-07-13

慕函数9061126

状态三种，块挨着块，块包含着块，块叠加着块

3 5-1 混合布局

2017-07-13

AllySu

只说要浮动，为什么不浮动布局效果就乱了？

0 5-1 混合布局

2017-07-12

慕妹0724561

想要中间有空隙可以把.main里的width改大一点因为蓝色和粉色的大小已经挤满了所以没有空隙只有改大main才可以有空隙

0 3-3 编程练习

2017-07-11

执笔弄风月

过于简单了

2017-07-09

狗尔gouer

不错，挺不错

2017-07-07

Missingyo

.top{width:100%;height:20vh;background:gray;}
.main{width:100%;background:red;display:flex;flex-direction:row-reverse;}
.left{width:200px;height:70vh;background:blue}
.right{width:100%;height:70vh;background:green;margin-left:10px;}
.foot{height:10vh;width:100%;background:orange;}

1 5-3 编程挑战

2017-07-06

詩話小鎮

.left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0}
.main{ height:600px; margin-left:210px;margin-right:310px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0;right:0; background:#FCC;}
效果一样的，但不知道main算不算水平居中，看上去没毛病

0 4-3 编程练习

2017-07-05