🌝 本文主要展示 halo-theme-joe2.0 中的各种样式，方便大家写作的时候进行参考，部分样式可能会在迭代过程中有所变更，请及时关注最新信息。
本文章来自M酷请查看原文章,本文章只是根据我自己的需求改了改
文本元素
标题
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
下划线
今天天气很好，你拨通了女盆友的电话 1300002225
今天天气很好，你拨通了女盆友的电话 ++1300002225++
加粗
她 气喘吁吁 的和你说：我在跑步
她 **气喘吁吁** 的和你说：我在跑步
倾斜
你问她为什么有 啪啪啪 的声音，她和你说：我是穿拖鞋跑步的
你问她为什么有 *啪啪啪* 的声音，她和你说：我是穿拖鞋跑步的
删除线
你明白了，此刻自己头上正顶着个 绿帽子
你明白了，此刻自己头上正顶着个 ~~绿帽子~~
引用
那女孩对你说：你还不如跳蛋。
>那女孩对你说：你还不如跳蛋。
超链接
[=== 高清无码套图 50P ===](https://baidu.com)
段落缩进
$~~~~$有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 ---- 李七毛《我们都不擅长告别》
$~~~~$有些男人就像烤面筋，外表黄黄的，身体圆圆的，说话柔柔的，无害，看上去还非常好吃。可当你吃下去，才知道他绵绵的，并无特别的味道，甚至到你吃完，你都不知道他是用什么做的。 ---- 李七毛《我们都不擅长告别》
居中标题
<joe-mtitle title="牛鞭牛鞭"></joe-mtitle>
代码元素
行内代码
halo-theme-joe2.0
`halo-theme-joe2.0`
代码块
<html>
<head>
<title>标题</title>
</head>
<body>
<p>远上寒山石径斜，白云生处有人家。</p>
</body>
</html>
#Joe {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
min-height: 100vh;
}
列表元素
有序列表
杜蕾斯(durex)的优点如下：
- 耐久（durability）
- 可靠（reliability）
- 优良（excellence）
1. 耐久（durability）
2. 可靠（reliability）
3. 优良（excellence）
无序列表
- 一个女朋友
- 二个女朋友
- 三个女朋友
- N 个女朋友
- 卒
- 一个女朋友
- 二个女朋友
- 三个女朋友
- N 个女朋友
- 卒
任务列表
- 早餐
- 上班
- 午餐
- 锻炼
- 睡觉
- [x] 早餐
- [x] 上班
- [x] 午餐
- [ ] 锻炼
- [ ] 睡觉
表格元素
左对齐
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
| 表头 1 | 表头 2 | 表头 3 |
|:------ |:------ |:------ |
| 内容 1 | 内容 2 | 内容 3 |
居中
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
| 表头 1 | 表头 2 | 表头 3 |
|:------: |:------: |:------: |
| 内容 1 | 内容 2 | 内容 3 |
右对齐
| 表头 1 | 表头 2 | 表头 3 |
|---|---|---|
| 内容 1 | 内容 2 | 内容 3 |
|表头 1|表头 2|表头 3|
|-------:|-------:|-------:|
|内容 1|内容 2|内容 3|
按钮元素
多彩按钮
自定义自己想要的颜色
<joe-abtn color="#66ccff" content="多彩按钮"></joe-abtn>
自定义图标，达 6000+ 图标任你使用
<joe-abtn icon="fa-bell" content="带图标按钮"></joe-abtn>
自定义圆角度数，最大 18px
<joe-abtn radius="12px" content="圆角按钮"></joe-abtn>
搭配在一起任意使用
<joe-abtn color="#409eff" icon="fa-bell" href="#" radius="3px" content="搭配在一起" ></joe-abtn>
便条按钮
便条按钮不能自定义色彩，必须使用一个图标，其他的的和上面的多彩按钮一样
<joe-anote href="#" type="secondary" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="success" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="warning" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="error" content="便条按钮"></joe-anote>
<joe-anote icon="fa-bus" href="#" type="info" content="便条按钮"></joe-anote>
标签按钮
<joe-anote icon="fa-download" href="#" type="success" content="标签按钮"></joe-anote>
网盘按钮
<joe-cloud type="default" url="" password=""></joe-cloud>
<joe-cloud type="360" url="" password=""></joe-cloud>
<joe-cloud type="bd" title="《丛林奇航》HD高清中字" url="#" password="bn6f"></joe-cloud>
<joe-cloud type="ty" url="" password=""></joe-cloud>
<joe-cloud type="ct" url="" password=""></joe-cloud>
<joe-cloud type="wy" url="" password=""></joe-cloud>
<joe-cloud type="github" url="" password=""></joe-cloud>
<joe-cloud type="lz" url="" password=""></joe-cloud>
装饰元素
分割线
跑马灯
<span class="joe_lamp"></span>
进度条
<joe-progress percentage="50%" color="#6ce766"></joe-progress>
彩色虚线
<joe-dotted></joe-dotted>
<joe-dotted startcolor="#1772e8" endcolor="#4cd327"></joe-dotted>
评论后可见
<joe-hide></joe-hide>
头像框
列出了当前主题包含的头像框，方便大家进行选择
emoji 表情
列出一些通用表情元素，更多请 参见这里参见这里
😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷🙁🙂🙃🙄🤐🤑🤒🤓🤔🤕🤠🤡🤢🤣🤤🤥🤧🤨🤩🤪🤫🤬🤭🤮🤯🧐😀😁😂😃😄😅😆😇😈😉😊😋😌😍😎😏😐😑😒😓😔😕😖😗😘😙😚😛😜😝😞😟😠😡😢😣😤😥😦😧😨😩😪😫😬😭😮😯😰😱😲😳😴😵😶😷😸😹😺😻😼😽😾😿🙀🙁🙂🙃🙄
媒体元素
视频播放器
<joe-dplayer src="https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4"></joe-dplyer>
bilibili 视频
<joe-bilibili bvid="BV12h411k7vr"></joe-bilibili>
PDF 预览
<joe-pdf src="https://oniya.cn/halo/%F0%9F%8D%AD%20Joe2.pdf" ></joe-pdf>
网易云歌单
<joe-mlist id="6800335663"></joe-mlist>
网易云单曲
<joe-music id="1303046498"></joe-music>
提示元素
消息提示
<joe-message type="success" content="成功消息"></joe-message>
<joe-message type="info" content="普通消息"></joe-message>
<joe-message type="warning" content="警告消息"></joe-message>
<joe-message type="error" content="错误消息"></joe-message>
注意事项！！！
以上大部分为 webcomponents 组件，且仅在使用 halo-theme-joe2.0 主题时才能生效，请根据实际情况使用。
评论区