ICY___的前端入门
关注
分享
扫一扫
文章平均质量分 64
按照时间排序，基本上覆盖了本人学习过程中的点点滴滴，拿出来和大家分享，乐于原创，忠于前端！
专栏的内容比较基础，适合入门的补充总结，由于技术不够，难免有些疏漏与理解问题，欢迎留言讨论！
ICY___
Hi~ o(*￣▽￣*)ブ，我是ICY，一枚前端小白
关注我的公众号 不露脸的如花 更多的干货和毒鸡汤等着你
展开
-
git简明指南
git 是我们日常经常会用到的一个版本控制系统 ，本文比较全面的描述了git的一些功能方法，希望能够给大家提供些许帮助 其中 <> —— 均为标注说明字样 并无实际意义开始git init ——初始化项目git status ——查看变化git add --a ——将变化提交到缓存区git reset head ——将提交到缓存区的某文件取消提交git rm ——将所选文件删除git rm -f ——强制删除所选文件 可删除以添加缓存区的文件git .原创 2020-07-12 17:35:33 · 204 阅读 · 0 评论 -
vue生命周期（上）
最近开始使用vue了，发现之前还没有写过关于vue生命周期的博客，今天先来聊聊：简单来说：就是创建前—>创建后——>挂载前——>挂载后——>更新前——>更新后——>卸载前——>卸载后这次先说一下关于创建（create 和挂载mount）也就是前4个生命周期<template> <div> <p>{{msg}}</p> <button @click="test">..原创 2020-06-15 18:25:08 · 147 阅读 · 0 评论 -
console.log妙用
今天看到了一些console.log的用法现在分享给大家：方法来自http://www.alloyteam.com/2013/11/console-log/转载自AlloyTeam：http://www.alloyteam.com/2013/11/console-log/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie.转载 2020-06-15 15:45:09 · 315 阅读 · 0 评论 -
纯css写三联列
最近翻看了之前的一些面经，发现之前的一些问题并没有得到根本的解决，赶紧补习一下；这里我介绍两种方法：最推荐的一种，也是自己用的比较多的一种方法 flex布局法：首先在总的父级元素上设置一个display: flex;属性。然后给定左右两个元素的宽高，中间元素设置flex:1;这样就可以完美实现自适应三联列（里面的三个div分别是左中右） <!-- 1.利用flex...原创 2020-04-25 11:14:24 · 272 阅读 · 0 评论 -
鼠标拖动
记录一下代码 这个是优化了的，在点击的位置开始移动，之前那种主要是在中心移动，-50的宽高，现在要减一个点击时刻的x，y和默认topleft的差值，就可以实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie...原创 2020-04-23 07:55:04 · 323 阅读 · 0 评论 -
浅谈HTML
HTML，作为构建网页曲三部曲的第一部，有着很重要的地位（地基）。如果说CSS是肉体，JS是灵魂，那么HTML就是骨骼！没有HTML，CSS和JS就无法实现它们远大理想！HTML基本可以分为两大部分，基础的概念（标签）和实现的简单功能。 基础的概念 HTML基础概念（不再赘述） HTML的基本结构 <html> <head> <...原创 2018-11-12 22:54:31 · 223 阅读 · 0 评论 -
神秘的·HTML
听说HTML很特别，很神秘？其实她很有趣！我将用最简明直观的方法，让你了解最基本的·HTML。<!DOCTYPE html><html lang="zh"><html><head> <meta charset ="UTF-8"> <meta name="viewport&原创 2018-11-02 21:32:03 · 220 阅读 · 0 评论 -
何谓css
css作为网页的肉体，承载着我们浏览的方方面面，它使我们的网页有了更深层次的拓展，虽然它有着庞大的样式支持，但只要理解了基本内容的含义和原理，就能较好的掌握。 理解csscss工作原理的关键：每个HTML元素的周围都有一个看不见的盒子。 在css中，规则由你来创造，由你来控制盒子及盒子里的内容的呈现方式。使用css使用外部css。（另写一个页面，通过link标签来建立联系...原创 2018-11-14 18:47:49 · 180 阅读 · 0 评论 -
CSS盒子剖析
在网页制作中，盒子标签的使用无处不在且相当重要，本文将全面的带你认识盒子，了解盒子，运用盒子！在HTML中，每个元素或者标签都可看作落在一个个盒子中，我将在此介绍：控制盒子的大小 创建盒子的边框 设置盒子的内外边距 隐藏盒子 显示盒子多说无益，现在开始盒子的大小width ， height 属性 利用给定的像素控制或者使用百分数控制大小 em值控制（利...原创 2018-11-22 16:21:08 · 162 阅读 · 0 评论 -
css3常用动画示例
css3作为css的最新标准，支持了很多的新特性和动画样式，下面，我将从示例来介绍css3动画的独到之处。 基础知识准备 transition：动画的名称类型 动画的执行时间 动画的延迟 动画的执行方式；//简单的动画animation: 已定义动画的名字 执行时间 动画的延迟 动画的执行方式 循环方式; //自定义动画 动画的执行方式 ...原创 2018-12-06 16:00:40 · 708 阅读 · 0 评论 -
在建立自己的网站前需要的思考
在盲目的copy了小米的网站后，发现了不同网站之间的差别或者做法的“差距”，同样的电商网站，同样的界面，不同的开发人员呈现的方式也大有不同，这也印证了老师说的前端工作相当灵活。那么我们建网站之前除了了解基本的语法用法，还需要知道什么呢？网站为谁而建，不同的网站当然有不同的目标群体，而不是仅为自己而建，因此，了解网站的受众群体至关重要，在我们学习其他的优秀网站的时候，不但要学他们的布局和结构...原创 2018-11-29 20:04:34 · 221 阅读 · 0 评论 -
利用HBuider创建自己的第一个app
许多人都觉得创建一个app是一项巨大的工程，靠一己之力根本无法解决，然而，借助HBuider和前端的一些知识，创建一个app变的简单且高效。（本次只是html和css的应用，面向和我一样的小白）（限安卓）首先我们需要下载一个HBuider软件，值得称赞的是，该软件不但具有强大的代码提示功能，而且还完全免费，运行速度也不错。但有一说一，关于用户的体验还需要优化，相对比与vs code 和we...原创 2018-12-13 20:12:06 · 778 阅读 · 0 评论 -
dom元素事件的理解和应用
dom 是一组用来描述脚本和结构之间如何交互的web标准；它是中立于平台和语言的接口。html dom定义了所有html元素的对象和属性，以及访问它们的方法。document对象指的是所有的html对象1.dom元素的获取getElementsByClassName 获取的是集合类型，可以借助数组类型来理解 （是用的比较多的类型） getElementById ...原创 2018-12-24 22:29:28 · 272 阅读 · 2 评论 -
dom元素的操作方式
好久不见呀，CSDN。最近一直才忙，今天先从一个基础知识点，dom元素的操作来说起吧。关于dom元素的操作，之前也有接触过一点点，但需要注意的是，dom元素过多的创建会影响浏览器的性能。所以呢，求人不如求己，与其抱怨浏览器的性能和其他，不如先从优化自己的代码开始。再唠叨一下，何为dom （DOM: Document Object Module, 文档对象模型），通俗将就是可以实现从编程中更...原创 2019-01-14 18:46:33 · 272 阅读 · 0 评论 -
js基础语法小全
js，作为前端中的“c“，在圈中的地位是不言而喻的，和每一门编程语言一样，它们之间都有大致相同的语法。js的历史及其作用为啥叫JavaScript，因为跟风，和现在蹭流量蹭热度类似吧，JavaScript和Java其实并没有太大的联系。作用，和html css 一样重要，它是整个项目的灵魂！引入方法{内部，外部大致和css相同，但引入的位置不同效果也不同基本语法 ...原创 2018-12-19 17:33:14 · 160 阅读 · 3 评论 -
多功能计算器制作详解
在学习了js的基本语法后，我们就能利用所学来制作一个多功能计算器了，原理很简单，往下看，有惊喜哦！基本原理：利用表格来完成计算机页面的分割 利用元素的获取和对象的绑定来实现点击按键后的事件 利用数组来记录存储键入的值和运算符 利用eval函数计算字符串的值 需要处理一些比较繁琐的bug //重点解释话不多说，直接上代码（为了好表述，将html，css，js 写在了一起）...原创 2019-01-03 08:48:07 · 1458 阅读 · 0 评论 -
js Math对象
Math 对象用于执行数学任务，也就是数学计算，对于常见的运算方法，js都有内置。直接上代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <原创 2019-01-17 06:53:50 · 206 阅读 · 0 评论 -
js案例——实现验证码功能
今天的内容是用js的基本语法实现网页中常见的验证码功能。大体思想：核心语法为math中随机数的使用 利用随机数字来实现随机的数字 字符 汉字 ，利用字符串的拼接来实现随机字体大小、旋转角度和各种颜色，利用css样式来禁止从网页上复制和粘贴，最后用弹窗来实现验证结果提示。实现结果：具体代码及注释：<!DOCTYPE html><html lang="e...原创 2019-01-17 10:08:51 · 1448 阅读 · 0 评论 -
深刻理解js内置计时器
计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系，它是实现这些的核心语法，如何一次深刻理解js计时器？往下看你就知道，有惊喜哦！js计时器有两种，一种为延时后单次的执行，另一种为延时多次执行。通过函数的递归，前者也可以打破壁垒，拥有循环执行的功能。setTimeout( javascript语句 , 毫秒); （其中第一个值可以是一个函数 需要加" "，也可以是...原创 2019-01-16 22:03:09 · 470 阅读 · 0 评论 -
js实现省市区选项卡三级联动
在网站上，我们经常使用到一些地理位置选项卡，其实原理很简单，利用一些基础语法就能实现。主要思路：利用文本改变事件，在选项卡上选择对应的省时，动态创建市选项卡的内容，选择市的时候，动态创建区（县）内容html css 代码： <!DOCTYPE html><html lang="en"><head> <meta charse...原创 2019-01-17 15:33:44 · 945 阅读 · 0 评论 -
js时钟案例
之前觉得利用js来实现时钟功能是一件 特别优秀的事，现在，我发现它不仅优秀而且可以练习代码，难度适中。总体思想：时钟的针及表框为图片；各种针的转动为css样式；利用date属性获取一次当前的属性；利用时 分 秒的关系得出角度；案例用图：代码及注释如下<!DOCTYPE html><html><!-- 利用计时器来实现时钟的时针 分针 秒针...原创 2019-01-18 22:16:29 · 930 阅读 · 0 评论 -
js倒计时案例
在很多购物网站中，我们都能见到倒计时类的模块，那么常用的倒计时模块是怎么靠js实现的呢？下面告诉你答案！核心语法：date的使用；关键思想：利用时间差来计算和换算时间；代码如下：<!-- 主要思想是利用date属性不断获取当前时间，利用计时器做差来动态计算先在时间与设定时间的总毫秒数 --><!-- 利用毫秒 秒 分 时 天 的关系，实现倒计时的功能 -...原创 2019-01-19 06:38:06 · 941 阅读 · 0 评论 -
js图片无缝滚动
虽然是一个简单的案例，但思想确实很巧妙，且一通百通！主要原理：利用利用动态创建一个与当前相同的图片条，利用scrollLeft（滚动条的左水平偏移来实现滚动 用利用视觉暂留效应，实现图条的无缝循环；<!-- 像电子屏一样的循环滚动 --><!DOCTYPE html><html lang="en"><head> <...原创 2019-01-19 21:07:36 · 541 阅读 · 1 评论