展开扇子题目，
#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>
