div+css实现简单的注册表单页面代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现简单的注册表单页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:400,900"rel="stylesheet'> <style> *, *::before, *::after { box-sizing: border-box; } body { background-color: #002A33; font-family: "Lato", sans-serif; font-size: 0.8rem; } @media (min-width: 768px) { body { font-size: 1rem; } } .form { width: 100%; max-width: 450px; margin: 3rem auto 0 auto; border: 1px solid #00D6D6; padding: 2rem 4rem; } .form .form-title { font-size: 3rem; font-weight: 900; letter-spacing: 0.05em; margin-bottom: 0.5em; color: #00D6D6; } .signup__field { width: 100%; position: relative; margin-bottom: 2rem; } .signup__field .input-field { background: transparent; border: 0; border-bottom: 1px solid #00D6D6; border-radius: 0; color: #00D6D6; outline: none; display: block; width: 100%; padding: 0.5rem 1rem 0.5rem 0; } .signup__field .input-field:focus { outline: none; border-color: inherit; box-shadow: none; } .signup__field .input-field:focus ~ .label, .signup__field .input-field:valid ~ .label { top: -1.1rem; left: -8px; transform: scale(0.8); } .signup__field .label { position: absolute; top: 0.5rem; left: 0; color: #00D6D6; transition: all 0.5s ease-in-out; z-index: -1; } .signup__button button { background: transparent; color: #00D6D6; border: 1px solid #00D6D6; font-size: 1rem; text-transform: uppercase; padding: 0.5em 1.8em.........完整代码请登录后点击上方下载按钮下载查看
网友评论0