前端HTML+CSS查漏补缺——2021-7月24

表格

列分组

                 <!-- 列分组  -->
                <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;
    }

 

前端HTML+CSS查漏补缺——2021-7月24

上一篇:使用CURL与ElasticSearch服务进行通信


下一篇:js添加获取删除cookie