表格

列分组

                 <!-- 列分组  -->
                <colgroup>
                    <col span="2" style="background:red;">
                    <col span="2" style="background:yellow;">
                </colgroup>

表格头部斜线

                      <!--斜线分类加给子元素-->
                        <th colspan="2">　　
                            <div class="line">　　
                                <em>日期</em>
                                <span>详情</span>
                            </div>
                        </th>

CSS代码：原理其实是用利用border-top和border-left的交接线。把两条边的宽度设得很大，用边代替格子。

    table{
        /* 隐藏空单元  */
        empty-cells: hide;
        /* 单元格之间只有单线，加了就合并相邻的线了 */
        border-collapse: collapse;
    }
    table .line{
        border-top: 50px solid red;
        border-left: 150px solid blue;
        position: relative;
        color: white;
    }
    table .line em{　　就是为了调整一下里面文字的位置
        position: absolute;
        left: -60px;top: -45px;
        font-style: normal;
    }
    table .line span{　　调整位置
        position: absolute;
        left: -120px;top: -30px;
    }

 

表单

下拉菜单分组 optgroup：用 <optgroup label="group-name"></optgroup> 表示分组的组名

表单内元素分组 fieldset：得到一个大框框，左上角写着登录二字

    <fieldset>
        <legend>登录</legend>
        <p>
            用户名:<input type="text">
        </p>
        <p>
            密码:<input type="password">
        </p>
    </fieldset>

新的表单属性

autofocus自动聚焦、required必填、autocomplete=‘off’ 自动补齐“否”；pattern=‘’ 括号里写的是正则表达式，填入的内容必须满足正则表达式，例如[a-z]{3}意思是只能写3个字母；

新的表单控件，类型
type新增了：email, url, number, range滑动条(min,max,value都用数字表示), date, month, week, search, color, tel, time...

改变控件的样式：

方法一：在input外面包一层div，在input下加一个同级的div用于存放背景图片，把input的透明度变为0避免干扰。

方法二：在input外面包一层 label，在input下加一个同级的div用于存放背景图片，让 input 的display:none。

特殊情况，如果是checkbox类型，就在勾上的时候写  input:checked 的时候，它紧邻的div的变化。这里的做法是用精灵图。改一下图片坐标就可以了。加号就是临近的意思，下一个同级的意思。

    label input:checked+div{
        background: url(./img/checkbox.png) 0 0;
    }