实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/layui/css/layui.css">
<script src="static/layui/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>新浪微博</title>
<style>
*{padding: 0px;margin:0%;}
a{text-decoration: none;}
body{background: #0d3b6c}
.clear{clear: both;}
.box{background: url(static/images/bg.jpg) no-repeat top center;}
.mc{margin: 0 auto;}
.l{float: left}
.r{float: right;}
.br{border-radius: 50%;}
nav{z-index: 9999;;height: 60px;background: rgba(255, 255, 255, 0.89);border-top: 2px solid #ff6500;position: fixed;top: 0px;width: 100%;}
nav .layui-icon{font-size: 17px;font-weight: bold;padding-right: 3px;}
.header{width: 70%;line-height: 60px;}
.nav_l form{width: 400px;margin-left: 35px;position: relative;}
.nav_l form input{width: 355px;height: 27px;padding-left: 10px;border:none;border-radius: 3px;}
.nav_r a{margin-right: 15px;text-decoration: none;position: relative;}
.nav_r a:hover{color: #ff6500;}
.icon-radius{width: 6px;height: 6px;background: #ff6500;}
.a_span{position: absolute;top:-7px;right:-5px;}
.msg{width: 15px;height: 15px;background:#ff6500;color: #fff;font-size: 12px;text-align: center;line-height: 15px;border-radius: 15%;}
.content{width: 53%;padding: 10px 0px;margin-top: 60px;;background: rgba(6, 50, 98, 0.5)}
.content_l{width: 73%;}
.content_r{width: 25%;margin-left: 1%;}
.content_nav{width: 20%;}
.content_nav a{display: block;color: white;font-size: 14px;font-weight: bold;line-height: 35px;padding-left: 10px;position: relative;text-decoration: none;}
.content_nav a:hover{background: rgba(255, 255, 255, 0.3);}
hr{margin: 10px auto;width: 95%;background: rgba(255, 255, 255, 0.3);}
.content_nav small>a{font-weight:unset;font-size: 12px;}
.content_nav a>span{position:absolute;right:10px;top:5px;}
i{margin-right: 4px;}
#va{width: 35px;background: rgb(87, 127, 179);margin: 5px auto;text-align: center;padding-left: 0;height: 18px;line-height: 18px;border-radius: 5px;cursor: pointer;}
#va span{right: 0;top: 0;}
.content_msg{width: 80%;;}
.content_msg .text{padding: 10px;color: white;margin-top: 0px;position: relative;}
.content_msg>div{background: rgba(7,26,55,0.8);border-radius: 4px;margin-top: 10px;}
.content_msg .text>.textarea{width: 100%;height: 100px;border: 1px solid rgb(87, 127, 179);background: rgba(21, 57, 112, 0.863);border-radius: 5px;margin: 5px 0;resize: none;}
.content_msg .text>p>span{margin-left: 10px;line-height: 30px;}
.content_msg_text_but{border: none;width: 80px;height: 30px;background: #FFB800;border-radius: 3px;}
.message{color:rgba(255,255,255,0.7);margin: 0 25px;padding: 10px 0;}
.use>img{width:50px;height: 50px;border-radius: 50%;margin-left: 10px;}
.msg_content{color: white;margin: 10px 0px;}
.msg_content>p{line-height: 30px;}
.msg_content>img{height:200px;}
.msg_menu{color: #40649D;height: 30px;}
.msg_menu>span{display: inline-block;width:24%;text-align: center;}
.s_b{border-right: 1px solid #40649D}
.user{background: rgba(7,26,55,0.8);text-align: center;border-radius: 4px;}
.user_pic{width: 100%;background: url(static/images/003_s.jpg) no-repeat;border-radius: 4px;color:rgba(255,255,255,0.7);}
.user_pic>img{width: 68px;height: 68px;border-radius: 50%;border:4px solid rgba(255,255,255,0.4);margin-top: 35px; }
.user_pic>ul>li{float: left;width: 33%;margin: 10px 0px;height: 30px;line-height: 15px;}
.lv{background:#ff6500;border-radius: 5px;padding: 1px;}
.emoji_tab{background: white;color: #ccc;border-radius: 5px;padding: 10px;position: absolute;left: 0;display: none;}
.my_emoji1>img,.my_emoji2>img{margin: 1px;width: 35px;height: 35px;}
</style>
</head>
<body>
<div class="box">
<nav>
<div class="header mc">
<div class="nav_l">
<a href="" class="l"><img src="static/images/wb_logo.png" alt=""></a>
<form action="" class="l">
<input type="text" placeholder="大家正在搜:易烊千玺">
<i class="layui-icon layui-icon-search" style="position:absolute;right:55px;"></i>
</form>
</div>
<div class="nav_r r">
<a href="" style="color:#ff6500;"><i class="layui-icon layui-icon-home"></i>首页</a>
<a href=""><i class="layui-icon layui-icon-video"></i>视频 <span class="icon-radius br"></span></a>
<a href=""><i class="layui-icon layui-icon-add-circle-fine"></i>发现</a>
<a href=""><i class="layui-icon layui-icon-theme"></i>游戏
<span class="icon-radius br a_span"></span>
</a>
<a href=""><i class="layui-icon layui-icon-user"></i>名字</a>
<a href=""><i class="layui-icon layui-icon-more-vertical"></i></a>
<a href=""><i class="layui-icon layui-icon-chat"></i>
<span class="msg a_span">13</span>
</a>
<a href=""><i class="layui-icon layui-icon-set"></i></a>
<a href="" style="color:#ff6500;"><i class="layui-icon layui-icon-survey"></i></a>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</nav>
<div class="clear"></div>
<div class="content mc">
<div class="content_l l" >
<div class="content_nav l">
<a href="">首页
<span class="icon-radius br" ></span>
</a>
<a href="">我的收藏</a>
<a href="">我的赞</a>
<hr>
<small>
<a href=""><i class="layui-icon layui-icon-tree"></i>热门微博
<span class="icon-radius br"></span>
</a>
<a href=""><i class="layui-icon layui-icon-video"></i>热门视频
</a>
</small>
<hr>
<small>
<a href=""><i class="layui-icon layui-icon-star"></i>好友圈</a>
<a href=""><i class="layui-icon layui-icon-star-fill"></i>特别关注</a>
<a href=""><i class="layui-icon layui-icon-note"></i>V+微博</a>
<a href=""><i class="layui-icon layui-icon-camera"></i>美图摄影</a>
<a href=""><i class="layui-icon layui-icon-circle"></i>同事</a>
<a href=""><i class="layui-icon layui-icon-circle"></i>同学</a>
<a href=""><i class="layui-icon layui-icon-circle"></i>名人明星</a>
<a id="va">展开
<span class="icon-radius br"></span>
</a>
</small>
<hr>
</div>
<div class="content_msg l">
<div class="text">
<p><b>有什么新鲜事告诉大家？</b><small class="r">因春节要参加各种聚会，女子租个2万的包回老家>> 热门微博</small></p>
<div class="textarea" contenteditable="true"></div>
<p>
<span class="emoji"><i class="layui-icon layui-icon-face-smile-b" style="color: #FED901;"></i>表情</span>
<span><i class="layui-icon layui-icon-video" style="color: rgb(227, 15, 15);"></i>视频</span>
<span><i style="color: #55E30F;">#</i>话题</span>
<span><i class="layui-icon layui-icon-chart"></i>头条文章</span>
<span><i class="layui-icon layui-icon-more"></i></span>
<button class="r content_msg_text_but">发布</button>
<span class="r">公布 <i class="layui-icon layui-icon-down"></i></span>
<div class="clear"></div>
</p>
<div class="emoji_tab ">
<div class="layui-tab">
<ul class="layui-tab-title">
<li class="layui-this"><a href="#set">预设</a></li>
<li><a href="#hot">热门</a></li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show" id="set">
<div class="my_emoji1"></div>
</div>
<div class="layui-tab-item" id="hot">
<div class="my_emoji2"></div>
</div>
</div>
</div>
</div>
</div>
<div class="item_msg">
<div class="message mc">
<div class="use">
<img src="static/images/8.jpg">
<b>某大大</b><small class="date">1分钟前</small>
</div>
<div class="msg_content">
<p>小时候总梦想仗剑走天涯，长大了却无时不想家。在异乡奋斗的你，曾为理想背井离乡，但别忘记家的方向。</p>
<img src="static/images/bg1.jpg" class="mypic">
</div>
</div>
<hr>
<div class="msg_menu">
<span class="s_b"><i class="layui-icon layui-icon-star"></i>收藏</span>
<span class="s_b"><i class="layui-icon layui-icon-share"></i>666</span>
<span class="s_b"><i class="layui-icon layui-icon-reply-fill"></i>1266</span>
<span><i class="layui-icon layui-icon-praise"></i>1000</span>
</div>
</div>
</div>
</div>
<div class="content_r l" style="">
<div class="user ">
<div class="user_pic">
<img src="static/images/8.jpg">
<p>某大大 <i class="layui-icon layui-icon-star-fill"></i> <small class="lv">lv36</small></p>
<ul>
<li class="s_b"><b>308</b><br><small>关注</small></li>
<li class="s_b"><b>188</b><br><small>粉丝</small></li>
<li><b>208</b><br><small>微博</small></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
$(document).ready(function () {
for (let index = 1; index < 60; index++) {
$(".my_emoji1").append("<img src='static/images/f"+index+".png' >");
}
for (let index = 1; index < 60; index++) {
$(".my_emoji2").append("<img src='static/images/h"+index+".png' >");
}
$(".emoji").click(function (e) {
$(".emoji_tab").show();
});
$(".text").mouseleave(function () {
$(".emoji_tab").hide();
});
$(".my_emoji1>img,.my_emoji2>img").on("click", function () {
$(".textarea").append("<img src='"+$(this).attr("src")+"' style='width:30px;height:30px;'>");
// console.log($(this).attr("src"));
});
$(".content_msg_text_but").click(function (e) {
if ($(".textarea").text().length==0) {
alert("请输入内容！");
return false;
}
var date=new Date()
var yy=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();//将日期以指定格式输出
var content=$('.textarea').html()
// $('.text').after($(".item_msg").clone())//复制一个节点包括它的子节点
$('.text').after($('<div class="item_msg br" ><div class="message mc" ><div class="use"><img src="static/images/8.jpg" class="mr"><b> 某大大 </b> <small class="date" style="color:#999">'+yy+'</small></div><div class="msg_content"><p>'+content+'</p></div></div><div class="clear"></div><hr class="hr"><div class="msg_menu"><span class="s_b"><i class="layui-icon layui-icon-star"></i> 收藏</span><span class="s_b"><i class="layui-icon layui-icon-share"></i> 666</span><span class="s_b"><i class="layui-icon layui-icon-reply-fill"></i> 1260</span><span><i class="layui-icon layui-icon-praise"></i> 1000</span></div></div>'))
$('.textarea').html('');
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
