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: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__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
}
</style>
</head>
<body>
<div class="main-content">
<div class="title">Book1 - Excel</div>
<div class="menu-bar">
<div><span>File</span></div>
<div><span>Home</span></div>
<div><span>Insert</span></div>
<div><span>Page Layout</span></div>
<div><span>Formulas</span></div>
<div><span>Data</span></div>
<div><span>Review</span></div>
<div><span>View</span></div>
<div><span>Help</span></div>
</div>
<div class="icon-bar">
<div class="icon-bar__clipboard">
<div class="icon-paste">
<div class="icon"></div><span>Paste</span></div>
<div class="icon icon-cut"></div>
<div class="icon icon-copy"></div>
<div class="icon-bar__name">Clipboard</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">Font</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>Wrap Text</span></div>
<div class="merge-center">
<div class="icon"></div><span>Merge & Center</span></div>
<div class="icon-bar__name">Alignment</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">Number</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&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0