css简单网页布局,css网页布局排版实例

首页 > 技术 > 作者:YD1662023-02-09 15:38:21

实现三栏布局的方法也有很多,笔者接下来介绍用的比较多的几种方式。

position margin-left margin-right实现三栏布局

<div class="left"></div> <div class="middle"></div> <div class="right"></div>

html, body { margin: 0; } div { height: 500px; } .left { position: absolute; left: 0; top: 0; width: 200px; background: green; } .right { position: absolute; right: 0; top: 0; width: 200px; background: red; } .middle { margin-left: 200px; margin-right: 200px; background: lightpink; }

点击查看代码运行实例

float margin-left margin-right实现三栏布局

<div class="left"></div> <div class="right"></div> <div class="middle"></div>

html, body { margin: 0; } div { height: 500px; } .left { width: 200px; background: green; float: left; } .right { width: 200px; background: yellow; float: right; } .middle { margin-left: 200px; margin-right: 200px; background: lightpink; }

点击查看代码运行实例

flex实现三栏布局

<div class="wrap"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div>

html, body { margin: 0; } div { height: 500px; } .wrap { display: flex; } .left { flex: 0 0 200px; background: green; } .right { flex: 0 0 200px; background: yellow; } .middle { background: lightpink; flex: 1 1; }

点击查看代码运行实例

grid实现三栏布局

<div class="wrap"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div>

html, body { margin: 0; } div { height: 500px; } .wrap { display: grid; grid-template-columns: 200px auto 200px; } .left { background: green; } .right { background: yellow; } .middle { background: lightpink; }

点击查看代码运行实例

圣杯布局

圣杯布局在项目中基本上不会再使用了,在面试中我们会经常碰到,所以需要了解。

主要用到了浮动和和相对定位。

<div class="container"> <div class="content">中间内容</div> <div class="left">左侧区域</div> <div class="right">右侧区域</div> </div>

div { height: 500px; } .container { padding: 0 200px 0 200px; border: 1px solid black; } .content { float: left; width: 100%; background: #f00; } .left { width: 200px; background: #0f0; float: left; margin-left: -100%; position: relative; left: -200px; } .right { width: 200px; background: #00f; float: left; margin-left: -200px; position: relative; right: -200px; }

点击查看代码运行实例

双飞翼布局

双飞翼布局在项目中基本上不会再使用了,在面试中我们会经常碰到,所以需要了解。

主要用到了浮动。

<div class="main"> <div class="content">content</div> </div> <div class="left">left</div> <div class="right">right</div>

div { height: 500px; } .main { float: left; width: 100%; background: #f00; } .main .content { /* margin、padding这两种方式都可以 */ /* margin-left: 200px; margin-right: 300px; */ padding-left: 200px; padding-right: 300px; } .left { width: 200px; background: #0f0; float: left; margin-left: -100%; } .right { width: 200px; background: #00f; float: left; margin-left: -200px; }

点击查看代码运行实例

总结

因为flexgrid布局方法已经很强大了,日常工作中99%的布局都可以使用这两种方式来实现。所以笔者建议能使用flex或者grid布局方法实现的就尽量使用这两种布局方式实现。因为不仅简单而且负面作用也很少。

浮动布局和绝对定位布局会导致元素脱离文档流,会带来一些负面作用,有时会导致一些意想不到的结果。

关于flex布局的兼容性和grid布局的兼容性,目前已经支持的很好了,大家可以放心使用。

flex布局的兼容性

css简单网页布局,css网页布局排版实例(9)

grid布局的兼容性

css简单网页布局,css网页布局排版实例(10)

后记

感谢小伙伴们的耐心观看,本文为笔者个人学习笔记,如有谬误,还请告知,万分感谢!如果本文对你有所帮助,还请点个关注点个赞~,您的支持是笔者不断更新的动力!

上一页123末页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.