随笔分类 -  Web前端学习100天

上一页 1 2 3 下一页
工科转行前端开发学习，100天学习和实践见证奇迹。
day35—JavaScript操作元素（创建、删除）
摘要：转行学开发，代码100天——2018-04-20 JavaScript对DOM元素的创建、删除操作。 1.创建DOM元素 appendChild方法 createElement(ochild); oparent.appendChild(ochild) insertBefore方法 createEle 阅读全文
posted @ 2018-04-20 00:20 东易韦 阅读(197) 评论(0) 推荐(0)
day34—JavaScript实现DOM操作
摘要：转行学开发，代码100天——2018-04-19 1.通过JavaScript元素属性的操作 三种： 2.获取DOM元素的方式 三种：id tagName className document.getElementById("id") //返回元素对象 document.getElementsByT 阅读全文
posted @ 2018-04-19 22:45 东易韦 阅读(158) 评论(0) 推荐(0)
day33—前端开发的模块化和组件化
摘要：转行学开发，代码100天——2018-04-18 今天是记录前端开发中模块化、组件化的知识。关于何为模块化，何为组件化以及为何要如此，目前还是处于一个只可意会不可言传的理解应用阶段。 当然，这样的存在也能想到其好处——方便你我他！ 一个模块案例展示如下： 其HTML内容： 一个导航栏中，nav下的个 阅读全文
posted @ 2018-04-18 23:19 东易韦 阅读(172) 评论(0) 推荐(0)
day32—CSS多列布局学习
摘要：转行学开发，代码100天——2018-04-17 关于多列布局，前期已经梳理过，今天的培训课程学习中再次提及，趁此也做个总结和检验。 多列布局的介绍参考： day08—css布局解决方案之多列布局 关于多列布局的类型和方法： 常用的网页多列布局有： 1.定宽+自适应 2.多列定宽+自适应 3.不定宽 阅读全文
posted @ 2018-04-17 22:29 东易韦 阅读(105) 评论(0) 推荐(0)
day31—CSS Reset 与页面居中布局
摘要：转行学开发，代码100天——2018-04-16 报名的网易前端开发课程今天正式开课了，这也是毕业后首次付费进行的正式培训课程学习。以此，记录每天学习内容。 今天学了两个方面的知识： 1、 CSS Reset 2、页面居中布局：水平居中，垂直居中，居中（垂直+水平） 其中，对于1未曾知晓，简单地说就 阅读全文
posted @ 2018-04-16 21:36 东易韦 阅读(157) 评论(0) 推荐(0)
day30—使用Flexbox和CSS Grid实现高效布局实践
摘要：转行学开发，代码100天——2018-04-15 （今天是代码开发的第30天，但是代码记录有些滞后，尽快补上。日后要严格执行，避免学习进度和内容相对滞后。） 今天，记录“前端大全”里分享的一篇关于利用Flexbox和CSS Grid实现高效布局的案例。 原文来源：葡萄城控件 www.cnblogs. 阅读全文
posted @ 2018-04-15 10:04 东易韦 阅读(256) 评论(0) 推荐(0)
day29—JavaScript中DOM的基础知识应用
摘要：转行学开发，代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作。主要表现与HTML元素的操作，以及对CSS样式的操作。其主要应用知识如下图： 通过对DOM的基本了解，还要通过代码实现对DOM的操作。 1.childNodes + nodeTyp 阅读全文
posted @ 2018-04-14 21:27 东易韦 阅读(175) 评论(0) 推荐(0)
day28-Javascript定时器的应用案例
摘要：转行学开发，代码100天——2018-04-13 上篇文章中记录了定时器的用法，本篇通过两个常用案例进一步巩固定时器的应用。 案例一：消息框延时，如QQ中鼠标移动到头像，弹出一个信息框；移出后，消息框消失。 首先在HTML中设计两个div盒子，一个作为头像，一个作为消息框 设计其样式为： 通过对盒子 阅读全文
posted @ 2018-04-13 19:43 东易韦 阅读(194) 评论(0) 推荐(0)
day27—JavaScript实现定时器及其应用案例
摘要：转行学开发，代码100天——2018-04-12 JavaScript中定时器有两种，分别是setInterval和setTimeout;其用法如下： 开启： setTimeout("function",time) 设置一个超时对象；延迟执行；只执行一次 setInterval("function" 阅读全文
posted @ 2018-04-12 19:33 东易韦 阅读(403) 评论(0) 推荐(0)
day26—JavaScript对CSS样式的获取和修改实践
摘要：转行学开发，代码100天——2018-04-11 通过JavaScript获取和修改HTML元素及CSS属性是其一个基本功能。对于CSS样式通常有行内样式，外部样式，内嵌样式之分。 如： 行内样式： 外部样式： 内嵌样式： 对于样式的获取也因其写入方式不同而有所区别： 对于行内样式的获取，用 obj 阅读全文
posted @ 2018-04-11 17:18 东易韦 阅读(140) 评论(0) 推荐(0)
day25—JavaScript实现文件拖拽上传案例实践
摘要：转行学开发，代码100天——2018-04-10 今天记录一个利用JavaScript实现文件拖拽上传到浏览器，后天将文件打开的小案例。 基本功能：1点击添加文件 2 文件拖拽添加 html: css: javascript: 案例效果： 阅读全文
posted @ 2018-04-10 18:13 东易韦 阅读(369) 评论(0) 推荐(0)
day24—JavaScript实现导航栏底部引线跟随移动
摘要：转行学开发，代码100天——2018-04-09 前面的学习笔记中记录过，利用：before和：after实现导航栏鼠标移动跟随效果，今天通过JavaScript代码实现同样的效果，以作对比。 注：在本例中利用了outerWidth()方法获取元素的外部宽度。注意其与width，innerWidth 阅读全文
posted @ 2018-04-09 13:58 东易韦 阅读(784) 评论(0) 推荐(0)
day23—JavaScript实现DIV盒子拖拽（原生方式）
摘要：转行学开发，代码100天——2018-04-08 这样完成代码后，发现并不能出现预期的拖动效果，检查鼠标事件的坐标值也都输出正常，奇怪？！ 注：需要移动的元素必须绝地定位！！！ 这样完成代码后，发现并不能出现预期的拖动效果，检查鼠标事件的坐标值也都输出正常，奇怪？！ 注：需要移动的元素必须绝地定位！ 阅读全文
posted @ 2018-04-08 11:01 东易韦 阅读(1027) 评论(0) 推荐(0)
day22—一个AngularJS框架应用toDoList
摘要：转行学开发，代码100天——2018-04-07 今天用AngularJS照着课程写了一个案例，即toDoList，记事清单效果。 主要实现以下效果： 1.通过文本框添加内容，同时添加事件列表。主要用到ng-model="task"对input输入框进行数据绑定，通过ng-click="add()" 阅读全文
posted @ 2018-04-07 20:23 东易韦 阅读(231) 评论(0) 推荐(0)
day21—AngularJS学习初体验
摘要：转行学开发，代码100天——2018-04-06 今天按照学习计划安排，开始AngularJS的学习。 关于AngularJS，在菜鸟教程上这样介绍 好吧，Angular学习起来非常简单，哈哈，现在就开始学习吧。 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标 阅读全文
posted @ 2018-04-06 21:43 东易韦 阅读(193) 评论(0) 推荐(0)
day20—CSS中伪类:before与:after的应用:
摘要：转行学开发，代码100天——2018-04-05 CSS中的两个伪类:before和:after适合应用与在元素的开始或者结尾处添加修饰性文字或外观，实现内容添加的同时并没有破坏HTML代码 语义。如之下的一个应用 上例中为了清除浮动，添加了一个<div>盒子，并为此div添加了clear样式。这是 阅读全文
posted @ 2018-04-05 22:32 东易韦 阅读(184) 评论(0) 推荐(0)
day19—纯CSS实现菜单列表下框跟随效果
摘要：转行学开发，代码100天——2018-04-04 今天看到一篇介绍利用CSS实现列表下跟随效果的设计文章，如下图，当鼠标滑过列表项时，要求该项内容下的黑色下边框线实现同方向的跟随移动。 其中，列表内容显而易见，如下 在设计样式时，即时前面文章中介绍过的水平布局样式相似。 无论时通过flex利器布局， 阅读全文
posted @ 2018-04-04 22:15 东易韦 阅读(428) 评论(0) 推荐(0)
day18—Flex弹性布局详解（二）
摘要：转行学开发，代码100天——2018-04-03 2.6 align-content属性 align-content 属性定义了在交叉轴方向对齐方式和额外空间分配，类似于justify-content的作用。 align-content: stretch ||flex-start||flex-end 阅读全文
posted @ 2018-04-03 22:02 东易韦 阅读(195) 评论(0) 推荐(0)
day17—Flex弹性布局详解（一）
摘要：转行学开发，代码100天——2018-04-02 今天看到一篇大神的文章，关于flex布局的详解，对flex用法介绍的相当详细，非常有助于我等初学者更深入了解这种布局方式。 文章链接 【基础知识】Flex-弹性布局原来如此简单！！ 在此对作者表示感谢。 本文试图按照文中介绍，重写其实现代码，以作学习 阅读全文
posted @ 2018-04-02 22:49 东易韦 阅读(234) 评论(0) 推荐(0)
day16—正是Github，让社会化编程成为现实。
摘要：转行学开发，代码100天——2018-04-01 今天简单了解了一下GitHub的使用。 对于GitHub，在很多年前开始写程序的时候就频繁听到，也早早地注册之后看了真容。但是由于自己一直未产出较大型的开发项目，所以还是用的比较少，最多只是作为一个代码存放工具。某种程度上，充当了网盘的作用。 Git 阅读全文
posted @ 2018-04-01 21:02 东易韦 阅读(135) 评论(0) 推荐(0)

上一页 1 2 3 下一页