<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[weilai_a的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/weilai_a</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; weilai_a]]></copyright><item><title><![CDATA[前端首屏懒加载]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/122461118</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/122461118</guid><author>weilai_a</author><pubDate>Wed, 12 Jan 2022 19:58:18 +0800</pubDate><description><![CDATA[&lt;title&gt;图片懒加载&lt;/title&gt;
    &lt;style&gt;
        *{
            margin: 0;
            padding: 0;
        }
       #box{
           width: 300px;
           height: 300px;
           margin: 50px auto;
           background: url(./img/3.jpg) ...]]></description><category></category></item><item><title><![CDATA[JS图片切换，焦点对齐，自定义索引的使用]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121931209</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121931209</guid><author>weilai_a</author><pubDate>Tue, 14 Dec 2021 16:56:17 +0800</pubDate><description><![CDATA[js代码


 &lt;script&gt;
        // 获取元素
        var box = document.getElementsByClassName('box')[0],
            ps = box.getElementsByTagName('p'),
            img = box.getElementsByTagName('img')[0],
            btns = box.getElementsByTagName('button'),]]></description><category></category></item><item><title><![CDATA[原生JS计算两个数的和，arguments属性的介绍，求1-100的和。]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121894589</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121894589</guid><author>weilai_a</author><pubDate>Sun, 12 Dec 2021 22:31:56 +0800</pubDate><description><![CDATA[今天在这里首先给大家介绍的是arguments属性，个人感觉这是一个容易被忽略的属性，如果不是工作中确实会用到这个属性，我还真一点印象都没有了。

    介绍这个arguments属性之前先进行一番铺垫，首先来写一下用原生JS计算两个书数的和。


// 求两个数的和
        var sum1 = function(a1,a2){
            console.log(a1+a2)
        }
        sum1(100,200);

这完全没必要解释...]]></description><category></category></item><item><title><![CDATA[JavaScript写选项卡，自定义索引，this的使用]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121878641</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121878641</guid><author>weilai_a</author><pubDate>Sat, 11 Dec 2021 20:20:08 +0800</pubDate><description><![CDATA[首先讲解思路。

1.当前事件触发的时候，想让所有的li都没有背景颜色并且让所有的div都隐藏，然后再让当前点击的这个li有颜色，并让对应的那个div显示

2.涉及到重复的事情必然要循环遍历

借此机会锻炼自己的JS。注意自定义索引和this的使用。


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compat]]></description><category></category></item><item><title><![CDATA[JavaScript数据类型的转换]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121869384</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121869384</guid><author>weilai_a</author><pubDate>Sat, 11 Dec 2021 11:51:07 +0800</pubDate><description><![CDATA[数据类型转换只针对于基本数据类型，复杂数据类型大多数情况下用不到数据类型转换。

其他数据类型转换为数值

Number(数据)

规律：1. true为1，false为0，null为0，undefiend为NaN, 空数组为0，

     2. 引用数据类型转化时先转为字符串，再转为数值。

     3. 只能识别纯数字字符串，可保留一位小数，只能识别1个小数点


 &lt;script&gt;
        console.log(Number('123'));//1...]]></description><category></category></item><item><title><![CDATA[b is not defined报错详解]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121862968</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121862968</guid><author>weilai_a</author><pubDate>Fri, 10 Dec 2021 19:04:26 +0800</pubDate><description><![CDATA[&lt;script&gt;
        var a=100;
        console.log(a);
        console.log(b);
    &lt;/script&gt;

这是引用错误，因为b没有定义而直接引用导致的，解决办法就是先定义b，然后才去引用b。

在开发中经常遇到这类报错，我这里是直接写了代码演示一下，原理很简单，但是在工作中遇到这里报错的情况五花八门，解决报错也是考验一个程序员的重要指标。
...]]></description><category></category></item><item><title><![CDATA[JavaScript操作元素样式]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121796471</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121796471</guid><author>weilai_a</author><pubDate>Wed, 08 Dec 2021 18:19:05 +0800</pubDate><description><![CDATA[.style只能操作行内样式，想要获取style标签里面的样式需要通过window.getComutedStyle(元素).属性，由于这个属性在IE6~8不兼容，所以要进行兼容处理。在IE6~8使用元素.currentStyle.属性

来获取，这两个方法都只能获取样式不能设置。不管是设置还是获取操作的都是行内样式。

设置： 元素.style.样式属性=样式值；

获取： 元素.style.样式属性；

样式的操作

元素.style.cssText="样式属性：样式值；样式属性：样式值"

...]]></description><category></category></item><item><title><![CDATA[JavaScript操作元素的内容]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121795978</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121795978</guid><author>weilai_a</author><pubDate>Wed, 08 Dec 2021 17:19:06 +0800</pubDate><description><![CDATA[规律：从当前元素中获取到的都是字符串

原则：给值就是设置，不给值就是获取

分为3类：

1，操作表单元素内容

设置： 表单元素.value=值；

获取： 表单元素.value;


  &lt;input type="text" id="text1" value=""&gt; 
  &lt;script&gt;
    //   给值就是设置，不给值就是获取
    //   操作表单元素
      var text1=document.getElementById('text1');
   ..]]></description><category></category></item><item><title><![CDATA[JS鼠标各种事件]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121792384</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121792384</guid><author>weilai_a</author><pubDate>Wed, 08 Dec 2021 15:28:00 +0800</pubDate><description><![CDATA[// js三部曲：获取元素，绑定事件，做对应的事
        // 点击事件
        document.getElementById('box1').onclick=function(){
            console.log("点击事件")
        }
        // 双击事件
        document.getElementById('box2').ondblclick=function(){
            console.log('双击事件')
..]]></description><category></category></item><item><title><![CDATA[rem适配方案]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121732951</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121732951</guid><author>weilai_a</author><pubDate>Sun, 05 Dec 2021 20:48:02 +0800</pubDate><description><![CDATA[.less文件




//设置常见的屏幕尺寸，修改里面的html文字大小
//先写一个固定的，这样一打开页面显示的就是这个固定值
html{
    font-size: 50px;
}
//此次划分的分数 15份
//定义一个分数变量
@no:15;
@media screen and (min-width:320px){
     html{
         font-size: 320px / @no; 
     }
}
@media screen and (min...]]></description><category></category></item><item><title><![CDATA[前端布局总结]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121731487</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121731487</guid><author>weilai_a</author><pubDate>Sun, 05 Dec 2021 16:42:30 +0800</pubDate><description><![CDATA[先放张图片，整理内容之后再写




]]></description><category></category></item><item><title><![CDATA[css3有哪些内容]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121731439</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121731439</guid><author>weilai_a</author><pubDate>Sun, 05 Dec 2021 16:39:08 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[a标签的使用和拓展]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121730884</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121730884</guid><author>weilai_a</author><pubDate>Sun, 05 Dec 2021 16:34:57 +0800</pubDate><description><![CDATA[相信学前端的小伙伴一定对a标签很熟悉了，但其实大家普遍会用的就是src属性。今天在这里统一记录一下a标签的所有知识点，希望可以帮助到有需要的人。

相对路径和绝对路径的问题就不在这里过多介绍了。

1.


&lt;a href="https://www.baidu.com/" &gt;百度&lt;/a&gt;

首先就是一个最简单的用法：跳转页面，这也是a标签真正的作用。

2.


 &lt;a href="#"&gt;嘿嘿 &lt;/a&gt;

在href中加一个#。

这是一个空链接，在开发时写静]]></description><category></category></item><item><title><![CDATA[什么是HTML5]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121731275</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121731275</guid><author>weilai_a</author><pubDate>Sun, 05 Dec 2021 16:30:09 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[Grid布局--移动端]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121725408</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121725408</guid><author>weilai_a</author><pubDate>Sun, 05 Dec 2021 11:47:19 +0800</pubDate><description><![CDATA[Grid布局---网格布局

是一种二维布局：水平方向和垂直方向同时存在。

grid布局可以很快的写出这种布局样式，不需要浮动定位套div。无需拆分左右，上下。



概念

容器container:采用网格布局的区域

项目item:容器中采用网格定位的子元素

行row:容器中水平区域

列column:容器中垂直区域

单元格cell: m行  n列  m*n个单元格

网格线gril line:划分网格的线

    水平网格线：行

    垂直网格线：列

正常...]]></description><category></category></item><item><title><![CDATA[前端css盒子绝对居中]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121700166</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121700166</guid><author>weilai_a</author><pubDate>Fri, 03 Dec 2021 16:31:54 +0800</pubDate><description><![CDATA[固定宽高

1，margin负间距+绝对定位定位

2，transform:translate()+绝对定位

3，绝对定位

4，flex布局

5，fixed固定定位









宽高不确定的盒子绝对居中





首先我给大家罗列出来的几种可能性，用到的都是同一种方法。外面的盒子是有宽高的里面的盒子不需要设置宽高。top和bottom取值百分比要相同，left和right的取值百分比要相同。小盒子的大小和形状和百分比有关，也和大盒子的宽高有关。
...]]></description><category></category></item><item><title><![CDATA[flex弹性盒子布局问题，细节处理，jusitify-content属性]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121695443</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121695443</guid><author>weilai_a</author><pubDate>Fri, 03 Dec 2021 11:57:02 +0800</pubDate><description><![CDATA[jusitify-content:弹性子元素在主轴方向的对齐方式

该属性有一个属性值是：space-between,在两者之间分配相同的距离

如果子元素是2的倍数关系：即有8，12，16等个数的子元素，这种情况下该属性是非常好用的。

那如果子元素个数不是2的倍数关系呢，该属性就无法准确分配空白空间了。那这种情况应该怎么办呢可以尝试使用margin-right属性。



给子元素加上margin-right:1%,就可以得到这种效果了。亲测有效。该方法对奇偶数都好用。






...]]></description><category></category></item><item><title><![CDATA[移动端响应式布局--媒体查询]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121683679</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121683679</guid><author>weilai_a</author><pubDate>Thu, 02 Dec 2021 21:43:49 +0800</pubDate><description><![CDATA[概念：一个网站适配所有终端，实现不同屏幕分辨率下的终端网页的不同布局，使用媒体查询针对不同设备宽度进行布局设置。

优点：一站适配所有终端，减少工作量，缩短开发周期。对搜索引擎友好，在每个设备中都能得到较好的展示。

缺点：对老版本浏览器兼容性不好，兼容各个设备工作量大。效率较低，加载更多的样式文件和脚本文件。设计比较难以精确，是一种折中性的设计方案，维护困难。

技术：弹性布局，图片，CSS，media, query等

页面的设计和开发需要根据用户的行为、设备环境进行相应的调整。

通过媒体查询检测不同]]></description><category></category></item><item><title><![CDATA[css清除和重置默认样式]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121643023</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121643023</guid><author>weilai_a</author><pubDate>Tue, 30 Nov 2021 21:18:19 +0800</pubDate><description><![CDATA[/* 将所有标签的内外边距清零 */
        * {
            margin: 0;
            padding: 0
        }
         /* 将em和i的字体不倾斜 */
        em,
        i {
            font-style: normal
        }
         /* 清除自带样式小圆点 */
        li {
            list-style: none
       ...]]></description><category></category></item><item><title><![CDATA[【css写分页】]]></title><link>https://blog.youkuaiyun.com/weilai_a/article/details/121641901</link><guid>https://blog.youkuaiyun.com/weilai_a/article/details/121641901</guid><author>weilai_a</author><pubDate>Tue, 30 Nov 2021 20:28:05 +0800</pubDate><description><![CDATA[]]></description><category></category></item></channel></rss>