类似网站发帖效果，但是想设置样式，结果显示不出来，
问题遇到的现象和发生背景
想要做一个网站发帖的效果，但是样式设置不知道，而且不知道怎么显示到网页上？
类似这样的样式
qq了，实在是想不出来了,
问题相关代码，请勿粘贴截图
<div class="inputBox">
<input type="text" placeholder="name" id="xm">
<input type="email" placeholder="email" id="em">
</div>
<input type="text" placeholder="title" class="box" id="bt">
<textarea placeholder="message" name="nr" id="text_area" cols="30" rows="10"></textarea>
<input type="button" class="btn" value="send message" id="send_msg">
</form>
</div>
<div class="box-container">
<div class="box tilt">
<h3> 魔女の旅々 </h3>
<p>  戴着这枚彰显魔女身份的胸针，披着一头灰色秀发，其美貌与才能散发的光芒，
连太阳见了都不由眯起眼睛的美女，究竟是谁呢？<br>           ——そう、私です。</p>
</div>
<div id="scanner">
</div>
</div>
<script type="text/javascript">
let send_msg = document.getElementById("send_msg");
send_msg.addEventListener('click',function () {
var biaoti=document.getElementById("bt").value;
let text_area = document.getElementById('text_area').value;
var xmm=document.getElementById("xm").value;
var emm=document.getElementById("em").value;
var html="";
html=" "+selec+" ";
html+=biaoti+"<br>";
html+=txtara+"<br>";
scanner.innerHTML +=html+"<hr>";
})
运行结果及报错内容
点击按钮后没有变化
我的解答思路和尝试过的方法
我想要达到的结果
把标题，内容以给出的样式显示出来
你题目的解答代码如下：
<div class="inputBox">
<input type="text" placeholder="name" id="xm">
<input type="email" placeholder="email" id="em">
</div>
<input type="text" placeholder="title" class="box" id="bt">
<textarea placeholder="message" name="nr" id="text_area" cols="30" rows="10"></textarea>
<input type="button" class="btn" value="send message" id="send_msg">
</form>
</div>
<div class="box-container">
<div class="box tilt">
<h3> 魔女の旅々 </h3>
<p>  戴着这枚彰显魔女身份的胸针，披着一头灰色秀发，其美貌与才能散发的光芒，
连太阳见了都不由眯起眼睛的美女，究竟是谁呢？<br>           ——そう、私です。</p>
</div>
<div id="scanner">
</div>
</div>
<script type="text/javascript">
let send_msg = document.getElementById("send_msg");
send_msg.addEventListener('click',function () {
var biaoti=document.getElementById("bt").value;
let text_area = document.getElementById('text_area').value;
var xmm=document.getElementById("xm").value;
var emm=document.getElementById("em").value;
var html="";
html+=" "+xmm+" <a href='mailto:"+emm+"'>"+emm+"</a><br>";
html+=biaoti+"<br>";
html+=text_area+"<br>";
document.getElementById("scanner").innerHTML +=html+"<hr>";
})
</script>
如有帮助，望采纳！谢谢!
css样式是这样的
.tilt{
margin: 0 auto;
/border-radius: 50%; 椭圆形显示图片/
transition: transform 2s ease-out;
}
.tilt:hover{
transform: rotateZ(360deg);
}
.about .row .content .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
padding:1rem 0;
}
selec 是什么？ 用来干什么 。报了好几个错 。我补充了一下，selec 不知道干什么的 就 写死了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tilt {
margin: 0 auto;
border-radius: 50%;
transition: transform 2s ease-out;
}
.tilt:hover {
transform: rotateZ(360deg);
}
.about .row .content .box-container {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding: 1rem 0;
}
</style>
</head>
<body>
<div class="inputBox">
<input type="text" placeholder="name" id="xm">
<input type="email" placeholder="email" id="em">
</div>
<input type="text" placeholder="title" class="box" id="bt">
<textarea placeholder="message" name="nr" id="text_area" cols="30" rows="10"></textarea>
<input type="button" class="btn" value="send message" id="send_msg">
</form>
</div>
<div class="box-container">
<div class="box tilt">
<h3> 魔女の旅々 </h3>
<p>  戴着这枚彰显魔女身份的胸针，披着一头灰色秀发，其美貌与才能散发的光芒，
连太阳见了都不由眯起眼睛的美女，究竟是谁呢？<br>           ——そう、私です。
</p>
</div>
<div id="scanner">
</div>
</div>
</body>
<script>
let send_msg = document.getElementById("send_msg");
send_msg.addEventListener('click', function () {
var biaoti = document.getElementById("bt").value;
let text_area = document.getElementById('text_area').value;
var xmm = document.getElementById("xm").value;
var emm = document.getElementById("em").value;
var scanner=document.getElementById("scanner");
var html = "";
var selec="88";
html = " " + selec + " ";
html += biaoti + "<br>";
html += text_area + "<br>";
scanner.innerHTML += html + "<hr>";
})
</script>
</html>