【UI】发个单页HTML 登陆注册页面代码|不死鸟资源网

发个单页 HTML 登陆注册页面代码，仿自：爱站统计；
原始页面扒下来发现看不懂 css , 直接用 AI 仿写了一个，代码更简洁易懂！
预览：
<!DOCTYPE html>

<html lang="zh-CN"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
<link rel="shortcut icon" href="https://www.ximi.me/favicon.ico" />
<title>欢迎使用希米统计-网站正在建设中...</title>
     <style>
     a {
    text-decoration: none;
    color: #91989e; /* 保持链接与文本的颜色一致 */
}

a:hover {
    text-decoration: none; /* 悬停时显示下划线 */
    color: #4c83be; /* 悬停时改变颜色 */
}

body {
        margin: 0;
padding: 0;
        height :auto;
        background-color: #fff;
     }

    .footer {
    position: fixed; /* 将页脚固定在页面底部 */
    left: 0; /* 页脚左侧与页面左边缘对齐 */
    bottom: 0; /* 页脚底部与页面底边缘对齐 */
    width: 100%; /* 页脚宽度占据整个页面 */
    text-align: center; /* 文本内容居中对齐 */
      border-top: 2px solid #f8f8f8; /*顶部添加一个 1 像素宽的灰色边框 */
    padding: 10px 0; /* 上下内边距为 8 像素，左右内边距为 0 */
    /* line-height: 8px; 设置文本行距为 10 像素 */
    font-size: 18px; /* 设置文本字体大小为 14 像素 */
     /*background-image: linear-gradient(to right, #fed6e3, #c0efec);  */
  height: 26px;
 font-weight: bold;
}



    .header_1 {
/* position: fixed;  将导航栏固定在页面顶部 */
    top: 0px; /* 距离页面顶部为 0 像素 */
    padding: 0 300px; 
    max-width: 100%; /* 设置背景宽度为全屏宽度 */
   /*  background-color: #ff06; 设置背景颜色 */
    font-size: 26px; /* 设置字体大小 */
   
    text-align: left; /* 文字居中 */
  
    color: #ff6a6a;
    height:100px;
    
    user-select: none; /* 禁止文本选中 */
    -webkit-user-select: none; /* 针对 Safari 和 Chrome */
    -moz-user-select: none; /* 针对 Firefox */
    -ms-user-select: none; /* 针对 IE 和 Edge */
    }
    
    /* 当鼠标移到该区域时出现阴影 */
.header_1:hover {

}

.header_2 {
height:80px;
padding-top: 20px;
padding-bottom: 0;
}

