【HTML】登录框

最新推荐文章于 2023-12-24 11:42:24 发布

好吃吗

最新推荐文章于 2023-12-24 11:42:24 发布

阅读量497

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/xhdxhdxhd/article/details/102791060

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

布局思路

外部定义一个较大的框，垂直方向上有两行，第一行是上面黑色的头部和一个X图标；第二行使用垂直布局，三行，并使用 justify-content主轴对齐， align-items: 交叉轴居中。

代码实现

HTML:

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>

<head>
    <title>Test Platform - A Login Frame</title>

    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/button.css">
</head>

<body>

<div class="flex-h" style="justify-content: center">
    <div class="flex-v" style="border: 1px solid;width: 400px">
        <div class="header-bar flex-h" style="justify-content: flex-end;background-color: #555555 ">
            <button class="close-button" style="width: 20px">X</button>
        </div>
        <div class="flex-v"
             style="justify-content: center; align-items: center; border: 1px solid #555555;border-top:0;background-color: white">
            <div>
                <label>User Name:</label>
                <input name="userName">
            </div>
            <div>
                <label>Password:</label>
                <input type="password" name="password">
            </div>

            <button>Login</button>
        </div>
    </div>
</div>
</body>
</html>

CSS
base.css

.inline {
    display: inline;
}

.flex-h {
    display: flex;
    flex-direction: row;
}

.flex-v {
    display: flex;
    flex-direction: column;
}

button.css


.close-button {
    border-width: 0;
    background-color: powderblue;
}

好吃吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML】登录框

效果图布局思路外部定义一个较大的框，垂直方向上有两行，第一行是上面黑色的头部和一个X图标；第二行使用垂直布局，三行，并使用 justify-content主轴对齐， align-items: 交叉轴居中。代码实现HTML:<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml><head>...
复制链接

扫一扫