1.input标签默认内容

Title

默认内容

111
222
333

男:
女:

广州:
北京:
上海:

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input value="默认内容"/>

    <hr />

    <textarea>默认内容</textarea>

    <hr />

    <select>

        <option>111</option>

        <option>222</option>

        <option selected="selected">333</option>

    </select>

    <hr />

    男: <input type="radio" name="r1" checked="checked"/>

    女: <input type="radio" name="r1"/>

    <hr />

    广州: <input type="checkbox" checked="checked" name="e1">

    北京: <input type="checkbox"  name="e1">

    上海: <input type="checkbox" checked="checked" name="e1">

<body>

CSS自定义属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1[name='a'] {

            color: red;

        }

    </style>

</head>

<body>

    <div class="c1"  name="a">css自定义属性</div>

</body>

</html>

CSS漂浮(之前的形式比较low)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .left {

            float: left;

        }

        .clean {

            background-color: red;

        }

        /*在类clean后边的样式*/

        .clean:after {

            /*在clean类后边加上内容"lll"*/

            content: 'lll';

            /*这个必不可少*/

            clear: both;

            /*显示为块级标签*/

            display: block;

            /*去掉lll占的红色背景*/

            height: 0;

            /*隐藏内容"lll"*/

            visibility: hidden;

        }

    </style>

</head>

<body>

    <div class="clean">

        <div class="left" style="height: 60px;background-color: greenyellow">123</div>

        <div class="left">456</div>

    </div>

    <!--<div class="sanjiao"></div>-->

</body>

</html>

每个标签都有字标签，其中两个是before、after，分别是在其前、后的样式。上篇博客是在两个div下边直接写一个clear:both，这个示例和那个差不多，先加一点字段占用样式(这里是背景色)，然后改为块级、在把占用的样式删除。

CSS之三角形

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .icon {

            display: inline-block;

            border-bottom: 20px solid red;

            border-top: 20px solid transparent;

            border-left: 20px solid transparent;

            border-right: 20px solid transparent;

        }

    </style>

</head>

<body>

    <div class="icon"></div>

</body>

</html>

Title

.icon {
display: inline-block;
border-bottom: 20px solid ;
border-top: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

JS之全选，反选，取消demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script src="jquery-3.1.0.js"></script>

<body>

    <input type="button" onclick="CheckAll();" value="全选"/>

    <input type="button" onclick="CheckReverse();" value="反选"/>

    <input type="button" onclick="CheckCancel();" value="取消"/>

    <table border="1">

        <thead></thead>

        <tbody id="tb1">

            <tr>

                <td>11</td>

                <td><input type="checkbox"/></td>

            </tr>

            <tr>

                <td>22</td>

                <td><input type="checkbox"/></td>

            </tr>

            <tr>

                <td>33</td>

                <td><input type="checkbox"/></td>

            </tr>

        </tbody>

    </table>

<script>

        function CheckAll(){

//            $('#tb1').find(':checkbox').attr('checked','checked')

            $('#tb1').find(':checkbox').prop('checked',true);

        }

        function CheckReverse(){

            //先找到标签,如果选中,取消,未选中,选中

            $('#tb1').find(':checkbox').each(function(){

               // $(this) =  每一个复选框

                if($(this).prop('checked')){

                    $(this).prop('checked',false)

                }else {

                    $(this).prop('checked',true)

                }

            });

        }

        function CheckCancel(){

           // $('#tb1').find(':checkbox').removeAttr('checked');

            $('#tb1').find(':checkbox').prop('checked',false);

        }

</script>

</body>

</html>

巴特西

day 15