<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Rengarhunt的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Rengarhunt</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Rengarhunt]]></copyright><item><title><![CDATA[JS面对对象实现简单的Tab栏]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/113853444</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/113853444</guid><author>Rengarhunt</author><pubDate>Thu, 18 Feb 2021 21:21:42 +0800</pubDate><description><![CDATA[面对对象的思想实现简单的tab栏
案例来自黑马程序员教学资源：https://www.bilibili.com/video/BV1Kt411w7MP?p=11
tab.js
var that;


class Tab {

    constructor(id) {
        that = this;
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
]]></description><category></category></item><item><title><![CDATA[CSS与JS学习案例（17）：网易云音乐轮播图]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/111167787</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/111167787</guid><author>Rengarhunt</author><pubDate>Mon, 14 Dec 2020 14:32:13 +0800</pubDate><description><![CDATA[网易云音乐官网点这里
原版：

自己做的：

和原版相比，没有切换图片时的渐隐渐显效果。
HTML部分：
左右箭头图标：阿里巴巴矢量图标库
下方选中的白色圆点使用JS自动添加
&lt;div class="container"&gt;
        &lt;div class="bgbox"&gt;&lt;/div&gt;
        &lt;div class="picbox"&gt;
            &lt;div class="pic"&gt;
                &lt;d]]></description><category></category></item><item><title><![CDATA[CSS学习案例（16）：网易云音乐导航栏]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110931596</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110931596</guid><author>Rengarhunt</author><pubDate>Wed, 09 Dec 2020 17:51:48 +0800</pubDate><description><![CDATA[网易云音乐官网点这里
原版：

自己做的：

写的代码还是有些粗糙，细节方面需要提高；原版只要选中块就可以跳转，而自己做的需要选中文字才可以；还有就是我的网易云logo做的并不完美，在下方空白处也能点击到logo。
	&lt;div class="container"&gt;
        &lt;div class="top"&gt;
            &lt;div class="content"&gt;
                &lt;div class="logo"&gt;
    ]]></description><category></category></item><item><title><![CDATA[CSS学习案例（15）：图标展开效果]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110846411</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110846411</guid><author>Rengarhunt</author><pubDate>Mon, 07 Dec 2020 22:25:06 +0800</pubDate><description><![CDATA[&lt;div class="container"&gt;
        &lt;div class="tool"&gt;
            &lt;span class="iconfont iconxiangji" id="#"&gt;&lt;/span&gt;
            &lt;span class="iconfont iconwendang" id="#"&gt;&lt;/span&gt;
            &lt;span class="iconfont iconqi..]]></description><category></category></item><item><title><![CDATA[CSS学习案例（14）：下拉导航菜单]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110752292</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110752292</guid><author>Rengarhunt</author><pubDate>Sun, 06 Dec 2020 19:47:06 +0800</pubDate><description><![CDATA[&lt;div class="container"&gt;
        &lt;nav class="menu"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;
                    &lt;a href="#"&gt;About Me&lt;/a&gt;
              ..]]></description><category></category></item><item><title><![CDATA[CSS学习案例（13）：3D卡图库旋转]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110711877</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110711877</guid><author>Rengarhunt</author><pubDate>Sat, 05 Dec 2020 19:16:00 +0800</pubDate><description><![CDATA[&lt;div class="box"&gt;
        &lt;div style="--i:1"&gt;&lt;img src="/img/08E724F95B8A3381E7AF0460B8667CB8.jpg" &gt;&lt;/div&gt;
        &lt;div style="--i:2"&gt;&lt;img src="/img/95ACF74AB0E3067CA55FF4D791A2F883.jpg" &gt;&lt;/div&gt;
        &lt;div st..]]></description><category></category></item><item><title><![CDATA[CSS学习案例（12）：3D卡片翻转]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110671174</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110671174</guid><author>Rengarhunt</author><pubDate>Fri, 04 Dec 2020 19:15:18 +0800</pubDate><description><![CDATA[&lt;div class="container"&gt;
        &lt;div class="one"&gt;
            &lt;div class="contents"&gt;
                &lt;h1&gt;Else&lt;/h1&gt;
                &lt;span&gt;Queen of Arendelle&lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
   ..]]></description><category></category></item><item><title><![CDATA[CSS学习案例（11）：3D堆叠图片ui布局特效]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110561000</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110561000</guid><author>Rengarhunt</author><pubDate>Thu, 03 Dec 2020 19:05:02 +0800</pubDate><description><![CDATA[&lt;div class="container"&gt;
        &lt;div class="food-card"&gt;
            &lt;div class="pic"&gt;
                &lt;img src="https://www.17sucai.com/preview/1424582/2020-07-03/dz/img/1.jpg" alt="Pizza"&gt;
            &lt;/div&gt;
            &lt..]]></description><category></category></item><item><title><![CDATA[CSS学习案例（10）：动态搜索框]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110451491</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110451491</guid><author>Rengarhunt</author><pubDate>Tue, 01 Dec 2020 20:42:55 +0800</pubDate><description><![CDATA[图标：阿里巴巴矢量图标库
&lt;div class="search-box"&gt;
        &lt;input class="serach-txt" type="text" name="" placeholder="Type to search"&gt;
        &lt;a class="search-btn" href="#"&gt;&lt;svg t="1606822073464" class="icon" viewBox="0 0 1024 1024" version="1.1".]]></description><category></category></item><item><title><![CDATA[CSS学习案例（9）：荧光边框]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110406925</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110406925</guid><author>Rengarhunt</author><pubDate>Mon, 30 Nov 2020 21:27:06 +0800</pubDate><description><![CDATA[&lt;div class="box"&gt;
        &lt;h1&gt;jQuery&lt;/h1&gt;
        &lt;p&gt;click() 方法是当按钮点击事件被触发时会调用一个函数。
            该函数在用户点击 HTML 元素时执行。
            当点击事件在某个 &amp;lt;p&amp;gt; 元素上触发时，隐藏当前的 &amp;lt;p&amp;gt; 元素:&lt;/p&gt;
        &lt;p&gt;dblclick()
  .]]></description><category></category></item><item><title><![CDATA[CSS学习案例（8）（二）：炫彩流光按钮]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110340241</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110340241</guid><author>Rengarhunt</author><pubDate>Sun, 29 Nov 2020 17:40:04 +0800</pubDate><description><![CDATA[&lt;a href="#"&gt;Button&lt;/a&gt;

*{margin: 0;padding:0;}
body{
    height: 100vh;width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}
a{
    padding: 12px 35px;
    text-decoration: none;
    fo.]]></description><category></category></item><item><title><![CDATA[CSS学习案例（8）（一）：闪亮按钮]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110321604</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110321604</guid><author>Rengarhunt</author><pubDate>Sun, 29 Nov 2020 16:09:01 +0800</pubDate><description><![CDATA[&lt;a href="#"&gt;闪亮按钮&lt;/a&gt;
    &lt;a href="#"&gt;闪亮按钮&lt;/a&gt;

*{margin: 0;padding:0;}
body{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

a{
    position: r..]]></description><category></category></item><item><title><![CDATA[CSS学习案例（7）：聚光灯]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110288241</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110288241</guid><author>Rengarhunt</author><pubDate>Sat, 28 Nov 2020 17:50:08 +0800</pubDate><description><![CDATA[图标获取：阿里巴巴矢量图标库
	&lt;div class="logo"&gt;
        &lt;svg t="1606555264232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="595" width="200" height="200"&gt;&lt;path d="M512 1024C229.2224 1024 0 794.7776 0 512 0 .]]></description><category></category></item><item><title><![CDATA[CSS入门案例（6）：图形变换]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110244555</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110244555</guid><author>Rengarhunt</author><pubDate>Fri, 27 Nov 2020 19:44:08 +0800</pubDate><description><![CDATA[&lt;div class="box"&gt;
        &lt;p&gt;Elsa&lt;/p&gt;
        &lt;h1&gt;&lt;/h1&gt;
    &lt;/div&gt;

		*{margin: 0;padding: 0;}
        .box{
            height: 309.29px;width: 400px;
            margin: 100px auto;
            position: relative;
  ..]]></description><category></category></item><item><title><![CDATA[CSS入门案例（5）：垂直手风琴]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110201773</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110201773</guid><author>Rengarhunt</author><pubDate>Thu, 26 Nov 2020 19:34:19 +0800</pubDate><description><![CDATA[&lt;div class="box"&gt;
        &lt;div class="bb" id="b1"&gt;
            &lt;a href="#b1"&gt;标题&lt;/a&gt;
            &lt;span&gt;&lt;/span&gt;
            &lt;p&gt; 
                块级元素&lt;br&gt;
                设置display:block就是将元素显示为块级元素
          ..]]></description><category></category></item><item><title><![CDATA[CSS入门案例（4）：折扇]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110139878</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110139878</guid><author>Rengarhunt</author><pubDate>Wed, 25 Nov 2020 18:43:57 +0800</pubDate><description><![CDATA[&lt;div class="box"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
      ..]]></description><category></category></item><item><title><![CDATA[CSS入门案例（3）：太极图旋转]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110096649</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110096649</guid><author>Rengarhunt</author><pubDate>Tue, 24 Nov 2020 21:12:06 +0800</pubDate><description><![CDATA[&lt;div class="bigbox"&gt;
        &lt;div class="bbbox"&gt;&lt;/div&gt;
        &lt;div class="bwbox"&gt;&lt;/div&gt;
        &lt;div class="sbbox"&gt;&lt;/div&gt;
        &lt;div class="swbox"&gt;&lt;/div&gt;
        &lt;div class="lbbox"&gt;&lt;/div&g..]]></description><category></category></item><item><title><![CDATA[CSS入门案例（2）：立方体旋转]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/110007232</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/110007232</guid><author>Rengarhunt</author><pubDate>Mon, 23 Nov 2020 20:45:35 +0800</pubDate><description><![CDATA[&lt;div class="box"&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
            &lt;li&gt;&lt;/li&gt;
       ..]]></description><category></category></item><item><title><![CDATA[CSS入门案例（1）：实现等待Loading效果]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/109906608</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/109906608</guid><author>Rengarhunt</author><pubDate>Sat, 21 Nov 2020 20:05:55 +0800</pubDate><description><![CDATA[&lt;div class="loadbox"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="loadbox"&gt;
        &lt;p&gt;&lt;/p&gt;
        &lt;p&gt;&lt;/p&gt;
        &..]]></description><category></category></item><item><title><![CDATA[html/css 锚点链接]]></title><link>https://blog.youkuaiyun.com/Rengarhunt/article/details/109602070</link><guid>https://blog.youkuaiyun.com/Rengarhunt/article/details/109602070</guid><author>Rengarhunt</author><pubDate>Tue, 10 Nov 2020 16:57:26 +0800</pubDate><description><![CDATA[锚点链接：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
什么是锚点：定位器
不跨页锚点
设置锚点链接的方法：
&lt;标记 id="命名锚记名"&gt;&lt;/标记&gt;
&lt;a href="#命名锚记名称"&gt;&lt;/a&gt;

例子：
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &]]></description><category></category></item></channel></rss>