js仿微博动态栏功能

知识有限，目前只写了发布动态的功能，没有写兼容，后面再慢慢完善。嘿嘿

效果图：

代码如下：

 
 
 
  body, p, img, ul, li { margin: 0; padding: 0; }
  body { background-image: url("http://cdn.attach.qdfuns.com/notes/pics/201612/07/212742f92tpe2wve095ttp.jpg");}
  li { list-style: none; }
  .box {
   padding-top: 20px;
   margin: 20px auto;
   width: 620px;
   height: 180px;
   position: relative;
   background-color: #ffffff;
   text-align: center;
  }
  .box label {
   font: 18px/18px "微软雅黑";
   color: #cccccc;
   position: absolute;
   top: 60px;
   left: 40px;
   cursor: text;
  }
  .H {
   float: left;
   padding: 5px 0 5px 10px;
   color: #426B80;
   font: 400 16px/16px "宋体";
  }
  textarea {
   padding: 5px;
   border-color: #CCCCCC;
   width: 580px;
   height: 80px;
   resize: none;
   outline:none;
   font: 400 18px "微软雅黑";
   color: #333333;
  }
  #button {
   width: 80px;
   height: 34px;
   display: block;
   background-color: #FFC09F;
   position: absolute;
   top: 148px;
   right: 14px;
   text-align: center;
   line-height: 34px;
   color: #ffffff;
   cursor: pointer;
   
  }
  .dynamic {
   text-align: left;
   padding: 10px 10px;
   width: 580px;
   height: 100%;
  }
  .user {
   position: relative;
  }
  .user img {
   border: solid 1px #CCCCCC;
   vertical-align: top;
  }
  .user .name {
   display: block;
   position: absolute;
   top: 8px;
   left: 60px;
   font: 600 18px/18px "微软雅黑";
  }
  .time{
   display: block;
   position: absolute;
   top: 55px;
   left: 80px;
   font: 500 10px/10px "微软雅黑";
  }
  .dynamic .user {
   margin: 10px 5px 0 10px;
  }
  .dynamic .list {
   font: 500 16px/16px "微软雅黑";
   padding-left: 70px;
  }
 
 


 
  有什么新鲜事想告诉大家？
  
  输入一段话，点发布会有惊喜哦！
  发布
 
 
  2016-12-07 21:20
  
   
   漫步未来
  
  

   
未来的你，一定会感谢现在拼命的自己。
  
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！