div布局、table布局、flex布局、多列布局、网格布局 示例
2024-05-09 05:24:58
目录
基础代码
demo.html
css/common.css
div实用布局示例
代码
效果图
table布局
代码
效果图
flex布局
代码
效果图
多列布局
代码
效果图
网格布局
代码
效果图
基础代码
demo.html
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Knote</title><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--><link type="text/css" rel="stylesheet" href="./css/common.css" /><style type="text/css"></style></head><body></body><script type="text/javascript"></script>
</html>
css/common.css
html,
body {width: 100%;height: 100%;padding: 0;margin: 0;background: #fff;color: #000;}.wrapper {width: 100%;margin-bottom: 50px;
}.clearfix:after {content: "";display: block;clear: both;height: 0;visibility: hidden;
}h1,
h2,
h3,
h4{text-align: center;margin:5px 0;padding:0;
}h1{font-size: 32px;
}
h2{font-size: 26px;
}
h3{font-size: 20px;
}
h4{font-size: 14px;
}div实用布局示例
代码
<div class="wrapper clearfix"><h2>实用布局示例</h2><h3>左边固定、右边自适应</h3><h4>方案一：绝对定位 + 外边距</h4><style type="text/css">.div-e1 {width: 100%;height: 100px;position: relative;}.div-e1 .left {width: 50px;height: 50px;position: absolute;background: red;}.div-e1 .right {height: 100px;margin-left: 50px;background: blue;}</style><div class="div-e1"><div class="left"></div><div class="right"></div></div><h4>方案二：浮动定位。</h4><style type="text/css">.div-e1-2 {width: 100%;height: 100px;position: relative;}.div-e1-2 .left {width: 50px;height: 50px;float:left;background: red;}.div-e1-2 .right {height: 100px;margin-left: 50px;background: blue;}</style><div class="div-e1-2 clearfix"><div class="left"></div><div class="right"></div></div><h3>右边固定、左边自适应</h3><h4>方案一：绝对定位 + 外边距</h4><style type="text/css">.div-e2 {width: 100%;height: 50px;position: relative;}.div-e2 .left {height: 50px;margin-right: 50px;background: blue;}.div-e2 .right {width: 50px;height: 50px;position: absolute;right: 0px;background: red;}</style><div class="div-e2"><div class="right"></div><div class="left"></div></div><p>说明：文档流中右边固定div放在左边自适应div前面，使右边固定div绝对定位时参照父元素定位，而非参照左边自适应div定位【会导致换行】。</p><h3>左边固定、右边固定、中间自适应</h3><h4>方案一：浮动定位 + 外边距</h4><style type="text/css">.div-e3 {width: 100%;height: 50px;position: relative;}.div-e3 .left {width:50px;height: 50px;float:left;background:red;}.div-e3 .right {width:50px;height: 50px;float:right;background:blue;}.div-e3 .center {height: 50px;margin-left:50px;margin-right:50px;background:green;}</style><div class="div-e3 clearfix"><div class="left"></div><div class="right"></div><div class="center"></div></div><p>说明：文档流中左边固定div设置向左浮动，文档流中右边固定div设置向右浮动，通过给中间部分设置左右外边距来避免重叠。</p><h3>顶部固定、底部固定、中间自适应</h3><h4>方案一：绝对定位</h4><style type="text/css">.div-e4 {width: 100%;height: 360px;position: relative;}.div-e4 .top {width:100%;height:50px;position:absolute;top:0;background: red;}.div-e4 .middle {width:100%;top:50px;bottom:50px;position:absolute;background:green;}.div-e4 .bottom {width:100%;height:50px;position:absolute;bottom:0;background: blue;}</style><div class="div-e4 clearfix"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div><h4>方案二：calc函数计算</h4><style type="text/css">.div-e4-2 {width: 100%;height: 360px;position: relative;}.div-e4-2 .top {width:100%;height:50px;background: red;}.div-e4-2 .middle {width:100%;height:calc(100% - 100px);background:green;}.div-e4-2 .bottom {width:100%;height:50px;background: blue;}</style><div class="div-e4 clearfix"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div><h3>底部栏靠底显示</h3><h4>方案一：最小高度 + 绝对定位 + 内边距</h4><style type="text/css">/* 如果是页面整体底部栏靠底显示，那么应该设置body最小高度为100%。 */.div-e5 {width: 100%;position: relative;min-height:100%;}.div-e5 .top {width:100%;height:50px;background: red;}.div-e5 .middle {width:100%;background:green;padding-bottom:50px;color:#fff;}.div-e5 .bottom {width:100%;height:50px;background: blue;position:absolute;bottom:0;}</style><div class="div-e5 clearfix"><div class="top"></div><div class="middle">content</div><div class="bottom"></div></div>
</div>
效果图
table布局
代码
<div class="wrapper clearfix"><h2>实用布局示例</h2><h3>html table标签 斑马纹</h3><style type="text/css">.table-e1 {width: 100%;height: 300px;margin-bottom: 36px;border-collapse:collapse;}.table-e1 tr{text-align: center;}.table-e1 tbody tr:nth-child(even){background:#ddd;}.table-e1 tbody tr:hover{background:#eee;}.table-e1 tbody tr :last-child {width:120px;}.table-e1 tbody tr :last-child a{margin:0 5px;cursor: pointer;text-decoration: none;}.table-e1 tfoot tr :first-child{border-right:none;}/* 等同于 .table-e1 tfoot tr td:nth-child(2) */.table-e1 tfoot tr :nth-child(2){padding-left:20px;text-align: left;border-left: none;}</style><table class="table-e1" border="1" cellspacing="0" cellpadding="0" align="center"><caption>原生html表格标签布局 示例</caption><thead><tr><th>id</th><th>字段一</th><th>字段二</th><th>字段三</th><th>操作选项</th></tr></thead><tbody><tr><td>1001</td><td>测试文本1</td><td>测试文本2</td><td>测试文本3</td><td><a>编辑</a><a>删除</a></td></tr><tr><td>1002</td><td>测试文本1</td><td>测试文本2</td><td>测试文本3</td><td><a>编辑</a><a>删除</a></td></tr><tr><td>1003</td><td>测试文本1</td><td>测试文本2</td><td>测试文本3</td><td><a>编辑</a><a>删除</a></td></tr><tr><td>1004</td><td>测试文本1</td><td>测试文本2</td><td>测试文本3</td><td><a>编辑</a><a>删除</a></td></tr><tr><td>1005</td><td>测试文本1</td><td>测试文本2</td><td>测试文本3</td><td><a>编辑</a><a>删除</a></td></tr><tr><td>1006</td><td>测试文本1</td><td>测试文本2</td><td>测试文本3</td><td><a>编辑</a><a>删除</a></td></tr></tbody><tfoot><tr><td>信息说明</td><td colspan="4">测试提示文本，提示文本，提示文本。</td></tr></tfoot></table><h3>div + css 表格 斑马纹</h3><style type="text/css">.table-e2 {width: 100%;height: 300px;display:table;border:1px solid #333;box-sizing: border-box;border-collapse:collapse;}.table-e2 .caption{display:table-caption;width: 100%;text-align: center;}.table-e2 .tr{display:table-row;text-align: center;}.table-e2 .tr .cell{display:table-cell;border:1px solid #333;vertical-align: middle;}.table-e2 .table-header{display:table-header-group;}.table-header .tr{}.table-header .tr .cell{font-weight: bold;}.table-e2 .table-tbody{display:table-row-group;}.table-tbody .tr{}.table-tbody .tr:nth-child(even){background:#ddd;}.table-tbody .tr:hover{background:#eee;}.table-tbody .tr :last-child{width:120px;}.table-tbody .tr :last-child a{margin:0 5px;cursor:pointer;text-decoration:none;}.table-tbody .tr .cell{}.table-e2 .table-footer{display:table-footer-group;}.table-footer .tr{}.table-footer .tr .cell{}.table-footer .tr :first-child{border-right:none;}.table-footer .tr :nth-child(2){padding-left:20px;text-align: left;border-left: none;border-right:none;}</style><div class="table-e2"><div class="caption">div + css 实现表格布局 示例</div><div class="table-header"><div class="tr"><div class="cell">id</div><div class="cell">字段一</div><div class="cell">字段二</div><div class="cell">字段三</div><div class="cell">操作选项</div></div></div><div class="table-tbody"><div class="tr"><div class="cell">1001</div><div class="cell">测试文本1</div><div class="cell">测试文本2</div><div class="cell">测试文本3</div><div class="cell"><a>编辑</a><a>删除</a></div></div><div class="tr"><div class="cell">1002</div><div class="cell">测试文本1</div><div class="cell">测试文本2</div><div class="cell">测试文本3</div><div class="cell"><a>编辑</a><a>删除</a></div></div><div class="tr"><div class="cell">1003</div><div class="cell">测试文本1</div><div class="cell">测试文本2</div><div class="cell">测试文本3</div><div class="cell"><a>编辑</a><a>删除</a></div></div><div class="tr"><div class="cell">1004</div><div class="cell">测试文本1</div><div class="cell">测试文本2</div><div class="cell">测试文本3</div><div class="cell"><a>编辑</a><a>删除</a></div></div><div class="tr"><div class="cell">1005</div><div class="cell">测试文本1</div><div class="cell">测试文本2</div><div class="cell">测试文本3</div><div class="cell"><a>编辑</a><a>删除</a></div></div><div class="tr"><div class="cell">1006</div><div class="cell">测试文本1</div><div class="cell">测试文本2</div><div class="cell">测试文本3</div><div class="cell"><a>编辑</a><a>删除</a></div></div></div><div class="table-footer"><div class="tr"><div class="cell">信息说明</div><div class="cell">测试提示文本，提示文本，提示文本。</div></div></div></div><p>说明：本实例并没有真正实现跨列功能。对于div表格布局，想要真正实现跨行跨列的效果，如果通过内嵌表格【display:table】的方式来实现，要注意最外层表格中一行中只有一个单元格以方便布局，否则因为display:table;布局会自动补上缺失的表格元素，导致tr中嵌套的div会被视作一个单元格，宽度受限【width:100%;也只是占据一个单元格宽度，而非占用一行宽度】。如果表格数据简单，又需要实现一些信息跨行跨列展示，那么就可以先考虑使用html table标签表格来展示数据。</p>
</div>
效果图
flex布局
代码
<div class="wrapper clearfix"><h2>实用布局示例</h2><h3>页面主体布局</h3><style type="text/css">.flex-e1 {width: 100%;height: 300px;display:flex;flex-direction: column;justify-content: center;min-width:1200px;background: #0000FF;color:#fff;text-align: center;}.flex-e1 .header{height:50px;display:flex;flex:none;flex-direction: row;background: #008000;}.flex-e1 .header .logo{width:100px;height:50px;flex:none;background: #008899;}.flex-e1 .header .menu{height:50px;flex:auto;background: #00A381;}.flex-e1 .header .icons{width:100px;height:50px;flex:none;background:#333333;}.flex-e1 .container{flex:auto;display:flex;flex-direction: row;background:#6B6F59;}.flex-e1 .container .left-bar{width:220px;flex:none;background:#8CFFA0;}.flex-e1 .container .main{flex:auto;background:#FFA08C;}.flex-e1 .footer{height:50px;flex:none;background:#000000;}</style><div class="flex-e1"><div class="header"><div class="logo">logo</div><div class="menu">menu</div><div class="icons">icons</div></div><div class="container"><div class="left-bar">left-bar</div><div class="main">main</div></div><div class="footer">footer</div></div>
</div>
效果图
多列布局
代码
<div class="wrapper clearfix"><h2>实用布局示例</h2><h3>文章多列展示</h3><style type="text/css">.multiColumn-e1{width:100%;color:#fff;border:5px solid #008899;margin:30px 0;box-sizing: border-box;}.multiColumn-e1 > p{width:600px;margin:20px auto;color:#333;border:1px solid #333;padding:10px;column-count:3;}.multiColumn-e1 > p.p2{column-width:150px;column-gap:30px;column-rule:2px solid #008899;}</style><div class="multiColumn-e1 clearfix"><p>测试文本1，测试文本1，测试文本1，测试文本1，测试文本1，测试文本1，测试文本1测试文本1，测试文本1测试文本1，测试文本1测试文本1，测试文本1测试文本1测试文本1，测试文本1测试文本1测试文本1，测试文本1测试文本1测试文本1测试文本1测试文本1测试文本1。</p><p class="p2">测试文本2，测试文本2，测试文本2，测试文本2，测试文本2，测试文本2，测试文本2测试文本2，测试文本2测试文本2，测试文本2测试文本2，测试文本2测试文本2测试文本2，测试文本2测试文本2测试文本2，测试文本2测试文本2测试文本2测试文本2测试文本2测试文本2。</p></div><h3>瀑布流分列展示内容盒，内容盒不断开</h3><style type="text/css">.multiColumn-e2{width:600px;margin:30px auto;color:#fff;border:5px solid #008899;box-sizing: border-box;column-count:3;}.multiColumn-e2 .box{width:160px;margin:0;padding:10px;break-inside: avoid;page-break-inside: avoid;;}.multiColumn-e2 .box p{margin:0;width:160px;color:#333;border:1px solid #333;}</style><div class="multiColumn-e2 clearfix"><div class="box"><p>测试文本，测试文本，测试文本，测试文本。</p></div><div class="box"><p>测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。</p></div><div class="box"><p>测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。</p></div><div class="box"><p>测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。</p></div><div class="box"><p>测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。</p></div><div class="box"><p>测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本，测试文本。</p></div></div>
</div>
效果图
网格布局
代码
<div class="wrapper clearfix"><h2>实用布局示例</h2><h3>水平、垂直居中对齐</h3><style type="text/css">.grid-e1{width:300px;height:100px;position: relative;margin: 0 auto;display:grid;place-items:center;background-color: #8CFFA0;color:#333333;}</style><div class="grid-e1">display:grid;place-items:center;</div><h3>跨行跨列网格布局</h3><style type="text/css">.grid-e2{width:900px;height:500px;position: relative;margin: 0 auto;display:grid;place-items:center;background-color: #8CFFA0;color:#fff;grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(1fr,3);grid-template-areas:'box1 box1 box2''box1 box1 box3''box4 box5 box3';grid-gap:20px 20px;}.grid-e2 .box{width:100%;height:100%;display: grid;place-items: center;}.grid-e2 .box1{grid-area:box1;background-color: #008899;}.grid-e2 .box2{grid-area:box2;background-color: #333333;}.grid-e2 .box3{grid-area:box3;background-color: #8CA0FF;}.grid-e2 .box4{grid-area:box4;background-color: #715c1f ;}.grid-e2 .box5{grid-area:box5;background-color: #FFA08C;}</style><div class="grid-e2"><div class="box box1"><p>box1</p></div><div class="box box2"><p>box2</p></div><div class="box box3"><p>box3</p></div><div class="box box4"><p>box4</p></div><div class="box box5"><p>box5</p></div></div>
</div>效果图
div布局、table布局、flex布局、多列布局、网格布局 示例相关推荐
- JQuery插件：动态列和无间隙网格布局Mason.js
来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...
- html5 box布局,使用Flexbox打造响应式网页网格布局
CSS3的Flexbox可以非常容易的制作出各种布局效果.前面我们已经结束了flexbox的基本使用方法,水平布局和垂直布局方法.这篇文章我们来看看如果制作具有响应式效果的flexbox双列网格布局效 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- Bootstrap研究1-精巧的网格布局系统
Bootstrap研究1-精巧的网格布局系统 本网格布局系统属于Scaffolding(框架,布局)部分.在Scaffolding里面有(固定)网格布局(Grid System)和流式网格布局(Flu ...
- CSS - 网格布局（grid）
目录 什么是网格布局 网格布局与弹性布局的比较 网格布局中的概念名词 网格容器 display:grid.display:inline-grid 网格轨道 grid-template-rows.gri ...
- Grid网格布局实例
简介 Grid 布局将容器划分成"行"和"列",产生单元格也就是项目所在. 容器 容器就是设置了 display: grid; 或者 display: inli ...
- 快速上手 Grid 网格布局
Grid布局是什么 Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小.位置.层次等关系.号称是最强大的的 CSS 布局方案,是目前唯 ...
- css基础知识十：介绍一下CSS中的Grid网格布局?
一.是什么 Grid 布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列 擅长将一个页面划分为几个主要区域,以及定义这些区域的大小.位置.层次等关系 ...
- jQuery mobile网格布局
3.4 内容格式化 jQuery Mobile中提供了许多非常有用的工具与组件,如多列的网格布局.折叠形的面板控制等,这些组件可以帮助开发者快速实现正文区域内容的格式化. 3.4.1 网格布局 jQu ...
- CSS grid 网格布局
目录 1 父级容器属性: 1.1 display属性 1.2 grid-template-colums/rows属性 1.2.1 repeat()函数 1.2.2 auto-fill关键字 1.2.3 ...
最新文章
- Spring Boot详细学习地址转载
- [caffe解读] caffe从数学公式到代码实现5-caffe中的卷积
- linux mv 保持目录结构_Linux中的mv命令详解
- SAP HANA Cloud 简介
- Redis 如何分析慢查询操作
- 2005级计算机系本二班专业知识大赛
- 卡尔曼滤波simulink例子，位移和速度2变量估计
- 计算机组成原理AB什么运算,2010~2011学年武汉大学计算机组成原理AB类AB卷及答案...
- php bmp中创建图像bmp2gd，让GD支持32位BMP
- 三网物联卡的优缺点有哪些
- session如何和浏览器保持联系
- audio.js的研究与使用
- 基于win10系统下用vs2019编译flightgear2020.4.0
- 嵌入式研发人员的核心竞争力浅谈
- git log查看日志中文乱码的解决方法，绝对好用2021
- OSRM开源地图导航引擎介绍一
- 玩转系统|如何Windows Update自动更新
- 【Spring Security】的RememberMe功能流程与源码详解
- 临床基因组/外显组数据分析实战技术研讨会(2023.4)
- CMA大段设备内存分配