看到其它博客都有一些很炫酷界面效果,通过搜索发现都是使用html+CSS的方式编写的,所以这篇文章用来收集我看到比较好的markdown的样式,可以存储起来,后面直接CV使用就可以了。
使用方式:在markdown第1行添加link标签,加载CSS样式(使用方式和Html编写
一样)
1
|
<link rel="stylesheet" type="text/css" href="index.css">
|
CSS样式
将下面CSS样式储存起来,和markdown文件放在同一目录下,我这边命名为index.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
*{
margin:0px;
padding:0px;
border:0px
}
/* 代码高亮块 */
.high_light_box{
margin:30px 0;
padding:20px 30px;
border-radius: 5px;
border-left-width: 5px;
border-style:solid;
}
/* 高亮块下的标题 */
.high_light_box > .p_title{
font-weight: 600;
}
/* 绿色高亮块 */
.high_light_box_green{
background-color:#f0f9eb;
border-left-color:#67c23a;
}
/* 蓝色高亮块 */
.high_light_box_blue{
background-color:#ecf5ff;
border-left-color:#409eff;
}
/* 后续更多样式尽情期待... */
|
高亮块
绿色高亮块
TIP
入门后可以尝试推导一下上面的公式,入门前只需懂得如何在 Python 中实现上面公式即可。
1
2
3
4
5
6
|
<div class="high_light_box high_light_box_green">
<!-- 标题 -->
<p class="p_title">TIP</p>
<!-- 正文 -->
<p>入门后可以尝试推导一下上面的公式,入门前只需懂得如何在 Python 中实现上面公式即可。</p>
</div>
|
蓝色高亮块
TIP
入门后可以尝试推导一下上面的公式,入门前只需懂得如何在 Python 中实现上面公式即可。
1
2
3
4
5
6
|
<div class="high_light_box high_light_box_blue">
<!-- 标题 -->
<p class="p_title">TIP</p>
<!-- 正文 -->
<p>入门后可以尝试推导一下上面的公式,入门前只需懂得如何在 Python 中实现上面公式即可。</p>
</div>
|
未完待续… …