css布局模仿excel界面效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局模仿excel界面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
* {
	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:0
}
.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:0;
	padding:0 6px
}
.cells input,.cells button {
	border:0;
	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(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__.........完整代码请登录后点击上方下载按钮下载查看