简单静态页面

老薛爱吃大西瓜

已于 2024-08-28 19:37:16 修改

阅读量445

点赞数 5

文章标签：前端 html css

于 2024-08-28 19:36:43 首次发布

本文链接：https://blog.csdn.net/qq_57461392/article/details/141647508

版权

内容：

实现一个简单的登录页面，具体效果如下

一、创建基本结构

一般我们创建web项目需要先创建html、css、js、images文件和index入口（虽然本次项目无需这么多，但是需要养成良好习惯）

二，分析HTML

先抛开css样式来分析内容，有两个输入框、一个提交按钮、一个行文字，相对应的我们需要用到三个<input>标签和一个<p>标签，这三个标签以表单的形式罗列，我们可以在外层套入一个<form>即可，每个标签又不在同一行，所以我们可以用<br \>标签进行换行，这样我们的<body>骨架就出来了

<form>
            <input name="" value="" placeholder="">
            <br />
            <input name="" value="" placeholder="">
            <br />
            <input type="submit" name="" value="">
            <br />
            <p></p>
</form>

<input>标签分别的type值为“text”、“password”、“submit”，这两个个<input>输入标签中还有默认文本，我们可以在相应的placeholder属性中输入相应的文字，而提交按钮中也有文字，这个只需在value属性中输入即可。

<p>标签很简单，但中间有个版权符号，我们可以耍耍小聪明，直接CV，当然，在Html语言中也有相应的命名实体 “ © ”

为了方便后面进行css样式编辑，我们对每个 <input>进行打上class值，最后结果如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
        <form action="">
            <input class="text" type="text" name="" value="" placeholder="账号">
            <br />
            <input class="text" type="password" name="" value="" placeholder="密码">
            <br />
            <input class="submit" type="submit" name="" value="登录">
            <br />
            <p class="copy">版权所有&copy;hqyj.com</p>
        </form>
    </body>
</html

三、分析CSS样式

我们一层一层分析CSS：

1.body标签：标签内需要一个背景图，我们只需要在background-image属性中设置好路径即可

2.form标签：位置居中整体，可以使用绝对路径属性 “ position:absolute ” 定位到屏幕中央

3.input中的text和password框：有圆角，使用border-radius属性设置出圆角

4.imput中的submit框：有背景图，与body标签一样，使用background-image属性即可

5.每个边框相隔有一段距离，我们是由margin-top设置上面的外边距即可

6.p标签：水平居中，设置text-align即可

最终代码如下

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

form{
    position: absolute;
    left: 40%;
    top: 40%;
}

form .text{
    width: 250px;
    height: 40px;
    margin-top: 10px ;
    border-radius: 20px;
    padding-left: 15px;
    border-width: 1px;
}
form .submit{
    width: 250px;
    height: 30px;
    margin-top: 10px ;
    position: relative;
    left: 10px;
    color:white;
    font-size: 20px;

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

form .submit:hover{
    border: 2px solid #000;
}

form .copy{
    text-align: center;
}

得出结果如下：