html
body>
<form action="#" method="get">
<div>
<label for="yonghu">用户名<span> * </span></label>
<input type="text" placeholder="" name="username" id="yonghu" required>
<span>请使用邮箱的电子邮箱</span>
</div>
<div>
<label for="mima">密码<span> * </span></label>
<input type="password" placeholder="" name="pwd" id="mima" required>
<span class="qiangdu">密码强度：
<span>弱</span>
<span>中</span>
<span>强</span>
</span>
</div>
<div>
<label for="queren">确认密码<span> * </span></label>
<input type="password" name="pwd" id="queren" required>
</div>
<div>
<label for="mubiao">注册目标<span> * </span></label>
<input type="radio" name="xiangmu" value="huiyuan" required checked> 会员 <span>（快速卖出或买进农产品）</span>
<div>
<input type="radio" name="xiangmu" value="nongyejingjiren"
required> 农业经纪人 <span>（为广大会员服务，促成农产品交易）</span>
</div>
<div>
<input type="radio" name="xiangmu" value="qudaolianmeng" required> 渠道联盟 <span>（成为我们的合作伙伴）</span>
</div>
<div>
<input type="radio" name="xiangmu" value="xinxiyuan" required> 信息员 <span>（采集发布热点农业信息）</span>
</div>
<div>备注：Lorem ipsum dolor si Consectetur, dolorum.</div>
</div>
<div>
<label for="xingming">姓名<span> * </span></label>
<input type="text" placeholder="" name="myname" id="xingming" required>
<span>真实姓名（与身份证信息一致）</span>
</div>
<div>
<label for="shouji">手机<span> * </span></label>
<input type="text" placeholder="" name="mobile" maxlength="11" id="shouji" required>
<span>真实姓名（与身份证信息一致）</span>
</div>
<div>
所在区域<span> * </span>
<select name="area" id="area" required>
<option value="guojia">中国</option>
<option value="tajike">塔吉克斯坦</option>
</select>
<select name="area1" id="area1" required>
<option value="diqu">---地区---</option>
<option value="meiguo">---美国---</option>
</select>
<span>选择所在的省/市</span>
</div>
<div>
<label for="yanzhengma">验证码<span> * </span></label>
<input type="text" placeholder="" name="yanzheng" id="yanzhengma" required>
<a href="#">看不清，换一张</a>
</div>
<div class="yidong">
<button class="tijiao">同意以下条款并注册</button>
<a href="#">登入</a><a href="#">找回密码</a>
</div>
<textarea name="" id="" cols="50" rows="5"></textarea>
</form>
</body>
</html>
css
form {
width: 800px;
margin: auto;
}
form>div {
margin: 10px 0;
}
label {
font-size: 16px;
font-weight: bold;
}
form>div>label {
display: inline-block;
width: 100px;
text-align: right;
}
label>span:first-child {
color: red;
}
div>span:last-of-type {
font-size: 12px;
color: cadetblue;
}
a {
display: inline-block;
text-decoration: none;
margin: 0 10px;
}
form>div:nth-child(4)>div {
margin-left: 104px;
}
form>div:nth-child(4)>div>span {
display: inline-block;
width: 300px;
text-align: left;
}
.qiangdu>span {
display: inline-block;
color: red;
padding: 0 5px;
}
.qiangdu>span:nth-child(2) {
color: black;
}
.qiangdu>span:last-child {
color: green;
}
form>div:nth-child(7){
margin-left:25px;
font-size: 16px;
font-weight: bold;
}
form>div:nth-child(7)>span:first-child{
color: red;
}
.tijiao{
display: inline-block;
padding: 10px;
border-radius: 10px;
text-align: center;
background-image: linear-gradient(orange);
}
.yidong{
margin-left: 100px;
}