8.28作业简单登录界面实现

少冰不满杯

于 2024-08-28 20:17:41 发布

阅读量474

点赞数 6

文章标签：前端开发语言 html5 html

本文链接：https://blog.csdn.net/m0_53852836/article/details/141647691

版权

一、作业要求

通过html+css样式代码完成以下效果图的实现。

具体要求：

1.为界面设置背景图片

2.登录界面表单居中显示

3.输入框设置为圆角样式

4.表单中输入框增加间隔

二、代码实现

2.1 项目准备

1.新建文件夹作为站点命名为text1，在文件夹内新建html文件夹、css文件夹、images文件夹、js文件夹以备后用。如下图。

2.在text1文件夹中新建文本文件，更改后缀名为html，命名为login.html；新建文本文件，更改后缀名为css，命名为style.css。如下图。

3.将背景素材准备好，保存至images文件夹中。

4.编程工具为sublime_text

2.2 html部分

1.观察效果图，明确效果图中的所有元素。可以分为两部分：需要建立一个表单<form>，<form>中需要有2个<input>标签作为账号输入框和密码输入框，还需要一个<input>作为button成为登录按钮。登录下方有一小段文字需要用段落标签<p>添加这一小段文字。如下图

2.具体代码实现

具体代码实现如下，并设置class名字方便以后利用css样式单独调整样式进行美化。

<body>
    <form action="#">
        <!-- 账号输入框 -->
        <input  class="ac" type="text" name="account" value="" placeholder="账号"><br />
        <!-- 密码输入框 -->
        <input  class="pd" type="password" name="password" value="" placeholder="密码"><br />
        <!-- 登录按钮 -->
        <input  class="lg" type="button" name="login" value="登录"><br />
        <!-- 小段文字 -->
          <p>
            版权所有&copyhqyj.com
        </p>
    </form>
    </body>

运行结果如下：

2.3 css部分代码

利用css样式完成简单的美化实现效果图，注：以下代码均在css文件中

1.首先在<head>头文件中利用link将html文件与css样式文件链接起来

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
        <meta charset="utf-8">
    </head>

2.具体代码实现

body{
    background-image: url(images/bgt.jpeg);
}
/*为账号输入框设置样式*/
input{
    /*设置长宽*/
    width: 250px;
    height: 40px;
    /*增加间距*/
    margin-bottom: 10px;
    /*设置边框弧度让其更圆润*/
    border-radius: 15px;
    /*设置框内提示文本与边框的距离*/
    padding-left: 8px;
}
.lg{
    /*设置登录按钮长款*/
    width: 260px;
    height: 40px;
    /*设置按钮中文字颜色*/
    color: white;
    /*将弧度变为0成矩形*/
    border-radius: 0px;
    /*设置背景图片*/
    background-image: url(images/bgt.jpeg);
}
input{
    /*取消输入框边框颜色*/
    border: none;
}
form{
    /*设置为绝对位置，并使表单居中显示*/
    position: absolute;
    left: 50%;
    top:  50%;
    transform: translate(-50%, -50%); 
}
form p{
    /*设置文本居中对齐*/
    text-align: center;
    /*增加与上方登录按钮间隔*/
    margin-top: 2px;
}

3.最终效果图

三、结语

最后存在问题，让表单居中显示利用简单的下方代码并没有让表单居中而是有所偏移。解决办法是增加注释代码内容得以实现。

form{
    /*设置为绝对位置，并使表单居中显示*/
    position: absolute;
    left: 50%;
    top:  50%;
   /* transform: translate(-50%, -50%); */
}

结论是当使用CSS的position: absolute;来定位一个元素，并通过设置left: 50%;和top: 50%;试图将其居中时，确实将元素的左上角定位到了其父元素的中心位置。然而，这并不会导致元素本身完全居中，因为这样做只是将元素的左上角对准了中心，而不是元素的中心点。如果设置可以看到表单的左上角是处于中心位置的。