html表格文字居中怎么设置(html表单注册页面)-昊阳知识网

在本教程中，我们将使用 HTML 和 CSS 构建一个带有浮动标签和平滑过渡效果的注册表单。

如上图所示，当表单中的输入框获得焦点时，其中的标签会浮动到顶部，并且输入框的边框会加粗。如果输入文本，输入框就失去焦点，并且标签保持在顶部。否则，标签会回到输入框中。

许多表单都应用了某种过渡效果，不仅使表单更具动态性，而且还有助于引导用户了解输入的状态（即是否有焦点）以及每个输入框应处理的数据类型。

在本教程中，你将了解一些很酷的 CSS 特性，例如过渡、选择器（例如 :placeholder_focus）以及你应该了解的许多其他 CSS 属性。

我们开始吧！

HTML 标记

我们将为注册表单定义标记。但在此之前，我们必须设置 HTML 样板并从 head 标签正确链接到我们的样式表。

你还可以复制此样板并将其粘贴到你的 index.html 文件中：

<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><metahttp-equiv=”X-UA-Compatible”content=”ie=edge”><title>Document</title><linkrel=”stylesheet”href=”styles.css”></head><body></body></html>

在 body 标签中，我们定义了注册表单：

<divclass=”signupFrm”><formaction=””class=”form”><h1class=”title”>Signup</h1><divclass=”inputContainer”><inputtype=”text”class=”input”placeholder=”a”><labelfor=””class=”label”>Email</label></div><divclass=”inputContainer”><inputtype=”text”class=”input”placeholder=”a”><labelfor=””class=”label”>Username</label></div><divclass=”inputContainer”><inputtype=”text”class=”input”placeholder=”a”><labelfor=””class=”label”>Password</label></div><divclass=”inputContainer”><inputtype=”text”class=”input”placeholder=”a”><labelfor=””class=”label”>ConfirmPassword</label></div><inputtype=”submit”class=”submitBtn”value=”Signup”></form></div>

我们创建一个容器 div 来保存表单元素。表单的每个输入及其文本标签都包含在容器 div 中。标签的作用是通知用户每个输入应该包含哪些信息。

我们的页面将如下所示：

包含四个输入框和四个标签的 HTML 表单

你可能会注意到我们分配给所有输入框的占位符值是 “a”。当我们开始应用一些动态逻辑时，这将会有帮助。

如何设置表单样式

我们的表单非常基本，所以让我们添加一些样式以使其看起来更好。

首先，我们需要执行一些重置并设置背景颜色：

@importurl(‘https://fonts.googleapis.com/css2?family=Lato&display=swap’);/*去掉所有默认边距/填充，设置字体*/body{box-sizing:border-box;margin:0;padding:0;background-color:white;font-family:”lato”,sans-serif;}

设置基本样式

现在页面是这样的：

还没有任何样式

在给 body 添加样式之后，我们将内容的显示模式设置为 flex。这确保默认情况下并排显示容器元素 div 内的所有直接子级。

在我们的例子中，容器 signupFrm 中只有一个子级。我们在这里使用 display: flex 的唯一原因是使用 align-items 和 justify-content 属性来帮助垂直和水平居中所有内容：

/*将表单水平和垂直放置在中心，将其高度设置为视口高度的100%*/.signupFrm{display:flex;justify-content:center;align-items:center;height:100vh;}

给表单添加样式

vh 属性代表视口高度，可确保表单占据浏览器窗口高度的 100%，无论屏幕大小或方向如何。这将使表单更具响应性。

表单现在居中了

我们再给它添加一些样式：

.form{background-color:white;width:400px;border-radius:8px;padding:20px40px;box-shadow:010px25pxrgba(92,99,105,.2);}.title{font-size:50px;margin-bottom:50px;}

在针对表单的第一个样式中，我们将背景设置为白色，宽度为 400px，在表单周围添加一些曲线，最后在框周围设置阴影。我们还设置了标题的字体大小和元素下方的一些空间。

结果应该是这样的：

表单现在位于卡片内，带有方框阴影

接下来，我们将为包含表单输入和表单标签的 div 设置样式。

.inputContainer{position:relative;height:45px;width:90%;margin-bottom:17px;}

我们将输入的容器 div 的位置属性设置为相对。这将使我们能够根据需要定位子级 input 和标签。我们还将宽度设置为占据整个容器宽度的 90%。

这就是我们的表单在 Web 浏览器中呈现的方式。

看起来更好了

现在我们需要为输入框设置样式。

我们首先将位置 position 设置为绝对 absolute。这将允许我们将它们中的每一个移动到相对定位的容器父级的左上角部分。

我们还需要隐藏任意占位符文本（前面提到的 “a” 字符），这样它们就不会与每个标签内的文本重叠。当我们实现过渡时将需要占位符文本：

/*设置输入框的样式*/.input{position:absolute;top:0px;left:0px;height:100%;width:100%;border:1pxsolid#DADCE0;border-radius:7px;font-size:16px;padding:020px;outline:none;background:none;z-index:1;}/*隐藏占位符文本（a）*/::placeholder{color:transparent;}

应用样式后，我们的表单现在应该是这样的：

占位符 “a” 现在被隐藏了

然后，我们设置文本标签的样式：

/*设置文本标签的样式*/.label{position:absolute;top:15px;left:15px;padding:04px;background-color:white;color:#DADCE0;font-size:16px;transition:0.5s;z-index:0;}

标签显示的文本表明输入框中需要哪些信息。我们首先将其位置设置为 absolute。通过设置 top 和 left 属性，我们可以将文本相对于其容器向上移动。

接下来，我们将过渡设置为 0.5 秒，这是鼠标悬停时文本向上移动所需的时间。

最后，我们还将 z-index 设置为 0。低 z-index 确保标签位于其他“位置较高”的元素（如果它们重叠）之后。

这是页面上呈现的内容：

现在我们将专注于按钮。

我们将使用 CSS transform 属性添加一些平滑的动画效果，这会将按钮向上移动一点并在鼠标悬停时更改颜色：

.submitBtn{display:block;margin-left:auto;padding:15px30px;border:none;background-color:purple;color:white;border-radius:6px;cursor:pointer;font-size:16px;margin-top:30px;}.submitBtn:hover{background-color:#9867C5;transform:translateY(-2px);}

结果显示如下：