博客园美化相关模块

SimpleMemory风格化主题

https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/Docs/GettingStarted/install

 详细教程可以看这个大佬的https://www.cnblogs.com/6b7b5fc3/p/12729633.html

live2d小人

https://l2dwidget.js.org/docs/index.html

模型预览https://blog.csdn.net/wang_123_zy/article/details/87181892

可通过使用浏览器访问  https://unpkg.com/2D模型全名称@1.0.5/ 来查找对应的模型json地址,如https://unpkg.com/live2d-widget-model-chitose@1.0.5

 https://blog.csdn.net/zadaya/article/details/105720645

使用总结https://www.freesion.com/article/8715586195/

使用文档,参数,API:(github的挂掉了) https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init

input控件+CSS实现折叠文字内容

参考https://www.cnblogs.com/e0yu/p/10480216.html

效果见https://www.cnblogs.com/smileglaze/p/13854538.html

通过label的for属性可以给label中的文字绑定一个有checked属性的input控件的状态(如checkbox、radio等),再通过css的~符号控制checked属性让指定样式切换。

其中需要隐藏的部分的id为hide_text,input控件的id为control,为了显示效果就把它隐藏掉了

#hide_text {display: none;}
#control{display: none;}
#control:checked ~ #hide_text {display: block;}

隐藏了input控件后为了提示读着这段文字可以点击,我们可以使用添加下划线和将文本加粗、改为蓝色等方法。

需要注意的是html中必须让input控件与要隐藏的文本内容处于同一个布局中,如果被<p>或者<div>这样的标志将其隔开,将实现不了效果

<html>
 <head></head>
 <body>
  <p style="margin-left: 30px">
   <span style="text-decoration: underline">
    <strong>
     <span style="color: rgba(51, 102, 255, 1)">
      <label class="nav-btn" for="control">>>>点击查看更多:</label>
     </span>
    </strong>
   </span>
  </p> 
  <div>
   <input id="control" class="nav-con" type="checkbox" name="" /> 
   <ul id="hide_text"> 
    <li>第一段内容 
     <ul> 
      <li>启用活动页</li> 
      <li>优化了等待时间</li> 
     </ul>
    </li>
    <li>第二段内容 
     <ul> 
      <li>我知道了</li> 
      <li>进一步改进</li> 
     </ul>
    </li>
   </ul>
  </div>
 </body>
</html>

  

 

(持续更新..)

原文地址:https://www.cnblogs.com/smileglaze/p/13848850.html