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

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

如何用CSS进行网页布局

全部评论问答未解决精华

一鸣Yuma

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

1 5-3 编程挑战

2016-10-17

风雪飘扬

.top{width:100%;height:60px;background:#ccc}
.main{margin:0 auto;height:600px; background:red}
.left{width:20%; height:600px;margin:0px 81% 0px 0px; background:blue; position:absolute;}
.right{width:80%;margin:0px 0px 0px 21%; height:600px;background:#9C9; position:absolute;}

0 5-3 编程挑战

2016-10-17

落叶未必是秋

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

0 5-3 编程挑战

2016-10-17

白白243

xxxxxxxxxx 昂~

1 2-1 一列布局

2016-10-17

qq_黑颂_0

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

0 5-3 编程挑战

2016-10-16

程绯村

如果是上下两个方块之间添加空隙要怎么写margin？
-----------------
magin中的四个值分别控制上右下左如果想要把元素放在中间的话应该是： margin(? auto ? auto); ?中填写自己需要的px值

0 4-3 编程练习

2016-10-16

程绯村

margin:0px 310px 0 210px；我这么设置结果main还是水平居于下方，在自己的编辑器里把margin-top:-600，才最后实现这样的效果。我看别人的答案都是margin:0px 310px 0 210px；我就是没办法实现那样的效果。

---------------
margin:0px 310px 0 210px；分别设置上0px 右310px 下0px 左210px 发现问题没有上和下都为0px的话.main就会在下方把margin:0px 310px 0 210px；改为margin:0px 310px auto 210px；问题就解决了

1 4-3 编程练习

2016-10-16

初见若安

{width:800px;height:50px;margin:0 auto;background:gray}
{width:800px;height:400px;margin:0 auto;background:red}
{width:290px;height:400px;float:left;background:#0737F6}
{width:490px;height:400px;float:right;background:#64EBD4}
{width:800px;height:25px;background:#E78B42;clear:both;margin:0 auto;}

1 5-3 编程挑战

2016-10-15

SunJhine

.top{height:80px;width:100%;background:gray;}
.main{height:500px;width:100%;background:red;position:relative;}
.left{height:500px;width:40%;position:absolute;background:blue;left:0;top:0;}
.right{height:500px;width:58%;background:#9c9;float:right;}
.foot{height:40px;width:100%;background:#f63;}

0 5-3 编程挑战

2016-10-14

慕粉4040442

顶部、底部都好弄，这里只说下中间主体部分代码：
.main{width:100%; height:400px; background:red; position:relative;} 注（参照定位的元素必须加入“position:relative”，否则下面绝对定位会出问题。）
.left{width:200px; height:400px; background:blue; position:absolute; top:0; left:0;}
.right{margin-left:210px; width:100%; height:400px; background:green;}

1 5-3 编程挑战

2016-10-14

DUT_梁天铭

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

0 5-3 编程挑战

2016-10-14

慕粉3476958

.sub_l{width:95%;height:100%;background-color:blue;}
.sub_r{width:5%;height:100%;background-color:red;position:absolute;top:0;left:95%;}
.foot{height:100px;background-color:#cfa;}

0 5-3 编程挑战

2016-10-14

慕粉3476958

.top{margin:0;padding:0;height:100px;background-color:gray;}
.main{height:800px;}
.left{width:30%;height:800px;position:absolute;top:100px;left:0;}
.right{width:70%;height:800px;margin-left:30%;position:absolute;right:0;top:100px;background-color:black;}

0 5-3 编程挑战

2016-10-14

Philips_Ma

如果是上下两个方块之间添加空隙要怎么写margin？

1 4-3 编程练习

2016-10-13

要逆袭的小菜鸟

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

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

0 5-3 编程挑战

2016-10-13

首页上一页 42 43 44 45 46 47 48 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局