这是我自己学习做的一个注册页面，较简陋。
图片自行添加。
显示效果图：
html部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="官网"> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/zhuce.css"> <title>工作室网站</title> </head> <body> <div class="header"> <div class="rowl"> <h1> <img src="./img/01.jpg" alt=""> <span>2018</span> </h1> </div> <form class="search" method="get" > <input class="sinput" type="text" name="s" /> <input class="sbtn" type="submit" value=""/> </form> <button type="button" class="dlq" ><a href="denglu.html" target="_self">登录</a></button> </div> </div> <div class="nav"> <div class="buttom">点击展开菜单</div> <ul id="nav"> <li><a href="index.html" target="_self">首页</a></li> <li><a href="">新闻与媒体</a> <ul> <li><a href="gonggong.html" target="_self">公共信息</a></li> <li><a href="ziyuan.html" target="_self">资源下载</a></li> </ul> </li> <li><a href="">师资队伍</a> <ul> <li><a href="renyuan.html" target="_self">人员介绍</a></li> </ul> </li> <li><a href="">联系我们</a> <ul> <li><a href="lianxi.html" target="_self">办事咨询</a></li> </ul> </li> </ul> </div> <div class="back" > <div class="bback"> <div class="zhuce"> <form class="m-t" role="form" action="index.html" method="post"> <div class="formgroup"> 姓名:<input type="text" class="name" required=""></div> <div class="formgroup"> 职位:<input type="text" class="posi" required=""></div> <div class="formgroup"> 用户名:<input type="text" class="name" required=""></div> <div class="formgroup"> 密码:<input type="password" class="mima" required=""></div> <div class="formgroup"> 男:<input type="radio" class="sex" required="">女:<input type="radio" class="sex" required=""></div> <div class="formgroup"> key(判断身份):<input type="text" class="key" required=""></div> <div class="formgroup"> 联系方式:<input type="text" class="lianxi" required=""></div> <div class="formgroup"> 自我介绍:<textarea rows="5" cols="20"></textarea></div> <div class="formgroup2"> 上传照片:<input type="file" class="czp"></button></div> <div class="formgroup3"> <button type="submit" class="zc">注册</button></div> </form> </div> </div> </div> <div class="onfooter"> <ul> <li>新闻媒体</li> <li>师资队伍</li> <li>联系我们</li> </ul> </div> <div class="footer"> <div class="ffooter"> <ul> <li><a href="gonggong.html" target="_self">公共信息</a> <ul> <li><a href="ziyuan.html" target="_self">资源下载</a></li> </ul> </li> <li><a href="renyuan.html" target="_self">人员介绍</a></li> <li><a href="lianxi.html" target="_self">办事咨询</a></li> </ul> </div> </div> </body> </html>
css部分：
以前套用主页面的css代码懒得删除了，直接套用在这个注册页面。
@media screen and (min-width:768px){
html{
font-size:16px;
}
body{
margin: 0;
padding: 0;
}
.buttom{
display: none;
}
.header{
background-color: rgb(98,99,147);
height: 8rem;
line-height: 6.5rem;
overflow: hidden;
}
.search{position:absolute;right:10em;top:2em;}
.dlq{position:absolute;right:100px;top:34px;}
.dlq a{text-decoration: none;}
.header span, .header img{
width:90px;
height:90px;
vertical-align: middle;
}
.header span{
font-family: '楷体';
color:white;
font-size:2.5rem;
}
.header .rowl{
width: 60%;
padding-left: 1rem;
text-align: center;
}
.nav{
height: 3rem;
background-color: white;
}
.nav ul{
margin: 0;
padding: 0;
text-align: center;
}
.nav ul li{
display: inline-block;
margin-left: 0.5rem;
width: 12rem;
position: relative;
}
.nav ul li:nth-child(1){
margin-left:0;
}
.nav ul li a{
font-size: 1rem;
font-weight: bolder;
color: black;
text-decoration:none;
line-height: 3rem;
}
.nav ul li:hover{
background: #47A3Da;
cursor:pointer;
}
.nav ul li:hover a{
color: black;
}
.nav ul li>ul{
position: absolute;
padding: 0;
background-color: #fff;
opacity: 0;
}
.nav ul li>ul>li{
margin: 0;
padding: 0;
}
.nav ul li:hover ul{
opacity:1;
z-index: 3;
}
.nav ul li ul>li:hover{
background: #3B80B7;
transform: scale(1.2);
transition:0.5s;
border-radius:1rem;
}
.demo{
width: 300px;
}
.search:hover {
-webkit-box-shadow:0 0 3px #999;
-moz-box-shadow:0 0 3px #999;
}
.search .sinput {
float:left;
width:150px;
height:24px;
line-height:24px;
padding:4px 5px;
border:#A7A7A7 1px solid;
background:white;
color:#888;
font-size:12px;
-webkit-transition:.3s;
-moz-transition:.3s;
outline: none;
border-radius:8px;
}
.search .sinput:focus {
width:220px;
}
.search .sbtn {
cursor:pointer;
height:34px;
font-size:12px;
padding:0 12px;
width:60px;
margin-left:-1px;
display:inline-block;
float:left;
border:#A7A7A7 1px ;
background: url('../img/06.png') center no-repeat;
background-size: 75%;
}
#sou{
width:41px;
height: 41px;
position: absolute;
right:8px;
top:0px;
cursor:pointer;
}
/* .search .sbtn:hover {
background:#fff;
} */
.banner{
position: relative;
width:70%;
margin: 0px auto;
}
.mySlide{
position:absolute;
}
.fade img{height: 530px;}
.fade{
animation-name: fade;
animation-duration: 2s;
}
@keyframes fade{
from {opacity: .4}
to {opacity: 1}
}
.buttomer{
text-align: center;
position: absolute;
right:5rem;
bottom: 2rem;
}
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
/* border-radius: 50%; */
display: inline-block;
transition: 0.6s ease;
border-radius: 50%;
}
.active{
background: rgb(98,99,147);
}
.onfooter{
width:70%;
background:rgb(238,238,238);
margin:0 auto;
}
.onfooter ul{
height:3em;
margin: 0;
padding: 0;
text-align: center;
line-height: 3em;
}
.onfooter ul li{
list-style:none;
display: inline-block;
margin-left: 0.5rem;
width: 12rem;
font-weight:bold;
}
.footer {
width:100%;
background: rgb(98,99,147);height: 8em;
}
.footer ul{
height:2em;
margin: 0;
padding: 0;
text-align: center;
line-height: 2em;
}
.footer ul li{
list-style:none;
display: inline-block;
margin-left: 0.5rem;
width:12em;
font-weight:bold;
position: relative;;
}
.onfooter ul li:nth-child(1){
margin-left:0;
}
.footer ul li:nth-child(1){
margin-left:0;
}
.footer ul li>ul{
position: absolute;
padding: 0;
}
.footer ul li>ul>li{
margin: 0;
padding: 0;
}
.footer ul li a{text-decoration: none;
color:rgb(209,209,209);
}
.footer ul li a:hover{color: red;
}
}
.back{ background: url('../img/l1.png') no-repeat; background-size: cover; width: 70%; height: 600px; position: relative; margin:0 auto; } .bback{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 600px; line-height: 50px; text-align: center; background:rgba(244,245,249,0.7); } .zhuce { text-align:left;border: 2px solid gray;border-radius: 6px; width:600px; margin: 100px auto 0 auto; position: relative; } .formgroup2{position: absolute;right:20px;top:10px;} .zc{ background: rgb(98,99,147); width:200px; border-radius: 6px; color:white; position: absolute;bottom: 10px;right:120px; }