div+css实现j暗色简约登录注册表单页面代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现j暗色简约登录注册表单页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css"> <style> @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400'); body,html { font-family:'Source Sans Pro',sans-serif; background-color:#1d243d; padding:0; margin:0 } #particles-js { position:absolute; width:100%; height:100% } .container { margin:0; top:50px; left:50%; position:absolute; text-align:center; transform:translateX(-50%); background-color:#212942; border-radius:9px; border-top:10px solid #79a6fe; border-bottom:10px solid #8BD17C; width:400px; height:500px; box-shadow:1px 1px 108.8px 19.2px #191f35 } .box h4 { font-family:'Source Sans Pro',sans-serif; color:#5c6bc0; font-size:18px; margin-top:94px } .box h4 span { color:#dfdeee; font-weight:lighter } .box h5 { font-family:'Source Sans Pro',sans-serif; font-size:13px; color:#a1a4ad; letter-spacing:1.5px; margin-top:-15px; margin-bottom:70px } .box input[type = "text"],.box input[type = "password"] { display:block; margin:20px auto; background:#262e49; border:0; border-radius:5px; padding:14px 10px; width:320px; outline:0; color:#d6d6d6; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -ms-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out } ::-webkit-input-placeholder { color:#565f79 } .box input[type = "text"]:focus,.box input[type = "password"]:focus { border:1px solid #79A6FE } a { color:#5c7fda; text-decoration:none } a:hover { text-decoration:underline } label input[type = "checkbox"] { display:none } label span { height:13px; width:13px; border:2px solid #464d64; border-radius:2px; display:inline-block; position:relative; cursor:pointer; float:left; left:7.5% } .btn1 { border:0; background:#7f5feb; color:#dfdeee; border-radius:100px; width:340p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0