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

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

如何用CSS进行网页布局

全部评论问答未解决精华

weibo_卡农201409_0

这个教程应该归到初级那里去的

2 5-1 混合布局

2016-04-20

ice夜空

没出效果的多看看哪错了或者换个浏览器试试，这个例子没问题

1 4-1 三列布局

2016-04-20

qq_人生如此矫情散熊_0

.left{ width:300px; height:600px; background:#ccc; float:left;text-align:left;}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC; float:left;text-align:left}/*右浮动样式*/

0 3-3 编程练习

2016-04-20

赚钱追女神

div{lin-height:50px}
.left{width:200px; height:600px; background:#ccc; position:absolute;left:0; top:0;}
.main{height:600px;background:#9cf; margin:0 310px 0 210px}
.right{width:300px;height:600px;right:0;top:0;background:#fcc;position:absolute;}

0 4-3 编程练习

2016-04-20

赚钱追女神

body{margin:0;padding:0;font-size:30px}
div{text-align:center;font-weight:bold}
.main,.footer{width:960;margin:0 auto}
.head{width:100%;height:100px;background:#ccc}
.main{height:600px;background:#fcc;}
.footer{height:50px;background:#9cf}

0 2-3 编程练习

2016-04-20

艾草glass

html 是按照Dom流加载的所以<div class="right"></div>先写

0 5-3 编程挑战

2016-04-18

盲目目

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

0 4-3 编程练习

2016-04-18

何其多

本题涉及浮动和绝对定位的区别。
浮动，脱离文档流，但是浮动之前元素占据的空间任然存在！所有后面的元素只能跟随浮动元素，而不是钻到浮动元素下面被遮挡。

绝对定位，脱离文档流，之前占用的空间崩塌。定位元素后面的元素会从新分配空间，钻到绝对定位元素的下方（看起来是这样的）。所以引出Z-INDEX层叠概念。

1 4-3 编程练习

2016-04-18

木子兮

66666666666

0 5-1 混合布局

2016-04-18

木子兮

将margin设置为margin:0 310px 0 210px可以实现居中空白的效果。这样做的原理是因为left和right都是绝对定位脱离了文档流所以我们需要设置离它们各自的宽度+10px。

0 4-3 编程练习

2016-04-18

菜鸟飞飞飞飞

.left{ width:300px; height:600px; background:#ccc; float:left;}/*左浮动样式*/
.right{ width:660px; height:600px; background:#FCC; float:right;margin:0 -10px;}/*右浮动样式*/

0 3-3 编程练习

2016-04-16

qq_沙冷_0

bucuo

0 2-2 练习题

2016-04-16

Silence浩

thx!!!!!!!!!!!

0 5-1 混合布局

2016-04-16

珊_er

.top{width:100%;background:#ccc;}
.main{width:100%;background:red;position:relative;}
.left{width:200px;height:500px;background:#00c;}
.right{width:100%;height:500px;position:absolute;margin-left:210px;background:#0c6;}
.foot{width:100%;background:orange;height:100px;clear:both;}

0 5-3 编程挑战

2016-04-15

洛离枫

将margin设置为margin:0 310px 0 210px可以实现居中空白的效果。这样做的原理是因为left和right都是绝对定位脱离了文档流所以我们需要设置离它们各自的宽度+10px。不懂的同学请观看《网页布局基础》的绝对定位。

23 4-3 编程练习

2016-04-15

首页上一页 77 78 79 80 81 82 83 下一页尾页

该课程已下架

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

如何用CSS进行网页布局