重整网站

1. 写好回复的人 “@ xxxxxxxx”
2. 通知栏，并且快速跳转到需要的页面。
3. 个人页面，记录自己发送的消息与回复的信息。
4. 以css 上传的图片防止被拉伸拉坏。

下拉的选择下拉的分页的好处。

评论功能的那一栏中的一个小的评论，如果手机端的话，你就很难按住分页，所以选择下拉菜单的圆圈，更为合适。

//圆圈转动的动画
.spin {width:30px;height: 30px;margin: 40px auto;border: 6px solid rgba(0,0,0,.1);border-radius: 50%;border-left-color: #7983ff;animation: spin-rotate 1s linear infinite;
}
@keyframes spin-rotate {form {transform: rotate(0);}to {transform: rotate(360deg);}
}

通知栏

制作通知的时候，我们需要建立一个数据表，来保存所有人发送的信息。
记录的是个人发送的 content 内容 date 时间 user_forum_id 发送的表格，user_forum_discuss_id回复的信息, user_forum_discuss_back_id 回复评论的信息。 name 回复的标题。

user_id 你个人的信息，user_discuss_id他人的信息
只要保存以上信息。 我们就可以查询 根据个人信息与他人信息查询通知栏。

个人发表与回复的信息

我使用的一个数据表格

注意两层的 css 表格 </thread 和 </tbody 要分开 ，并且 </tbody 有单独的导航条 调整一些宽窄才能与上边匹配

        table tbody{display: block;width: 100%;height:  290px;text-align: center;overflow-y: scroll;/*overflow-x: auto;*/}table thead,tbody tr{display: table;width: 100%;table-layout: fixed;text-align: center;}table th{text-align: center;}

     <table  class="table table-striped"><thead><tr><th style="width: 9.9%">#</th><th style="width: 18%">图/picture</th><th >标题/title</th><th>时间/time</th><th style="width: 30%">内容/content</th></tr></thead><tbody id="contentperson1" ></tbody></table>

防止图片被拉坏

我们调整图片的时候 width:50px;height:50px 会导致压坏，并且如果是椭圆形的，那么图片压缩的更难。 object-fit: cover 可以填满外框而不被压缩

//把图片 圆圈的外框 object-fit: cover<div class='media-object img-circle img-responsive' style="margin-left: 2px;width: 50px;height: 50px;overflow: hidden;display: flex;justify-content: center"><img  class='img-responsive' src="img_person_person.jpg"  style='max-width: 100%;height: auto;object-fit: cover' alt="..."></div>