一文汇总 CSS 两列布局和三列布局的具体使用_CSS布局实例_CSS_网页制作

来源:脚本之家  责任编辑:小易  

一、定义1、分类汇总是对相同类别(列)的数据进行统计汇总。(求和、计数、求平均等汇总运算),也就是将同类别的数据放在一起,然后再进行求和、计数、求平均等汇总运算。2、数据透视表是通过对行或列的不同组合来对源数据进行统计汇总(求和、计数、求平均等汇总运算)。二、建立方法分类汇总:1、先按关键字排序2、选择数据区域中的任一单元格,“数据”—“分类汇总”3、在分类汇总对话框中设置:分类字段,汇总方式,汇总项4、“确定”数据透视表1、选择数据区域中的任一单元格,“数据”—“数据透视表和数据透视图”2、使用向导三步法之一:选择数据源类型及报表类型(默认),并单击“下e799bee5baa6e4b893e5b19e31333337613164一步”3、使用向导三步法之二:选定数据源区域,并单击“下一步”4、使用向导三步法之三:确定数据透视表的位置,单击“布局”,拖动行字段,列字段,数据项。5、单击“完成”三、结果的显示及查看分类汇总的显示分级显示,1、总计情况,2、分类情况,3、明细情况。数据透视表的显示列字段:具有列方向的字段,每一个不同的项目占据一列。行字段:具有行方向的字段,每一个不同的项目占据一行。汇总项:进行汇总的项目。数据区域:这些数据是行和列上项目的交叉统计值www.zgxue.com防采集请勿采集本网。

前言

随着大前端的发展,UI 框架层出不穷,让我们前端开发对 CSS 的能力要求变得没那么高或者没那么严苛,起码重要性是比不上 JS 编程的。但是,基础的 CSS 依然需要我们熟练掌握,今天就来总结写下 CSS 布局的方式。

两列布局

wps2019文档,打开工具选项,找到编辑选项,里面有一个剪切和粘贴选项,选择匹配当前格式,确定即可。word2017文档,点击左上角office图标按纽,右下角有个word选项(I),点击进去,选择高级

左列定宽,右列自适应

1、电脑打开Excel表格,然后选中所百有数据。2、选中所有数据后,点击插入度数据透视表。3、点击插入数据透视表后,在问底部选择一个透视表的位置,然后点击确答定。4、点击确定后,在右侧选择要

float + margin 布局

3、点击插入数据透视表后,选中区域中就框选数据,然后选择一个要放置透视表的位置。4、点击确定数据透视表后,在右侧把选项都勾选上。5、在右侧把选项都勾选上之后数据透视表就做好了,就可以把相同名称

html 代码

3.对于要汇总其数据的字段,请将这些字段拖到标有“请将数据项拖至此处”的区域。只有带有 或 图标的字段可以被拖到此区域。如果要添加多个数据字段,则应按所需顺序排列这些字段,方法是:用鼠标右键单击

<body> <div id="left">左列定宽</div> <div id="right">右列自适应</div></body>

css 代码:

#left { float: left; width: 200px; height: 400px; background-color: lightblue;}#right { margin-left: 200px; /* 大于或等于左列的宽度 */ height: 400px; background-color: lightgreen;}

float + overflow 布局

html 代码

3.对于要汇总其数据的字段,请将这些字段拖到标有“请将数据项拖至此处”的区域。只有带有 或 图标的字段可以被拖到此区域。如果要添加多个数据字段,则应按所需顺序排列这些字段,方法是:用鼠标右键单击

<body> <div id="left">左列定宽</div> <div id="right">右列自适应</div></body>

css 代码

#left { float: left; width: 200px; height: 400px; background-color: lightblue;}#right { overflow: hidden; height: 400px; background-color: lightgreen;}

绝对定位布局

html 代码:

<body> <div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { position: relative;}#left { position: absolute; top: 0; left: 0; width: 200px; height: 400px; background-color: lightblue;}#right { position: absolute; top: 0; left: 200px; right: 0; height: 400px; background-color: lightgreen;}

table 布局

html 代码:

<body> <div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { width: 100%; height: 400px; display: table;}#left,#right { display: table-cell;}#left { width: 200px; background-color: lightblue;}#right { background-color: lightgreen;}

