CSS表格和表单设置

表格:

  再HTML中使用table标签来创建一个表格;在table标签中使用tr标签来表示表格中的一行;在tr标签中使用td来常见一个单元格。可以用th标签来表示表头(自动加粗和居中);th的用法和td一样;table是一个块元素。

  表格的列数有td最多的那行决定。

  td标签中可以使用colspan来合并横向的单元格。合并两个单元格如下:

<td colspan="2">D3</td>

  使用rowspan来合并纵向的单元格;合并两个纵向的单元格如下:

<td rowspan="2">B3</td>

表格边框设置:

  • table和td边框之间有默认距离;通过border-spacing可以设置这个距离。例如:
border-spacing: 5px;
  • border-collapse可以用来设置表格的边框合并;但注意,如果设置了边框合并,则border-spacing自动失效。
border-collapse: collapse;

常见表格设置:

  • 设置各行变色(给偶数行设置颜色)
tr:nth-child(even){/*IE8及以下不支持*/
	background-color:#bfa;
}
  • 设置鼠标移入到tr后改变颜色
tr:hover{
	background-color:#ff0;
}

长表格:
  当表格非常长时可以将表格分成三个部分,HTML中为我们提供了三个标签:

  • thead: 表头
  • tbody:表格主体
  • tfoot: 表格底部

  这三个标签的作用,就是用来区分表格的不同部分;他们都是table的子标签;都需要总结写到table中,tr需要卸载这些标签当中。

  如果表格中没有写tbody,浏览器会自动在表格中添加tbody;并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素,通过table > tr 无法选中行;需要通过tbody > tr。

利用表格同时解决高度塌陷问题和父元素与子元素操作外边距重叠问题:

.clearfix:before,
.clearfix:after{
	content:"";
	display:table;
	clear:both;
}


表单:

  表单的作用就是用来将用户信息提交给服务器的;比如:百度的搜索框,登录时填写的用户和密码。使用form标签创建一个表单。

扫描二维码关注公众号,回复: 11377301 查看本文章

  form标签中必须制定一个action属性,该属性指向的是一个服务器的地址;当我们提交表单时将会提交到action属性对应的地址。

  使用form创建的仅仅是一个空白的表单;我们还需要向form中添加不同的表单项。

  • 使用input来创建一个文本框,它的type属性是text。如果希望数据会提交到服务器中,还需要个表单指定一个name属性;name表示提交内容的名字。在文本框中也可以指定value属性值,该值将会作为文本框的默认值显示。
      用户填写的信息会附在URL地址的后面以查询字符串的形式发生给服务器。形式:URL地址?查询字符串。
    例如:
    在这里插入图片描述
    代码如下:
用户名<input type="text" name="username"/>
  • “提交”按钮可以将表单中的信息提交给服务器,使用input创建一个按钮,它的属性值是submit。在提交按钮中可以通过value属性值来指定按钮上的文字。
    代码如下:
<input type="submit" value="注册"/>
  • 密码框可以使用input创建,它的type属性值是password。这样可以使得输入的密码不可见。
    代码如下:
密码<input type="password" name="password"/>
  • 单选按钮,使用input来创建一个单选按钮,它的type属性使用radio;单选按钮通过name伤心难过进行分组,name属性相同时一组按钮。还必须制定一个value属性,这样被选中的表单项的value属性值将会最终提交给服务器。
    代码如下:
性别<input type="radio" name="gender" value="male"/>男
	<input type="radio" name="gender" value="female"/>女
  • 多选框,使用input创建,同一POE属性值是checkbox。
    设置默认选项,可以在希望选项中添加checked="checked"属性.
    代码如下:
爱好<input type="checkbox" name="hobby" value="zq"/>足球
	<input type="checkbox" name="hobby" value="lq"/>篮球
	<input type="checkbox" name="hobby" value="ymq"/>羽毛球
	<input type="checkbox" name="hobby" value="ppq"/>乒乓球
  • 下拉列表,使用select来创建;name属性制定给select,而value属性指定给option。
    设置默认选项,可以通过在option中添加selected="selected"来将选项设置为默认选中。
    当为select添加一个multiple=“multiple”,则下拉列表变为一个多选下拉列表。
    在select中使用optgroup对选项进行分组;同一个optgroup中的选项是一组。
    代码如下:
你喜欢的明星
<select name="star">
	<option value="fab">范冰冰</option>
	<option value="fab">林心如</option>
	<option value="fab">刘亦菲</option>
</select>
  • 使用textarea创建一个文本域。
    代码如下:
自我介绍 <textarea name="info"></textarea>
  • 重置按钮,点击重置按钮后表单中的内容会恢复为默认方式。
    代码如下:
<input type="reset"/>
  • 在表单中可以使用fieldset来为表单进行分组。可以将表单项中的同一组放到一个fieldset中。在fieldset中可以使用legend子标签来指定组名。

除了可以使用input,也可以使用button标签来创建按钮。方式与input类似。

上面的代码片段组合起来可以得到类似如下效果:
在这里插入图片描述

hack

有些特殊的代码我们只希望在某些浏览器中执行,在其他浏览器中不执行,这是可以使用hack来解决问题。
例如:下面代码中的p标签只有在IE6浏览器中才会执行,在其他浏览器中将识别为注释。

<!--[if IE 6]>
	<p>IE6浏览器</p>
<![endif]-->

在if和IE之间还可以写lte(小于等于)等符号;表示特定范围的浏览器。

hack还可以用于兼容多种浏览器,或者是不同浏览器使用不同的样式。可以用hack进行控制,在不同的浏览器中执行不同的代码。

猜你喜欢

转载自blog.csdn.net/HC199854/article/details/104757799
今日推荐