这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为:
微博消息效果 *{margin:0;padding: 0;} .warp{ width: 600px; margin:50px auto 0; background-color: #ccc; } #box{ width: 600px; height: 340px; position: relative; font-family: '微软雅黑'; } #box .span1{ position: absolute; font-size: 16px; line-height: 16px; top: 10px; left: 5px; } #box .span2{ position: absolute; font-size: 16px; line-height: 16px; top: 50px; left: 5px; } #title{ position: absolute; width: 460px; height: 20px; line-height: 20px; font-size: 16px; text-indent: 5px; left: 70px; top: 6px; } #text{ position: absolute; width: 460px; height: 250px; resize: none; top: 50px; left: 70px; text-indent: 5px; font-size: 16px; } #box #prompt{ position: absolute; top: 312px; left: 340px; } #prompt1{ position: absolute; top: 312px; left: 340px; display: none; } #send{ position: absolute; height: 25px; width: 60px; line-height: 20px; font-size: 16px; top: 310px; right: 68px; } #news{ list-style: none; width: 490px; margin:10px auto 0px; padding-bottom: 5px; } #news li{ width: 490px; font-size: 14px; overflow: hidden; background-color: #fff; margin-bottom: 5px; position: relative; } #news li h1{ font-size: 16px; line-height: 20px; } #news li p{ text-indent: 5px; clear: left; } #news li span{ position: absolute; top: 0px; right: 0px; cursor: pointer; } #news span:hover{ color: red; } 标题: 内容: 还可以输入200字 你已超出字
这段代码主要运用了一些DOM节点操作的知识,纯属学习之余练手作品,大家可以参考参考。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。