.header_3 { /*body区*/
       display: flex; /* 使用 Flexbox 布局 */
       justify-content: space-between; /* 使子元素分布在行的两端 */
        padding-left: 300px;
         padding-right: 300px; 
        /*margin-bottom:30px;*/
        max-width :100%;
        /* background-color: #6255ce; 设置背景颜色 */
        /*padding-left: 300px;  */
       background-image: linear-gradient(to bottom right, #6e42c1, #4684ec);

    user-select: none; /* 禁止文本选中 */
    -webkit-user-select: none; /* 针对 Safari 和 Chrome */
    -moz-user-select: none; /* 针对 Firefox */
    -ms-user-select: none; /* 针对 IE 和 Edge */

    }
@media screen and (max-width: 1500px) {


    .header_1 {
/* position: fixed;  将导航栏固定在页面顶部 */
    top: 0px; /* 距离页面顶部为 0 像素 */
    padding: 0 120px; 
    max-width: 100%; /* 设置背景宽度为全屏宽度 */
   /*  background-color: #ff06; 设置背景颜色 */
    font-size: 26px; /* 设置字体大小 */
   
    text-align: left; /* 文字居中 */
  
    color: #ff6a6a;
    height:100px;
    
    user-select: none; /* 禁止文本选中 */
    -webkit-user-select: none; /* 针对 Safari 和 Chrome */
    -moz-user-select: none; /* 针对 Firefox */
    -ms-user-select: none; /* 针对 IE 和 Edge */
    }

.header_3 { /*body区*/
       display: flex; /* 使用 Flexbox 布局 */
       justify-content: space-between; /* 使子元素分布在行的两端 */
        padding-left: 120px;
         padding-right: 120px; 
        max-width :100%;
       min-width:300px;
       background-image: linear-gradient(to bottom right, #6e42c1, #4684ec);
    }

}
@media screen and (max-width: 1100px) {


    .header_1 {
/* position: fixed;  将导航栏固定在页面顶部 */
    top: 0px; /* 距离页面顶部为 0 像素 */
    padding: 0 30px; 
    max-width: 100%; /* 设置背景宽度为全屏宽度 */
   /*  background-color: #ff06; 设置背景颜色 */
    font-size: 26px; /* 设置字体大小 */
   
    text-align: left; /* 文字居中 */
  
    color: #ff6a6a;
    height:100px;
    
    user-select: none; /* 禁止文本选中 */
    -webkit-user-select: none; /* 针对 Safari 和 Chrome */
    -moz-user-select: none; /* 针对 Firefox */
    -ms-user-select: none; /* 针对 IE 和 Edge */
    }

.header_3 { /*body区*/
       display: flex; /* 使用 Flexbox 布局 */
       justify-content: space-between; /* 使子元素分布在行的两端 */
        padding-left: 30px;
         padding-right: 30px; 
        max-width :100%;
       min-width:400px;
       background-image: linear-gradient(to bottom right, #6e42c1, #4684ec);
    }

}



@media screen and (max-width: 900px) {
  .header_3 {
    flex-direction: column;
    align-items: center;
    padding-left: 30px;
    padding-right: 20px; 
   text-align: center;
  }

  .r_card {
    background-color: #fff;
    border-radius: 5px;
    max-width: 450px;
    min-width: 350px;
    height: 360px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.95);
      }



}




@media screen and (max-width: 1100px) {
.r_card {
background-color: #fff; /* 设置背景颜色 */
 border-radius: 5px;
max-width :450px;
min-width:350px;
height :360px; /* */
text-align: center; /* 确保文本在容器内右对齐 */

 background-color: rgba(255, 255, 255, 0.95); /* 半透明背景颜色，80% 不透明度 */
}
}



.l_txt {
text-align: left; /* 确保文本在容器内左对齐 */
min-width:450px;
}

.r_card {
background-color: #fff; /* 设置背景颜色 */
 border-radius: 5px;
max-width :450px;
min-width:350px;
height :360px; /* */
text-align: right; /* 确保文本在容器内右对齐 */
margin: 100px 0;
 background-color: rgba(255, 255, 255, 0.95); /* 半透明背景颜色，80% 不透明度 */
}


    
.txt1 {
      padding-top: 80px;
      padding-bottom: 80px;
      color: #fff;
    }
    
.txt_title {
      font-size: 26px; /* 设置字体大小 */
      padding-top: 60px;
      padding-bottom: 15px;
      font-weight: bold;
    }
    
.txt_txt {
      padding-top: 15px;
      padding-bottom: 5px;
      font-size: 16px; /* 设置字体大小 */
    }   
    

/* 表单与容器边框的距离 */
form {
    padding: 25px; /* 表单内部与容器边距 */
}


        .login_dvi, .reg_dvi {
            display: none; /* 默认隐藏两个表单 */
        }
        .active {
            display: block; /* 显示当前激活的表单 */
        }

.label_txt{
   text-align: left; 
   font-size:15px;
   /* font-weight:bold;  显示当前激活的表单 */
   padding-left:15px;
   color:#c1c1c1;
   margin-top:1px;
   width:100%;
  margin-bottom:5px;
}
 /* =====  background-color:#ffccf9;    ======= */    
 .div-l:hover, .div-r:hover,
.div-l:focus, .div-r:focus {
    border-bottom: 5px solid #your-color; /* 自定义悬停和选中状态的底部边框 */
}
    
.login_dvi {

    width: 100%;  /*宽度设为80%，可以根据需要调整 */
    height:calc(100%-30px);
    /* margin-top: 30px; 单 */
    box-sizing: border-box; /* 确保内边距包含在总宽度和高度内 */
    text-align: center; /* 使容器内所有元素左右居中 */
 background-color: rgba(255, 255, 255, 0.01); /* 半透明背景颜色，80% 不透明度 */
 }
.reg_dvi {

    width: 100%;  /*宽度设为80%，可以根据需要调整 */
    height:calc(100%-30px);

    box-sizing: border-box; /* 确保内边距包含在总宽度和高度内 */
    text-align: center; /* 使容器内所有元素左右居中 */
 background-color: rgba(255, 255, 255, 0.01); /* 半透明背景颜色，80% 不透明度 */
 }


input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"] {
    width: calc(100% - 20px); /* 宽度为100%减去两侧内边距，确保对称 */
    padding: 10px 10px; /* 设置上、下、左、右内边距为10px，确保对称 */
    margin-bottom: 15px; /* 每个输入框与下一个元素之间的距离为15px */
    border: 1px solid #dee2e6; /*  默认边框样式 */
    border-radius: 5px; /* 设置圆角 */
    font-size: 18px; /* 字体大小 */
    box-shadow: none; /* 默认无阴影 */
    box-sizing: border-box; /* 包含内边距在内的总宽度计算方式 */
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; /* 添加过渡效果 */
}


/* 输入框聚焦样式 */
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="email"]:focus {
    border-color: #f8f8f8; /* 聚焦时边框高亮为蓝色 */
    box-shadow: 0 0 8px rgba(75, 88, 156, 0.5); /* 聚焦时添加蓝色阴影 */
    outline: none; /* 去除默认的聚焦边框 */
}


