Web课后练习3

没啥实力

已于 2024-04-17 11:17:47 修改

阅读量210

点赞数 5

文章标签：前端

于 2024-03-30 17:25:44 首次发布

本文链接：https://blog.csdn.net/weixin_74021012/article/details/137177973

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个常见登录界面的实现</title>
<link rel="stylesheet" href="khlx3.css">
</head>
<body>

<div class="container">
    
    <div class="half-container text-div">
        <div id="login-box">
            <div class="toubu">
                <h2>web前端开发</h2>
            </div>
            <div class="toubu2">
                <p>欢迎回来，请登录您的账户</p>
            </div>
            <div class="input-box">
                <p class="pc">邮箱地址</p>
                <input type="email">
            </div>
            <div class="input-box">
                <p class="pm">密码</p>
                <input type="password" >
            </div>
            <div class="check-group">
                <input type="checkbox"> 记住我
                <a href="#" class="forgot-password">忘记密码</a>
            </div>
            <div class="button-group">
                <input type="submit" value="登录">
                <input type="button" class="register" value="注册">
            </div>
        </div>
        <br>
        <br>
        <div>
            <p>注册表示您同意我们的服务条款和条件以及隐私政策</p>
        </div>
    </div>
    <div class="half-container image-div"></div>
</div>

</body>
</html>

css代码

body {
    background: linear-gradient(to right, #3282F6, #73FBFD);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    display: flex; /* 使用flex布局 */
    flex-direction: row; /* 子元素横向排列 */
    background-color: white;
    border-radius: 10px;
    margin: 0px auto;
    width: 100%; 
    max-width: 700px; 
}
.half-container {
    flex: 1; 
    overflow: hidden; 
}

.image-div {
    background-image: url('kxlx3.jpg'); /* 设置背景图片 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    overflow: hidden;
    background-position: center; /* 背景图片居中显示 */
}
.text-div {
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    padding: 20px;
}
#login-box {
    display: flex;
    flex-direction: column;
    gap: 10px; 
}
.input-box p {
    margin: 0;
    padding: 0;
}
input[type="submit"],
input[type="button"] {
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 43%;
}
input[type="submit"] {
    background: linear-gradient(to right, #3282F6, #73FBFD);
    color: white;
}
input[type="button"] {
    background-color: white;
    border: #7398fd solid;
}
.button-group {
    display: flex; /* 使用flex布局来排列按钮 */
    justify-content: space-between; /* 按钮之间间隔平均分配 */
    width: 70%; 
}
.check-group {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: flex-start; /* 水平靠右对齐 */
}
.check-group input[type="checkbox"] {
    margin-right: 5px; 
}
.forgot-password {
    margin-left: auto; /* 使忘记密码靠右显示 */
}
a.forgot-password {
    text-decoration: none; /* 移除下划线 */
    color: #333; /* 设置链接颜色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: color 0.3s, text-shadow 0.2s; /* 添加颜色和阴影的过渡效果 */
}
a.forgot-password:hover {
    color: #3282F6; /* 鼠标悬停时改变链接颜色 */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7); /* 鼠标悬停时增加阴影大小 */
}
 .image-div {
    background-image: url('kxlx3.jpg');
    background-size: cover;
    background-position: center;
    border-bottom-right-radius: 10px; /* 左侧圆角效果 */
    border-top-right-radius: 10px; /* 右侧圆角效果 */
}
.input-box input {
    border: none; /* 移除所有边框 */
    border-bottom: 2px solid #3282F6; /* 添加底部蓝色边框 */
    background-color: transparent; /* 透明背景 */
    padding: 10px 0; /* 调整内边距 */
    margin-top: 5px; 
    width: 100%; 
    font-size: 16px; 
    color: #333;
    outline: none; 
}
.toubu2 {
    color: #999; 
    font-size: 18px; 
    margin-bottom: 20px; 
}
.pc {
    color: #999; 
}
.pm {
    color: #999; 
}

效果图：