css布局实现cms内容管理系统后台发布文章内容页面UI效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现cms内容管理系统后台发布文章内容页面UI效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
line-height: 1.5;
overflow-y: hidden;
}
input,
button,
select,
textarea {
font: inherit;
}
img {
display: block;
max-width: 100%;
}
.window {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 100vh;
}
.window-header {
background-color: #05043e;
}
.navigation {
padding: 0.75rem;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.navigation-top,
.navigation-bottom {
display: flex;
flex-direction: column;
}
.navigation-item {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 6px;
color: #fff;
transition: 0.15s ease;
position: relative;
}
.navigation-item + * {
margin-top: 0.5rem;
}
.navigation-item:hover, .navigation-item.active {
background-color: #2b2a5b;
}
.navigation-item .avatar {
max-width: 1.75rem;
max-height: 1.75rem;
}
.navigation-item:hover .navigation-item-title {
transform: scale(1);
opacity: 1;
}
.navigation-item--notification::after {
position: absolute;
content: "";
display: block;
width: 8px;
height: 8px;
background-color: #3f5efb;
border-radius: 50%;
top: 8px;
right: 8px;
}
.navigation-item-title {
justify-self: flex-end;
position: absolute;
transform: scale(0);
transform-origin: 0% 50%;
left: calc(100% + .75rem);
opacity: 0;
transition: 0.15s ease;
width: auto;
z-index: 300;
background-color: #2b2a5b;
display: block;
white-space: nowrap;
padding: 0.5em 1em;
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.navigation-item-title:before {
position: absolute;
content: "";
display: block;
width: 10px;
height: 10px;
background-color: #2b2a5b;
transform: translateY(-50%) rotate(45deg);
left: -5px;
top: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.window-main-header {
border-bottom: 1px solid #ddd;
background-color: #fff;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
padding: 0.75rem 0.75rem 0.75rem 2rem;
}
.window-main-body {
display: grid;
grid-template-columns: 4fr 1fr;
grid-template-rows: calc(100vh - 62px);
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
}
.breadcrumbs-item {
margin-right: 0.375rem;
display: inline-flex;
align-items: center;
}
.breadcrumbs-item:not(:last-child):after {
margin-left: 0.375rem;
content: "";
display: inline-flex;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
background-size: 1rem;
background-repeat: no-repeat;
background-position: 50% 50%;
width: 1.5rem;
height: 1em;
}
.breadcrumbs-item a {
color: #454545;
display: inline-flex;
align-items: center;
text-decoration: none;
}
.breadcrumbs-item a svg {
width: 1rem;
margin-right: 0.375rem;
color: #8015cb;
}
.editor {
padding-top: 3rem;
padding-bottom: 5rem;
padding-left: 5vw;
padding-right: 5vw;
height: 100%;
overflow-y: auto;
background-color: #efefef;
}
.editor::-webkit-scrollbar {
width: 15px;
background-color: #efefef;
}
.editor::-webkit-scrollbar-thumb {
width: 5px;
border-radius: 99em;
background-color: #cdcdcd;
border: 5px solid #efefef;
}
.editor-input-group {
display: flex;
flex-direction: column;
}
.editor-input-group + * {
margin-top: 1.5rem;
}
.editor-input-label {
font-weight: 600;
}
.editor-textarea {
margin-top: -1px;
border: 1px solid #ddd;
padding: 0.75em;
}
.editor-toolbar {
background-color: #fff;
border: 1px solid #ddd;
padding: 0.5rem;
display: flex;
flex-wrap: wrap;
top: calc(-3rem - 1px);
position: sticky;
z-index: 200;
align-items: center;
}
.editor-toolbar-item {
background-color: transparent;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: 0.15s ease;
}
.editor-toolbar-item.icon {
width: 2rem;
height: 2rem;
}
.editor-toolbar-item.dropdown {
min-width: 150px;
justify-content: space-between;
height: 2rem;
}
.editor-toolbar-item svg {
width: 1.25rem;
height: 1.25rem;
}
.editor-toolbar-item:hover {
background-color: #ededed;
}
.separator {
height: 1rem;
width: 2px;
background-color: #DDD;
display: block;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.editor-textarea {
background-color: #fff;
min-height: 50vh;
max-width: 100%;
padding: 0;
overflow: hidden;
}
.editor-textarea-editable {
padding: 3em 0;
padding-left: 5vw;
padding-right: 5vw;
line-height: 1.65;
}
.editor-textarea-editable > * + * {
margin-top: 1em;
}
.editor-textarea-editable h1 {
font-size: 2rem;
font-weight: 500;
line-height: 1.25;
}
.editor-textarea-editable h2 {
font-weight: 500;
line-height: 1.375;
font-size: 1.5rem;
}
.editor-textarea-editable ul {
list-style: square;
margin-left: 40px;
}
.editor-textarea-editable ul li + li {
margin-top: 0.5em;
}
.editor-textarea-editable em {
font-style: italic;
}
.editor-textarea-editable strong {
font-weight: 600;
}
.editor-textarea-editable img {
max-width: 50%;
float: left;
margin-right: 1em;
margin-top: 1em;
margin-bottom: 1em;
transition: 0.15s ease;
cursor: pointer;
}
.editor-textarea-editable img:hover {
box-shadow: 0 0 0 4px #3f5efb;
}
.editor-textarea-editable a {
color: #3f5efb;
text-decoration: none;
box-shadow: 0 2px 0 0 currentcolor;
font-weight: 600;
}
.editor-textarea-editable .leading {
font-size: 1.25rem;
font-weight: 500;
color: #565656;
}
.window-panel {
background-color: #19194a;
padding: 2rem;
position: relative;
overflow-y: auto;
}
.window-panel::-webkit-scrollbar {
width: 15px;
background-color: #19194a;
}
.window-panel::-webkit-scrollbar-thumb {
width: 5px;
border-radius: 99em;
background-color: #535377;
border: 5px solid #19194a;
}
.window-panel:after {
content: "";
width: calc(100% + 4rem);
height: 50px;
margin-left: -2rem;
bottom: -2rem;
background-image: linear-gradient(to top, #19194a 0%, transparent 100%);
display: block;
position: sticky;
z-index: 100;
}
.window-main-body-right {
background-color: #fff;
border-left: 1px solid #ddd;
overflow-y: auto;
padding-bottom: 3rem;
}
.window-main-body-right::-webkit-scrollbar {
width: 15px;
background-color: #fff;
}
.window-main-body-right::-webkit-scrollbar-thumb {
width: 5px;
border-radius: 99em;
background-color: #cdcdcd;
border: 5px solid #fff;
}
.settings-section {
padding: 1.5rem;
}
.settings-section + * {
border-top: 1px solid #ddd;
}
.section-title {
font-weight: 600;
letter-spacing: 0.05em;
color: #565656;
text-transform: uppercase;
font-size: 0.75rem;
margin-bottom: 1rem;
}
.window-panel .section-title {
color: #8c8ca5;
}
.search {
margin-bottom: 1.5rem;
}
.search-input {
border: 0;
background-color: transparent;
color: #fff;
border-bottom: 1px solid #535377;
padding: 0.5em 0;
padding-left: 1.75rem;
font-size: 0.875rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' display='block' id='Search'%3E%3Cpath d='M21 21l-4.486-4.494M19 10.5a8.5 8.5 0 1 1-17 0 8.5 8.5 0 0 1 17 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0 50%;
}
.search-input::-moz-placeholder {
color: #8c8ca5;
}
.search-input:-ms-input-placeholder {
color: #8c8ca5;
}
.search-input::placeholder {
color: #8c8ca5;
}
.search-input:focus {
border-color: #fff;
}
.tree {
display: flex;
flex-wrap: wrap;
flex-direction: column;
padding-left: 1rem;
position: relative;
}
.tree:before {
display: block;
content: "";
position: absolute;
width: 2px;
height: calc(100% - 2em);
background-color: #535377;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.tree--sub:after {
position: absolute;
content: "";
display: block;
height: 2px;
width: 1rem;
background-color: #535377;
top: 1.25em;
left: -1rem;
}
.tree-branch-action {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.tree-branch-action button {
opacity: 0;
transition: 0.15s ease;
background-color: #535377;
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 0.75em;
width: 1rem;
height: 1rem;
border: 0;
border-radius: 4px;
cursor: pointer;
margin-left: 0.5rem;
}
.tree-branch-action button:hover {
background-color: #c6c6d2;
color: #19194a;
}
.tree-branch-action:hover button {
opacity: 1;
}
.tree-branch-link {
color: inherit;
color: #c6c6d2;
text-decoration: none;
position: relative;
display: block;
padding-top: 0.5em;
padding-bottom: 0.5em;
transition: 0.15s ease;
}
.tree-branch-link:before {
position: absolute;
content: "";
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #19194a;
border: 2px solid #535377;
top: 1em;
left: calc(-1rem - 4px);
z-index: 1;
transition: 0.15s ease;
transform-origin: 50% 50%;
}
.tree-branch-link.active, .tree-branch-link:hover {
color: #fff;
}
.tree-branch-link.active:before, .tree-branch-link:hover:before {
border-color: #fff;
transform: scale(1.25);
}
.tree-branch-link--404:before {
border-radius: 0;
transform: rotate(45deg);
}
.tree-branch-link--404:hover:before {
transform: scale(1.25) rotate(45deg);
}
.tree-branch-link.active {
font-weight: 500;
}
.tree-branch-link.active:before {
background-color: #fff;
}
.publish-actions {
display: flex;
align-items: center;
}
.publish-info {
font-size: 0.75rem;
color: #666;
line-height: 1.25;
margin-right: 1.25rem;
text-align: center;
}
.button {
display: inline-flex;
align-items: center;
border: 0;
padding: 0.375em 0.75em;
border-radius: 4px;
background-color: transparent;
cursor: pointer;
border-bottom: 1px solid;
margin-right: 0.5rem;
transition: 0.25s ease;
font-weight: 500;
}
.button svg {
margin-right: 0.375em;
width: 1.25em;
height: 1.25em;
}
.button--save {
background-color: #e0e4fa;
color: #2f47be;
}
.button--save:hover {
color: #e0e4fa;
background-color: #2f47be;
}
.button--schedule {
background-color: #ece0fa;
color: #722fbe;
}
.button--schedule:hover {
color: #ece0fa;
background-color: #722fbe;
}
.button--publish {
background-color: #8ae2b6;
color: #22744b;
}
.button--publish:hover {
color: #8ae2b6;
background-color: #22744b;
}
.button--delete {
background-color: #fdc8bf;
color: #bd1717;
}
.button--delete:hover {
color: #fdc8bf;
background-color: #bd1717;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group + * {
margin-top: 1.5rem;
}
.input-label {
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.25rem;
}
.input-field {
padding: 0.375em 0.5em;
border: 1px solid #ccc;
font-size: 0.875rem;
transition: 0.15s ease;
}
.input-field:hover {
border-color: #3f5efb;
}
.input-field--textarea {
min-height: calc(6em * 1.5);
max-width: 100%;
min-width: 100%;
resize: none;
}
.input-field--textarea::-webkit-scrollbar {
width: 15px;
background-color: #fff;
}
.input-field--textarea::-webkit-scrollbar-thumb {
width: 5px;
border-radius: 99em;
background-color: #cdcdcd;
border: 5px solid #fff;
}
.input-url {
color: #3f5efb;
font-size: 0.875rem;
}
.input-image {
padding: 0;
border: 1px solid #ddd;
background-color: #fff;
border-radius: 0 0 4px 4px;
border-bottom-width: 2px;
cursor: pointer;
transition: 0.15s ease;
}
.input-image:hover {
border-color: #3f5efb;
}
.input-image-wrapper {
width: calc(100% + 2px);
margin-top: -1px;
margin-left: -1px;
overflow: hidden;
display: block;
}
.input-image-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5em;
}
.input-image-meta-title {
font-weight: 500;
font-size: 0.875rem;
}
.input-image-meta-action {
color: #3f5efb;
font-weight: 700;
letter-spacing: 0.05em;
font-size: 0.75rem;
text-transform: uppercase;
}
.input-checkbox {
display: flex;
align-items: center;
cursor: pointer;
}
.input-checkbox + * {
margin-top: 0.75rem;
}
.input-checkbox-box {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.input-checkbox-box:checked + .input-checkbox-toggle {
background-color: #3f5efb;
border-color: #3f5efb;
}
.input-checkbox-box:checked + .input-checkbox-toggle:after {
background-color: #fff;
transform: translateX(100%);
}
.input-checkbox-toggle {
position: relative;
display: inline-block;
width: 32px;
height: 20px;
border-radius: 99em;
border: 1px solid #999;
margin-right: 0.375rem;
}
.input-checkbox-toggle:after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #999;
}
:focus {
outline: 0;
}
</style>
</head>
<body>
<div class="window">
<header class="window-header">
<nav class="navigation">
<div class="navigation-top">
<a href="#" class="navigation-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 9.5L12 4L21 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M19 13V19.4C19 19.7314 18.7314 20 18.4 20H5.6C5.26863 20 5 19.7314 5 19.4V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="navigation-item-title">Dashboard</span>
</a>
<a href="#" class="navigation-item active">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.6 3H20.4C20.7314 3 21 3.26863 21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4V3.6C3 3.26863 3.26863 3 3.6 3Z" stroke="currentColor" stroke-width="1.5" />
<path d="M9.75 9.75V21" stroke="currentColor" stroke-width="1.5" />
<path d="M3 9.75H21" stroke="currentColor" stroke-width="1.5" />
</svg>
<span class="navigation-item-title">Pages</span>
</a>
<a href="#" class="navigation-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.6954 7.18536L11.6954 11.1854L12.3046 9.81464L3.3046 5.81464L2.6954 7.18536ZM12.75 21.5V10.5H11.25V21.5H12.75ZM12.3046 11.1854L21.3046 7.18536L20.6954 5.81464L11.6954 9.81464L12.3046 11.1854Z" fill="currentColor" />
<path d="M3 17.1101V6.88992C3 6.65281 3.13964 6.43794 3.35632 6.34164L11.7563 2.6083C11.9115 2.53935 12.0885 2.53935 12.2437 2.6083L20.6437 6.34164C20.8604 6.43794 21 6.65281 21 6.88992V17.1101C21 17.3472 20.8604 17.5621 20.6437 17.6584L12.2437 21.3917C12.0885 21.4606 11.9115 21.4606 11.7563 21.3917L3.35632 17.6584C3.13964 17.5621 3 17.3472 3 17.1101Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M7.5 4.5L16.1437 8.34164C16.3604 8.43794 16.5 8.65281 16.5 8.88992V12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="navigation-item-title">Media & Files</span>
</a>
<a href="#" class="navigation-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 21.1679V14L12 7L16 14V21.1679" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 14C8 14 9.12676 15 10 15C10.8732 15 12 14 12 14C12 14 13.1268 15 14 15C14.8732 15 16 14 16 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="navigation-item-title">Theme Settings</span>
</a>
<a href="#" class="navigation-item navigation-item--notification">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 8.4C18 6.70261 17.3679 5.07475 16.2426 3.87452C15.1174 2.67428 13.5913 2 12 2C10.4087 2 8.88258 2.67428 7.75736 3.87452C6.63214 5.07475 6 6.70261 6 8.4C6 15.8667 3 18 3 18H21C21 18 18 15.8667 18 8.4Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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