当前位置： 首页 > 教程资源 > 正文
如何在 CSS 中创建堆叠表单

如何在 CSS 中创建堆叠表单

作者：大眼仔~旭 日期：3年前 (2021-06-18) 评论：0 条

分享到：QQ 空间新浪微博微信百度云收藏

摘要：CSS 属于一类独特的语言，称为样式表语言。 它主要用于定义您的网页的演示文稿。 虽然 HTML 允许您指定页面的结构，但它是用于设置样式的 CSS。 否则，您最终会得到一个非常没有吸引力的网站。 专注于 CSS 是提高网站吸引力的更好方法之一，尤其是在增强用户体验方面。 这样，您还可以增加流量。 对于初学者，您可以使…

CSS 属于一类独特的语言，称为样式表语言。 它主要用于定义您的网页的演示文稿。 虽然 HTML 允许您指定页面的结构，但它是用于设置样式的 CSS。 否则，您最终会得到一个非常没有吸引力的网站。

专注于 CSS 是提高网站吸引力的更好方法之一，尤其是在增强用户体验方面。 这样，您还可以增加流量。 对于初学者，您可以使用堆叠形式。下面就和大眼仔旭一起看看如何快速的在 HTML 中使用 CSS 创建堆叠表单吧。

什么是堆叠表格？

堆叠表单允许您创建一个专门的表单，您可以在其中将标签和输入放置在彼此之上，而不是将它们放置在水平模式中。

这是您如何做到的。

HTML 代码

使用 HTML 元素 <form> 来处理您的信息。 为相关字段添加标签并分配相关输入字段。 在这个例子中，我们要求用户提供他们的全名和电子邮件地址以及表单的输入类型文本，而下拉菜单是通过选择 id 创建的，以帮助他们选择他们的行业。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>

<html>

<body>

<h3>什么是堆叠表格?</h3>

<p>以下是创建堆叠表单的方法。</p>

<div class="container">

<label for="fullname">完整名称</label>

<input type="text" id="fullname" name="firstname" placeholder="输入您的完整名称">

<label for="email">Email 地址</label>

<input type="text" id="email" name="email" placeholder="输入您的电子邮件 ">

<label for="dept">部门</label>

<select id="country" name="country">

<option value="IT">信息技术</option>

<option value="CS">客户支持</option>

<option value="Sales">销售</option>

</select>

<input type="submit" value="提交">

</form>

</div>

</body>

但是，运行这段代码只会产生平淡的形式，而不会垂直堆叠字段。 这就是你必须添加 CSS 的地方。

CSS 代码

现在，创建一个单独的样式表并将其添加到 HTML 的 body 标记之前：

1
<head> <link rel="stylesheet" href="StackedForm_CSSPart.css"> </head>

接下来，选择 HTML 的正文、输入类型和容器，并通过 CSS 设置它们的样式。 这将包括尝试不同的 CSS 属性，例如字体系列、宽度、填充、边距、显示、边框等，并添加您的首选值。 这样，您最终会得到一个适合您确切偏好的堆叠表格。 这是一个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {

font-family: Calibri;

}

input[type=text], select {

width: 25%;

padding: 12px 20px;

margin: 8px 10;

display: list-item;

border: 4px double #39A9DB;

border-radius: 8px;

box-sizing: border-box;

}

input[type=submit] {

width: 25%;

background-color: #F8E2E6;

color: #0000FF;

padding: 12px 18px;

margin: 20px 0;

border: none;

border-radius: 6px;

cursor: pointer;

}

div.container {

border-radius: 10px;

background-color: #39A9DB;

padding: 40px;

}

现在您可以在 CSS 中创建堆叠表单

通过本文，您学习了如何在 CSS 中创建堆叠表单。 通过练习，您将能够改进您的表单并使您的网站更加用户友好。通过展览项目日复一日地磨练您的 CSS 技能，成为一名时尚的网页设计师和更高效的网页开发人员。

本文Tags：
声明：大眼仔旭 | 本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议[CC BY-NC-SA]进行授权
文章名称：《如何在 CSS 中创建堆叠表单》
文章固定链接：http://www.dayanzai.me/create-stacked-form-css.html
本站资源仅供个人学习交流，请于下载后 24 小时内删除，不允许用于商业用途，否则法律问题自行承担。
转载声明
全部评论： (0条)
^_^ 暂无评论！

发表评论

表情

MORE>>微软应用

MORE>>安卓应用

MORE>>教程资源

MORE>>其它资源

最新标签

Autodesk GitHub Inno Setup 技巧 Inno Setup 教程 JetBrains Microsoft Office OpenAI PDF 编辑器 PDF 阅读器 Win10 技巧 Windows 10 Windows 10 技巧 Windows 11 Windows 11 小技巧 Wise Soft 代码编辑器 免费商用字体 免费字体 免费软件 办公软件 固态硬盘检测工具 图像处理工具 图像浏览器 安卓软件 安装包制作工具 屏幕录像 屏幕录像工具 屏幕录像软件 开源字体 开源软件 思维导图 截图工具 数据恢复工具 文本编辑器 格式转换工具 桌面录像 系统优化工具 系统增强 系统增强工具 视频播放器 视频转换器 视频转换工具 音乐播放器 音频转换工具
返回顶部