百度风格的input美化代码,美化你的输入框代码

欧阳锋 · 发表于 2020-2-29 16:06:47

代码特效如图：

大家看看美化前的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册页面</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: antiquewhite;
}
a{
text-decoration: none;
}
.wrap{
margin-left: 40%;
margin-top: 10%;
}
p{
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<form action="http://www.baidu.com" method="post">
<p>
<label for="user">用户名</label>
<input type="text" name="userName" id="user" placeholder="请设置用户名">
</p>
<p>
<lable for="phoneNumber">手机号</lable>
<input type="text" name="phoneNumber" id="phoneNumber" placeholder="可用于登录和找回密码">
</p>
<p>
<lable for="password">密    码</lable>
<input type="password" name="password" id="password" placeholder="请设置登录密码">
</p>
<p>
<lable for="verificationCode">验证码</lable>
<input type="text" name="verification" id="verificationCode" placeholder="请输入验证码">
<input type="button" name="button" value="获取短信验证码">
</p>
<p>
<input type="checkbox" value="">
阅读并接受
<a href="#">《百度用户协议》</a>
及
<a href="#">《百度隐私权保护声明》</a>
</p>
<P>
<input type="button" value="注册" style="height:30px; width:50px;">
</P>
</form>
</div>
</body>
</html>

复制代码

[CSS/Html] 百度风格的input美化代码,美化你的输入框代码

		自动登录	找回密码
密码			会员注册