效果图
网页结构部分：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/stytle.css">
</head>
<body>
<form action="#">
<!--主体部分-->
<div class="box_1">
<span>注册</span>
<!--信息填入框-->
<div class="location">
<input type="text" required placeholder="请输入您的名字" id="uname" name="name" class="Information">
<input type="text" required placeholder="Email" id="userEmail" name="email" class="Information">
<input type="text" required placeholder="请输入您的手机号码" id="userMobilephonenumber" name="Mobilephonenumber" class="Information">
<input type="password" required placeholder="密码" id="usernumber" name="number" class="Information">
<input type="password" required placeholder="确认密码" id="userPassword" name="password" class="Information">
</div>
<!--信息填入框 end-->
<!--协议勾选-->
<div class="agreement">
<input type="checkbox" id="Agreetotheagreement" name="Agreetotheagreement" >
<label for="Agreetotheagreement">我同意相关协议</label>
</div>
<!--协议勾选 end-->
<!--注册-->
<div class="submit">
<button type="submit">注册</button>
</div>
<!--注册 end-->
</div>
<!--主体部分 end-->
</form>
</body>
</html>
公共样式部分：
*{
margin: 0;
padding: 0;
}
body{
font-family: Arial, Verdana, "Microsoft yahei", "Pingfang SC", Simsun;
}
ul,li,ol{
list-style: none;
}
.clears{
clear: both;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
}
a{
text-decoration: none;
}
table{
border-collapse: collapse;
}
button{
cursor: pointer;
}
input, button, textarea, select{
outline:none;
}
textarea{
resize: none;
}
button[type="submit"]{
border: none;
border-radius: 10px;
}
input[type=checkbox] {
cursor: pointer;
position: relative;
width: 15px;
height: 15px;
font-size: 14px;
border: 1px solid black; /* 初始状态下的黑色边框 */
border-radius: 1px;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
background-color: #ffffff;
color: #ffffff;
width: 15px;
height: 15px;
display: inline-block;
visibility: visible;
text-align: center;
content: ' ';
}
input[type=checkbox]:checked {
border-radius: 1px;
border-color: #92a8d1; /* 选中时的边框颜色 */
}
input[type=checkbox]:checked::after {
content: "✓";
font-size: 12px;
font-weight: bold;
border-radius: 1px;
background-color: #92a8d1;
}
input[type=checkbox]:not(:checked)::after {
border: 1px solid black; /* 未选中时的边框颜色 */
border-radius: 1px;
}
CSS样式部分：
.box_1{
width: 640px;
height: 535px;
display: block;
margin-top: 70px;
margin-right: auto;
margin-left: auto;
padding-left: 90px;
position: relative;
box-shadow: 0px 0px 5px 5px #888888;
}
.box_1 span{
width: 80px;
height: 48px;
position: absolute;
margin-top: 40px;
font-size: 31px;
}
.box_1 .location{
height: 280px;
width: 360px;
position: absolute;
margin-top: 90px;
}
.box_1 .location .Information{
width: 360px;
height: 48px;
margin-top: 10px;
padding-left: 16px;
padding-right: 16ox;
}
.box_1 .location .Information:focus{
border-color: red;
}
.box_1 .location .Information input::placeholder{
font-size: 16px;
}
.box_1 .agreement{
position: absolute;
margin-top: 408px;
display: flex;
align-items: center;
}
.box_1 .agreement label{
margin-left: 8px; /* 调整标签的左侧边距 */
}
.box_1 .submit{
width: 135px;
height: 35px;
position: absolute;
margin-top: 450px;
}
.box_1 .submit button{
height: 35px;
width: 135px;
background-color: #92a8d1;
font-size: 16px;
color: #ffffff;
}
问题和总结：注册界面主要依靠表单的结构，其中主要运用到input标签，button标签和定位的相关内容。主要问题出现在多选框的样式上，通过本人的查找发现了三种实现与效果图类似的方法。第一种：使用图片的替换，通过PS获得两张鼠标点击前和点击后的图片使其在鼠标点击后实现图片的替换；第二种：使用CSS选择器和伪元素来实现自定义复选框的样式。通过对不同状态下的复选框应用不同的样式，实现了选中和未选中状态下的边框、背景色和文本内容的变化。就是这个公共样式中input[type=checkbox]之后的代码；