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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看