CSS 属于一类独特的语言，称为样式表语言。 它主要用于定义您的网页的演示文稿。 虽然 HTML 允许您指定页面的结构，但它是用于设置样式的 CSS。 否则，您最终会得到一个非常没有吸引力的网站。
专注于 CSS 是提高网站吸引力的更好方法之一，尤其是在增强用户体验方面。 这样，您还可以增加流量。 对于初学者，您可以使用堆叠形式。下面就一起看看如何快速的在 HTML 中使用 CSS 创建堆叠表单吧。
这是您如何做到的。
<!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 标记之前：
<head> <link rel="stylesheet" href="StackedForm_CSSPart.css"> </head>接下来，选择 HTML 的正文、输入类型和容器，并通过 CSS 设置它们的样式。 这将包括尝试不同的 CSS 属性，例如字体系列、宽度、填充、边距、显示、边框等，并添加您的首选值。 这样，您最终会得到一个适合您确切偏好的堆叠表格。 这是一个例子。
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 中创建堆叠表单
script7810
2#
