css布局实现一个自适应文件上传的UI页面代码
代码语言:html
所属分类:上传
代码描述:css布局实现一个自适应文件上传的UI页面代码,没有实现js上传的功能,仅css样式
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> *, *:after, *:before { box-sizing: border-box; } :root { --c-action-primary: #2e44ff; --c-action-primary-accent: #e9e5ff; --c-action-secondary: #e5e5e5; --c-text-primary: #0d0f21; --c-text-secondary: #6a6b76; --c-background-primary: #d0d1de; } body { font-family: "Inter", sans-serif; color: var(--c-text-primary); background-color: var(--c-background-primary); line-height: 1.5; } input, button, select, textarea { font: inherit; } .modal { width: 90%; max-width: 500px; margin-left: auto; margin-right: auto; margin-top: 10vh; margin-bottom: 10vh; background-color: #FFF; border-radius: 0.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.5rem 1.5rem 1rem; } .logo-circle { width: 3.5rem; height: 3.5rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: var(--c-action-primary-accent); } .logo-circle svg { max-width: 1.5rem; } .btn-close { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.25rem; border: none; background-color: transparent; } .btn-close:hover, .btn-close:focus { background-color: var(--c-action-primary-accent); } .modal-body { padding: 1rem 1.5rem; } .modal-title { font-weight: 700; } .modal-description { color: var(--c-text-secondary); } .upload-area { margin-top: 1.25rem; border: none; background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ccc' stroke-width='3' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); background-color: transparent; padding: 3rem; width: 100%; display: flex; flex-direction: column; align-items: center; } .upload-area:hover, .upload-area:focus { background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%232e44ff' stroke-width='3' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); } .upload-area-icon { display: block; width: 2.25rem; height: 2.25rem; } .upload-area-icon svg { max-height: 100%; max-width: 100%; } .upload-area-title { margin-top: 1rem; display: block; font-weight: 700; color: var(--c-text-primary); } .upload-area-description { display: block; color: var(--c-text-secondary); } .upload-area-description strong { color: var(--c-action-primary); font-weight: 700; } .modal-footer { padding: 1rem 1.5rem 1.5rem; display: flex; justify-content: flex-end; } .modal-footer [class*=btn-] { margin-left: 0.75rem; } .btn-secondary, .btn-primary { padding: 0.5rem 1rem; font-weight: 500; border: 2px solid var(--c-action-secondary); border-radius: 0.25rem; background-color: transparent; } .btn-primary { color: #FFF; background-color: var(--c-action-primary); border-col.........完整代码请登录后点击上方下载按钮下载查看
网友评论0