请大神教一下怎么通过按发布生成已有样式的盒子呀

天才较瘦 2021-08-23 13:59:28

<!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>
	<link rel="stylesheet" href="index.css">
	<script src="index.js"></script>
</head>
<body>

	<div class="wrap">		<!--发布留言-->
		<div class="wrap-head"> <!--上半部分-->
			<div class="head-logo">   <!--小logo-->
				<img src = "食品_橙子.png" width="25px">
			</div>
			<div class="head-text">
				<span>教授牌留言板</span>
			</div>				
			
		</div>
		<div class="warp-content"> <!--文本框-->
			<textarea id="content"  cols="" rows=""   placeholder="请写下您想对女朋友IU说的话吧 ~"
			 class="main-content"></textarea>
			 
		</div>
		

		<div class="warp-footer"> <!--下半部分-->
			<div class="warp-footer-cont">
				<ul>
					<li><img src="表情.png"  alt="" title="表情"/>
						<a href="#">表情</a>
					</li>
					<li><img src="图片.png" alt="" title="图片" />
						<a href="#">图片</a>
					</li>
					<li><img src="aite.png" alt="" title="提到某人"/>
						<a href="#">提到某人</a>
					</li>
					<li><img src="huati.png" alt="" title="话题"/>
						<a href="#">话题</a>
					</li>
					<li><img src="shipin.png" alt="" title="视频"/>
						<a href="#">视频</a>
					</li>
					<li><img src="thunderbolt.png" alt="" title="头条文章"/>
						<a href="#">头条</a>
					</li>
					<li><img src="gengduo.png" alt="" title="查看更多"/>
						<a href="#">更多</a>
					</li>
				</ul>
			</div>
			<div class="warp-footer-btn">
				<div class="btn" >
					<a id="ReleaseBtn"  href="javascript:void(0);" class="relese-btn">发布</a>
				</div>
				
			</div>
		</div>

	</div>

	<div id = "show">
		<div>11</div>

	</div>


	<div id="comment" class="COMMENT">	<!--评论区-->
		<div  class="comment">				
			<div class="user-name">天才较瘦:</div>
			
			<div class="comment-delete-btn">
				<span><a id="delete-Btn" href="javascropt:void(0);" class="delete-btn"> X</a></span>
			</div>
			<div id = "comment_text" class="comment-text">
				<p id="commentText" class="">李知恩跟我有婚约在身 大家不要再纠缠她了</p>
			</div>
			<div class="date">
				<script language="javascript"type="text/javascript">
					var date = new Date();
					var year = date.getFullYear();
					var month = date.getMonth() + 1;
					var dates = date.getDate();
					var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
					var day = date.getDay();
					document.write("<td> "+year+"年"+month+"月"+dates+"日 "+ arr[day]+"</td>");
				</script>
			</div>
		</div>	
		
	</div>
	

	<script>
		var content = document.getElementById('content');
		var btn = document.getElementById('ReleaseBtn');
		var head_words = document.getElementById('head_words');
		var p = document.getElementById('commentText');
		var release_able = false;
		var able_count = 140;
		var comment = document.getElementById('comment');
		content.onclick = function() {
			content.style.backgroundColor = "#fff9e8";
			content.style.borderColor = "#ff8100";				
		}


		btn.onclick = function() {
			var show = document.querySelector('show');
            var div = document.createElement('div');
            div.innerHTML = content.value;
			console.log(div.innerHTML);
			show.appendChild(div);
		}
		
	</script>
</body>
</html>

这是html文件的

body {
	margin: 0;
	padding: 0;
}

.wrap {
    border: 1px solid ;
    border-radius: 8px;
    width: 640px;
    height: 210px;
    margin: 20px auto;
    padding: 5px 10px;
    color: #eb7350;
}

.site img{
    float: left;
    width: 50px;
}

.head-logo {
    margin: 5px 5px;
    width: 40px;
    float: left;
}

.head-text {
    font-family:STXingkai;
    float:left;
    margin-left: 190px;
    margin-top: 4px;
}

.head-text span {
	font-size: 25px;
	color: #eb7350;
	text-decoration: none;
}

.head-words {
    font-size: 15px;
	color: #eb7350;
    margin-top: 17px;
    margin-left: 10px;
    float: right;
}

.head-words h6 {
    font-size: 1px;
    margin-bottom: 0;
}

.title-text.title {
	text-align: right;
	color: #eb7350;
	display: block;
	width: 100%;
}

.main-content {
    width: 600px;
    height: 100px;
    padding: 6px 11px;
    border: 1px solid #eab6a7;
    border-radius: 8px;
    outline: none;
}


/*下层设计*/
.warp-footer {
	width: 100%;
	height: 100px;
	margin: 0;
	overflow: hidden;
}
 
.warp-footer-cont {
	width: 83%;
	float: left;
	
}
 
.warp-footer-cont ul li {
	display: inline-block;
	margin-right: 10px;
	cursor: pointer;
}
 
.warp-footer-cont a {
	font-size: 12px;
	color: #333;
	text-decoration: none;
	height: 20px;
	display: block;
	width: 25px;
	float: right;
	line-height: 15px;
    margin-right: 5px;
}
 
.warp-footer-cont a:hover {
	color: #eb947a;
}
 
.warp-footer-cont img {
	width: 25px;
}
 
.warp-footer-btn {
	width: 20%;
	float: right;
	overflow: hidden;
	margin-top: -57px;
}
 
.btn {
	width: 80px;
	height: 40px;
	float: right;
	background-color: #ffc09f;
    margin-top: 3px;
	cursor: pointer;
	border-radius: 8px;
}

.btn a {
	display: block;
	color: #fff;
	width: 80px;
	height: 40px;
	line-height: 37px;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
}



.comment {
    border: 1px solid ;
    border-radius: 8px;
    width: 640px;
    height: 150px;
    margin: 20px auto;
    padding: 5px 10px;
    color: rgb(184, 177, 177);

}

.user-name{
    font-family: STXingkai;
    font-size: 30px;
    color: rgb(57, 56, 56);
}

.comment-text{
    margin-top: -10px;
    margin-left: 20px;
    font-family: Microsoft YaHei;
    color: rgb(24, 23, 23);
    font-size: 20px;
}

.comment-delete-btn{
    cursor: pointer;
}

.delete-btn{
    float: right;
    margin-top: -37px;
    margin-right: 3px;
    font-size: 30px;
    text-decoration: none;
    color: rgb(218, 217, 217);
}

.date {
    float: right;
    margin-top: 40px;
}

这是css文件的

...全文