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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0