摘要：嘗試了讓表情框在點(diǎn)擊表情按鈕后在上方顯示，用了定位等方法還是會(huì)出現(xiàn)問(wèn)題。在前端課程學(xué)習(xí)完畢后，想嘗試模仿制作點(diǎn)擊浮出的表情框會(huì)半透明輸入框。并置于按鈕上方。<!DOCTYPE html><html><head> <meta charset=utf-8" /> <title>無(wú)標(biāo)題文檔</title> &n
嘗試了讓表情框在點(diǎn)擊表情按鈕后在上方顯示，用了定位等方法還是會(huì)出現(xiàn)問(wèn)題。
在前端課程學(xué)習(xí)完畢后，想嘗試模仿制作點(diǎn)擊浮出的表情框會(huì)半透明輸入框。并置于按鈕上方。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
.cont{width:500px;height:200px;border:1px solid #777;box-shadow:0px 0px 10px #333;margin:10px auto;padding:5px;}
img{width:80px;height:26px;margin:4px 0px 0px 10px;float:left;}
.cont-top{float:left;margin-left:270px;margin-top:10px;text-align:right;color:#666;}
#text{width:495px;height:120px;margin-top:5px;border:1px solid #333;}
.cont #subs1,#subs2,#subs3,#subs4,#subs5{float:left;width:45px;height:30px;line-height:30px;padding-left:34px;margin-top:6px;}
#subs1{background:url(http://ico.ooopic.com/ajax/iconpng/?id=81173.png) no-repeat left center; position:relative;}
#subs2{background:url(http://ico.ooopic.com/ajax/iconpng/?id=81161.png) no-repeat left center;}
#subs3{background:url(http://ico.ooopic.com/ajax/iconpng/?id=81155.png) no-repeat left center;}
#subs4{background:url(http://ico.ooopic.com/ajax/iconpng/?id=81164.png) no-repeat left center;}
#subs5{margin-left:30px;margin-right:5px;color:#666;}
#butn{float:left;width:70px;height:35px;margin-top:5px;border:none;background:#09F;border-radius:5px;}
#subs1 .exp{background:url(http://pic.downyi.com/upload/2018-1/20181151279118210.png) no-repeat;width:493px;height:243px;margin-top:10px;border:1px solid #333;display:none;}
#subs1:active .exp{display:block;position:absolute;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="cont">
<img src="http://a2.att.hudong.com/62/03/01300534397568135130033826710.jpg" />
<div class="cont-top">還可以輸入<span>字</span></div>
<textarea id="text"></textarea>
<span id="subs1">表情<div class="exp"></div></span>
<span id="subs2">圖片</span>
<span id="subs3">視頻</span>
<span id="subs4">話題</span>
<span id="subs5">公開(kāi)</span>
<input type="button" value="發(fā)布" id="butn" />
</div>
</body>
</html>