flex 布局

html 代码:

<body> <div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { width: 100%; height: 400px; display: flex;}#left { width: 200px; background-color: lightblue;}#right { flex: 1; background-color: lightgreen;}

grid 网格布局

html 代码:

<body> <div id="parent"> <div id="left">左列定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { width: 100%; height: 400px; display: grid; grid-template-columns: 200px auto;}#left { background-color: lightblue;}#right { background-color: lightgreen;}

左列不定宽,右列自适应

左列盒子宽度随着内容增加或减少发生变化,右列盒子自适应

float + overflow 布局

html 代码:

<body> <div id="left">左列不定宽</div> <div id="right">右列自适应</div></body>

css 代码:

#left { float: left; height: 400px; background-color: lightblue;}#right { overflow: hidden; height: 400px; background-color: lightgreen;}

flex 布局

html 代码:

<body> <div id="parent"> <div id="left">左列不定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { display: flex; height: 400px;}#left { background-color: lightblue;}#right { flex: 1; background-color: lightgreen;}

grid 布局

html 代码:

<body> <div id="parent"> <div id="left">左列不定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { display: grid; grid-template-columns: auto 1fr; height: 400px;}#left { background-color: lightblue;}#right { background-color: lightgreen;}

三列布局

两列定宽,一列自适应

float + margin 布局

3、点击插入数据透视表后,选中区域中就框选数据,然后选择一个要放置透视表的位置。4、点击确定数据透视表后,在右侧把选项都勾选上。5、在右侧把选项都勾选上之后数据透视表就做好了,就可以把相同名称

html 代码:

<body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { height: 400px;}#left { float: left; width: 100px; height: 400px; background-color: lightblue;}#center { float: left; width: 200px; height: 400px; background-color: lightgrey;}#right { margin-left: 300px; /* 左列的宽度 + 中间列的宽度 */ height: 400px; background-color: lightgreen;}

float + overflow 布局

html 代码:

<body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { height: 400px;}#left { float: left; width: 100px; height: 400px; background-color: lightblue;}#center { float: left; width: 200px; height: 400px; background-color: lightgrey;}#right { overflow: hidden; height: 400px; background-color: lightgreen;}

table 布局

html 代码:

<body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { display: table; width: 100%; height: 400px;}#left { display: table-cell; width: 100px; background-color: lightblue;}#center { display: table-cell; width: 200px; background-color: lightgrey;}#right { display: table-cell; background-color: lightgreen;}

flex 布局

html 代码:

<body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码:

#parent { display: flex; width: 100%; height: 400px;}#left { width: 100px; background-color: lightblue;}#center { width: 200px; background-color: lightgrey;}#right { flex: 1; background-color: lightgreen;}

grid 布局

html 代码

3.对于要汇总其数据的字段,请将这些字段拖到标有“请将数据项拖至此处”的区域。只有带有 或 图标的字段可以被拖到此区域。如果要添加多个数据字段,则应按所需顺序排列这些字段,方法是:用鼠标右键单击

<body> <div id="parent"> <div id="left">左列定宽</div> <div id="center">中间列定宽</div> <div id="right">右列自适应</div> </div></body>

css 代码

#parent { display: grid; grid-template-columns: 100px 200px auto; width: 100%; height: 400px;}#left { background-color: lightblue;}#center { background-color: lightgrey;}#right { background-color: lightgreen;}

左右定宽,中间自适应

圣杯布局和双飞翼布局目的都是希望先加载的是中间的部分,然后再开始加载 left 和 right 两部分相对来说不是很重要的东西。

圣杯布局

圣杯布局:为了让中间的内容不被遮挡,将中间 div(或最外层父 div)设置 padding-left 和 padding-right (值等于 left 和 right 的宽度),将左右两个 div 用相对布局 position: relative 并分别配合 left 和 right 属性,以便左右两栏 div 移动后不遮挡中间 div。

html 代码:

<body> <div id="parent"> <div id="center">中间列</div> <div id="left">左列</div> <div id="right">右列</div> </div></body>

css 代码:

