蓝桥杯web第三天
- 开源代码
- 2025-09-22 06:42:02
展开扇子题目，
#box:hover #item1 { transform:rotate(-60deg); }
当悬浮在父盒子，子元素旋转
webkit display: -webkit-box：将元素设置为弹性伸缩盒子模型。-webkit-box-orient: vertical：设置伸缩盒子的子元素排列方式为垂直排列。overflow: hidden：隐藏超出元素容器的内容。text-overflow: ellipsis：当文本溢出时，显示省略号。 /* 最多显示两行文本 */ -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>
