米尔嘉

菜单

米尔嘉
米尔嘉
发布于 2022-08-29 / 717 阅读
12
0

Joe2.0主题样式美化

#Halo#joe

常用表情

🏝✨⚡️🔨 🐛🚑

❤🥟📕🎻🍡🍏🍊🍇🌞📖🎉🎓⚡ 🔑 📫 🥤 💰⭐️🚀

轮播bubble气泡

<div id="thumbnail_canvas" class="single-thumbnail-card">
        <div class="single-thumbnail">
            <div class="single-image" style="background-image: url(https://minterjia.com/upload/2022/10/1.webp);"></div>
        </div>
        <canvas id="header_canvas"style="position:absolute;bottom:0"></canvas>
</div>	
    
<link rel="stylesheet" href="https://cdn.minterjia.com/love/bubble/css/style2.css" />    
<script src="https://cdn.minterjia.com/love/bubble/js/bubble2.js"></script>

<a class="button" href="https://minterjia.com">米尔嘉</a>

米尔嘉

全边框

全边框

轮播图片

<iframe src="https://cdn.minterjia.com/love/lunbo/index.html" height="420" frameborder="no" border="0" width="100%"></iframe>
.

网盘下载

<joe-cloud type="bd" url="https://pan.baidu.com/s/1JUzwfu8r5GZz84le92EihQ" password="5ghb" title=代码随想录知识星球精华-大厂面试八股文第二版-去密码版></joe-cloud>

bubble气泡

Butterfly 米尔嘉

Butterfly 米尔嘉

Butterfly 米尔嘉 

<div class="tab-item-content active">
  <p>
     <span class="bubble-content" style="color:#868fd7">Butterfly</span>
	   <span class="bubble-notation">
		  <span class="bubble-item" style="background-color:#71a4e3">
			 米尔嘉
		  </span>
	   </span>
  </p>
</div>

