简单的登录页面制作-02

黑码农333

于 2024-10-04 17:33:31 发布

阅读量102

点赞数 3

文章标签： html css 前端

本文链接：https://blog.csdn.net/JOUzb/article/details/142703814

版权

前言

在上一篇文章中，我们学习了基本的HTML的标签使用，以及基础的CSS样式设置，现在我们就来做一个简单的登录页面吧。

HTML部分

html部分较为简单，链接样式文件，定义表单即可。

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>登录页</title>  <!-- 页面标题 -->
        <!-- 链接css样式文件 -->
        <link rel="stylesheet" type="text/css" href="lgstyle.css" />
    </head>
    <body>
    <div>
        <form action="">
             <h1>网站管理系统</h1>
            <input type="text" id="name" placeholder="账号"><br />
            <input type="password" id="pass" placeholder="密码"><br />
            <input type="button" onclick="check(this)" value="登录">
            <p>
        </form>
    </div>
    </body>
</html>

运行后得到一个比较简单的初始页面。

我们在通过编写css样式来美化这个页面。

CSS部分


/*网页背景样式设置  */
html{
    background-image: url(login.png);
    background-repeat: no-repeat;
    background-size: 100%;
}


/*表单样式设置*/
form{
    text-align: center;
    position: absolute;   /*表单于页面居中*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
/*输入框样式设置*/
input[type=text],input[type=password]{
    background-color: white;  /*正常状态样式*/
    color: black;
    border: 0;
    border-radius: 20px;
    outline: 0;
    text-align: center;
    height: 50px;
    width: 250px;
    margin: 5px;
}
 
 /*登录按钮样式设置*/
input[type=button]{
    background-color: #45A0F2;  /*正常状态样式*/
    color: white;
    border: 0;
    border-radius: 20px;
    outline: none;
    text-align: center;
    height: 50px;
    width: 250px;
    margin: 5px;
}
 
/*输入框悬停时样式设置*/
input[type=text]:hover,input[type=password]:hover{
    outline: 0;  /*悬停时样式*/
    background-color: #65BCD6;
    color: white;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0 6px 20px 0 rgba(0,0,0,0.19);  /*阴影*/
}
 
/*登录按钮悬停时样式设置*/
input[type=button]:hover{
    outline: 0;  /*悬停时样式*/
    background-color:#168DBE;
    color: white;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0 6px 20px 0 rgba(0,0,0,0.19);  /*阴影*/
}

这样一个简单的静态登录页面就完成了！