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

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

如何用CSS进行网页布局

全部评论问答未解决精华

小樽

做边框用绝对定位

0 5-3 编程挑战

2020-06-13

慕函数6239838

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

0 5-3 编程挑战

2020-06-01

不想游泳的鲸鱼

*{
padding: 0;
margin: 0;
text-align: center;
}
.top,.foot{
height: 50px;
line-height: 50px;
background-color: cadetblue;
}
.left,.right{
height: 500px;
}
.right{
background-color: blueviolet;
}

.left{
width: 200px;
position: absolute;
top: 50px;
background-color: #FF7F50;
}

0 5-3 编程挑战

2020-04-01

有彩虹

自适应不是只有百分比的时候才可以吗

0 4-1 三列布局

2020-03-28

慕函数1487353

他们设置 310 和210 是为了让效果图和案例一样，中间div和两边有空白的间距。由于中间的div设置的margin 所以，它的距离是相对于body的距离，你疑问为啥不是和左右两个div的距离，是因为，左右两个div由于设置了absolute 脱离了文档流，也就是相当于相对其他div来说，它类似于透明的空气一般。

0 4-3 编程练习

2020-03-15

奔云石

.top{background:#ccc;}
.main{background:red; height:600px;}
.left{ width:30%;height:100%; float:left; background:blue;}
.right{width:60%;height:100%; float:right;background:black;}
.foot{background:orange;}

0 5-3 编程挑战

2020-03-01

hello七里

测试ok的

.main{height:400px;background:red;position:relative;}
.left{ width:200px;height:400px;background:blue; position:absolute;left:0;top:0;}
.right{height:400px;background:lightgreen;margin-left:210px;}

0 5-3 编程挑战

2020-02-21

乖巧的女孩

请问一下padding这个的翻译是？

0 3-1 二列布局

2020-02-18

苍穹下的奔跑1991

汲取知识！

0 3-1 二列布局

2020-02-16

qq_迷失的无聊

刚刚写的那个有问题，感觉css很难学啊 .top{background:#ccc;height:50px;} .main{height:500px;background:#ff0000;position:relative;} .left{height:500px;width:200px;background:#0000FF;position:absolute;left:0px;top:0px;} .right{height:500px;margin-left:210px;background:#66CDAA;} .foot{background:#FF7256;height:50px;}

0 5-3 编程挑战

2019-11-25

qq_迷失的无聊

分享一下

.top{background:#ccc;height:50px;}
.main{height:500px;background:#ff0000;position:relative;}
.left{height:500px;width:200px;background:#0000FF;float:left;}
.right{height:500px;position:absolute;left:210px;background:#66CDAA;width:100%;}
.foot{background:#FF7256;height:50px;}

0 5-3 编程挑战

2019-11-25

Java攀登者

body{ margin:0; padding:0; font-size:30px; background-color:red}
.top{height:100px; background:#ccc}
.left{ width:200px; height:500px; background:blue;position:absolute;top:100px;left: 0; }
.right{ margin-left:210px;height:500px; background:#9C9;}
.foot{ height:100px;background:#F63;clear:both;}

0 5-3 编程挑战

2019-10-28

超级小仙女

head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC;margin:0 auto;}
.footer{ height:50px; background:#9CF;margin:0 auto;}

0 2-3 编程练习

2019-10-12

慕工程2275325

非常感谢！

0 5-3 编程挑战

2019-10-05

qq_路维希_0

只贴关键部分代码吧：
.main{background-color:red;height:600px;}
.left{width:200px;height:600px;background-color:blue;float:left;}
.right{height:600px;background-color:green;float:right;width:calc(100% - 210px);}
.foot{clear:both;heigth:100px;background-color:orange;}

0 5-3 编程挑战

2019-09-25

首页上一页1 2 3 4 5 6 7 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局