一、主代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title>' <link rel="stylesheet" href="login.css"> </head> <body> <div class="content"> <div class="img"><img src="插画.png"width="350" height="350" ></div> <div class="info"> <div class="title">后台管理系统</div> <div class="account"style="margin-top:20px"> <input type="text" class="input1" placeholder=" 请输入账号" > </div> <div class="account"> <input type="text" class="input2" placeholder=" 请输入密码" > </div> <div class="account"> <input type="text" class="input3" placeholder=" 请输入验证码"> </div> <div class="button">立即登录</div> </div> </div> <div class="company">上海思苪信息科技有限公司</div> </body> </html>
二、css样式
html,body{ margin:0; height: 100%; width: 100%; min-width: 1280px; min-height: 600px; background-image: url(背景.png); background-repeat: no-repeat; background-size: 100% 100%; } .content{ width: 65%; min-width: 600px; height: 55%; min-height: 380px; background: white; box-shadow:1px 1px 22px 4px rgba(0,0,0,.5); margin: 0 auto; margin-top: 10%; border-radius: 15px; } .img{ float: left; width: 250px; height: 250px; padding-left: 5%; padding-top: 5%; } .info{ margin-left: 140px; width:400px; height: 250px; float: left; } .title{ font-weight: 700; font-size:25px; margin-top: 50px; margin-left: 122px; } .info input{ width: 290px; height: 45px; line-height: 30px; margin-left: 15px; margin-top: 10px; } .info img{ position: absolute; top: 10px; right: 70px; } .account{ margin-left: 40px; } input::input-placehoder{color:#dbdbdb} input::-webkit-input-placeholder{color:#dbdbdb} .input1{ background: url(me.png) no-repeat 95%; background-size: 20px; background-color: white; color: #dbdbdb; margin: 10px 0; padding-left: 10px; border: 1px solid #dbdbdb; outline: none; } .input2{ background: url(lock.png) no-repeat 95%; background-size: 17px; background-color: white; color: #dbdbdb; margin: 10px 0; padding-left: 10px; border: 1px solid #dbdbdb; outline: none; } .input3{ background: url(验证码.png) no-repeat 95%; background-size: 80px; background-color: white; color: #dbdbdb; margin: 10px 0; padding-left: 10px; border: 1px solid #dbdbdb; outline: none; } .button{ width: 300px; height: 45px; line-height: 45px; margin-left: 55px; margin-top: 10px; background-color: rgb(2, 169, 66); font-size: 16px; color: white; text-align: center; } .company{ margin-top:55px; color:#dbdbdb; font-size: 12px; text-align:center ; }
三、运行截图
四、遇到的问题
1.在input属性中添加小图标
使用background: url(验证码.png) no-repeat来实现；
2.改变input内字体颜色
input::input-placehoder{color:#dbdbdb}
input::-webkit-input-placeholder{color:#dbdbdb}
3.给border添加阴影
box-shadow:1px 1px 22px 4px rgba(0,0,0,.5);