整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一篇文章我们说了单选框、多选框以及下拉框的使用，今天呢我们继续看一下表单剩下的常用控件：提交按钮以及重置按钮。
提交按钮，顾名思义就是当我们填好了表单中的数据之后，我们需要通过提交按钮来将数据传递到后台的服务器中，供后台程序使用。
使用语法：<input type="submit" value="提交数据">
详细讲解：
1、type：只有当type值设置为submit时，按钮才有提交作用，才能正常的进行表单的提交。（或者使用JavaScript代码来触发提交事件，这个到后期我们讲解js的时候我进行介绍）
2、value：按钮上显示的文字，显示按钮的名称。
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
使用语法：<input type="reset" value="重置数据">
详细讲解：
1、type：只有当type值设置为reset时，按钮才有重置作用，点击按钮会将form表单内的所有信息还原到初始未输入的状态。
2、value：按钮上显示的文字，显示重置按钮的名称
使用练习：
我们创建一个表单，数据我们以post的形式提交到百度首页，表单里边有姓名和年龄的输入框，并且添加提交数据按钮以及重置数据按钮。具体代码如下图所示：
在网页中的显示效果就如下图所示：
我们在姓名和年龄输入框中输入内容，点击重置数据既可以清空里边的内容，还原到初始状态，点击提交数据按钮，那么数据将会提交到我们的指定链接处。
以上呢就是表单最常用的一些控件了，接下来我们对学到的表单知识进行一次综合的测试，我们来写一个完整的表单包含我们学到的所有知识。
我们在这里就写一个网站制作常用的留言表，表格名称就叫留言表，然后表中包含有姓名输入框、性别单选框（默认选中男）、爱好多选框（默认选中第一个）、所在地区下拉框、留言内容多行文本框，以及提交信息按钮和重置信息按钮。数据提交呢我们还是提交到百度，提交类型我们使用post。具体的代码如下图所示：
在网页中的显示效果就如下图所示：
好了，到了这里我们的第一个表单就算是做完了，到这有人就会问了，为什么别人的代码在浏览器上看起来都是那么的规整，我这么写完看着怎么这么丑，接下来的文章我们将为大家介绍css的知识了，学习了css你也可以将你的页面做的高达上起来。最后大家看完一定要自己动手写一写，只有自己写出的代码才能体会到其中的乐趣，多加练习才是王道。
每日金句：人生最大的喜悦是每个人都说你做不到，你却完成它了！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。
SS中的浮动（Floats）、定位（Positioning）和显示（Display）属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景，帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。
浮动是CSS中用于实现元素排列的一种方式，它可以让元素脱离正常的文档流，并可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位属性允许你控制元素的位置，它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display属性是CSS中最重要的用于控制布局的属性之一，它定义了元素如何显示在页面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在这个例子中，我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航，以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚，并使用固定定位为页面添加了一个始终可见的固定元素。最后，我们使用了overflow: hidden;来清除头部中浮动元素的影响。
浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性，前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展，我们也需要不断学习和适应新的CSS特性，以保持我们技能的前沿性。
2014年毕业至今5年多了，感慨一下真的过得好快呐！群里有朋友问我关于reset.css问题，个人觉得用一个模板就够了，没必要每次重写。reset.css就是css样式的重置，为了处理些默认样式，也是为了各大浏览器的兼容性。我的reset.css模板，可参考下，不足之处，请指正批评下！
@charset "GBK";
*{margin:0;padding:0;}
html{background:#fff}
body{font-size:14px;font-family:"Microsoft YaHei","SimSun";}
ul li{list-style:none;}
img{border:none;}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px white inset;}
input{outline:none;}
a,a:hover{text-decoration:none;}
.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*+height:1%;}
说明：
1.指定了css文件编码为BGK；
2.*代表了所有，清除了所有盒子的内外边距；
3.指定了默认字体和大小，字体名称使用了英文，可防止乱码现象；
4.li的点样式、img图片的默认边框清除了；
5.表单input和a的一些默认样式清除了；
6.最后是清除浮动的样式，使用时直接在盒子上写clearfix类名就行了。
温馨提示：如果你对web前端开发感兴趣，可以加入免费交流学习群：932617626
除注明外的文章,均为来源:汤久生博客,转载请保留本文地址！
原文地址：http://tangjiusheng.com/divcss/165.html
*请认真填写需求信息，我们会在24小时内与您取得联系。
