<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[sinat_37488524的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/sinat_37488524</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; sinat_37488524]]></copyright><item><title><![CDATA[网站变灰是如何实现的]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/106093768</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/106093768</guid><author>sinat_37488524</author><pubDate>Wed, 13 May 2020 11:22:36 +0800</pubDate><description><![CDATA[在全国性的悼念活动，比如清明节、汶川地震周年悼念等，一些网站整体变灰如何实现的呢？话不多说，直接上代码：

html{

   filter: grayscale(100%);

}

下面，详细介绍下该 css 样式。

filter，滤镜属性，是CSS3增加的新属性，用来更改元素的模糊和饱和度。该属性包含多种预设的滤镜函数，其中grayscale(amount) 函数是用来将图像转换为灰度图像，amount 用来值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到...]]></description><category></category></item><item><title><![CDATA[iview的Select组件远程搜索的BUG优化--以及JS函数节流的应用]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/90487872</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/90487872</guid><author>sinat_37488524</author><pubDate>Thu, 23 May 2019 20:59:48 +0800</pubDate><description><![CDATA[1. 业务场景：模糊搜索姓名，点击选择

2. 示例代码



template:
&lt;Select  @on-change='check' filterable remote :remote-method='fuzzySearch' :loading="loading1" placeholder='请输入姓名'&gt;
          &lt;Option v-for="item in...]]></description><category></category></item><item><title><![CDATA[关于display样式、overflow样式、文档流、浮动、定位]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/76163941</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/76163941</guid><author>sinat_37488524</author><pubDate>Wed, 26 Jul 2017 19:56:15 +0800</pubDate><description><![CDATA[一、显示与隐藏
  1 通过display样式 - none隐藏
    语法 - display:none;
    特点 - 隐藏以后，元素原有的位置会被占用，
  2 通过visibility - hidden隐藏  
                   - visible显示（默认值）
    语法 - visibility:hidden;
    特点 - 隐藏以后，元素]]></description><category></category></item><item><title><![CDATA[盒子模型补充]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/76163894</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/76163894</guid><author>sinat_37488524</author><pubDate>Wed, 26 Jul 2017 19:45:05 +0800</pubDate><description><![CDATA[一、内边距(padding)
*padding简写属性：设置四个方向的内边距。
    * padding-top - 上内边距
    * padding-right - 右内边距
    * padding-bottom - 下内边距
    * padding-left - 左内边距
*作用：在实际开发中，可以利用a标签来做按钮的效果。
二、外边距（margin）
*marg]]></description><category></category></item><item><title><![CDATA[前端基础十一 --- 盒子模型]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/70197914</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/70197914</guid><author>sinat_37488524</author><pubDate>Sun, 16 Apr 2017 20:46:28 +0800</pubDate><description><![CDATA[1、盒子模型也称框模型，方便完成网页的布局。盒子分为四个部分：
内容区：content
   内容区的大小可以通过 width和height来进行设置，而整个盒子可见区的大小=内容区的大小+border 的大小+padding的大小
内边距：padding
边框：border：四条边三样式，所有样式都不能继承。
     border有三个样式，可以通过一个属性同时]]></description><category></category></item><item><title><![CDATA[前端基础之十---关于文字和颜色]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/69951163</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/69951163</guid><author>sinat_37488524</author><pubDate>Mon, 10 Apr 2017 17:13:39 +0800</pubDate><description><![CDATA[1、涉及到的长度单位
（1）px像素：这个是我们最常用的单位，我们屏幕就是一个一个像素点构成的，一个像素点就是一个像素。不同的屏幕一个像素的大小是不同的。
（2）百分比：当设置一个百分比时，浏览器会自动根据其父元素的属性来计算大小。优点是，当父元素的属性发生改变时，子元素按照比例相应改变。
        百分比相对的属性不一定（参考W3Cschool）：
         比如：改变子元]]></description><category></category></item><item><title><![CDATA[前端基础之九--列表]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/69942740</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/69942740</guid><author>sinat_37488524</author><pubDate>Mon, 10 Apr 2017 10:14:55 +0800</pubDate><description><![CDATA[1、无序列表ul
在ul两种使用li创建一个列表项。我们可以通过type属性修改列表项的项目符号格式。
    无序列表的项目符号一般不使用，因为不同的浏览器下显示效果不同。
    去掉无序列表的项目符号用  list-style：none

常用：导航栏
2、有序列表ol
有序列表使用ol创建，列表项同样使用li.

注意：有序列表和无序列表的区别就是有序列表使用有序的序号作]]></description><category></category></item><item><title><![CDATA[前端基础八之文本标签]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/69802877</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/69802877</guid><author>sinat_37488524</author><pubDate>Sun, 09 Apr 2017 10:56:34 +0800</pubDate><description><![CDATA[当我们通过a的伪类为超链接设置样式时，它这些选择器的优先级都是一样的。
这样就会带来一个问题，永远会优先显示靠下的样式。
注意，编写a的伪类时，注意顺序。
link>visited>hover>active]]></description><category></category></item><item><title><![CDATA[前端基础七之选择器补充]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/69791818</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/69791818</guid><author>sinat_37488524</author><pubDate>Sun, 09 Apr 2017 10:13:42 +0800</pubDate><description><![CDATA[1、实际上所有的选择器都可以去组合使用，但是要注意的是，我们使用选择器越简单越好，浏览器在解析css选择器时
他是按照从右向左的顺序去解析的，然后还要注意尽量避免使用  *  。
2、css中的样式设置具有继承性。祖先元素的样式会自动应用到他的后代元素中.但是并不是所有的样式都具有继承性，
比如，背景颜色就不能继承，他的默认值是transparent，表示透明。如下图]]></description><category></category></item><item><title><![CDATA[前端基础之六 伪类元素和伪类选择器]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/61191431</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/61191431</guid><author>sinat_37488524</author><pubDate>Fri, 10 Mar 2017 09:59:56 +0800</pubDate><description><![CDATA[1、a的伪类
案例：设置访问过的链接为红色，用户有没有访问过，我们可以通过浏览器的用户历史记录识别。
（1）a:visited   设置已经访问过的链接的文字，但是只能为字体设置颜色，而不能设置其他样式。
（2）a:link  表示没有访问过的正常的链接
（3）a:hover   设置当鼠标移入到超链接上时，超链接的文字的状态
（4）a:active    当鼠标点击超链接（但是不松开）]]></description><category></category></item><item><title><![CDATA[前端基础之五 元素关系及选择器]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/60971165</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/60971165</guid><author>sinat_37488524</author><pubDate>Thu, 09 Mar 2017 21:36:00 +0800</pubDate><description><![CDATA[1、id和class：必须以字母开头，可以有数字。在前端开发中，编写css时，一般用class选择器，尽量避免使用id选择器。
id选择器    #id  。 id是一个元素的唯一标识。
class选择器    .class  。class属性用来为一个元素分组，页面中相同的class属性值可以出现多个，并且一个元素可以拥有多个class.
2、标签中还支持一个属性，叫做title. 
一]]></description><category></category></item><item><title><![CDATA[前端基础之四选择器分类]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/60967928</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/60967928</guid><author>sinat_37488524</author><pubDate>Thu, 09 Mar 2017 20:46:26 +0800</pubDate><description><![CDATA[1、元素选择器：
可以选中页面中所有指定的元素，语法：标签名｛｝，如   p｛｝
2、ID选择器
可以根据id的属性值选中一个元素。语法：#id属性值｛｝，如   #p1｛｝
3、类选择器：
   我们还可以为标签指定一个class属性，class属性用来为标签分类，class属性和id类似，但是class属性在页面中可以设置多个元素。
    类选择器可以根据class属性，选取一组]]></description><category></category></item><item><title><![CDATA[前端基础之三HTML元素分类]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/60967073</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/60967073</guid><author>sinat_37488524</author><pubDate>Thu, 09 Mar 2017 20:43:24 +0800</pubDate><description><![CDATA[一、块元素：永远独占一行，即使他的长度很短。
块元素作用是用来在页面中进行布局，一般情况下块元素可以包含内联元素或块元素，而内联元素不能包含块元素。 
但是a元素特殊，可以包含任何元素，但是不能包含它本身。但是p元素不能包含任何块元素。
1、div元素：对内容没有任何效果，没有任何语义，主要用于对页面进行布局。
2、h1~h6、p、div
二、内联元素（行内元素）：只占用它本身的长度大小]]></description><category></category></item><item><title><![CDATA[前端基础二CSS知识点]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/57958228</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/57958228</guid><author>sinat_37488524</author><pubDate>Mon, 27 Feb 2017 10:33:14 +0800</pubDate><description><![CDATA[1、CSS 层叠样式表（Cascading Style Sheets）
所谓层叠，可以将整个网页想象成一层一层的结构，层次高的覆盖层次低的。
2、三种设置CSS样式的方法：
（1）、可以在标签内部的style属性中设置样式，但是我们直接将样式编写到元素内部中，样式不能复用，而且维护性很差，一般开发中不会使用这种内联样式（也叫行内样式）。
（2）、可以将样式写在head中的style标签中。]]></description><category></category></item><item><title><![CDATA[前端基础一]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/57443894</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/57443894</guid><author>sinat_37488524</author><pubDate>Sun, 26 Feb 2017 20:55:50 +0800</pubDate><description><![CDATA[1、HTML的注释不能嵌套，如以下格式不对：

    
    -->
2、标签必须正确结束，要么成对出现（成对标签），要么就是自结束标签（单标签）。
3、属性必须有值，且值必须加引号，可以是单引号或者双引号。例如：
我是一个段落
4、html中不区分大小写，但是所有的规范里都推荐我们使用小写。
5、标签可以嵌套，但是不能交叉嵌套。如以下格式不对：
我是
color="red]]></description><category></category></item><item><title><![CDATA[前端小白奋斗之路开始了]]></title><link>https://blog.youkuaiyun.com/sinat_37488524/article/details/57400171</link><guid>https://blog.youkuaiyun.com/sinat_37488524/article/details/57400171</guid><author>sinat_37488524</author><pubDate>Sun, 26 Feb 2017 09:58:34 +0800</pubDate><description><![CDATA[一向对操作性的东西感兴趣，即使脑子不够使，但静下心来努力还是有希望的，那么，前端小白的奋斗之路就要开始咯。
目前状况：html+css有点基础，但我觉得远远不够，并且做项目的时候缺乏经验，不容易想到简单规范的方法。另外，有接触过数据库和php，但是完全不扎实，只是很表面的东西。
近期目标：（1）html+css还是要多学习、多练习，规范自己的代码格式。
                 （2]]></description><category></category></item></channel></rss>