/* 按钮样式 */
input[type="submit"] {
    background-color: #5669da; /* 按钮背景颜色 */
    color: white; /* 按钮文本颜色 */
    cursor: pointer; /* 鼠标悬停时显示手势 */
    border: none; /* 移除按钮边框 */
    width: 180px;
    margin-top: 15px;
}

input[type="submit"]:hover {
    background-color: #684cc8; /* 悬停时按钮背景颜色变深 */
}


 
  /* =====================background-color: #f0f0f0;====================== */     
.div-lr {
  display: flex; /* 使用Flexbox布局 */
  width: 100%; /* 容器宽度设置为100% */
  justify-content: space-between; /* 子元素在主轴上分布，但这里实际上不需要，因为我们设置了flex为1来平分空间 */
  align-items: center; /* 子元素在交叉轴上居中对齐 */
  border-radius: 5px;
  font-size:22px;
  font-weight: bold;
  color:#919191;
  margin-top: 8px;
  padding-bottom: 8px;
  
}

.div-l, .div-r {
  flex: 1; /* 使两个子元素平分容器的宽度 */
  text-align: center; /* 文本内容在各自容器内居中显示 */
  /* border-radius: 15px;您可以根据需要添加其他样式，如padding, margin等 */
  /*    border-bottom: none; 默认情况下，都没有下边框 */
   padding-bottom: 8px;
}



/* 示例：为.div-l和.div-r添加一些内边距和背景色以区分它们 */
.div-l {
   /* background-color: #f0f0f0;左侧背景色 */
  padding: 5px 15px; /* 左侧内边距 */
  border-bottom: 2px solid #3668fc;
}

