<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[切图仔的成长史]]></title><description><![CDATA[前端小白的成长记录]]></description><link>https://blog.youkuaiyun.com/BGD150809213</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; BGD150809213]]></copyright><item><title><![CDATA[快速掌握—HTML快速实现自定义Input开关]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/103942290</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/103942290</guid><author>BGD150809213</author><pubDate>Sun, 12 Jan 2020 00:47:08 +0800</pubDate><description><![CDATA[HTML
&lt;input id="customSwitch" type="checkbox" /&gt;
&lt;label for="customSwitch" class="switch"&gt;&lt;/label&gt;

CSS
/* 定义全局变量 */
:root {
  --base_color: rgba(0, 0, 0, 0.25);
  --act_color: #5dc...]]></description><category></category></item><item><title><![CDATA[快速掌握—JS如何实现页面平滑的滚到顶部]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/103932904</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/103932904</guid><author>BGD150809213</author><pubDate>Sat, 11 Jan 2020 01:52:58 +0800</pubDate><description><![CDATA[// 阻力，数值越大，滑动越慢
const drag = 10;
// 滑动到顶部
const scrollToTop = () =&gt; {
// 距离顶部的距离
  const gap = document.documentElement.scrollTop || document.body.scrollTop;
  if (gap &gt; 0) {
    window.reques...]]></description><category></category></item><item><title><![CDATA[前端小白必学系列【border-radius多用法】]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/103917508</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/103917508</guid><author>BGD150809213</author><pubDate>Fri, 10 Jan 2020 00:25:30 +0800</pubDate><description><![CDATA[CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。



【基础知识】
border-radius使用最多的可能就是通过改变圆角来使元素变的圆滑，常用方法可能如下：
border-radius: 4px 4px 4px 4px;
border-radius: 4px;

/* 等...]]></description><category></category></item><item><title><![CDATA[小白式安装node.js]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/98885256</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/98885256</guid><author>BGD150809213</author><pubDate>Thu, 08 Aug 2019 21:29:53 +0800</pubDate><description><![CDATA[安装node.js
根据自己的电脑(mac/windows)下载对应的系统包
【mac】
mac下载.pkg结尾的64位安装包

【window】
win用户可以查看【此电脑】右键【属性】


安装步骤
mac和windows都是一路next到底！！！
此处只展示windows
【步骤一】

【步骤二】
勾选【允许】点击Next

【步骤三】
不需要修改【路径】直接Next

【步骤四】
什么都不...]]></description><category></category></item><item><title><![CDATA[JavaScript类型转换基础篇]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/96760790</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/96760790</guid><author>BGD150809213</author><pubDate>Sun, 21 Jul 2019 20:54:38 +0800</pubDate><description><![CDATA[参考的这篇文章进行的总结+个人理解

基础知识：
1️⃣强制转换有三种类型方式，Number、String、Boolean
2️⃣原始值：5大基础类型值Undefined,Null,Boolean,Number,String
3️⃣复杂值：Object、Function、Array、Date、RegExp
]]></description><category></category></item><item><title><![CDATA[一个文字hover效果的例子（一）]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/96576178</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/96576178</guid><author>BGD150809213</author><pubDate>Sat, 20 Jul 2019 11:56:30 +0800</pubDate><description><![CDATA[一个文字hover效果的例子（一）]]></description><category></category></item><item><title><![CDATA[CSS 为何从右向左解析]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/95733578</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/95733578</guid><author>BGD150809213</author><pubDate>Sat, 13 Jul 2019 11:11:34 +0800</pubDate><description><![CDATA[今天读了一篇探究CSS解析原理的文章，从中学习到了很多的知识，在此写一下个人对CSS为何从右向左解析的简单理解。
渲染过程
首先，解析器的顺序是【从右向左】执行，为什么是【从右向左】执行？这就要说一下浏览器的渲染过程。

上图是webkit浏览器的渲染过程，可以看到HTML和CSS是两条分支，最后在DOM元素生成了DOM树，CSS生成了对应的StyleRules时，两者开始结合，在结合(Attac...]]></description><category></category></item><item><title><![CDATA[【书屋】CSS揭秘]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/95330434</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/95330434</guid><author>BGD150809213</author><pubDate>Wed, 10 Jul 2019 13:54:25 +0800</pubDate><description><![CDATA[本系列指在为了方便能搜到这篇文章的网友能轻松获取到需要的电子书。

介绍
本书是一本注重实践的教程，作者为我们揭示了 47 个鲜为人知的 CSS 技巧，主要内容包括背景与边框、形状、 视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。
本书的读者对象为前端工程师、网页开发人员。
博主有话说
【本章就是交友贴，...]]></description><category></category></item><item><title><![CDATA[【书屋】你不知道的JavaScript]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/95256087</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/95256087</guid><author>BGD150809213</author><pubDate>Tue, 09 Jul 2019 23:50:30 +0800</pubDate><description><![CDATA[本系列指在为了方便能搜到这篇文章的网友能轻松获取到需要的电子书。

介绍
JavaScript语言有很多复杂的概念，但却用简单的方式体现出来（比如回调函数），因此，JavaScript开发者无需理解语言内部的原理，就能编写出功能全面的程序；就像收音机一样，你无需理解里面的管子和线圈都是做什么用的，只要会操作收音机上的按键，就可以收听你喜欢的节目。然而，JavaScript的这些复杂精妙的概念才是...]]></description><category></category></item><item><title><![CDATA[【书屋】JavaScript高级程序设计]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/95239926</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/95239926</guid><author>BGD150809213</author><pubDate>Tue, 09 Jul 2019 21:28:51 +0800</pubDate><description><![CDATA[本系列指在为了方便能搜到这篇文章的网友能轻松获取到需要的电子书。

介绍
本书是JavaScript 超级畅销书的最新版。ECMAScript 5 和HTML5 在标准之争中双双胜出，使大量专有实现和客户端扩展正式进入规范，同时也为JavaScript 增添了很多适应未来发展的新特性。本书这一版除增加5 章全新内容外，其他章节也有较大幅度的增补和修订，新内容篇幅约占三分之一。全书从JavaScr...]]></description><category></category></item><item><title><![CDATA[都是写阴影box-shadow跟drop-shadow有啥不同]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/95172429</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/95172429</guid><author>BGD150809213</author><pubDate>Tue, 09 Jul 2019 10:29:20 +0800</pubDate><description><![CDATA[drop-shadow是css3的filter滤镜属性的一个方法，它的主要作用是用来做阴影，下图是它的兼容性。

理论
本章我们主要来说一下【drop-shadow】和【box-shadow】的区别。
box-shadow和drop-shadow从功能上来都是给元素加阴影。从写法上来说，看起来很相似。
// box-shadow
box-shadow: x(水平位置), y(垂直位置), blur...]]></description><category></category></item><item><title><![CDATA[CSS实现按钮凸出的翻转卡片]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/94661598</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/94661598</guid><author>BGD150809213</author><pubDate>Thu, 04 Jul 2019 22:25:57 +0800</pubDate><description><![CDATA[今天来讲如何写出一个按钮带有凸出感的翻转卡片。gif表现的太生硬了，真实效果比gif好。
原理
主要属性涉及：backface-visibility、transform-style、transform这三个属性。
主要思路：通过Y轴的翻转实现【翻面效果】，Z的偏移量实现【凸出】效果显示。
实战
步骤一、
// 基本结构
&lt;div class="card"&gt;
  &lt;div cla...]]></description><category></category></item><item><title><![CDATA[都是写阴影box-shadow跟drop-shadow有啥不同]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/94610456</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/94610456</guid><author>BGD150809213</author><pubDate>Thu, 04 Jul 2019 13:26:39 +0800</pubDate><description><![CDATA[drop-shadow是css3的filter滤镜属性的一个方法，它的主要作用是用来做阴影，下图是它的兼容性。

理论
本章我们主要来说一下【drop-shadow】和【box-shadow】的区别。
box-shadow和drop-shadow从功能上来都是给元素加阴影。从写法上来说，看起来很相似。
// box-shadow
box-shadow: x(水平位置), y(垂直位置), blur...]]></description><category></category></item><item><title><![CDATA[花式登录正方教务系统]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/94453017</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/94453017</guid><author>BGD150809213</author><pubDate>Tue, 02 Jul 2019 16:32:20 +0800</pubDate><description><![CDATA[本章主要讲述如何通过爬虫的手段登录自己学校的正方教务系统，如果你们的学校也是正方教务系统，你们也是可以尝试的。
技术栈：
前端：小程序
后端：node
前提:
1.学校使用的是正方教务系统。
2.本例子只是提供基础结构和大致流程，具体的学校系统间的鉴权逻辑需要自己处理一下，一般是cookie，refer等条件需要着重注意一下。
准备工作

通过终端ping通学校教务系统，获得IP，这个步骤是为了后...]]></description><category></category></item><item><title><![CDATA[如何学好前端-来自实习1年半的实习生亲身感受]]></title><link>https://blog.youkuaiyun.com/BGD150809213/article/details/94396184</link><guid>https://blog.youkuaiyun.com/BGD150809213/article/details/94396184</guid><author>BGD150809213</author><pubDate>Mon, 01 Jul 2019 17:19:35 +0800</pubDate><description><![CDATA[我是一个从大三下开始校外实习的前端小白，从实习到现在转正已经1年半了。在这一年半里，我接触过jQuery，vue，react。写过后台管理，小程序，H5，静态页。其实如果从如何学好前端来说，我会建议看这篇文章的人，多接触一下各方面的东西，从中找到适合自己的。我现在就是在从事React H5开发，在开发期间，公司的需要使我能接触到cocos2d的开发。这一刻也使我明白，学好前端的前提首先是兴...]]></description><category></category></item></channel></rss>