用JS自制表格软件玩数据1.页面布局
Posted 妇男主任
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JS自制表格软件玩数据1.页面布局相关的知识，希望对你有一定的参考价值。
页面布局
当写完本系列后，我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正！
简要介绍
之所以要开这个课程，因为本人是重度表格用户。又因为网上很多办公套件都是商业版的，做了很多限制，即使是付费用户，也没办法定制出更加自由的数据处理功能，所以，就打算自己做一个，并免费分享出来。
界面
自己排版比较麻烦，所以在网上找了个不错的模板。感谢作者1的辛苦付出。下载地址在这里：https://codepen.io/oliviale/pen/rPjgmB
下载好稿之后，我做了一些调整。
css布局
布局中的重点部分的解析
.cells
position: relative;
display: grid;
grid-template-columns: 40px repeat(11, calc((100% - 50px) / 11));
grid-template-rows: repeat(21, 25px);
grid-gap: 1px;
background: #cdcdcd;
grid-auto-flow: dense;
max-width: 100%;
overflow: hidden;
上面的 cells 样式类，代表 单元格的排版样式。
display: grid;
Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。
我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。声明 display：grid 则该容器是一个块级元素，设置成 display: inline-grid 则容器元素为行内元素
grid-template-columns
grid-template-columns 规定网格布局中的列数（和宽度）。
可用的参数有：
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
| 值 | 描述 |
|---|---|
| none | 默认值，不指定列的大小。 |
| auto | 列的大小由容器的大小和列中网格元素内容的大小决定。 |
| max-content | 每列的大小设置为该列中最大网格元素的大小。 |
| min-content | 每列的大小设置为该列中最小网格元素的大小。 |
| length | 长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。 了解更多长度单位。 |
| initial | 将此属性设置为默认值。 |
| inherit | 从父元素继承该属性。 |
grid-template-rows
grid-template-rows用于设置网格布局中的行数及高度。
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
| 值 | 描述 |
|---|---|
| none | 默认值，不指定行的大小。 |
| auto | 行的大小由容器的大小和行中网格元素内容的大小决定。 |
| max-content | 每行的大小设置为该行中最大网格元素的大小。 |
| min-content | 每行的大小设置为该行中最小网格元素的大小。 |
| length | 长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。 了解更多长度单位。 |
| initial | 将此属性设置为默认值。 |
| inherit | 从父元素继承该属性。 |
把源码贴出来：
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Book1 - Excel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="main-content">
<div class="title">Book1 - Excel</div>
<div class="menu-bar">
<div><span>文件</span></div>
<div><span>首页</span></div>
<div><span>插入</span></div>
<div><span>数据</span></div>
<div><span>查看</span></div>
<div><span>帮助</span></div>
<div><span>我的账户</span></div>
</div>
<div class="icon-bar">
<div class="icon-bar__clipboard">
<div class="icon-paste">
<div class="icon"></div><span>粘贴</span>
</div>
<div class="icon icon-cut"></div>
<div class="icon icon-copy"></div>
<div class="icon-bar__name">剪贴板</div>
</div>
<div class="icon-bar__font">
<select class="font-name">
<option selected="selected">Noto Sans</option>
<option style="--font:Arial">Arial</option>
<option style="--font:Calibri">Calibri</option>
<option style="--font:Comic Sans MS">Comic Sans MS</option>
<option style="--font:Courier New">Courier New</option>
<option style="--font:Impact">Impact</option>
<option style="--font:Georgia">Georgia</option>
<option style="--font:Garamond">Garamond</option>
<option style="--font:Lato">Lato</option>
<option style="--font:Open Sans">Open Sans</option>
<option style="--font:Palatino">Palatino</option>
<option style="--font:Verdana">Verdana</option>
</select>
<select class="font-size">
<option selected="selected">14</option>
<option>16</option>
<option>18</option>
<option>20</option>
<option>22</option>
<option>24</option>
<option>26</option>
<option>28</option>
<option>36</option>
<option>48</option>
<option>72</option>
</select>
<div class="icon icon-bold"></div>
<div class="icon icon-italic"></div>
<div class="icon icon-underline"></div>
<div class="icon icon-border"></div>
<div class="icon icon-fill"></div>
<div class="icon icon-color"></div>
<div class="icon-bar__name">字体</div>
</div>
<div class="icon-bar__alignment">
<div class="icon icon-alignt"></div>
<div class="icon icon-alignm"></div>
<div class="icon icon-alignb"></div>
<div class="icon icon-orientation"></div>
<div class="icon icon-alignl"></div>
<div class="icon icon-alignc"></div>
<div class="icon icon-alignr"></div>
<div class="icon icon-indentinc"></div>
<div class="icon icon-indentdec"></div>
<div class="wrap-text">
<div class="icon"></div><span>字体换行</span>
</div>
<div class="merge-center">
<div class="icon"></div><span>合并与居中</span>
</div>
<div class="icon-bar__name">定位</div>
</div>
<div class="icon-bar__number">
<select class="number-format">
<option>General</option>
<option>Number</option>
<option>Currency</option>
<option>Accounting</option>
<option>Short Date</option>
<option>Long Date</option>
<option>Time</option>
<option>Currency</option>
<option>Percentage</option>
</select>
<div class="icon icon-acc"></div>
<div class="icon icon-percent"></div>
<div class="icon icon-comma"></div>
<div class="icon icon-decimalinc"></div>
<div class="icon icon-decimaldec"></div>
<div class="icon-bar__name">数字</div>
</div>
<div class="icon-bar__styles">
<div class="conditional">
<div class="icon"></div>
</div>
<div class="format-table">
<div class="icon"></div>
</div>
<div class="cell-style">
<div class="icon"></div>
</div>
<div class="icon-desc">条件格式</div>
<div class="icon-desc">格式化为表格</div>
<div class="icon-desc">单元格样式</div>
<div class="icon-bar__name">样式</div>
</div>
<div class="icon-bar__cells">
<div class="cell-insert">
<div class="icon"></div>
</div>
<div class="cell-delete">
<div class="icon"></div>
</div>
<div class="cell-format">
<div class="icon"></div>
</div>
<div class="icon-desc">插入</div>
<div class="icon-desc">删除</div以上是关于用JS自制表格软件玩数据1.页面布局的主要内容，如果未能解决你的问题，请参考以下文章