前端:登录界面

效果

代码 

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div class="out_layer">
        <div class="inner_layer">
            <div class="left_info">
                <image class="" src="img/work.png">
            </div>
            <div class="right_info">
                <div class="right_content">
                    <!-- <div class="log_icon">天浩集团</div> -->
                    <div class="log">Log In</div>
                    <div class="log_title">用户名</div>
                    <div class="log_input">
                        <input type="text" placeholder="请输入用户名称">
                    </div>
                    <div class="log_title">密码</div>
                    <div class="log_input">
                        <input type="text" placeholder="请输入密码">
                    </div>
                    <div class="log_btn">
                        <button>登入</button>
                    </div>
                    <div class="right_reg">
                        <a href="/tianhao/Regist.php" target="_blank">内部员工注册</a>
                        <a href="/tianhao/Regist1.php" target="_blank">供应商注册</a>
                        <a href="/tianhao/Regist2.php" target="_blank">客户注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

css/index.css

* {
    padding: 0px;
    margin: 0px;
}


body {
    width: 100%;
    height: 100vh;
    /* background-color: #4461d2; */
    /* background-image: url('../img/bg.jpg'); */
    background-color: #6173ee;
    background-image: linear-gradient(to top right, #3b56ff, #6173ee);
}

.out_layer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.inner_layer {
    width: 55%;
    height: 60%;
    display: flex;
    background-color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    /* 阴影(水平正右,竖直正下,模糊度,颜色) */
    box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.5);
}

/* 左侧 */
.left_info {
    width: 50%;
    height: 98%;
    overflow: hidden;
    margin-left: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid black; */
}

.left_info img {
    height: 80%;
    width: 100%;
    object-fit: contain;
    /* 保持图片纵横比,使图片适应容器大小而不变形 */
}

/* 右侧 */
.right_info {
    margin-left: 5%;
    width: 30%;
    height: 98%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid black; */
}

.right_content {
    width: 100%;
    height: 70%;
    /* border: 1px solid black; */
}

.log_icon {
    position: fixed;
    top: 0px;
    right: 0px;
    padding: 1% 5%;
    background-color: #4d8de0;
    /* background-color: #4362e4; */
    color: #fff;
}

.log {
    font-size: 130%;
    font-weight: bold;
    margin: 10% 0 10% 0;
}

.log_title {
    font-size: 80%;
    font-weight: bold;
    margin-bottom: 5%;
}

.log_input input {
    margin-bottom: 10%;
}

.log_input input {
    height: 30px;
    width: 95%;
    border: none;
    padding-left: 10px;
}

.log_btn {
    margin-top: 5%;
}

.log_btn button {
    width: 100%;
    height: 30px;
    color: #fff;
    border: none;
    border-radius: 5px;
    background-color: #3b56ff;
    /* background-color: #4362e4; */
}

.right_reg {
    display: flex;
    justify-content: space-between;
    width: 94%;
    text-align: center;
    margin-top: 3%;
    font-size: 10%;
    margin-left: 3%;
}

.right_reg a {
    text-decoration: none;
    color: #000000;
}

.right_reg a:hover {
    color: #4262e3;
}

img

相关推荐

  1. 登录界面前端

    2024-04-03 09:54:06       5 阅读
  2. py注册登录界面

    2024-04-03 09:54:06       24 阅读

最近更新

  1. Chatgpt系列(二) 如何写prompt提词

    2024-04-03 09:54:06       0 阅读
  2. WebRTC的3A和SpeexDSP如何选择

    2024-04-03 09:54:06       0 阅读
  3. 接口请求与对象转json中字段大小写的处理

    2024-04-03 09:54:06       0 阅读
  4. Rust常用特型之Default特型

    2024-04-03 09:54:06       0 阅读
  5. npm常用命令详解

    2024-04-03 09:54:06       0 阅读
  6. 生活无趣感的成因与破解之道

    2024-04-03 09:54:06       0 阅读
  7. 大数据集群中部署Hive

    2024-04-03 09:54:06       0 阅读
  8. CMake

    CMake

    2024-04-03 09:54:06      0 阅读

热门阅读

  1. WebKit内核架构深度解析:核心技术与工作机制

    2024-04-03 09:54:06       6 阅读
  2. web有哪些方式可以实时更新数据

    2024-04-03 09:54:06       7 阅读
  3. vue 基础回顾

    2024-04-03 09:54:06       6 阅读
  4. 【2024最新】vue3的基本使用(超详细)

    2024-04-03 09:54:06       6 阅读
  5. freertosday3

    2024-04-03 09:54:06       4 阅读
  6. 平台介绍-大屏组件

    2024-04-03 09:54:06       5 阅读
  7. Facebook推广常见问题解惑答疑

    2024-04-03 09:54:06       4 阅读
  8. SegmentAnything导出Onnx模型分割图片

    2024-04-03 09:54:06       5 阅读
  9. 120.单例模式(C++设计模式)

    2024-04-03 09:54:06       3 阅读
  10. 【Node】使用Node.js构建简单的静态页面生成器

    2024-04-03 09:54:06       5 阅读
  11. 工厂方法模式:灵活的创建对象实例

    2024-04-03 09:54:06       5 阅读
  12. WPF —— 关键帧动画

    2024-04-03 09:54:06       3 阅读
  13. Yolov5封装detect.py面向对象

    2024-04-03 09:54:06       2 阅读
  14. Rancher(v2.6.3)——Rancher部署Minio(单机版)

    2024-04-03 09:54:06       3 阅读