HTML5和CSS3实现登录界面

最新推荐文章于 2024-05-19 10:38:24 发布

Bubmerge

最新推荐文章于 2024-05-19 10:38:24 发布

阅读量578

点赞数 1

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/m0_73715441/article/details/129918886

版权

1.效果样式展示

完成后效果展示

2.HTML代码实现

<body>
    <!-- 创建一个大容器，将内部代码包裹 -->
    <div  class=".bigbox" id="loginform"> 
        <!-- 创建表单，在内部放入具体内容 -->
        <form   class="login" >
            <h1>login</h1>
            <!-- 引入用户名前方图标 -->
            <img src="../img/用户名.png" alt="">
            <input type="text" id="username" placeholder="用户名"  required>
            <!-- 引入输入密码前方图标 -->
            <img src="../img/锁子.png" alt="">
            <input type="text" id="password" placeholder="密码" required>
            <!-- 设置按钮 -->
            <button class="btn" id="login-btn" type="button">登录</button>
        </form>
    </div>
</body>

3.CSS代码实现

/* 创建登录注册页面的样式 */
*{
    /* 无法选中  整体感更强*/
    user-select: none;
}
body{
    background-image: url(../img/back.jpeg);
    /* 平铺 */
    background-repeat: no-repeat;
    /* 按照屏幕大小计算尺寸 */
    background-size: cover;
    /* fixed */
    background-attachment: fixed;
}
.login{
    /* 绝对定位 */
    position: absolute;
    /*设置位置 距离顶部50% 距离左侧50%*/
    top: 50%;
    margin-top: -200px;
    left: 50%;
    /* form表单宽度400px 这里回200px */
    margin-left: -200px;
    width: 400px;
    height: 400px;
    /* 边框锐度 */
    border-radius: 25px;
    background-color: #00000098;
    /* 居中 */
    text-align: center;
    padding: 5px 40px;
    /* 标准盒子 */
    box-sizing: border-box;
    /* 阴影 */
    box-shadow: 5px 10px 5px #161616a8;
}
.login h1{
    /* 引入字体 */
    font-family: "微软雅黑";
    color: white;
}
input{
    /* 设置背景颜色 */
    background-color: rgba(255, 255, 255, 0);
    /* 设置宽度高度 */
    width: 80%;
    height: 48px;
    /* 设置距离底部距离 */
    margin-bottom: 10px;
    /* 边框和底部 边框为0 给底部边框设置宽度大小颜色*/
    border: 0px;
    border-bottom: 2px solid silver;
    /* 点击白色的去除 */
    outline: none;
    /* 字体大小和颜色改变 */
    font-size: 22px;
    color: white;
}
form img{
    /* 设置大小 */
    width: 32px;
    /* 相对定位 */
    position: relative;
    /*设置高度 */
    top: 5px;
}
.btn{
    /* 设置宽度 设置边框锐度 */
    width: 40%;
    background-image: linear-gradient(120deg,#f6d365 0%,#fda085 100%);
    height: 50px;
    border-radius: 25px;
    margin-top: 10px;
    /* 去除下边框白色 */
    border: 0px;
    font-size: 25px;
    font-family: '微软雅黑';
}
/* 当按钮被点击的时候 */
.btn:hover{
    background-image:linear-gradient(to right,#dbb844 0%,#ef6c48 100%);
}