css布局实现cms内容管理系统后台发布文章内容页面UI效果代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现cms内容管理系统后台发布文章内容页面UI效果代码

代码标签: css cms 发布 文章 布局 后台

下面为部分代码预览,完整代码请点击下载或在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 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
					</svg>
                        <span class="navigation-item-title">Notifications</span>

                    </a>
                </div>
                <div class="navigation-bottom">
                    <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 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
						<path d="M19.6224 10.3954L18.5247 7.7448L20 6L18 4L16.2647 5.48295L13.5578 4.36974L12.9353 2H10.981L10.3491 4.40113L7.70441 5.51596L6 4L4 6L5.45337 7.78885L4.3725 10.4463L2 11V13L4.40111 13.6555L5.51575 16.2997L4 18L6 20L7.79116 18.5403L10.397 19.6123L11 22H13L13.6045 19.6132L16.2551 18.5155C16.6969 18.8313 18 20 18 20L20 18L18.5159 16.2494L19.6139 13.598L21.9999 12.9772L22 11L19.6224 10.3954Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
					</svg>

                        <span class="navigation-item-title">Settings</span>
                    </a>
                    <a href="#" class="navigation-item">
                        <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" width="80" height="80" colors="#b2cba3,#e0df9f,#e7a83e,#9a736e,#ea525f" name="Babe Didrikson" size="80" class="avatar">
						<mask id="mask__beam" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36">
							<rect width="36" height="36" rx="20" fill="white"></rect>
						</mask>
						<g mask="url(#mask__beam)" fill="transparent">
							<rect width="36" height="36" rx="20" fill="#e7a83e"></rect>
							<rect x="0" y="0" width="36" height="36" transform="translate(-5 9) rotate(249 18 18) scale(1)" fill="#ea525f" rx="36">
							</rect>
							<g transform="translate(-1 4.5) rotate(9 18 18)">
								<path d="M13,19 a1,0.75 0 0,0 10,0" fill="black"></path>
								<rect x="10" y="14" width="1.5" height="2" rx="1" stroke="none" fill="black">
								</rect>
								<rect x="24" y="14" width="1.5" height="2" rx="1" stroke="none" fill="black">
								</rect>
							</g>
						</g>
					</svg>
                        <span class="navigation-item-title">Your Profile</span>
                    </a>
                </div>
            </nav>
        </header>
        <div class="window-panel">
            <h2 class="section-title">
                Site structure
            </h2>
            <div class="search">
                <input type="type" class="search-input" placeholder="Filter..." />
            </div>
            <ul class="tree">
                <li class="tree-branch">
                    <div class="tree-branch-action">
                        <a href="#" class="tree-branch-link">Home</a>
                        <button class="tree-branch-button">+</button>
                    </div>
                </li>
                <li class="tree-branch">
                    <div class="tree-branch-action">
                        <a href="#" class="tree-branch-link">Product</a>
                        <button class="tree-branch-button">+</button>
                    </div>
                    <ul class="tree tree--sub">
                        <li class="tree-branch tree-branch--sub">
                            <div class="tree-branch-action">
                                <a href="#" class="tree-branch-link tree-branch-link--sub">Features</a>
                                <button class="tree-branch-button">+</button>
                            </div>
                            <ul class="tree tree--sub">
                                <li class="tree-branch tree-branch--sub">
                                    <div class="tree-branch-action">
                                        <a href="#" class="tree-branch-link tree-branch-link--sub">Messaging</a>
                                        <button class="tree-branch-button">+</button>
                                    </div>
                                </li>
                                <li class="tree-branch tree-branch--sub">
                                    <div class="tree-branch-action">
                                        <a href="#" class="tree-branch-link tree-branch-link--sub">Voice & Video
										Calls</a>
                                        <button class="tree-branch-button">+</button>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="tree-branch tree-branch--sub">
                            <div class="tree-branch-action">
                                <a href="#" class="tree-branch-link tree-branch-link--sub">Integrations</a>
                                <button class="tree-branch-button">+</button>
                            </div>
                            <ul class="tree tree--sub">
                                <li class="tree-branch tree-branch--sub">
                                    <div class="tree-branch-action">
                                        <a href="#" class="tree-branch-link tree-branch-link--sub">Slack</a>
                                        <button class="tree-branch-button">+</button>
                                    </div>
                                </li>
                                <li class="tree-branch tree-branch--sub">
                                    <div class="tree-branch-action">
                                        <a href="#" class="tree-branch-link tree-branch-link--sub">Discord</a>
                                        <button class="tree-branch-button">+</button>
                                    </div>
                                </li>
                                <li class="tree-branch tree-branch--sub">
                                    <div class="tree-branch-action">
                                        <a href="#" class="tree-branch-link tree-branch-link--sub">Microsoft
										Teams</a>
                                        <button class="tree-branch-button">+</button>
                                    </div>
                                </li>
                                <li class="tree-branch tree-branch--sub">
                                    <div class="tree-branch-action">
                                        <a href="#" class="tree-branch-link tree-branch-link--sub">Zoom</a>
                                        <button class="tree-branch-button">+</button>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li class="tree-branch tree-branch--sub">
                            <div class="tree-branch-action">
                                <a href="#" class="tree-branch-link tree-branch-link--sub">Security</a>
                                <button class="tree-branch-button">+</button>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="tree-branch">
                    <div class="tree-branch-action">
                        <a href="#" class="tree-branch-link">Pricing</a>
                        <button class="tree-branch-button">+</button>
                    </div>
                </li>
                <li class="tree-branch">
                    <div class="tree-branch-action">
                        <a href="#" class="tree-branch-link active">Blog</a>
                        <button class="tree-branch-button">+</button>
                    </div>
                    <ul class="tree tree--sub">
                        <li class="tree-branch tree-branch--sub">
                            <div class="tree-branch-action">
                                <a href="#" class="tree-branch-link tree-branch-link--sub">Newsletter</a>
                                <button class="tree-branch-button">+</button>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="tree-branch">
                    <div class="tree-branch-action">
                        <a href="#" class="tree-branch-link">Company</a>
                        <button class="tree-branch-button">+</button>
                    </div>
                    <ul class="tree tree--sub">
                        <li class="tree-branch tree-branch--sub">
                            <div class="tree-branch-action">
                                <a href="#" class="tree-branch-link tree-branch-link--sub">About Us</a>
                                <button class="tree-branch-button">+</button>
                            </div>
                        </li>
                        <li class="tree-branch tree-branch--sub">
                            <div class="tree-branch-action">
                                <a href="#" class="tree-branch-link tree-branch-link--sub">Media & Press</a>
                                <button class="tree-branch-button">+</button>
                            </div>
                        </li>
                        <li class="tree-branch tree-branch--sub">
                            <div class="tree-branch-action">
                                <a href="#" class="tree-branch-link tree-branch-link--sub">Careers</a>
                                <button class="tree-branch-button">+</button>
                .........完整代码请登录后点击上方下载按钮下载查看

网友评论0