博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3秘笈复习:第十一章
阅读量:6204 次
发布时间:2019-06-21

本文共 1292 字,大约阅读时间需要 4 分钟。

1.text-align与vertical-align:

text-align控制水平方向的定位,关键字是left、right、center和justify。

vertical-align控制垂直方向的定位,关键字是top、baseline、middle或bottom。

两者的区别是,vertical-align不会被继承,因此只能直接用到<th>和<td>标签上。

2.控制表格单元之间的空格:CSS提供了border-spacing属性来控制这条间隙。将该属性应用到表格本身,并且如果希望删除浏览器通常会在单元格之间显示的那部分空格,则可以将border-spacing的值设置为0:

table{    border-spacing:0;}

3.消除双边框:一个单元格的底部边框与下一个单元格的顶部边框叠加在一起,产生了一条比border值粗两倍的直线。消除双边框的最好办法是利用border-collapse属性。它接受两个值:separate和collapse。collapse选项则消除了单元间隔和双边框。

注意:如果将border-collapse属性值设置为collapse,border-spacing就将不起作用。

4.圆角:border-radius属性可以给表格添加圆角。

注意:如果将border-collapse属性设置为collapse,border-radius将不起作用。

5.给行和列定义样式:

通过nth-of-type选择器可以给奇数行和偶数行添加不同的颜色样式:

tr:nth-of-type(odd){background-color:red;}tr:nth-of-type(even){background-color:blue;}

6.HTML提供了<colgroup>标签和<col>标签,分别表示一组组列和个别的列。表格中的每一行都包含一个<col>标签。

7.隐藏空白的单元格:在表格样式中添加:empty-cells:hide可以隐藏空白的单元格。但是使用了border-collapse属性值为collapse,浏览器将会忽略empty-cells属性。

8.html的表单元素

fieldset

<fieldset>标签用来集中相关的表单问题

legend

<legend>标签就在<fieldset>标签的html代码之后,它给一组域提供一个标签。

text fields

<input type=”text”>、<textarea>标签都是在表单中创建文本框。这些标签允许在你的浏览器上进行统一的控制。

buttons

表单按钮,让访问者提交表单、重填内容,或者触发一些其他的动作。

drop-down menus

对于<select>标签创建的下拉菜单,也可以在一定程度上定义样式。

checkbox和radio button

大部分浏览器都不允许对这些元素设定格式,但是Opera浏览器可以在复选框或按钮里面设定背景。

转载于:https://www.cnblogs.com/koto/p/5361248.html

你可能感兴趣的文章
软件工程
查看>>
【天道酬勤】 腾讯、百度、网易游戏、华为Offer及笔经面经(转)
查看>>
Validate Binary Search Tree(DFS)
查看>>
go语言log包的学习(log,Logger)
查看>>
java设计模式案例详解:观察者模式
查看>>
angularJS-checkbox
查看>>
git 常用的命令总结
查看>>
Android 6.0版本以后运行时权限提醒
查看>>
LVM&RAID
查看>>
LeetCode – Refresh – Find Peak Element
查看>>
windows2008r2环境双实例安装mysql5.6
查看>>
AVPlayerViewController视频播放器
查看>>
玩转VIM编辑器-自动补全
查看>>
事件委托
查看>>
MATLAB数据处理快速学习教程
查看>>
I00002 打印九九乘法表
查看>>
I00010 打印1到输入数之间的回文数
查看>>
HDU2106 decimal system
查看>>
用hexo在github上搭建自己的静态博客
查看>>
关系运算
查看>>