当前位置： 移动技术网 > IT编程>网页制作>CSS > 个人博客 Django 评论模块开发总结【三】评论样式实现

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

2020年07月12日  | 移动技术网IT编程  | 我要评论

评论样式实现

个人博客 地址 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
flex兼容性
float兼容性
但是我都用上 GitHub 第三方登陆了，应该不会使用 IE 吧！！！还有就是我请求库没用ajax，而是使用的fetch 这个完全不兼容IE。

废话不多说上代码。

HTML+CSS实现

整体性思想

很多人都说CSS难，主要是繁琐，我认为写布局样式，最主要的是一个整体的思想，从全局出发思考怎么布局。
划分模块
首先最外面大的div， 我是直接复制的那个主题的。
在最大的div顺着往下写。
熟练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

本文地址：https://blog.csdn.net/wgPython/article/details/107272305

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网