zoukankan      html  css  js  c++  java
  • CSS3秘笈复习:第十一章

    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浏览器可以在复选框或按钮里面设定背景。

  • 相关阅读:
    VIJOS-P1340 拯救ice-cream(广搜+优先级队列)
    uva 11754 Code Feat
    uva11426 GCD Extreme(II)
    uvalive 4119 Always an Interger
    POJ 1442 Black Box 优先队列
    2014上海网络赛 HDU 5053 the Sum of Cube
    uvalive 4795 Paperweight
    uvalive 4589 Asteroids
    uvalive 4973 Ardenia
    DP——数字游戏
  • 原文地址:https://www.cnblogs.com/koto/p/5361248.html
Copyright © 2011-2022 走看看