类似网站发帖效果，但是想设置样式，结果显示不出来，

Question

问题遇到的现象和发生背景

想要做一个网站发帖的效果，但是样式设置不知道，而且不知道怎么显示到网页上？
类似这样的样式
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>&emsp;&emsp;戴着这枚彰显魔女身份的胸针，披着一头灰色秀发，其美貌与才能散发的光芒，
            连太阳见了都不由眯起眼睛的美女，究竟是谁呢？<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——そう、私です。</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+"&nbsp;&nbsp;";
        html+=biaoti+"<br>";
        html+=txtara+"<br>";


        scanner.innerHTML +=html+"<hr>";



    })

运行结果及报错内容

点击按钮后没有变化

我的解答思路和尝试过的方法

我想要达到的结果

把标题，内容以给出的样式显示出来

Answer 1

你题目的解答代码如下：

        <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>&emsp;&emsp;戴着这枚彰显魔女身份的胸针，披着一头灰色秀发，其美貌与才能散发的光芒，
            连太阳见了都不由眯起眼睛的美女，究竟是谁呢？<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;——そう、私です。</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+"&nbsp;&nbsp;<a href='mailto:"+emm+"'>"+emm+"</a><br>";
        html+=biaoti+"<br>";
        html+=text_area+"<br>";
 
        document.getElementById("scanner").innerHTML +=html+"<hr>";
 
    })
</script>

如有帮助，望采纳！谢谢!