当前位置：首页 > news >正文

一个简单的注册页面

news 来源：原创 2024/5/4 9:34:49

这是我自己学习做的一个注册页面，较简陋。

图片自行添加。

显示效果图：

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;
}