<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ban__的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ban__</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ban__]]></copyright><item><title><![CDATA[轮播图（样式没调好）]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/123876474</link><guid>https://blog.youkuaiyun.com/ban__/article/details/123876474</guid><author>ban__</author><pubDate>Thu, 31 Mar 2022 16:26:12 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Doc]]></description><category></category></item><item><title><![CDATA[Vue.js安装]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121748483</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121748483</guid><author>ban__</author><pubDate>Mon, 06 Dec 2021 15:50:56 +0800</pubDate><description><![CDATA[直接CDN引入
下载和引入


进入官网：vue.js安装
下载vue.js文件

将下载好的vue.js文件直接复制到自己的项目文件夹下



NPM安装



]]></description><category></category></item><item><title><![CDATA[阿里iconfont字库的使用]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121726454</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121726454</guid><author>ban__</author><pubDate>Sun, 05 Dec 2021 10:54:38 +0800</pubDate><description><![CDATA[方法1：Unicode 引用



选择需要的图标



下载代码，得到压缩包


文件解压后，将iconfont.css导入你的css文件




注意src的路径，在引用的页面找到icon font文件夹中的iconfont.ttf的路径

在html文件中调用（普通标签）


伪元素中使用，在icon.css文件中找


方法2：font-class 引用



和方法1一样下载好字体图标的代码


引用压缩包中的文件—iconfont.css



在demo_index.html文件中查看图标对.]]></description><category></category></item><item><title><![CDATA[JavaScript断点调试的步骤]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121643284</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121643284</guid><author>ban__</author><pubDate>Tue, 30 Nov 2021 21:29:31 +0800</pubDate><description><![CDATA[断点调试是用来观察程序的运行过程，断点就相当于在选择好的语句处停止，经过调试可以看到代码一步步的执行步骤。
使用方法（以for循环举例）




打开网页后，按Fn+f12，选择source（来源）



设置好断点后需要再刷新一下浏览器，才能实现断点调试。





点击调试按钮，可以逐步地观察程序的运行顺序，将鼠标移动到变量上也查看变量此时的值。



经过断点调试我们会发现，for循环的运行步骤。



...]]></description><category></category></item><item><title><![CDATA[点击后明文和密文的切换]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121643209</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121643209</guid><author>ban__</author><pubDate>Tue, 30 Nov 2021 21:25:45 +0800</pubDate><description><![CDATA[实现效果




核心思路



实现代码


    &lt;title&gt;点击后明文和密文的切换&lt;/title&gt;
    &lt;style&gt;
        .box {
            position: relative;
            width: 400px;
            margin: 100px auto;
        }

        em {
            display: inline-block;
     ..]]></description><category></category></item><item><title><![CDATA[循环有规律的精灵图]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121643130</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121643130</guid><author>ban__</author><pubDate>Tue, 30 Nov 2021 21:21:49 +0800</pubDate><description><![CDATA[实现效果
在这里插入图片描述
实现代码

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&g.]]></description><category></category></item><item><title><![CDATA[动态生成表格]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121643049</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121643049</guid><author>ban__</author><pubDate>Tue, 30 Nov 2021 21:19:27 +0800</pubDate><description><![CDATA[实现效果


实现代码

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &.]]></description><category></category></item><item><title><![CDATA[倒计时效果]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121643012</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121643012</guid><author>ban__</author><pubDate>Tue, 30 Nov 2021 21:17:28 +0800</pubDate><description><![CDATA[实现效果



实现代码


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
   ..]]></description><category></category></item><item><title><![CDATA[鼠标移动到指定区域，盒子滑动]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121642799</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121642799</guid><author>ban__</author><pubDate>Tue, 30 Nov 2021 21:08:31 +0800</pubDate><description><![CDATA[实现效果




实现代码



动画函数封装了起来，并且单独写在js文件中，需要引用

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var moveDistance = (target - obj.offsetLeft) / 10;
        var step = Math.ceil(moveDis..]]></description><category></category></item><item><title><![CDATA[模态框的拖拽]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121619830</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121619830</guid><author>ban__</author><pubDate>Mon, 29 Nov 2021 21:16:49 +0800</pubDate><description><![CDATA[实现效果

可以进行拖拽

实现代码

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt.]]></description><category></category></item><item><title><![CDATA[点击图片实现背景的切换]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121613628</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121613628</guid><author>ban__</author><pubDate>Mon, 29 Nov 2021 16:40:47 +0800</pubDate><description><![CDATA[实现效果



实现代码


    &lt;title&gt;点击图片改变背景图片&lt;/title&gt;
    &lt;style&gt;
        li {
            float: left;
            list-style: none;
        }

        li img {
            width: 100px;
            height: 100px;
            margin: 100px auto..]]></description><category></category></item><item><title><![CDATA[鼠标移动到指定行会变色]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121613561</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121613561</guid><author>ban__</author><pubDate>Mon, 29 Nov 2021 16:38:45 +0800</pubDate><description><![CDATA[实现效果



案例分析



实现代码


 &lt;title&gt;鼠标移动到对应行会进行变色&lt;/title&gt;
    &lt;style&gt;
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14p..]]></description><category></category></item><item><title><![CDATA[实现全选和反选]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121613445</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121613445</guid><author>ban__</author><pubDate>Mon, 29 Nov 2021 16:35:43 +0800</pubDate><description><![CDATA[实现效果


案例分析* 实现代码

    &lt;title&gt;重点：表单全选或者取消表单全选&lt;/title&gt;
    &lt;style&gt;
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table .]]></description><category></category></item><item><title><![CDATA[Tab栏的切换]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121613299</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121613299</guid><author>ban__</author><pubDate>Mon, 29 Nov 2021 16:32:40 +0800</pubDate><description><![CDATA[实现效果
当鼠标经过的时候，小区域会有样式变化，并且下面的文字内容也会有相应的变化




案例分析



实现代码


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="..]]></description><category></category></item><item><title><![CDATA[鼠标经过就出现下拉菜单]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121613110</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121613110</guid><author>ban__</author><pubDate>Mon, 29 Nov 2021 16:27:37 +0800</pubDate><description><![CDATA[实现效果



思路分析



实现代码


 &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
..]]></description><category></category></item><item><title><![CDATA[发送短信验证码]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121610621</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121610621</guid><author>ban__</author><pubDate>Mon, 29 Nov 2021 15:15:50 +0800</pubDate><description><![CDATA[实现效果
当点击发送按钮的时候，按钮中的文字变为还剩下多少秒（倒计时），此时按钮是禁用状态，等到时间结束后，按钮又变为发送。


实现代码

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport".]]></description><category></category></item><item><title><![CDATA[JavaScript--发布留言]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/121582604</link><guid>https://blog.youkuaiyun.com/ban__/article/details/121582604</guid><author>ban__</author><pubDate>Sat, 27 Nov 2021 20:09:40 +0800</pubDate><description><![CDATA[实现效果



分析思路



实现代码

    &lt;title&gt;发布留言&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;textarea name="" id="" cols="30" rows="10"&gt;&lt;/textarea&gt;
    &lt;button&gt;发布&lt;/button&gt;
    &lt;ul&gt;&lt;/ul&gt;
    &lt;script&gt;
        //1.事件源--.]]></description><category></category></item><item><title><![CDATA[Ubuntu登录后蓝屏可登录不显示桌面]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/120819730</link><guid>https://blog.youkuaiyun.com/ban__/article/details/120819730</guid><author>ban__</author><pubDate>Mon, 18 Oct 2021 08:58:48 +0800</pubDate><description><![CDATA[Ubuntu登录后蓝屏可登录不显示桌面的解决办法
问题分析
启动 Ubuntu 可以进入登录界面，说明系统是可以运行起来的。没有发生大块的核心数据损坏，linux 系统一般都可以修复，一定要淡定。问题的原因是之前的暴力关机损坏了 Ubuntu 的图形系统配置，导致图形界面无法正常起来。所以就看到能够登录，却只有一片蓝色。 或者桌面文件可见。
问题解决
这次要求助古老的字符界面了。为了“大展拳脚”，先进入字符界面：Ctrl + Alt + F4+Fn（F4有其他功能需要加上Fn)
然后安装相应服务，然后重置它]]></description><category></category></item><item><title><![CDATA[html的标签属性]]></title><link>https://blog.youkuaiyun.com/ban__/article/details/104080933</link><guid>https://blog.youkuaiyun.com/ban__/article/details/104080933</guid><author>ban__</author><pubDate>Fri, 24 Jan 2020 16:22:32 +0800</pubDate><description><![CDATA[:水平线，用来分离界面，可以利用 color 改变颜色
:表格的背景颜色用bgcolor来改变

]]></description><category></category></item></channel></rss>