8-28 前端简单登录页面作业

Orange、大橙子

已于 2024-08-28 19:57:25 修改

阅读量181

点赞数 3

文章标签：前端 html css

于 2024-08-28 19:27:49 首次发布

本文链接：https://blog.csdn.net/2403_87001562/article/details/141648047

版权

一：效果图

二：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 type="text" name="" value="" placeholder="账号">
            <br />
            <input type="password" name="" value="" placeholder="密码">
            <br />
            <input class="button_input" type="button" name="" value="登录">
            <br />
            <p>
                版权所有&copy;hqyj.com
            </p>
        </form>
    </body>
</html>

三：css代码

body{
    background-image: url(images/bgt.jpeg);
}
form{
    position: absolute;top: 50%;left: 50%;
}
input{
    width: 300px;
    height: 40px;
    border-radius: 40px;
    padding-left: 15px;
    margin-bottom: 10px;
    border:0,#fff,none;
}
.button_input{
    background-image: url(images/bgt.jpeg);
    width: 320px;
    font-size: 25px;
    color:#fff;
    border-radius: 0px;
}
p{
    text-align:center;
    margin-top: -8px;
    padding-left: -15px;
}