mdnice怎么制作独立的样式块

这篇“mdnice怎么制作独立的样式块”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“mdnice怎么制作独立的样式块”文章吧。

10年积累的成都网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站设计后付款的网站建设流程，更有惠济免费网站建设让你可以放心的选择与我们合作。

1 问题

使用 mdnice 排版时发现需要独立的样式块怎么办？

2 多级引用解决样式块设计

引用的格式是在符号 > 后面书写文字，文字的内容可以包含链接、图片、粗体和斜体等。

当使用多个 > 符号时，就会变成多级引用，因此可以利用多级引用来做样式块设计

2.1 一级引用

一级引用是最常用的，目前所有主题都有默认实现

一级引用文本如下：

> ### 一级引用
>
> 读一本好书，就是在和高尚的人谈话。**——歌德**
>
> [Markdown Nice最全功能介绍](https://mp.weixin.qq.com/s/lM808MxUu6tp8zU8SBu3sg)
>
> ![这里写图片描述](https://my-wechat.mdnice.com/wechat.jpg)

2.2 二级引用

二级引用文本如下：

>> 扫码即可进入小姐姐个人主页
>>
>> **免费申请认识小姐姐**
>>
>>![](https://gitee.com/guanpengchn/picture/raw/master/2020-9-24/1600956162799-image.png =80%x)
>>
>> 也可以直接联系我咨询详情

二级引用自定义样式：

#nice .multiquote-2 {
  box-shadow: none;
  border-left: none;
}

#nice .multiquote-2 blockquote {
  padding: 20px 30px;
  background-color:rgb(223, 241, 238);
  transform: rotateZ(4deg);
  border: 1px dashed rgba(0,0,0,0.5);
}

#nice .multiquote-2 blockquote p {
  color: rgb(7, 107, 115);
  font-size:14px;
  text-align: center;
  font-weight: bold;
  padding: 5px;
}

#nice .multiquote-2 blockquote strong {
  color: rgb(255, 79, 121);
}

2.3 三级引用

三级引用与二级引用同理，只要愿意，无限增加 > 可以制造 n 级引用

三级引用文本如下：

>>> ### Ta的秘密
>>>
>>> ![](https://gitee.com/guanpengchn/picture/raw/master/2020-9-24/1600956295010-image.png)
>>>
>>> **兴趣爱好**
>>>
>>> 喜欢阅读、旅行、健身

三级引用自定义样式：

#nice .multiquote-3 {
  border-left: none;
  padding: 0;
}

#nice .multiquote-3 blockquote {
  border-left: none;
  padding: 0;
}

#nice .multiquote-3 blockquote blockquote {
  border: 1px dashed rgba(0,0,0,0.5);
  padding: 0 20px;
}

#nice .multiquote-3 blockquote blockquote h4 {
  background: pink;
  color:white;
}

#nice .multiquote-3 blockquote blockquote strong {
  color: rgb(255, 79, 121)
}

效果如下：

Ta 的秘密

兴趣爱好
喜欢阅读、旅行、健身

以上就是关于“mdnice怎么制作独立的样式块”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。

分享标题：mdnice怎么制作独立的样式块
标题路径：http://6mz.cn/article/pjdjsp.html

网站建设知识