个人博客 Django 评论模块开发总结【三】评论样式实现

评论样式实现

个人博客 地址 https://www.charmcode.cn/article/2020-07-09_Comment
欢迎评论留言！

本着练习技术的能力，索性就一套全部写完，css咱也会。多写多练就不怕那玩意。

虽然个人博客是扒的这个 博客主题 https://github.com/blinkfox/hexo-theme-matery
但是当时图省事，很多模块就直接省略了。这个博客详情页里面也有博客样式。
地址 http://blinkfox.com/2018/11/24/ruan-jian-she-ji/ruan-jian-cheng-xu-she-ji-yuan-ze/#toc-heading-24

同样也可以右键，把css扒下来，这次自己写，一套流程自己走完。

样式效果

地址 https://www.charmcode.cn/article/2020-07-09_Comment 欢迎留言

兼容性考虑

首先用到了flex弹性盒模型布局，比以前的float浮动简直不知道好用多少。
但是了 flex布局兼容性不如float
参考网址 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex


但是我都用上 GitHub 第三方登陆了，应该不会使用 IE 吧！！！还有就是我请求库没用ajax，而是使用的fetch 这个完全不兼容IE。

废话不多说上代码。

HTML+CSS实现

整体性思想

很多人都说CSS难，主要是繁琐，我认为写布局样式，最主要的是一个整体的思想，从全局出发思考怎么布局。

首先最外面大的div， 我是直接复制的那个主题的。
在最大的div顺着往下写。
熟练flex就像了，这个布局基本没问题。可以参考阮一峰老师的flex骰子布局。
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
还有就是mozilla 的样式文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

一些小坑

比如 textarea 鼠标点击时，默认焦点不在最前面，而是在textarea的点击位置。

<textarea id="veditor" rows="3" cols="20" autofocus placeholder="登录后才能输入(限制100字以内)" name="txt" readonly>

</textarea>

后面才知道，textarea必须得像下面那样， 写在一行才行。

<textarea id="veditor" rows="3" cols="20" autofocus placeholder="登录后才能输入(限制100字以内)" name="txt" readonly></textarea>

聊天气泡效果

上面基本除了布局，没什么css，唯一有的了就是聊天气泡效果了，那个气泡突出来的小三角了 是使用伪类实现的, 也没什么难度。
我是参照以下站点实现的：
https://www.dute.org/css-arrow