最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如 CSS 的 兄弟相邻选择器 例如 h1 + p {margin-top:50px;} flex布局 Flex 是 Flexible Box 的缩写，意为弹性布局 "，用来为盒状模型提供最大的灵活性" transform 变换 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 贝塞尔速度曲线 贝塞尔曲线 (Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋 写法，还有今天刚看到的 clip-path clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

<div class="tab-item-content active">
	<p>最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如 CSS 的
		<span class="bubble-content">兄弟相邻选择器</span>
		<span class="bubble-notation">
			<span class="bubble-item" style="background-color:#71a4e3">
				例如 h1 + p {margin-top:50px;}
			</span>
		</span>
		<span class="bubble-content">flex布局</span>
		<span class="bubble-notation">
			<span class="bubble-item" style="background-color:#ec5830">Flex 是 Flexible
				Box 的缩写，意为弹性布局 "，用来为盒状模型提供最大的灵活性"
			</span>
		</span>
		<span class="bubble-content">transform 变换</span>
		<span class="bubble-notation">
			<span class="bubble-item" style="background-color:#1db675">transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
			</span>
		</span>
		<span class="bubble-content">贝塞尔速度曲线</span>
		<span class="bubble-notation">
			<span class="bubble-item" style="background-color:#de4489">贝塞尔曲线
				(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋
			</span>
		</span>写法，还有今天刚看到的
		<span class="bubble-content">clip-path</span>
		<span class="bubble-notation">
			<span class="bubble-item" style="background-color:#868fd7">clip-path
				属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
			</span>
		</span>属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。</p>
</div>

全边框以及自定义颜色

全边框

全边框

全边框

<p class="div-border" style="background-color: #30343f;border: 5px solid #30343f;border-radius: 5px;">  全边框</p>
<p class="div-border" style="background-color: rgba(82,196,26,.1);border: 1px solid #52c41a;border-radius: 2px;">  全边框</p>
<p style="background-color: rgba(82,196,26,.1);border: 1px solid #52c41a;border-radius: 2px;display: block;padding: 10px;">全边框</p>

绿色

红色

黄色

灰色

蓝色

<p class="div-border green">绿色</p>
<p class="div-border red">红色</p>
<p class="div-border yellow">黄色</p>
<p class="div-border grey">灰色</p>
<p class="div-border blue">蓝色</p>

几种好看的css样式

迷幻紫
西瓜红
天空之境
撖榄绿
优雅紫
<div id="zm_mhz"> 迷幻紫</div>
<div id="zm_xgh"> 西瓜红</div>
<div id="zm_tkzj">天空之境</div>
<div id="zm_gll">撖榄绿</div>
<div id="zm_yyz">优雅紫</div>

上标签tip

默认情况

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

<div class="tip">
  <p>默认情况 </p>
</div>
<div class="tip success">
  <p>success</p>
</div>
<div class="tip error">
  <p>error</p>
</div>
<div class="tip warning">
  <p>warning</p>
</div>
<div class="tip bolt">
  <p>bolt</p>
</div>
<div class="tip ban">
  <p>ban</p>
</div>
<div class="tip home">
  <p>home</p>
</div>
<div class="tip sync">
  <p>sync</p>
</div>
<div class="tip cogs">
  <p>cogs</p>
</div>
<div class="tip key">
  <p>key</p>
</div>
<div class="tip bell">
  <p>bell</p>
</div>
<div class="tip fa-atom">
  <p>自定义font awesome图标</p>
</div>

CheckBox

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

<div class="tab-item-content active" id="note-3">
	<div class="checkbox"><input type="checkbox">
		<p>纯文本测试</p>
	</div>
	<div class="checkbox checked"><input type="checkbox" checked="checked">
		<p>支持简单的 <a target="_blank" rel="noopener" href="https://guides.github.com/features/mastering-markdown/">markdown</a>
			语法</p>
	</div>
	<div class="checkbox red"><input type="checkbox">
		<p>支持自定义颜色</p>
	</div>
	<div class="checkbox green checked"><input type="checkbox" checked="checked">
		<p>绿色 + 默认选中</p>
	</div>
	<div class="checkbox yellow checked"><input type="checkbox" checked="checked">
		<p>黄色 + 默认选中</p>
	</div>
	<div class="checkbox cyan checked"><input type="checkbox" checked="checked">
		<p>青色 + 默认选中</p>
	</div>
	<div class="checkbox blue checked"><input type="checkbox" checked="checked">
		<p>蓝色 + 默认选中</p>
	</div>
	<div class="checkbox plus green checked"><input type="checkbox" checked="checked">
		<p>增加</p>
	</div>
	<div class="checkbox minus yellow checked"><input type="checkbox" checked="checked">
		<p>减少</p>
	</div>
	<div class="checkbox times red checked"><input type="checkbox" checked="checked">
		<p>叉</p>
	</div>
	<div class="checkbox"><input type="radio">
		<p>纯文本测试</p>
	</div>
	<div class="checkbox checked"><input type="radio" checked="checked">
		<p>支持简单的 <a target="_blank" rel="noopener" href="https://guides.github.com/features/mastering-markdown/">markdown</a>
			语法</p>
	</div>
	<div class="checkbox red"><input type="radio">
		<p>支持自定义颜色</p>
	</div>
	<div class="checkbox green"><input type="radio">
		<p>绿色</p>
	</div>
	<div class="checkbox yellow"><input type="radio">
		<p>黄色</p>
	</div>
	<div class="checkbox cyan"><input type="radio">
		<p>青色</p>
	</div>
	<div class="checkbox blue"><input type="radio">
		<p>蓝色</p>
	</div>
</div>

tabs

{tabs-pane 标签语法}Butterfly{/tabs-pane} {tabs-pane 配置参数}Butterfly{/tabs-pane} {tabs-pane 样式预览}Butterfly{/tabs-pane} {tabs-pane 示例源码}Butterfly{/tabs-pane} 
<joe-tabs>
  <div class="_tpl">
    {tabs-pane 标签语法}Butterfly{/tabs-pane}
    {tabs-pane 配置参数}Butterfly{/tabs-pane}
    {tabs-pane 样式预览}Butterfly{/tabs-pane}
    {tabs-pane 示例源码}Butterfly{/tabs-pane}
  </div>
</joe-tabs>

message




<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>

github 徽标 ghbdage

  • 基本参数

  • 信息参数

  • 拓展参数

    • <li>基本参数<br><br><object class="ghbdage" style="margin-inline:5px" standby="loading..." data="https://img.shields.io/badge/Butterfly-Theme-orange?logo=&amp;color=orange&amp;link=&amp;"></object><object class="ghbdage" style="margin-inline:5px" standby="loading..." data="https://img.shields.io/badge/Hexo-Frame-orange?logo=hexo&amp;color=orange&amp;link=&amp;"></object></li>
  
  <li>信息参数<br><br><object class="ghbdage" style="margin-inline:5px" title="本站使用JsDelivr为静态资源提供CDN加速" standby="loading..." data="https://img.shields.io/badge/JsDelivr-CDN-orange?logo=jsDelivr&amp;color=abcdef&amp;link=https://metroui.org.ua/index.html&amp;"></object><object class="ghbdage" style="margin-inline:5px" standby="loading..." data="https://img.shields.io/badge/GitHub-Source-orange?logo=GitHub&amp;color=orange&amp;link=https://github.com/&amp;"></object></li>
  <li>拓展参数<br><br><object class="ghbdage" style="margin-inline:5px" title="本站采用双线部署，默认线路托管于Vercel" standby="loading..." data="https://img.shields.io/badge/Vercel-Hosted-orange?logo=Vercel&amp;color=brightgreen&amp;link=https://vercel.com/&amp;style=social&amp;logoWidth=40"></object><object class="ghbdage" style="margin-inline:5px" standby="loading..." data="https://img.shields.io/badge/Vercel-Hosted-orange?logo=Vercel&amp;color=orange&amp;link=&amp;style=social&amp;logoWidth=40&amp;logoColor=violet"></object></li>

    folding

    查看图片测试

    查看默认打开的折叠框

    这是一个默认打开的折叠框。

    查看代码测试
    markdown
    ![](https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)
    查看列表测试
    • haha
    • hehe
    查看嵌套测试
    查看嵌套测试2
    查看嵌套测试3

    hahaha 

    <div class="tab-item-content active" id="folding-3"><details class="folding-tag"><summary>查看图片测试</summary><div class="content"><p><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg" alt="" class="medium-zoom-image"></p></div></details><details class="folding-tag" cyan="" open=""><summary>查看默认打开的折叠框</summary><div class="content"><p>这是一个默认打开的折叠框。</p></div></details><details class="folding-tag" green=""><summary>查看代码测试</summary><div class="content"><figure class="highlight markdown"><div class="highlight-tools "><i class="fas fa-angle-down expand "></i><div class="code-lang">markdown</div><div class="copy-notice"></div><i class="fas fa-paste copy-button"></i></div><table><tbody><tr><td class="code"><pre><span class="line">![](<span class="link">https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg</span>)</span><br></pre></td></tr></tbody></table></figure></div></details><details class="folding-tag" yellow=""><summary>查看列表测试</summary><div class="content"><ul><li>haha</li><li>hehe</li></ul></div></details><details class="folding-tag" red=""><summary>查看嵌套测试</summary><div class="content"><details class="folding-tag" blue=""><summary>查看嵌套测试2</summary><div class="content"><details class="folding-tag"><summary>查看嵌套测试3</summary><div class="content"><p>hahaha <span><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png" style="height:24px" class="medium-zoom-image"></span></p></div></details></div></details></div></details></div>
    博客修改滚动条样式
    Thymeleaf th:incl...

    评论