登录注册页面-CSDN博客

本文链接：https://blog.csdn.net/qq_64011014/article/details/129037062

1、登录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="./css/denglu.css" type="text/css"/>

</head>
<body>
<div class="card">
    <div class="imgBx">
        <img src="img/bitbug_favicon.ico"/>
    </div>
    <div class="dl">
        <form id="addFrom" action="/Users" method="get">
            <input type="hidden" name="method" value="longLu"/>
            用户名:<input type="text" name="name" placeholder="用户名"/><br />
            <br />
            密&nbsp;&nbsp;&nbsp;码:<input type="password" name="pwd" id="pwd" placeholder="密码"/><br />
            <br />
            <input type="submit" value="登录">
            <a href="./zc.html">注册</a>
        </form>
    </div>
</div>
</body>
</html>

2、登录css


*{
    margin: 0;
    padding: 0;
    /*box-sizing: 属性定义了如何计算一个元素的总宽度和高度*/
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}
body
{
    /* display:设置弹性容器
        flex:设置为块级弹性容器
        inline-flex:设置为行内的弹性容器
     */
    display: flex;
    /* justify-content:定义了项目在主轴上对齐方式
       center:居中对齐
           
     */
    justify-content: center;
    /* align-items:定义项目在交叉轴上如何对齐
          center:交叉轴的中点对齐
          flex-start:交叉轴的起点对齐   flex-end:交叉轴的终点对齐 
          basline:项目的第一行文字的基线对齐   
     */
    align-items: center;
    /* min-height:属性设置元素的最低高度(ie6不支持) */
    min-height: 100vh;
    background: linear-gradient(3deg,#fba,#ff5acd);
}
.card{
    position: absolute;
    width: 350px;
    height: 220px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
    transition: 0.5s;
    /* background: linear-gradient() 背景渐变
       deg:角度 0deg:代表从上到下 90:从左到右
    */
    background: linear-gradient(200deg,#fba,#ff5acd,#ff0000);
}
.card:hover{
    height: 380px;
}
.imgBx{
    position: absolute;
    left: 50%;
    top: -50px;
    /* transform：改变1盒子在平面内的形态（位移，旋转，缩放） */
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: #fff;
    /* 圆角 */
    border-radius: 30px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
    /* overflow: 属性是对溢出的内容的处理，有四个属性值(visible:使溢出内容展示,hidden:隐藏溢出容器的内容且不出现滚动条) */
    overflow: hidden;
    /* 过度 */
    transition: 0.5s;
}
.card:hover .imgBx{
    width: 180px;
    height: 180px;
}
.imgBx  img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card .dl{
    position: absolute;
    left: 20%;
    bottom: -30%;
    transform: translateY(-65px);
}
.card:hover .dl{
    transform: translateY(-150px);
}
.dl > form>input:nth-of-type(1){
    border-color: #ff5acd;
    height: 30px;
    position: absolute;
    margin-left: 20px;
    border-radius: 20px;
    border: 1px blue solid;
    /* box-shadow: -3px 5px red;*//* 设置阴影 */ 
}
.card .dl input{
    box-shadow: 1 10px 3px rgba(85, 255, 255, 0.1) ;
}
.dl > form>input{
    border-color: #ff5acd;
    height: 30px;
    position: absolute;
    margin-left: 20px;
    border-radius: 20px;
    border: 1px blue solid;
}
.dl > form>input:nth-of-type(2){
    border-color: #ff5acd;
    height: 30px;
    position: absolute;
    margin-left: 10px;
    border-radius: 15px;
    border: 1px blue solid;
}
.dl > form>input:nth-of-type(3){
    border-color: #ff5acd;
    height: 30px;
    position: absolute;
    margin-left: 10px;
    border-radius: 15px;
    border: 1px blue solid;
}
.dl > form>input:nth-of-type(4){
    border-color: #ffffff;
    background-color: #ffffff;
    /* 设置字体 */
    font-family: KaiTi;
    /* 设置字体大小 */
    font-size: 20px;
    width: 55px;
    height: 30px;
    border-radius: 15px;
    margin-left: 4px;
}
.dl > form > a{
    /* text-decoration:属性规定添加到文本的修饰
            none:默认。定义标准的文本   underline:定义文本下的一条线   overline:定义文本上的一条线   line-through:定义穿过文本下的一条线    blink:定义闪烁的文本   
            inherit:规定从父元素继承text-decoration属性的值
    */
    text-decoration: none;
    color: rgba(0, 0, 0, 1);
    font-family: KaiTi;
    font-size: 22px;
    position: absolute;
    width: 55px;
    height: 29px;
    top: 80px;
    left: 140px;
    background-color: #fff;
    text-align: center;
    /* opacity:透明度 */
    opacity: 1;
    border-radius: 15px;
    /* border-bottom: 1px solid rgba(0, 0, 0, 1);
    border-right: 1px solid rgba(0, 0, 0, 1); */
    /* box-shadow: 1 10px 3px rgba(85, 255, 255, 0.1) ; */
    box-shadow: 1 10px 3px rgba(85, 255, 255, .1);
}

3、注册html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./css/zc.css" type="text/css"/>
    </head>
    <body>
        <div class="card">
            <div class="ImgB">
                <img src="img/1.png"/>
            </div>
            <div class="zc">
                <form action="/登录.html" method="get">
                    <input type="hidden" name="deng" value="denglu"/>
                    <h3>注册</h3><br />
                    姓名:<input type="text" name="name" placeholder="请输入用户名"/><br />
                    <br />
                    密码:<input type="password" name="pwd" placeholder="请输入密码"/>
                    <br />
                    <br />
                    性别:&emsp;<input type="radio" value="男" name="sex">男
                    &emsp;
                    <input type="radio" value="女" name="sex">女<br />
                    <br />
                    电话:<input type="tel" name="tel" placeholder="请输入你的电话"/><br />
                    <br />
                    邮箱:<input type="email" name="email" placeholder="请输入你的邮箱"/><br />
                    <br />
                    <input type="submit" value="注册"/>
                    <a href="登录.html">登录</a>
                </form>
            </div>
        </div>
    </body>
</html>

4、注册css


*{
    margin: 0;
    padding: 0;
}
body{
    /* display:设置弹性容器
        flex:设置为块级弹性容器
        inline-flex:设置为行内的弹性容器
     */
    display: flex;
    position: relative;
    min-height: 100vh;
    justify-content: center;
    align-items: center;/* 上下居中 */
    background: linear-gradient(700deg,#ff2cdc,#1dfff8);
}
.card{
    position: relative;
    width: 350px;
    height: 250px;
    border-radius: 15px;
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
    transition: transform 0.7s;    
    
}
.card:hover{
    /*rotateY: 旋转  */
    transform: rotate(360deg);
}
.ImgB{
    width: 100px;
    height: 100px;
    position: relative;
    top: -50px;
    left: 125px;
}
.ImgB img{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /*object-fit: 属性指定元素的内容应该如何去适应指定容器的高度与宽度
       conntain:使图片的宽度完整的显示,高度自动缩放
       ccover:保持原有尺寸比例，高度铺满容器，宽度等比缩放,超出部分被剪掉
       none:图片原有宽度不变,超出部分被剪掉，保留下来的内容使图片的正中央
    */
    object-fit: cover; /* 比例缩小*/
    
}
.card .zc {
    position: absolute;
    top: 80px;
    left: 20%;
    transform: translatey(-20px);
}
.card .zc h3{
    text-align: center;
    color: #1dfff8;
}
.card .zc input{
    border-radius: 20px;
    height: 26px;
    background: linear-gradient(600deg,#1dfff8,#ff2cdc);
    -webkit-text-fill-color: #fff;
    opacity: 0.6;
    margin-left: 10px;
}
.card .zc input:nth-of-type(8){
    position: absolute;
    margin-left: 10%;
    width: 50px;
    height: 25px;
    background: linear-gradient(600deg,#1dfff8,#ff2cdc);
}
.card .zc a{
    position: absolute;
    margin-left: 75%;
    width: 50px;
    height: 25px;
    background: linear-gradient(600deg,#1dfff8,#ff2cdc);
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    opacity: 0.6;
}
.card{
    overflow: hidden;
}
.card:hover{
    height: 400px;
}