CSS 居中表单与Material Design Lite
在本文中，我们将介绍如何使用CSS和Material Design Lite（简称MDL）创建一个居中显示的表单。MDL是一个开源的CSS框架，提供了现代化的设计和交互组件，为开发者提供了创建漂亮且响应式的界面的能力。
阅读更多：CSS 教程
预备知识
在开始之前，需要了解一些基本的CSS和HTML知识。如果您对CSS选择器、布局和表单元素还不熟悉，建议您先学习一些基础知识。
创建HTML基础结构
首先，我们需要创建一个基本的HTML结构来容纳我们的表单。我们可以使用以下代码来创建一个简单的表单：
<form class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">登陆</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="username">
<label class="mdl-textfield__label" for="username">用户名</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="password">
<label class="mdl-textfield__label" for="password">密码</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">登录</button>
</div>
</form>
在上面的代码中，我们使用了MDL中的CSS类来定义表单的样式和布局。.mdl-card 类用于创建一个卡片式容器，.mdl-card__title 和 .mdl-card__supporting-text 用于定义卡片的标题和内容。我们还使用 mdl-textfield 类来创建带有浮动标签的文本输入框。
添加CSS样式
现在我们已经有了一个基本的表单结构，接下来我们需要使用CSS来将表单居中显示。我们可以使用以下代码将表单居中：
form {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.mdl-card {
max-width: 400px;
width: 100%;
margin: 0 auto;
}
在上面的代码中，我们使用了Flexbox布局来将表单居中。display: flex 将表单容器设置为弹性盒子，justify-content: center 和 align-items: center 属性将内容同时水平和垂直居中。height: 100vh 将表单的高度设置为视口的高度，确保表单始终居中显示。.mdl-card 类的 max-width 和 width 属性将表单的最大宽度设置为400px，并居中显示。
添加MDL样式
最后一步是添加MDL的样式来美化我们的表单。我们需要在HTML文件的 <head> 部分引入MDL的CSS和JavaScript文件：
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
这些文件将提供MDL的样式和交互行为。通过添加以上代码后，我们的表单将呈现MDL的样式。
示例
下面是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
form {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.mdl-card {
max-width: 400px;
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<form class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">登陆</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="username">
<label class="mdl-textfield__label" for="username">用户名</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password" id="password">
<label class="mdl-textfield__label" for="password">密码</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<button class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect">登录</button>
</div>
</form>
</body>
</html>
通过在浏览器中打开以上代码，您将看到一个居中显示的带有MDL样式的表单。
总结
本文介绍了如何使用CSS和MDL创建一个居中显示的表单。首先，我们创建了一个基本的HTML结构，并使用MDL的CSS类来定义表单的样式和布局。然后，我们使用CSS的Flexbox布局将表单居中显示。最后，我们添加了MDL的样式来美化表单。通过这些步骤，我们可以轻松创建一个漂亮且功能完善的居中表单。希望本文对您有所帮助！
此处评论已关闭