abstract：感謝老師的指點，通過在絕對定位中添加屬性，表情正常顯示在上方了。雖然樣式是模仿的很像了，但點擊表情在文本框中插入對應表情這個是不是很難實現呢？對之后的課程充滿期待。<!DOCTYPE html><html><head> <meta charset=utf-8" /> <title>無標題文檔</title>
感謝老師的指點，通過在絕對定位中添加屬性，表情正常顯示在上方了。
雖然樣式是模仿的很像了，但點擊表情在文本框中插入對應表情這個是不是很難實現呢？對之后的課程充滿期待。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
.cont{width:500px;height:400px;border:1px solid #777;box-shadow:0px 0px 10px #333;margin:100px auto;padding:5px;}
img{width:80px;height:26px;margin:4px 0px 0px 10px;float:left;}
.cont-top{float:left;margin-left:250px;margin-top:10px;text-align:right;color:#666;}
#text{width:495px;height:320px;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;bottom:38px;left:5px;}
</style>
<script type="text/javascript">
var text,number,amount
window.onload=function(){
text=document.getElementById('text')
number=document.getElementById('number')
butn=document.getElementById('butn')
text.onkeyup=function aaa(){
amount=800-text.value.length
if(amount<0){
number.style.color="red"
}else{
number.style.color="#666"
}
number.innerHTML=amount
}
butn.onclick=function bbb(){
if(amount==800){
alert("您還沒有輸入");
text.focus()
}else if(amount<0){
alert("字數過多,不可以發(fā)布");
text.focus()
}else{
alert("發(fā)布成功")
}
}
aaa();
bbb();
}
</script>
</head>
<body>
<div class="cont">
<img src="http://a2.att.hudong.com/62/03/01300534397568135130033826710.jpg" />
<div class="cont-top">還可以輸入<span id="number">800</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">公開</span>
<input type="button" value="發(fā)布" id="butn" />
</div>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2018-12-17 17:01:34
Teacher's summary：看上去,還不錯喲, 表情列表顯示也正確, 看來對布局基本上掌握了