pc登录模板

最新推荐文章于 2024-05-24 20:18:36 发布

涤生啊

最新推荐文章于 2024-05-24 20:18:36 发布

阅读量273

点赞数

分类专栏：前端基础html,css,js 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_45902401/article/details/121229525

版权

前端基础html,css,js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

pc登录模板

效果

在这里插入图片描述

代码

<html lang="en">
<head>
    <meta charset="utf-8">
    <!--响应式视口-->
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>登录</title>
    <!--bootstrapcss样式-->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!--引入animate.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        html, body {
            height: 100%;
        }
        body {
            /*弹性布局*/
            display: flex;
            /*包含的元素垂直居中*/
            align-items: center;
            background-color: #cccccc;
            border: 1px solid sienna;
        }
        form {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            /*自身水平居中*/
            margin: auto;
            border: 1px solid royalblue;
        }
        /*图片圆角*/
        form img{
            border-radius: 50%;
        }
    </style>
</head>
<body >
<!--form中class新加的cssd动画，不需要可以调-->
<form class="animate__animated animate__zoomIn animate__slow" style="text-align: center">
    <!--指定了图片大小-->
    <img alt="" class="mb-4" height="72" src="https://images4.alphacoders.com/605/thumbbig-60578.jpg"
         width="72">
    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
    <!--form-control:撑满表单的一行-->
    <!--required:非空判断-->
    <input autofocus="" class="form-control" id="inputEmail" placeholder="Email address" required type="email">

    <input class="form-control" id="inputPassword" placeholder="Password" required type="password">
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> Remember me
        </label>
    </div>
    <!-- btn-block-->
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<!--    mt-5:m:margin t:top 依次类推-->
    <p class="mt-5 mb-3 text-muted">2017-2021</p>
</form>
</body>
</html>

涤生啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pc登录模板

pc登录模板效果代码<html lang="en"><head> <meta charset="utf-8">  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"> <title>登录</title> <!--bootstra
复制链接

扫一扫