- 博客(25)
- 收藏
- 关注
RSS订阅原创 React学习第四步--引入样式
本篇文章主要记录关于React项目的样式设置与css、sass、less等文件的引入方法，可能不完全正确，仅供参考。脱离React，有点技术的人应该都熟悉如何在我们的html文件里配置样式以及引入样式文件，这里大概说明一下：1、内联式（行内样式） 直接在标签内部声明样式 <div style=" font-size:12px; backgroundColor...
2019-04-16 14:54:38
1268
原创 React学习第三步--元素渲染与组件运用
本篇文章主要围绕React组件封装、数据传递以及渲染DOM展开，并通过实际操作来实现组件的封装。首先在开始本篇文章之前，我们得大致对React有一定了解。React官方中文文档地址：https://react.docschina.orgReact主要的一大特色：组件化，通过创建好拥有各自状态的组件，再由组件构成更加复杂的界面，了解React基础知识的小伙伴应该知道，React框架采取的...
2019-04-15 10:25:18
293
原创 React学习第二步--环境配置与项目搭建
大家好，本篇文章将给大家简单介绍一下React项目的环境配置以及项目搭建。React项目主要依赖于Node和NPM这两个技术。Node主要是运行平台，NPM是依赖包管理工具。本文以windows环境为主介绍相关配置。首先打开cmd命令行,输入 node -v 来查看版本，如果显示版本号证明已有相应环境，若没有那就安装Node.js，直接搜索并在官网下载安装包。node.js官网：...
2019-03-27 09:48:54
321
原创 学习React第一步，了解生命周期
在学习React的过程中，首先想到的是想学习官方文档，但在把文档看完之后准备实际操作时却发现不知从何下手，于是停下来认真思考了一下，学习一门新语言，首先该了解其生命周期，所以决定写下一篇文章，记录自己的学习过程，顺便也可以和大家分享。React生命周期主要分为3部分：1、初始化getDefaultProps() 设置组件props默认值，也可以使用defaultProps设置...
2019-03-22 11:36:47
206
原创 手动搭建vue项目
1、新建文件夹（npm init）2、新建webpack js文件（npm install webpack依赖）3、新建各种所需文件夹4、写全webpack配置5、导入所需依赖
2019-03-19 14:03:36
312
原创 谈谈自己的理想
小白前端的3年工作前言在前几天的高考中，我好像又经历了一次高考，家中有一个妹妹刚刚经历高考，但因为考试不理想，就一直咨询我该怎么填志愿，还有选择什么专业之类的，好像又回到了几年前自己高中毕业选择时一样困难。但现在不同的是，出来社会上混迹过几年之后，不像当初的那样一无所知。我就把自己认为现在感觉还不错的专业都推荐给了她，并告诉她在以后的学习中更多的是要靠自己不断的学习。根据自身条件选择适合自己的我本来
2017-07-10 15:34:25
1758
1
原创 js判断两个日期之间的天数差
两个日期之间相差的天数function DateDifference(Date1,Date2) { //Date1和Date2是2017-07-10格式 var sDate, newDate1, newDate2, Days aDate = Date1.split("-"); newDate1 = new Date(aDate[1] + '-' + aDate[2] +
2017-07-10 14:44:13
10057
原创 CSS Filter
CSS FilterCSS Filter介绍 css Filter是css3的属性,提供的图形特效,像模糊,锐化或元素变色。现在移动端和PC的主流浏览器都开始对 CSS Filter 进行支持了，详情请参考浏览器兼容情况。filter 可以支持很多效果函数: 更多blur 给图像设置高斯模糊。brightness 给图片应用一种线性乘法，使其看起来更亮或更暗。contrast
2017-05-25 09:47:40
860
原创 focus-within
css伪类 :focus-within可以非常方便处理获取焦点状态。div class="container"> label for="text">请输入你的名字label> input type="text" /> div>.container:focus-within { background-color: #fff; }当div.container
2017-05-17 10:00:07
449
原创 sass语法总结
sass语法总结1.导入@import "reset.css"; css不会被合并在一个文件里@import "a"; scss导入时可以去掉后缀，会和导入文件合并在一个文件里2.注释/* */ 会在css中生成注释// 不会在css中生成3.变量3.1普通变量$fontSize: 12px;body{ font-siz
2017-05-03 14:49:42
413
转载 移动端判断横屏竖屏
可能我们在写移动端项目的时候会有要求或者为了更好的体验会做横竖屏检测，以达到更好的用户体验。// 判断横竖屏var utils = { debounce: function(func,delay){ var timer = null; return function(){ var context = this,
2017-05-03 10:16:22
2039
原创 vue学习笔记
Vue学习笔记总结一入前端深似海，在前端的工作过程中我们只有不断的学习新技术，才能不被淘汰，之前学习Vue的时候做了一些总结，现在把它整理出来，希望能帮助一些还没有上手的同学迅速上手。 下面我们就进入正题了。首先，了解软件的人人都知道，了解一门语言，或者学习一门新技术，编写Hello World是最基础的。下面就来看个例子。
2017-05-02 16:38:46
606
原创 论进入一个好公司的重要性
作为一个“小女子”来说，从毕业到现在算是经历的挺多的，从Java转前端的不被认可，到后来的驾轻就熟，不得不说我又成长了。接着进入一家公司正式以前端身份开始工作，但拿着别人零头的工资做着别人的事，所以一年后我选择离开公司，一为能改善自己的经济能力，二为能够学习更多的东西提升自己。紧接着进入了另一家新公司，薪资有了明显的提升，但工作半月后实在受不了那么高强度的工作压力，所以也提出了离职，现在想
2017-04-28 16:43:02
1308
原创 写了几年的css,今天才知道其中奥秘
#ID li{font-size:12px;}这句代码，我相信程序猿都不会觉得陌生，但直到今天我才知道其中奥秘。我们会想象浏览器先找到唯一的 id 的元素，然后把样式应用到其直系子元素 li 元素上。这看起来好像还挺高效的。事实上，CSS 选择符是从右到左进行匹配的。所以，上面的这条规则并不高效，浏览器必需遍历页面上的每个 li 元素并确定其父元素的 id。具体规
2017-04-25 16:01:32
317
转载 移动端web开发技巧
移动端web开发技巧META相关1. 添加到主屏后的标题（IOS） 2. 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果） 3. 百度禁止转码通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们
2017-04-25 10:04:19
760
原创 css实现一闪而过的光影效果
看到一个css光影一闪而过 css 色泽效果然后我在项目中希望这个光影效果一直闪烁，所以在原有的基础上进行了改进。下面粘代码：@-webkit-keyframes showimg{0% {position: absolute; left: -100%; top: 0; width
2017-04-21 17:03:20
3599
原创 视频与图片成组切换
下面就由我来哔哔啦。在最近的项目中得到这样的一个需求，要求视频和图片成组进行播放。话不多说，下面就来展示代码： .img_box{ width: 1080px; height: 1920px; } #myvideo{ position: absolute; top: 0; left: 0; }
2017-04-21 15:43:39
696
原创 固定在一天的某个时间刷新一次程序
在项目中遇到一个问题，由于项目是触摸屏项目，不关机，不重启就只能执行一次首页函数，如果后台数据改变，就没办法获取最新数据，于是就用定时刷新的办法解决。下面代码： var timeTask=setInterval(function(){ var date=new Date(); var h=date.getHours();
2017-04-20 17:11:40
640
原创 word-wrap和word-break
在近期的项目中遇到一个小小的问题，文本太长导致自动换行，出现了好多空白区域，于是作为小白的我，百度的一下，发现了解决问题的办法。下面我们就来探讨探讨：1、word-wrap和word-break1.1、css中word-wrap属性用来表明是否允许浏览器在单词中进行断句，就是俗称的换行1.2、css的word-break用来标明该怎么样进行断句
2017-04-20 16:08:15
641
原创 Git常用的命令
git init(初始化仓库)git clone(克隆仓库)git status(查看相关指令)git add以及git add .(新增文件)git pull(拉取团队其他同仁的文件)git commit(提交自己新增的文件)git push(上传文件到仓库)git log(查看相关日志)菜鸟一只，如有错误，网大神们指点。
2017-04-20 15:43:47
289
转载 前端几种本地缓存机制
在漫长的前端开发过程中，我们常用的几种本地缓存机制：Cookie,LocalStorge,SessionStorge 1.Cookie的特点1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像大文件或邮件那样的大数据。2）只要有请求涉及cookie，cookie就要在服务器和浏览器之间来回传送（这解释为什么本地文件不能测试cookie
2017-04-20 15:07:33
21920
转载 一个超轻量级的时间处理工具库 - dateformat.js
使用方法以及资源请访问https://github.com/XuXiaoGH/dateformat.js
2017-04-20 14:37:26
7965
转载 flex 布局
flex 基本概念使用 flex 布局首先要设置父容器 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。#dad { display: flex; justify-content: center; align-items: center}
2017-04-20 14:17:43
1277
转载 水平居中垂直居中
水平居中1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.2) 若是块级元素, 该元素设置 margin:0 auto即可.3) 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:.parent{ width:
2017-04-20 13:55:42
360
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人