#parent { height: 400px; padding: 0 200px; overflow: hidden;}#left,#right { float: left; width: 200px; height: 100%; position: relative; background-color: lightblue;}#left { margin-left: -100%; /* 使 #left 上去一行 */ left: -200px;}#right { right: -200px; margin-left: -200px; /* 使 #right 上去一行 */}#center { float: left; width: 100%; height: 100%; background-color: lightgrey;}

双飞翼布局

双飞翼布局,为了中间 div 内容不被遮挡,直接在中间 div 内部创建子 div 用于放置内容,在该子 div 里用 margin-left 和 margin-right 为左右两栏 div 留出位置。

html 代码:

<body> <div id="parent"> <div id="center"> <div id="center-inside">中间列</div> </div> <div id="left">左列</div> <div id="right">右列</div> </div></body>

css 代码:

#left,#right { float: left; width: 200px; height: 400px; background-color: lightblue;}#left { margin-left: -100%; /* 使 #left 上去一行 */}#right { margin-left: -200px; /* 使 #right 上去一行 */}#center { float: left; width: 100%; height: 400px; background-color: lightgrey;}#center-inside { height: 100%; margin: 0 200px;}

flex 实现

html 代码:

<body> <div id="parent"> <div id="center">中间列</div> <div id="left">左列</div> <div id="right">右列</div> </div></body>

css 代码:

#parent { display: flex;}#left,#right { flex: 0 0 200px; height: 400px; background-color: lightblue;}#left { order: -1; /* 让 #left 居于左侧 */}#center { flex: 1; height: 400px; background-color: lightgrey;}

到此这篇关于一文汇总 CSS 两列布局和三列布局的具体使用的文章就介绍到这了,更多相关CSS 两列布局和三列布局内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网! 

你这是报表布局“以压缩形式显示”的,如果要改成同一行显示需要将报表布局改成“以表格形式显示”光标定位在数据透视表区域中任意单元格,“设计”,“报表布局”,“以表格形式显示”三步就可以完成了内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css实现页面两列布局与三列布局的方法示例
  • css两列布局实现方式总结
  • 横向两列布局(左列固定,右列自适应)的4种css实现方式
  • 学习div+css网页布局之两列布局
  • css布局实例代码 两列布局实例
  • css固定宽度的三列布局运用实例解析
  • css的三列式"圣杯布局"方案完全解析
  • css三列布局的多种表现形式
  • 学习div+css网页布局之三列布局
  • 纯css实现的三列布局网页效果实例
  • 数据透视后两列数据不在同一行显示
  • 分类汇总和数据透视表有什么区别?
  • excel数据透视表如何让列标签并排显示?
  • excel里面由两项决定第三列汇总项的方法
  • WPS文档复制粘贴后布局和原来不一样怎么办?
  • 快速查找excel重复数据,并把重复数据合并汇总
  • 在EXCEL表格里面怎么把相同名称的不同数据合并到一起
  • 数据透视表和函数
  • excel数据透视表的格式设置,
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss布局实例css两列布局三列布局css实现页面两列布局与三列布局的方法示例css两列布局实现方式总结横向两列布局(左列固定,右列自适应)的4种css实现方式学习div+css网页布局之两列布局css布局实例代码 两列布局实例css固定宽度的三列布局运用实例解析css的三列式"圣杯布局"方案完全解析css三列布局的多种表现形式学习div+css网页布局之三列布局纯css实现的三列布局网页效果实例css教程css3div+css教程web标准教程浏览器兼容教程css布局实例div+css通用样式布局实例代码如何布局登录页面bootstrap3.0教程之表单(form)使用详解css网页布局教程:绝对定位和相对定位创造100% 自适应css布局的行之有效的方法div模拟textarea文本域实现高度自适应效果代码两个div并排的实现代码bootstrap3.0教程之栅格系统原理(布局)css网页布局中文字排版的属性和用法css实现的漂亮的分页效果代码(橘黄色与蓝色)如何利用vw+rem进行移动端布局flex布局实现每行固定数量+自适应布局浅谈flex布局与缩放比例计算使用css实现三栏自适应布局(两边宽度固定,中间自适应flex布局做出自适应页面(语法和案例)详解flex布局中保持内容不超出容器的解决办法如何利用定位使元素居中(web端页面布局小技巧)css实现两栏布局,左边固定,右边自适应的4种方法css如何利用负margin技术实现平均布局css sticky footer经典布局的实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved