HTML+CSS:homework1

最新推荐文章于 2024-09-02 11:46:47 发布

￥多多￥

最新推荐文章于 2024-09-02 11:46:47 发布

阅读量227

点赞数 3

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_71556251/article/details/141647880

版权

一、目的
完成一个登录页面

二、步骤
   1、新建文件夹，新建index.html style.css
   2、使用link链接
   3、HTML部分
       <form>
           文本框text
           br换行
           密码框 password
           br换行
           按钮 button
           br换行
           p标签
       </form>

4、CSS部分
①给body设置背景图 bgi

②给form设置绝对定位，让他水平垂直都居中
           position：absolute;
           left:50%;
           top:50%;

       ③给input，设置width height border-radius
       取消边框border:none;
④给按钮起个class名，设置背景色bgc，文字颜色白色
       文字大小font-size
       ⑤给p设置居中 text-align:center;

三、代码

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

        </form>
    </body>
</html>

css部分：

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

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

.text{
    width: 200px;
    height: 25px;
    border-radius: 20px;
    border: none;
    margin-bottom: 10px;
    padding-left: 12px;
}

.pass{
    width: 200px;
    height: 25px;
    border-radius: 20px;
    border: none;
    margin-bottom: 10px;
    padding-left: 12px;
}

.but{
    width: 216px;
    height: 25px;
    border-radius: 20px;
    border: none;
    margin-bottom: 10px;
    background-image: url(images/bgt.jpeg);
    color:#fff;
}

p{
    text-align: center;
}

四、效果展示