먼저 이전 섹션의 등록 페이지 코드를 살펴보겠습니다
<!doctype html> <html> <head> <meta charset="utf-8"> <title>PHP中文网</title> </head> <body> <form action="" method="post"> <div class="container"> <div class="right"> <h2>用户注册</h2> <p>用 户 名：<input type="text" name="name" id="name"></p> <p>密 码: <input type="password" name="pwd" id="pwd"></p> <p>确认密码: <input type="password" name="pwdconfirm" id="pwdconfirm"></p> <p>验 证 码：<input type="text" name="yzm" id="yzm"></p> <p><button type="submit" value="注册" >立即注册</button></p> </div> </div> </form> </body> </html>
위 코드에서 레이아웃에 두 개의 div를 사용하는 것을 볼 수 있으므로 먼저 두 개의 div에 스타일을 지정합니다.
그런 다음 입력 태그인 CSS 코드의 스타일을 다음과 같이 지정하겠습니다
버튼을 아름답게 만들기 위해 버튼에 대한 CSS 스타일도 만들었습니다. 다음과 같습니다
등록 페이지에 배경색을 추가하는 것이 가장 좋습니다
페이지에 위의 CSS 스타일을 추가하면 페이지의 콘텐츠가 훨씬 풍부해 보입니다
완료 코드는 다음과 같습니다
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
body{background-color: rgba(223, 255, 231, 0.28)
}
.container{
border-radius: 25px;
box-shadow: 0 0 20px #222;
width: 380px;
height: 400px;
margin: 0 auto;
margin-top: 200px;
background-color: rgba(152, 242, 242, 0.23);
}
.right {
position: relative;
left: 40px;
top: 20px;
}
input{
width: 180px;
height: 25px;
}
button{
background-color: rgba(230, 228, 236, 0.93);
border: none;
color: #110c0f;
padding: 10px 70px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 30px;
margin-left: 50px;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="container">
<div class="right">
<h2>用户注册</h2>
<p>用 户 名：<input type="text" name="name" id="name"></p>
<p>密 码: <input type="password" name="pwd" id="pwd"></p>
<p>确认密码: <input type="password" name="pwdconfirm" id="pwdconfirm"></p>
<p>验 证 码：<input type="text" name="yzm" id="yzm">
</p>
<p><button type="submit" value="注册" >立即注册</button></p>
</div>
</div>
</form>
</body>
</html>이렇게 하면 페이지가 훨씬 보기 좋아집니다. 다음 단계는 페이지에 인증 코드를 추가하는 것입니다
