如何用CSS进行网页布局_html/css_WEB-ITnose

PHP中文网 • 2025年3月29日 09:18:28 • 编程技术 • 阅读 1

1、单列布局

布局

body{margin: 0;padding: 0;}
.top{height: 100px;background: #ccc;}
.main{width: 800px;height: 300px;background: #fcc;margin: 0 auto;}
.footer{width: 800px;height: 100px;background: #9cf;margin: 0 auto;}

2、单列布局水平居中

.main{width: 800px;height: 300px;background: #ccc;margin: 0 auto;}

3、自适应宽度两列布局（用得比较少）

立即学习“前端免费学习笔记（深入）”；

布局

body{margin: 0;padding: 0;}
.left{width: 20%;height: 500px;float: left;background: #fcc;}
.right{width: 80%;height: 500px;float: right;background: #95c;}

4、固定宽度两列布局（用得比较多）

两栏被限制在父级div（main）中.

布局

body{margin: 0;padding: 0;}
.main{width: 800px;margin: 0 auto;}
.left{width: 220px;height: 500px;float: left;background: #fcc;}
.right{width: 580px;height: 500px;float: right;background: #95c;}

5、自适应三列布局

布局

body{margin: 0;padding: 0;}
.main{width: 800px;margin: 0 auto;}
.left{width: 33.33%;height: 500px;float: left;background: #fcc;}
.middle{width: 33.33%;height: 500px;float: left;background: #ccc;}
.right{width: 33.33%;height: 500px;float: right;background: #95c;}

6、案例：左侧固定200px，右侧固定300px，中间自适应

布局

body{margin: 0;padding: 0;}
.main{width: 800px;margin: 0 auto;}
.left{width:200px;height: 500px;background: #fcc;position: absolute;left:0;top:0;}
.middle{height: 500px;background: #ccc;margin: 0 300px 0 200px;}
.right{width: 300px;height: 500px;background: #95c;position: absolute;right: 0;top:0;}

200px
博客园创建于2004年1月，博客园诞生于江苏扬州这样一个IT非常落后的小城市，城市虽小，但是这里却有很多求知创新的人，博客园诞生的理由是如此简单。
300px

7、混合布局

布局

body{margin: 0;padding: 0;}
.top{height: 100px;background: blue;}
.head{height: 100px;width: 800px;background: #f60;margin: 0 auto;}
.main{width: 800px;height:600px;background:#ccc;margin: 0 auto;}
.left{width:200px;height: 600px;background: #fcc;float: left;}
.right{width: 600px;height: 600px;background: #95c;float: right;}
.sub_1{width: 400px;height: 600px;background: green;float: left;}
.sub_1{width: 200px;height: 600px;background: #09f;float: right;}
.footer{width: 800px;height: 100px;background: #900;margin: 0 auto;}

8、要点回顾：
其实在网页制作当中，页面中的元素就是块与块之间的关系：
块挨着块；块嵌套着块；块叠压着块
通过css将这些块摆放正确，网页布局就自然完美了。

1、margin:0 auto 自动居中
2、两种分成三栏的方式：
1）两边position：absolute，left：0/right：0，top:0，
中间margin｛0 右边 0 左边｝
2）先分两栏左右float 再分两栏左右float

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3106349.html