前端学习————css实现简单登录页面

最新推荐文章于 2024-03-04 09:55:48 发布

安念、

最新推荐文章于 2024-03-04 09:55:48 发布

阅读量6k

点赞数 7

分类专栏：前端 # css 文章标签：前端学习 css

本文链接：https://blog.csdn.net/qq_63606575/article/details/123453982

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

css实现简单登录页面

一、页面展示
二、思路
三、代码展示
- 1.HTML
- 2.css

一、页面展示

在这里插入图片描述

二、思路

1.设置背景图片

2.设置登录框框并使其处于靠右位置

3.设置登录框框内容

三、代码展示

1.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="./login.css">
</head>
<body>
      <div class="form">
        <h2>
          <span>登录</span>
        </h2>
        <div class="item">
          <input type="text" placeholder="账号">
        </div>
        <div class="item">
          <input type="password" placeholder="密码">
        </div>
        <div class="button">
          <button>登录</button>
        </div>
        <div class="last">
            <last>———————其他方式登录———————</last>
        </div>
      </div>
</body>
</html>

2.css

在css里面设置背景图片

body{
    background: url("img/6.jpg");
}

.form{
    width: 420px;
    height: 550px;
    border: 1px solid rgb(126,117,117);
    margin-left: 850px;
    margin-top: 130px;
    /*background-color: rgb(94,93,91,.11);*/
    border-radius: 6mm;
    background-color: seashell;
}
.form h2{
    font-family: "Agency FB";
    text-align: center;
    font-size: 30px;
    color: black;
    border-bottom: 1px solid rgb(105,105,105);
    height: 50px;
    margin-bottom: 40px;
}
input[type="text"],input[type="password"]{
    border: 1px solid #dcdfe6;
    width: 75%;
    box-sizing: border-box;
    border-radius: 3px;
    height: 50px;
    text-indent: 1em;
    font-size: 14px;
    color: black;
    margin: 16px 48px;
    background-color: rgb(126,117,117,.20);
    /*background-image: linear-gradient(95deg,rgba(111,399,99,0.61),rgba(111,4557,180,0.5));*/
    background-image: linear-gradient(95deg,rgba(114,114,202,.3),rgba(90,187,182,0.5));
}
input[type="text"]::placeholder,input[type="password"]::placeholder{
    color: black;
}
input[type="text"]:hover,input[type="password"]:hover{
    border-color: #33476e;
}
.form .button{

}
button{
    width: 85px;
    height: 30px;
    margin: 45px 170px;
    background-color: #dcdfe6;
    background-image: linear-gradient(95deg,rgba(114,114,202,.3),rgba(90,187,182,0.5));
}
.last{
    margin:30px 50px ;
    font-size: 15px;
    color: grey;
}

安念、

关注

7
点赞
踩
78

收藏

觉得还不错? 一键收藏
0
评论
前端学习————css实现简单登录页面

css实现简单登录页面一、页面展示二、思路1.设置背景图片2.设置登录框框并使其处于靠右位置3.设置登录框框内容三、代码展示1.HTML2.css一、页面展示二、思路1.设置背景图片2.设置登录框框并使其处于靠右位置3.设置登录框框内容三、代码展示1.HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>个人中心</
复制链接

扫一扫