当写完本系列后,我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正!
简要介绍
之所以要开这个课程,因为本人是重度表格用户。又因为网上很多办公套件都是商业版的,做了很多限制,即使是付费用户,也没办法定制出更加自由的数据处理功能,所以,就打算自己做一个,并免费分享出来。
界面
自己排版比较麻烦,所以在网上找了个不错的模板。感谢作者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>
<div class="icon-desc">格式化</div>
<div class="icon-bar__name">Cells</div>
</div>
</div>
<div class="cell-content">
<div>fx</div>
<div></div>
</div>
<div class="cells">
<div class="cells__spacer"></div>
<div class="cells__alphabet">A</div>
<div class="cells__alphabet">B</div>
<div class="cells__alphabet">C</div>
<div class="cells__alphabet">D</div>
<div class="cells__alphabet">E</div>
<div class="cells__alphabet">F</div>
<div class="cells__alphabet">G</div>
<div class="cells__alphabet">H</div>
<div class="cells__alphabet">I</div>
<div class="cells__alphabet">J</div>
<div class="cells__alphabet">K</div>
<div class="cells__number">1</div>
<div class="cells__number">2</div>
<div class="cells__number">3</div>
<div class="cells__number">4</div>
<div class="cells__number">5</div>
<div class="cells__number">6</div>
<div class="cells__number">7</div>
<div class="cells__number">8</div>
<div class="cells__number">9</div>
<div class="cells__number">10</div>
<div class="cells__number">11</div>
<div class="cells__number">12</div>
<div class="cells__number">13</div>
<div class="cells__number">14</div>
<div class="cells__number">15</div>
<div class="cells__number">16</div>
<div class="cells__number">17</div>
<div class="cells__number">18</div>
<div class="cells__number">19</div>
<div class="cells__number">20</div>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="cells__input"/>
<input class="input__explanation" value="点我编辑文本 👉🏻"/>
<div class="input__see-more"><a href="https://codepen.io/collection/DQvYpQ/" target="_blank">点击我打开官网!</a></div>
<div class="input__sm-1"><a href="https://twitter.com/meowlivia_" target="_blank">Twitter</a></div>
<div class="input__sm-2"><a href="https://github.com/oliviale" target="_blank">GitHub</a></div>
<div class="input__sm-3"><a href="https://dribbble.com/oliviale" target="_blank">Dribbble</a></div>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
body {
background: #fff;
font-family: "Noto Sans", sans-serif;
color: #444;
font-size: 14px;
}
aside.context {
text-align: center;
color: #333;
line-height: 1.7;
}
aside.context a {
text-decoration: none;
color: #333;
padding: 3px 0;
border-bottom: 1px dashed;
}
aside.context a:hover {
border-bottom: 1px solid;
}
aside.context .explanation {
max-width: 700px;
margin: 6em auto 0;
}
footer {
text-align: center;
margin: 4em auto;
width: 100%;
}
footer a {
text-decoration: none;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: transparent;
border: 1px dashed #333;
color: #333;
margin: 5px;
}
footer a:hover {
background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
margin-top: 12px;
display: inline-block;
font-size: 20px;
}
.main-content {
display: grid;
min-height: 100vh;
grid-template-rows: repeat(2, 45px) 115px 60px auto;
max-width: 100%;
}
.main-content > div {
max-width: 100%;
}
.title {
background: #217346;
text-align: center;
display: grid;
place-content: center;
color: #fff;
}
.menu-bar {
display: grid;
grid-template-columns: repeat(10, max-content);
padding: 15px;
grid-gap: 30px;
background: #f3f2f1;
}
.menu-bar div:nth-child(2) span {
display: inline-block;
position: relative;
border-bottom: 5px solid #217346;
padding-bottom: 6px;
font-weight: 700;
}
.cell-content {
border: 1px solid #e6e6e6;
background: #e6e6e6;
display: grid;
padding: 10px;
grid-template-columns: 50px auto;
}
.cell-content div {
border: 1px solid #cdcdcd;
background: #fff;
display: flex;
align-items: center;
}
.cell-content div:nth-child(1) {
justify-content: center;
color: #999;
font: italic 700 18px "Merriweather", serif;
border-right: none;
}
.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__spacer {
background: #e6e6e6;
position: relative;
}
.cells__spacer:after {
content: "";
position: absolute;
right: 4px;
bottom: 4px;
height: 80%;
width: 100%;
background: linear-gradient(135deg, transparent 30px, #bbb 30px, #bbb 55px, transparent 55px);
}
.cells__alphabet {
background: #e6e6e6;
display: flex;
justify-content: center;
align-items: center;
}
.cells__number {
background: #e6e6e6;
grid-column: 1/span 1;
display: flex;
justify-content: center;
align-items: center;
}
.cells__input {
border: none;
padding: 0 6px;
}
.cells input, .cells button {
border: none;
background: #fff;
padding: 0 6px;
font-family: "Noto Sans", sans-serif;
}
.input__explanation {
grid-column: 3/span 2;
grid-row: 15;
}
.input__see-more {
grid-column: 5;
grid-row: 15;
text-align: left;
padding: 6px;
background: #fff;
}
.input__sm-1, .input__sm-2, .input__sm-3 {
text-align: center;
padding: 6px;
grid-row: 15;
background: #fff;
}
.input__sm-1 {
grid-column: 8;
}
.input__sm-2 {
grid-column: 9;
}
.input__sm-3 {
grid-column: 10;
}
.icon-bar {
background: #f3f2f1;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
position: relative;
display: grid;
padding: 10px 15px;
grid-template-columns: repeat(6, max-content);
grid-template-rows: auto 35px;
grid-auto-flow: dense;
}
.icon-bar > div {
display: grid;
grid-template-rows: repeat(2, 30px) 30px;
border-right: 1px solid #cdcdcd;
grid-gap: 5px;
}
.icon-bar__name {
font-size: 12px;
text-align: center;
align-self: end;
margin-bottom: 3px;
}
.icon-bar .icon-desc {
margin-top: 5px;
line-height: 1.15;
font-size: 13px;
}
.icon-bar .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/spriteExcel.png);
}
.icon-bar__clipboard {
grid-template-columns: 50px 30px;
padding-right: 10px;
}
.icon-bar__clipboard .icon-bar__name {
grid-column: 1/span 2;
}
.icon-bar__clipboard .icon-paste {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
grid-row: 1/span 2;
}
.icon-bar__clipboard .icon-paste .icon {
background-position: -30px -60px;
height: 45px;
width: 100%;
}
.icon-bar__clipboard .icon-paste span {
margin-top: 5px;
display: block;
}
.icon-bar__clipboard .icon-cut {
background-position: 0 0;
}
.icon-bar__clipboard .icon-copy {
background-position: -30px 0;
}
.icon-bar__font {
padding: 0 10px;
grid-template-columns: repeat(3, 30px) 40px repeat(2, 30px);
justify-content: space-around;
}
.icon-bar__font .icon-bar__name {
grid-column: 1/span 5;
}
.icon-bar__font select {
height: 25px;
}
.icon-bar__font select:nth-child(1) {
grid-column: 1/span 4;
}
.icon-bar__font select:nth-child(1) option {
font-family: var(--font);
}
.icon-bar__font select:nth-child(2) {
margin-left: -6px;
grid-column: 5/span 2;
}
.icon-bar__font .icon-bold {
background-position: -30px -150px;
}
.icon-bar__font .icon-italic {
background-position: -60px -150px;
}
.icon-bar__font .icon-underline {
background-position: -90px -150px;
border-right: 1px solid #cdcdcd;
margin-right: -2px;
}
.icon-bar__font .icon-border {
background-position: -60px 0;
margin: 0 5px;
}
.icon-bar__font .icon-fill {
background-position: -90px 0;
border-left: 1px solid #cdcdcd;
margin-left: -2px;
}
.icon-bar__font .icon-color {
background-position: -120px 0;
}
.icon-bar__alignment {
padding: 0 10px;
grid-template-columns: repeat(5, 30px) 160px;
}
.icon-bar__alignment .icon-bar__name {
grid-column: 1/span 6;
}
.icon-bar__alignment .icon-alignt {
background-position: -150px 0;
}
.icon-bar__alignment .icon-alignm {
background-position: -180px 0;
}
.icon-bar__alignment .icon-alignb {
background-position: -210px 0;
}
.icon-bar__alignment .icon-orientation {
background-position: -240px 0;
border-left: 1px solid #cdcdcd;
}
.icon-bar__alignment .icon-alignl {
background-position: 0 -30px;
grid-column: 1;
}
.icon-bar__alignment .icon-alignc {
background-position: -30px -30px;
}
.icon-bar__alignment .icon-alignr {
background-position: -60px -30px;
}
.icon-bar__alignment .icon-indentinc {
background-position: -90px -30px;
border-left: 1px solid #cdcdcd;
}
.icon-bar__alignment .icon-indentdec {
background-position: -120px -30px;
}
.icon-bar__alignment .wrap-text, .icon-bar__alignment .merge-center {
grid-column: 6;
border-left: 1px solid #cdcdcd;
padding-left: 5px;
display: flex;
align-items: center;
}
.icon-bar__alignment .wrap-text .icon, .icon-bar__alignment .merge-center .icon {
width: 30px;
height: 30px;
}
.icon-bar__alignment .wrap-text span, .icon-bar__alignment .merge-center span {
display: block;
padding-left: 5px;
}
.icon-bar__alignment .wrap-text {
grid-row: 1;
}
.icon-bar__alignment .wrap-text .icon {
background-position: -270px 0;
}
.icon-bar__alignment .merge-center .icon {
background-position: -150px -30px;
}
.icon-bar__number {
grid-template-columns: repeat(5, 30px);
padding: 0 10px;
}
.icon-bar__number select {
grid-column: span 5;
height: 25px;
}
.icon-bar__number .icon-acc {
background-position: -180px -30px;
}
.icon-bar__number .icon-percent {
background-position: -210px -30px;
}
.icon-bar__number .icon-comma {
background-position: -240px -30px;
}
.icon-bar__number .icon-decimalinc {
background-position: -270px -30px;
border-left: 1px solid #cdcdcd;
}
.icon-bar__number .icon-decimaldec {
background-position: 0 -60px;
}
.icon-bar__number .icon-bar__name {
grid-column: span 5;
}
.icon-bar__styles {
grid-template-columns: 80px 70px 60px;
padding: 0 10px;
text-align: center;
}
.icon-bar__styles .icon-bar__name {
grid-column: span 3;
}
.icon-bar__styles .icon {
width: 45px;
height: 45px;
margin: -8px auto 5px;
}
.icon-bar__styles .conditional .icon {
background-position: -75px -60px;
}
.icon-bar__styles .format-table .icon {
background-position: -120px -60px;
}
.icon-bar__styles .cell-style .icon {
background-position: -165px -60px;
}
.icon-bar__cells {
grid-template-columns: repeat(3, 50px);
padding: 0 10px;
text-align: center;
}
.icon-bar__cells .icon-bar__name {
grid-column: span 3;
}
.icon-bar__cells .icon {
width: 45px;
height: 45px;
margin: -8px auto 5px;
}
.icon-bar__cells .cell-insert .icon {
background-position: -210px -60px;
}
.icon-bar__cells .cell-delete .icon {
background-position: -255px -60px;
}
.icon-bar__cells .cell-format .icon {
background-position: -30px -105px;
}
排版样式
模板原稿:https://codepen.io/oliviale/pen/rPjgmB ↩︎