简单的登陆页面设计-CSDN博客

本文链接：https://blog.csdn.net/affkjafhakjhf/article/details/142631820

1.创建站点 login.html文件和style.css文件

<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>登录页面</title>
    </head>

使用link链接两个文件，在title中写下网站名字

2.在css文件中插入背景图

html{
    background-image: url(image/6.png);图片插入
    background-repeat: no-repeat;图片不重复
    -webkit-background-size: 1500px 800px;
    background-size: 1500px 800px;调整图片大小 宽1500像素 高800像素
    
}

3.写下网站标题

<h1>网站登录系统</h1>

4.登录表单制作

把表单设置在表格中，这样可以使表单内容对齐

<div>//网站分割模块
        <h1>网站登录系统</h1>
        <form action="">//表单标签
            <table ><tr >//表格标签
                <td ><font  class="f1" >用户名：</font></td>
                <td><input class="zh" type="text" name="" value="" placeholder="账号"></td>
            </tr>//用户名文本输入框 类型选择text文本
            <tr >
                <td ><font  class="f2">密码:</font></td>
                <td><input class="mm" type="password" name="" value="" placeholder="密码"></td>
            </tr>//密码文本输入框 类型选择password
<tr>
                <td><button class="dl">登录</button></td>//登录按钮
                <td><button class="zc">注册</button></td>//注册按钮
            </tr></table>
        </form>
    </div>

5.css属性设置

div{ text-align: center;
    position: absolute;//模块文本居中
    width: 100%;
    height: 100%;//宽高各100%
}

表单设置

form{
    text-align: center;
    position: absolute;//表单文本居中
    top: 50%;
    left: 50%;//表单位置调整
    transform: translate(-50%, -50%);
}

文本框设置

.zh{
    width: 200px;
    height: 20px;
    background-color: #efefef;
    border:0;//账号文本框设置
}
.mm{
    width: 200px;
    height: 20px;
    background-color: #efefef;
    border:0;//密码文本框设置
}

按钮设置

button{
    margin-top:10px;//按钮距上边界十像素
    margin-left:10px;//按钮距左边界十像素
    width: 100px;
    height: 30px;
    background-color: #1c7ca2;
    border-radius: 5px;//圆框四周五像素
}

文字样式设置

.f1{
    font-family: "楷体";
    size:5px;
}
.f2{
    font-family: "楷体";
    size:5px;
}