!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" title微博发布/title link rel="stylesheet" href="../CSS/微博发布模拟案例.css" script src="../JS/code.jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微博发布</title>
<link rel="stylesheet" href="../CSS/微博发布模拟案例.css">
<script src="../JS/code.jquery.com_jquery-3.7.1.js"></script>
<script src="../JS/微博发布模拟案例.js"></script>
</head>
<body>
<div class="box" id="weibo">
<div class="title"><i>微博发布</i></div>
<textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
</body>
</html>* {
padding: 0;
margin: 0;
}
body {
padding: 200px;
}
a {
text-decoration: none;
color: black;
font-weight: bolder;
}
ul {
list-style: none;
width: 750px;
max-height: 720px;
overflow: hidden;
li {
background: #fbe1f0;
border-radius: 18px;
width: 750px;
margin: 10px 0;
display: none;
padding: 0 40px;
box-sizing: border-box;
line-height: 60px;
font-size: 24px;
word-wrap:normal;
a {
float: right;
}
}
}
.box {
width: 800px;
height: 400px;
}
.txt {
width: 750px;
outline-color: #81dfe4;
border: pink 2px solid;
background:#daf7f8;
font-size: 24px;
padding: 10px 20px;
word-wrap:normal;
box-sizing: border-box;
resize:none;
border-radius: 12px;
}
.title{
font-size: 32px;
text-align: center;
margin-bottom: 20px;
}
button{
border:solid 1px black;
background-color: #fff;
width:60px;
height: 30px;
font-size: 18px;
padding: 2px;
box-sizing: border-box;
}$(function () {
$(".btn").on("click", function () {
var li = $("<li></li>");
if ($(".txt").val() !="") {
li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
$("ul").prepend(li);
} else {
alert("发布内容不能为空!");
}
$("li").slideDown();
$(".txt").val("");
});
$("ul").on("click", "a", function () {
$(this)
.parent()
.slideUp(function () {
$(this).remove("li");
});
});
});