前端学习笔记
文章平均质量分 81
Zoey Chou
这个作者很懒,什么都没留下…
展开
-
share.js使用注意事项
一、使用步骤——正确打开方式在阅读以下内容时,希望您可以先去了解:share.js使用文档:https://github.com/overtrue/share.js本文不涉及较全面的使用教程,仅是一些容易导致插件使用失败的注意事项1.引入四种方式:npm、bower、cdnjs、引入源文件1)npm// npmnpm install social-share.js2)bower// bowerbower install social-share.js3)使用.原创 2020-06-12 11:18:44 · 2177 阅读 · 4 评论 -
三种方法实现两栏等高自适应布局(《CSS世界读书笔记》)
前言本文为张鑫旭《CSS世界》读书笔记,代码实现思路亦来源此书。效果需求:实现两栏布局,要求无论哪一栏的内容多,两栏高度均以最高一栏为准,两栏的背景色需和容器高度相等,即竖直方向铺满容器。【TIPS】这里为什么不用height: 100%呢?原因在于必须给父元素设定具体高度值,此属性值才会起作用,但大部分情况下,我们是不太会给父元素的高度定死的。代码实现:方法一:使用 di...原创 2019-05-21 14:11:57 · 2519 阅读 · 0 评论 -
深入理解margin: auto填充特性(《CSS世界读书笔记》)
margin: auto的填充规则:一侧定值(包括不设定值取默认值0的情况),另一侧auto,那么另外一侧的margin为剩余空间大小 两侧auto,则平分剩余空间基于以上规则,可以得出:margin属性的auto可以实现块级元素左中右对齐(且与浮动实现对齐相比为最佳实践)。<div class="father"> <div class="son">&...原创 2019-06-13 14:06:08 · 1102 阅读 · 0 评论 -
小图标和文字天然对齐(《CSS世界读书笔记》)
之前的理解(错误理解):line-height可以实现内联元素的垂直居中效果,所以给span一个与高度相等的行高值,这样图片和文字的“高度”就相等了,文字也自然垂直居中了。但是这个理解是错误的,这其中其实隐藏了很深的原理:原理:一个display: inline-block元素,如果里面没有内联元素,或者overflow不是visible,则该元素的基线就是其margin的底边缘;...原创 2019-06-14 17:19:41 · 680 阅读 · 0 评论 -
几个炫酷且实用的CSS动画效果
一、鼠标滑入文字逐个渐入效果图:鼠标滑入文字逐个渐入鼠标滑入按钮时,按钮中原本的文字从下方滑走,同时在原位置上,按钮文字单个挨个浮现。(原本文字和后面单个浮现的文本内容可不一致,可根据需要进行调整)。实现思路:用div模拟button按钮,并将按钮文本单个单个的放在其子元素span中,用于后面的单个显示。而鼠标没有触发时的静止状态文本则由div按钮的伪类::before来承担。在静...原创 2019-07-11 16:20:09 · 6269 阅读 · 9 评论 -
CSS3 skew斜切效果详解
前言之前一直没理解到这个变形的原理,加之项目上用的很少,就一直没花时间去梳理(这是个坏习惯!),今天趁着又看到了,赶紧来整理整理。原理其实原理很简单,只要手边有纸有笔(或者抽象思维比较好的也可以在脑子里画,反正学渣本渣是不行的)画出来就可以了。举个栗子,下图是例图:图1图形仅在水平方向上变形(垂直方向上的高度不变)。 例如,skewX(30deg)就会把图片从图2变为图...原创 2019-07-17 17:37:15 · 4249 阅读 · 0 评论 -
同一页面多个注册入口的实现(JQ实现/接口已知)
前言之前写过一篇注册的前后端验证,逻辑不是特别清晰。恰巧最近遇到手头项目需要在同一页面实现多个注册入口,遂重新梳理了下思路,特在此再次记录。【TIPS】本篇仅含前端逻辑代码,接口由后端提供。功能实现1.HTML结构 <div class="reg-con" id="0"> <!--id重点!区分不同“注册组”--> <div cla...原创 2019-09-12 17:19:02 · 971 阅读 · 0 评论 -
低版本浏览器flex布局简易替代方案
需求:实现以下布局IE10以上可采用最为简单粗暴的flex弹性布局,具体如何做,请移步百度;若要兼容IE8+可使用“宽度分离”或者特定场景下使用格式化宽度来实现宽度分离:在不考虑box-sizing属性下,宽度分离是保证元素尺寸改变不影响布局的良好解决方案,甚至在某种情况下比box-sizing具有更好的表现。具体原则是:width属性不与影响宽度的border、padding(有...原创 2019-05-06 15:54:22 · 1269 阅读 · 0 评论 -
hexo+GitHub搭建个人博客
hexo介绍及node环境检测特点:快速、简洁且高效的博客框架环境:基于node(v8.11.3)环境及检测:win+R输入cmd回车cmd窗口输入node -v回车如果提示node不是内部或者外部命令,则需要重新安装node安装node环境:下载8.11.3版本双击下载得到的mis文件,全程next安装安装git(版本控制器)qq群文件找安装包文件网站下...原创 2018-12-09 13:55:17 · 212 阅读 · 0 评论 -
将自己的博客推送到GitHub并绑定域名
GitHub相关设置注册GitHub账号,打开GitHub,点击右上角sign up注册个人账号,SSH key配置步骤如下: 新建SSH Key 在桌面右键选择git bash here 创建本地ssh key,输入以下命令: 1 ssh-keygen -t rsa -C "邮箱" 回车,然后...原创 2018-12-09 13:58:34 · 338 阅读 · 0 评论 -
wangEditor的基本使用及踩坑记录
前言最近写项目用到了富文本编辑器,在同事的建议下,采用了wangEditor3,在此记录下使用wangEditor3的基本步骤以及遇到的一些问题基本使用基本使用步骤原作者已讲的非常详细,如有需要,移步----->wangEditor3使用手册下载直接下载:https://github.com/wangfupeng1988/wangEditor/releases 使...原创 2019-03-14 10:45:12 · 17262 阅读 · 21 评论 -
hogan.js模板语法及数据渲染
前言之前写项目一直用的框架,最接近原生的可能就是JQ+Bootstrap写的PC端网页了。但最近的项目用的是原生JS+JQ库实现,少了框架的便捷,感觉填充数据就成了一个"痛苦"的活儿(说来说去,还是JS基本不是太牢的过,(逃...)。前期熟悉代码时,我发现项目中引用了一个叫做hogan.js的东西,上网查查才发现,这东西作用和框架的思想其实很接近,虽然使用中还是有些不太方便,但是有总比没有好啊...原创 2019-03-14 11:20:17 · 1122 阅读 · 12 评论 -
用户注册信息验证功能(前端+后台)
一、写在前面罗里吧嗦的话最近在写自己的第一个个人项目,开始写了很久了,但是每天没啥时间记录,趁着周末先记录一些思路和踩过的坑。项目预计是做一个关于家装的电商网站,样式参考自土巴兔网站(我不是打广告!)。目前写了几个静态页面,写得有点审美疲劳,遂决定写一写后台JS换换心情~之前听师兄说登录注册俩小时就能搞定,想一想不如就先写登陆注册吧,反正用不了多久。好吧,事实光速打脸了,我怎么就把自己...原创 2018-11-10 23:36:15 · 23971 阅读 · 7 评论 -
CSS3变量currentColor浅析
定义currentColor是CSS3中的变量,它表示“当前的标签所继承的文字颜色”。!tips:“当前颜色” 指本体color , 如果没有设置color就找父元素,一级一级找,一直到根元素位置。基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-04-11 17:48:49 · 3830 阅读 · 0 评论 -
2048游戏简单实现
前言最近突然心血来潮想写一个网页小游戏,我看网上有很多人推荐写2048来练练手,遂开始写。目前为止,基本功能已经实现,只是没有添加相应的动画效果,待以后有机会补上(其实我就是动画这块太菜了 T_T)前方长文预警!!!游戏截图项目结构这个项目结构挺简单的,应该也都看得懂,在此仅对js文件夹进行描述,其余的就不再赘述啦(main.js是入口文件,move.js主...原创 2019-04-09 11:36:07 · 7103 阅读 · 0 评论 -
软件开发周期及服务器浅析
一、软件开发生命周期定义软件的生命周期,是指软件从设计开发到上线运营再到停止使用的完整过程,分为“三个时期八个阶段”,分别为:可行性研究阶段 | 需求分析阶段 ----> 软件定义期概要设计阶段 | 详细设计阶段 | 开发实现阶段 | 项目测试阶段 ----> 软件开发期部署阶段 | 维护阶段 ----> 软件维护期二、软件开发生命周期详细介绍:...原创 2018-08-19 15:32:57 · 1517 阅读 · 0 评论