html
我还在考虑这里要放什么东西。。。
- 上一个更新小小的翻车了。。。
- 修复在某些特殊情况下不显示卡片的问题
- 修复和某些插件冲突导致不显示卡片的问题
- 新增鼠标点击非卡片区域关闭卡片的功能
- 尝试删除z-index设置
- 在使用指南页面页面增加意见反馈渠道
- 首次更新！
- 重要！原先使用
S键获取单词信息，为了防止按键冲突，新版本将快捷键修改为CTRL+ALT+S - 增加了翻译英文句子的功能，选中文字后使用快捷键
CTRL+ALT+T，将会在左上角显示译文卡片 - 在单词卡片以及搜索结果中增加删除功能
- 修复bug、调整样式
- 竖线横跨了整个窗口
- 小圆点没有和文字对齐
- 小圆点被竖线覆盖了
这是一篇日志。
1.0.3
1.0.2：
使用基本的html、css来实现一个简洁的时间轴
实现方法有很多种，这里只给出此博客所用的方法。
以下图为例，时间轴由大圆、小圆和淡淡的竖线组成
HTML结构
timeline
::before
year
marker //圆点
//此处输入自定义文字
posts
post-link
marker //圆点
content
//此处输入自定义文字圆形
圆形由svg实现：
<svg
class="marker"
//定义css类名
xmlns="http://www.w3.org/2000/svg"
//声明命名空间
width="12"
height="12"
//图形长宽
>
<circle cx="6" cy="6" r="6"></circle>
//circle是一个svg的圆形元素
//cx，cy：圆心的x，y坐标
//r:半径
</svg>数轴
数轴使用了伪元素，伪元素属于css，可以在一个元素中创建拥有特殊性质的元素，伪元素的一种典型的用法就是生成线条
.timeline::before {
content: "";
//必须设置content，否则元素不会显示
position: absolute;
//定位上下文
bottom: -20px;
//底面移动-20px，向下微调20px
height: 100%;
//长度为整个元素块
width: 2px;
//宽度
background-color: rgb(240, 240, 240);
//设置线条颜色
}至此，一个简单的时间轴的骨架就完成了。
目前这个时间轴有以下几点问题
以下是示例代码
//1.
.timeline{
//这是因为将伪元素的position设置了absolute，默认会向上查找最近的static定位的元素
//我们可以将timeline元素作为定位参考
position:relative;
}
//2.
.post-link {
display: flex;
//可以让圆点和文字在同一行
align-items: baseline;
//这种对齐方式可以稍微让圆点回正一点
}
.post-link .marker {
position: relative;
//建立一个新的层叠上下文，让圆点覆盖竖线
left: -2px;
bottom: -2px;
//对圆点位置进行微调
}至此，这个时间轴就建好了，剩下的就是对其他元素进行样式优化就好了
这是一篇指南。