.div-r {
  /*  background-color: #e0e0e0;右侧背景色 */
  padding: 5px 15px; /* 右侧内边距 */
  
}





       
 hr {
     margin-top: -10px; 
  /* margin-left: 45px;  */
  /* margin-right: 45px;  */
  border-top: 2px solid #dee2e6;
}       
    </style>
    </head>
    <body>
        <div class="header_1">image
            <div class="header_2">
                <a href="https://www.ximi.me/post-151.html" title="网站正在建设中..."   >
                    <img src="https://www.ximi.me/img/image.php?img=tj_logo.png" style="height:58px;" alt="网站正在建设中..."  height="42">
                </a>
            </div>
        </div>

        <div class="header_3">
                  <div class="l_txt">
                        <div class="txt1">
                            <span class="txt_title">希米的网站数据统计</span>
                            <div class="txt_txt">简洁明了, 实时监测，精准洞察，优化网站体验</div><br><br>
                            
                            <span class="txt_title">实时数据监测</span>
                            <div class="txt_txt">随时掌握网站流量、用户来源、页面浏览等关键数据。</div><br><br>

                            <span class="txt_title">轻松上手</span>
                            <div class="txt_txt">简单易用的网站统计工具，让数据分析更轻松</div><br><br>

                            <span class="txt_title">用户行为分析</span>
                            <div class="txt_txt">深入了解用户在网站上的行为轨迹，优化用户体验。</div><br><br>

                            <span class="txt_title">API接口开放</span>
                            <div class="txt_txt">与其他系统无缝对接，实现数据联动</div>
                         </div>
                   </div>
                   
                   
                   
                   
<div class="r_card">    

    
<div class="div-lr">
  <div class="div-l">
          <a href="javascript:void(0);" onclick="toggleForm('login');">
            登 录
        </a>
  </div>
  <div class="div-r">
          <a href="javascript:void(0);" onclick="toggleForm('register');">
            注 册
        </a>
  </div>
</div>  
          
    <hr>

    <div class="login_dvi active"> <!-- 默认显示登录表单 -->
        <form action="" method="post">
            <input type="hidden" name="key" value="xixi"> <!-- 隐藏字段 -->
            <p class="label_txt">账号:</p>
            <input type="text" name="username" placeholder="用户账号或域名" required="">
            <p class="label_txt">密码:</p>
            <input type="password" name="password" placeholder="输入密码" required="">
            <input type="submit" value="登 录">
        </form>  
    </div>
    
    <div class="reg_dvi"> <!-- 默认隐藏注册表单 -->
        <form action="" method="post">
            <!--<input type="hidden" name="key" value="xixi">  隐藏字段 -->
            <p class="label_txt">账号:</p>
            <input type="text" name="username" placeholder="用户账号或域名" required="">
            <p class="label_txt">邮箱:</p>
            <input type="text" name="email" placeholder="邮箱账号" required="">
            <p class="label_txt">密码:</p>
            <input type="password" name="password" placeholder="输入密码" required="">
            <input type="submit" value="注 册">
        </form>  
    </div>
</div>

<script>

function toggleForm(formType) {
  const loginDiv = document.querySelector('.login_dvi');
  const registerDiv = document.querySelector('.reg_dvi');
  const divL = document.querySelector('.div-l');
  const divR = document.querySelector('.div-r');
  const rCard = document.querySelector('.r_card');

  if (formType === 'login') {
    loginDiv.classList.add('active');
    registerDiv.classList.remove('active');
    divL.style.borderBottom = '2px solid #3668fc';
    divR.style.borderBottom = 'none';
    rCard.style.height = '360px';
  } else {
    registerDiv.classList.add('active');
    loginDiv.classList.remove('active');
    divR.style.borderBottom = '2px solid #3668fc';
    divL.style.borderBottom = 'none';
    rCard.style.height = '440px';
  }
}
</script>
                   
         </div>
         


        <footer class="footer">
                           
                    <div>
                        ©  2024 ximi.me 版权所有
                        <!--
                        <a  href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">备案号 ICP备000000号</a>
                        -->
                    </div>
            
        </footer>

</body>
</html>
本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!
THE END
精品源码
【UI】发个单页HTML 登陆注册页面代码

“益”起做好事

“益”起守护未成年人、老人、特殊群体。

99元/永久VIP。全站任意下载

每日更新几十个资源，精选配图，站长任意搬
