静态登录页面

yanjinyuanmia

已于 2024-08-28 20:21:12 修改

阅读量330

点赞数 6

文章标签： html5 css3

于 2024-08-28 20:17:51 首次发布

本文链接：https://blog.csdn.net/yanjinyuanmia/article/details/124333074

版权

一、准备工作

新建一个站点，里面有html、css、images文件。在sublime软件见中打开，并在head标签中利用link快捷键建立链接。

二、构造html部分

表单：

在body标签中添加form标签，并在form中添加三个input标签，分别为text、password、botton类型。前两个input标签，其中的placeholder值分别为“账号”、“密码”，并在标签中加入class属性分别定义id、pw；最后一个input要用div标签包裹，并添加class=“log”，其中的value值为“登录”。最后在form中加入p标签，具体内容如下图代码所示。

        <form action="">
            <input class="id" type="text" name="" value="" placeholder="账号">
             <br />

              <input class="pw" type="password" name="" value="" placeholder="密码">
             <br />
            
            <div align="center">
                <input class="log" type="button" name="" value="登录">
                <br />
            </div>
            <p align="center">版权所有&copy;hqyj.com</p>
        </form>

三、构造html部分

css：

首先选择body，给整体的页面设置背景，用到的语法如下所示，其中url中的属性值为背景图

body{

    background-image: url(images/bgt.jpeg);
    
}

片的路径。然后利用绝对位置将表单至于页面中心：

form{

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

然后利用选择器选择id和pw，将两者的宽高设置为340px、50px，并将轮廓线取消，四个角设置为圆角，下外间距设置为10px，并空出10个像素的空间（距离左边10个像素）。

.id{
    width: 340px;
    height: 50px;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 10px;
    border: none;
    text-indent: 15px;
}

.pw{
    width: 340px;
    height: 50px;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 10px;
    border: none;
    text-indent: 15px;
}

最后是登录按钮。首先将按钮背景颜色设置为#4a92ba（利用ps辅助工具得出），然后将字体设置为20px，取消边框。


.log{
    
    background-color: #4a92ba;
    font-size: 20px;
    border: none;

}

最后保存并用浏览器打开

四、代码一览于结果展示

代码

/*html代码*/

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        
        <form action="">
            <input class="id" type="text" name="" value="" placeholder="账号">
             <br />

              <input class="pw" type="password" name="" value="" placeholder="密码">
             <br />
            
            <div align="center">
                <input class="log" type="button" name="" value="登录">
                <br />
            </div>
             <p align="center">版权所有&copy;hqyj.com</p>
        </form>
        
    </body>
</html>

/*css代码*/

/* 
* @Author: Marte
* @Date:   2024-08-28 18:32:26
* @Last Modified by:   Marte
* @Last Modified time: 2024-08-28 19:45:06
*/
body{

    background-image: url(images/bgt.jpeg);
    
}

form{

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.id{
    width: 340px;
    height: 50px;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 10px;
    border: none;
    text-indent: 15px;
}

.pw{
    width: 340px;
    height: 50px;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 10px;
    border: none;
    text-indent: 15px;
}

.log{
    
    background-color: #4a92ba;
    font-size: 20px;
    border: none;

}