html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>千年之恋</title><link rel="stylesheet" href="./base.css"><link rel="stylesheet" href="./style.css"></head><body><div class="head"><a href="#"><img src="./images/logo.jpg" alt=""></a></div><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li class="bg"><a href="#">首页</a></li></ul></div><div class="banner"><img src="./images/banner.jpg" alt=""></div><div class="content"><h2 class="step">注册步骤</h2><form action=""><h3>您的账号信息：</h3><p> <span>注册方式：</span><input type="radio" name="sex" id="an"><label for="an">E-mail注册</label> <input type="radio" name="sex" id="bn"><label for="bn"></label></p><p> <span>注册邮箱：</span><input type="text" class="text all" > </p><p> <span>注册手机：</span><input type="text" class="text all" > </p><p> <span>登录密码：</span><input type="password" class="text all" > </p><p class="spacial"> <span>昵称：</span><input type="text" class="text all" > </p><h3>您的个人信息：</h3><p class="spacial2"> <span>性别：</span><input type="radio" name="gender" id="cn"><label for="cn"></label> <input type="radio" name="gender" id="dn"><label for="dn">女</label></p><p class="spacial2"> <span>学历：<select name="" id="" ><option selected hidden disabled value="">-请选择-</option><option value="">中职/高中</option><option value="">专科/本科</option><option value="">硕士研究生</option><option value="">博士研究生</option></select></p><p class="spacial3"> <span>所在城市：<select name="" id="" ><option selected hidden disabled value="">-请选择-</option><option value="">北京</option><option value="">上海</option><option value="">广州</option><option value="">深圳</option></select></p><p class="checkbox"><span>兴趣爱好：</span><label for="a"><input type="checkbox" class="checkbox" id="a">足球</label><label for="b"><input type="checkbox" class="checkbox" id="b">篮球</label><label for="c"><input type="checkbox" class="checkbox" id="c">游泳</label><label for="d"><input type="checkbox" class="checkbox" id="d">唱歌</label><label for="e"><input type="checkbox" class="checkbox" id="e">跑步</label><label for="f"><input type="checkbox" class="checkbox" id="f">瑜伽</label></p><p><span>自我介绍：</span><input type="text" class="file" placeholder="评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。"></p><button>完成注册</button></form></div><div class="footer"><p class="first">Copyright © 2020-2030 QIANNIANZHILIANcom, All rights reserved.</p><br><p class="last">2020-2030, 版权所有千年之恋 85CP 备 3333</p></div></body></html>
css:
.head{
margin: 0 auto;
width: 960px;
height: 90px;
}
.head img{
margin-top: 10px;
}
.nav{
background-color: #fe668f;
height: 48px;
}
.nav ul{
display: flex;
margin: 0 auto;
width: 960px;
}
.nav ul li{
width: 132px;
height: 48px;
text-align: center;
line-height: 48px;
font-size: 16px;
}
.nav ul li a{
color: #fff;
}
.nav ul .bg{
background-color: #fe9ab5;
}
.nav ul li:hover{
background-color: #fe9ab5;
}
.banner{
margin: 0 auto;
width: 980px;
height: 429px;
}
.content{
margin: 0 auto;
padding-left: 150px;
width: 980px;
height: 934px;
background: url(./images/content_bg.jpg) no-repeat;
color: #dd8787;
}
.content .step{
width: 454px;
height: 80px;
background: url(./images/step.jpg) no-repeat right;
line-height: 80px;
font-weight: 400;
}
.content h3{
width: 444px;
height: 45px;
border-bottom: 1px solid #dd8787;
font-size: 20px;
font-weight: 400;
}
.content p{
margin-top: 20px;
margin-left: 50px;
font-size: 14px;
}
input {
vertical-align: middle;
}
.content .text{
width: 321px;
height: 30px;
}
.content .all{
border: 1px solid #dd8787;
}
.content .spacial{
margin-top: 20px;
margin-left: 82px;
margin-bottom: 20px;
}
.content .spacial2{
margin-top: 20px;
margin-left: 82px;
color: #dd8787;
}
.content select{
border: 1px solid #dd8787;
color: #dd8787;
}
.content .spacial3{
margin-top: 20px;
margin-left: 50px;
}
.content .checkbox input{
margin-right: 5px;
}
.content p .file{
width: 421px;
height: 153px;
border: 1px solid #dd8787;
padding: 20px;
}
input::-webkit-input-placeholder{
line-height: 10px;
font-size: 10px;
}
button{
margin: 40px 200px;
width: 180px;
height: 60px;
background-color:#fe668f ;
border: 1px solid #dd8787;
border-radius: 5px;
color: #fff;
font-size: 16px;
}
.footer{
height: 108px;
background-color: #fe668f;
color:#fff ;
padding-top: 30px;
}
.footer p{
width: 550px;
margin: 0 auto;
text-align: center;
}
素材：
