css
* {
margin: 0;
padding: 0;
font-family: "Arial";
}
ul,
li {
list-style: none;
}
.bbs {
margin: 0 auto;
width: 600px;
position: relative;
}
header {
padding: 5px 0;
border-bottom: 1px solid #cecece;
}
header span {
display: inline-block;
width: 220px;
height: 50px;
color: #fff;
background: #009966;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 50px;
border-radius: 8px;
cursor: pointer;
}
.post {
position: absolute;
background: #ffffff;
border: 1px #cccccc solid;
width: 500px;
left: 65px;
top: 70px;
padding: 10px;
font-size: 14px;
z-index: 999999;
display: none;
}
.post .title {
width: 450px;
height: 30px;
line-height: 30px;
display: block;
border: 1px #cecece solid;
margin-bottom: 10px;
}
.post select {
width: 200px;
height: 30px;
}
.post .content {
width: 450px;
height: 200px;
display: block;
margin: 10px 0;
border: 1px #cecece solid;
}
.post .btn {
width: 160px;
height: 35px;
color: #fff;
background: #009966;
border: none;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 35px;
border-radius: 8px;
cursor: pointer;
}
.bbs section ul li {
padding: 10px 0;
border-bottom: 1px #999999 dashed;
overflow: hidden;
}
.bbs section ul li div {
float: left;
width: 60px;
margin-right: 10px;
}
.bbs section ul li div img {
border-radius: 50%;
width: 60px;
}
.bbs section ul li h1 {
float: left;
width: 520px;
font-size: 16px;
line-height: 35px;
}
.bbs section ul li p {
color: #666666;
line-height: 25px;
font-size: 12px;
}
.bbs section ul li p span {
padding-right: 20px;
}
.delbtn {
width: 60px;
height: 30px;
color: #fff;
background: #009966;
border: none;
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 30px;
border-radius: 8px;
margin-left: 20px;
}
代码块
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>论坛</title>
<link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
<header>
<span onclick="add()">我要发帖</span>
</header>
<section id="main">
</section>
<div class="post">
<input class="title" placeholder="请输入标题(1-50个字符)">所属版块:
<select>
<option>请选择版块</option>
<option>Python交流专区</option>
<option>Java交流专区</option>
<option>Web交流专区</option>
</select>
<textarea class="content"></textarea>
<input class="btn" value="发布" onclick="create()">
<input class="btn" value="关闭" onclick="closing()">
</div>
</div>
</body>
<script>
const postelement = document.getElementsByClassName("post")[0];
function add() {
postelement.style.display = "block";
}
function closing() {
postelement.style.display = "none";
}
function create() {
var title = document.getElementsByClassName("title")[0];
var main = document.getElementById("main");
var liElement = document.createElement("li");
main.appendChild(liElement);
var h1Element = document.createElement("h1");
h1Element.innerHTML = title.value;
var selectElement = title.nextElementSibling;
var selectValue = selectElement.value;
var textAreaElement = selectElement.nextElementSibling;
var textAreaValue = textAreaElement.value;
var spanElement = document.createElement("span");
spanElement.innerHTML = '版块:' + selectValue + ' 内容:' + textAreaValue;
var btnElement = document.createElement('input');
btnElement.setAttribute('type', 'button');
btnElement.setAttribute('name', 'del');
btnElement.setAttribute('class', 'delbtn');
btnElement.setAttribute('value', '删除');
btnElement.setAttribute('onclick', 'del(this)');
var pElement = document.createElement("p");
pElement.appendChild(spanElement);
pElement.appendChild(btnElement);
liElement.appendChild(h1Element);
liElement.appendChild(pElement);
main.insertBefore(liElement, main.firstElementChild);
closing();
}
function del(obj) {
var main = document.getElementById("main");
main.removeChild(obj.parentNode.parentNode);
}
</script>
</html>