web前端学习--仿QQ空间留言板功能

最新推荐文章于 2021-06-08 16:16:06 发布

VIP文章银色仙女

最新推荐文章于 2021-06-08 16:16:06 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/qq_43685172/article/details/84035156

版权

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

主要技术要点：

css：利用position属性和margin属性实现基本布局。

jq/js：留言板功能使用prepend实现最新的留言在顶部显示。

其中易出错的地方已经在源代码中有注释了，欢迎大家批评指正。

点击打开链接

防QQ空间留言板功能html页面：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>漠丶叹尘的空间</title>     <link rel="icon" sizes="any" mask href="http://qzonestyle.gtimg.cn/qzone/v8/img/Qzone.svg">     <link rel="stylesheet" type="text/css" href="css/qqZone.css"></head><body>    <div class="header">        This is the head nav    </div>    <div class="topInfo">        <span class="edit">编辑</span>     <div class="zoneName">      <h2>漠丶叹尘 的空间</h2>      <p>知我者，谓我心忧。不知我者，谓我何求。</p>     </div>     <div class="support">      <img src="image/support_1.png" alt="赞">      <span class="num">7</span>     </div>     <div class="tips">7人赞过</div>     <!-- bottom nav -->     <div class="top_bottom">        <div class="photo">           <img src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124">           </div>           <div class="uploadphoto">修改头像</div>        <div class="container">           <ul class="section">       <li>主页</li>       <li>日志</li>       <li>相册</li>       <li>留言板</li>       <li>说说</li>       <li>个人档</li>       <li>音乐</li>       <li>更多</li>      </ul>        </div>     </div>    </div>    <!-- 下面实现留言板功能 -->    <div class="mainframe">     <div class="title">留言板</div>     <div class="message">主人寄语</div>     <div class="info">      这是主人留下的寄语~     </div>     <div class="content" contenteditable="true"></div>     <input type="button" name="submit" value="发表" class="subbtn">     <