css布局实现企业人力资源组织架构
代码语言:html
所属分类:布局界面
代码描述:css布局实现企业人力资源组织架构
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --level-1: #8dccad; --level-2: #f5cc7f; --level-3: #7b9fe0; --level-4: #f27c8d; --black: black; } * { padding: 0; margin: 0; box-sizing: border-box; } ol { list-style: none; } body { margin: 50px 0 100px; text-align: center; font-family: "Inter", sans-serif; } .container { max-width: 1000px; padding: 0 10px; margin: 0 auto; } .rectangle { position: relative; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } .level-1 { width: 50%; margin: 0 auto 40px; background: var(--level-1); } .level-1::before { content: ""; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 2px; height: 20px; background: var(--black); } .level-2-wrapper { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); } .level-2-wrapper::before { content: ""; position: absolute; top: -20px; left: 25%; width: 50%; height: 2px; background: var(--black); } .level-2-wrapper::after { display: none; content: ""; position: absolute; left: -20px; bottom: -20px; width: calc(100% + 20px); height: 2px; background: var(--black); } .level-2-wrapper li { position: relative; } .level-2-wrapper > li::before { content: ""; position: absolute; bottom: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 2px; height: 20px; background: var(--black); } .level-2 { width: 70%; margin: 0 auto 40px; background: var(--level-2); } .level-2::before { content: ""; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 2px; height: 20px; background: var(--black); } .level-2::after { display: none; content: ""; position: absolute; top: 50%; left: 0%; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); width: 20px; height: 2px; background: var(--black); } .level-3-wrapper { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; width: 90%; margin: 0 auto; } .level-3-wrapper::before { content: ""; position: absolute; top: -20px; left: calc(25% - 5px); width: calc(50% + 10px); height: 2px; background: var(--black); } .level-3-wrapper > li::before { content: ""; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); width: 2px; height: 20px; background: var(--black); } .level-3 { margin-bottom: 20px; background: var(--level-3); } .level-4-wrapper { position: relative; width: 80%; margin-left: auto; } .level-4-wrapper::before { content: ""; position: absolute; top: -20px; left: -20px; width: 2px; height: calc(100% + 20px); background: var(--black); } .level-4-wrapper li + li { margin-top: 20px; } .level-4 { font-weight: normal; background: var(--level-4); } .level-4::before { content: ""; position: absolute; top: 50%; left: 0%; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); width: 20px; height: 2px; background: var(--black); } @media screen and (max-width: 700px) { .rectangle { padding: 20px 10px; } .level-1, .level-2 { width: 100%; } .level-1 { margin-bottom: 20px; } .level-1::before, .level-2-wrapper > li::before { display: none; } .level-2-wrapper, .level-2-w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0