蓝桥杯web第三天

发布于：2025-03-03 ⋅ 阅读:(19) ⋅ 点赞:(0)

展开扇子题目，

#box:hover #item1 {
        transform:rotate(-60deg);
}

当悬浮在父盒子，子元素旋转

webkit

  1. display: -webkit-box：将元素设置为弹性伸缩盒子模型。
  2. -webkit-box-orient: vertical：设置伸缩盒子的子元素排列方式为垂直排列。
  3. overflow: hidden：隐藏超出元素容器的内容。
  4. text-overflow: ellipsis：当文本溢出时，显示省略号。
  5.   /* 最多显示两行文本 */
            -webkit-line-clamp: 2;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="div1">
        <div class="div2">是兄弟就来砍我</div>
        <div class="div3">
            <div class="li1">
                <table>
                    <tbody>
                        <tr>
                            <td rowspan="2">
                                <div class="circle">
                                    天乐
                                </div>
                            </td>
                            <td>
                                18:57
                            </td>
                        </tr>
                        <tr>
                            <td>今天吃点啥？</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="li2">
                <table>
                    <tbody>
                        <tr>
                            <td>18:59</td>
                            <td rowspan="2">
                                <div class="circle">
                                    热巴
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>最近八合里周年庆，咱们去薅羊毛呀</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="li1">
                <table>
                    <tbody>
                        <tr>
                            <td rowspan="2">
                                <div class="circle">
                                    天乐
                                </div>
                            </td>
                            <td>
                                19:01
                            </td>
                        </tr>
                        <tr>
                            <td>行收拾一下走吧，早点去排个号</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="div4">
            <div class="shuru">
                <textarea class="text" id="" placeholder="请输入"></textarea>
            </div>
            <div class="submit" onclick="tijiao()">发送</div>
        </div>
    </div>


    <style>
        body,
        html {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: gray;
        }


        .div1 {
            background-color: white;
            width: 400px;
            height: 460px;
            border-radius: 5px;
        }

        .div2 {
            margin: 0px;
            padding: 10px;
            font-size: 16px;
            font-weight: bolder;

        }

        .div3 {
            border-top: 2px solid gray;
            border-bottom: 2px solid gray;
            padding: 10px;
            height: 500px;
            background-color: white;
        }

        .div4 {
            height: 200px;
            background-color: white;
        }

        .circle {
            width: 50px;
            height: 50px;
            background-color: #3e4ea0;
            border-radius: 50%;
            text-align: center;
            /* vertical-align: middle; */
            line-height: 50px;
            color: #fff;
            font-size: 16px;


        }

        .li2 {
            float: right;
            margin: 20px;
        }

        .div3 .li1 table tbody tr:nth-child(2) td:nth-child(1),
        .div3 .li3 table tbody tr:nth-child(2) td:nth-child(1) {
            padding: 10px;
            background-color: #f2f4f5;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .div3 .li1 table tbody tr:nth-child(1) td:nth-child(1),
        .div3 .li3 table tbody tr:nth-child(1) td:nth-child(1) {
            padding-right: 10px;
        }

        .div3 .li2 table tbody tr:nth-child(1) td:nth-child(2) {
            padding-left: 10px;
        }

        .div3 .li2 table tbody tr:nth-child(2) td:nth-child(1) {
            padding: 10px;
            background-color: #4571ff;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            color: white;
        }

        .div3 .li2 table tbody tr:nth-child(1) td:nth-child(1) {
            float: right;
        }

        table,
        td {
            /* border: 1px solid #000; */
        }

        .shuru {
            padding: 10px;
        }

        .submit {
            margin-top: 40px;
            margin-right: 10px;
            float: right;
            background-color: #4571ff;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 8px;
            padding-bottom: 8px;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>

    <script>
        var div3 = document.querySelector('.div3');
        console.log(div3.innerHTML);

        var text = document.querySelector(".text");

        function tijiao() {
            var add = `<div class="li2">
                <table>
                    <tbody>
                        <tr>
                            <td>18:59</td>
                            <td rowspan="2">
                                <div class="circle">
                                    热巴
                                </div>
                            </td>

                        </tr>
                        <tr>
                            <td>${text.value}</td>
                        </tr>
                    </tbody>
                </table>
            </div>`
            div3.innerHTML = div3.innerHTML + add;
        }
    </script>


</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="div1" onclick="download1()">点击下载美图</div>
    <div class="div2">
        现在是北京时间
    </div>
</body>

<script>

    var div1 = document.querySelector('.div1');

    function download1() {
        div1.innerText = '正在下载'
    }
    var div2 = document.querySelector('.div2');
    setInterval(function () {
        var date = new Date();
        if (date.getSeconds() < 10 && date.getMinutes() < 10) {
            div2.innerText = `当前时间：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时0${date.getMinutes()}分0${date.getSeconds()}秒`
        }
        else if (date.getSeconds() < 10) {
            div2.innerText = `当前时间：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分0${date.getSeconds()}秒`
        }
        else div2.innerText = `当前时间：${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒`

    }, 1000)

</script>

<style>
    .div1 {
        cursor: pointer;
    }

    .div2 {
        font-size: 40px;
    }
</style>

</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布