denguing-CSDN博客

原创【学习CSS布局】笔记

地址：http://zh.learnlayout.com/toc.html一、display属性block常见块级元素（独占一行，尽可能撑满容器）：div、p、form和HTML5中新增的header、footer、section等（我觉得这三个的实质也是一个div元素，只是名字变了而已）。inline常见行内元素（包裹文字，不会破坏布局）：span、a。none和visibili...

2020-02-26 15:07:23 226

原创【尚硅谷HTML&CSS—李立超老师】2-103笔记（已完结）

HTML简介纯文本：在纯文本编辑器中编写的内容都是纯文本，网页就是使用纯文本编写的。纯文本只能保存文本内容，其他的图片、音频和视频等格式化的内容不能设置。head标签帮助浏览器解析网页。注释多人合作时，给别人的说明和自己的回忆（开发者源码可见，用户不能见，简单明了）title标签的内容会显示在浏览器标题栏，搜索引擎检索页面时首先检索title标签中的内容，会影响网页在搜索引擎的排名...

2020-02-01 21:28:06 1467

原创【尚硅谷HTML&CSS—李立超老师】1-前端介绍

无论前端后端，都是做软件开发的软件主要分两种架构C/S和B/S前端主要从事B/S 软件的开发前端开发流程：1-传统模式：网页设计师用PS设计网页前端工程师将设计图转为静态网页（承上启下，前后都需要知道一点）后台工程师将静态网页转为动态网页（从服务器的数据库取出数据显示）2-目前模式：前端给后台提需求，后台给接口就行。这种要求高一些。3-大厂尝试的模式：前端既能写页面...

2020-01-16 16:17:02 1858

原创【fgm.cc练习4-9】星级评分系统

练习地址：http://www.fgm.cc/learn/lesson4/09.html看了网页源代码，才知道什么叫“简洁的代码”。我写的太繁杂了！亮起和熄灭的星星是通过改变背景图片的位置来实现的，背景图片从网页source那里下载。要解释的在注释里面写了。HTML<!DOCTYPE html><html lang="zh"><head> &lt...

2019-12-14 17:59:42 458

原创【fgm.cc练习4-8】事件练习：封装兼容性添加、删除事件的函数

练习地址：http://www.fgm.cc/learn/lesson4/08.html封装：面向对象的三个基本特征（封装、继承、多态）之一。将现实世界的事物抽象成计算机领域中的对象，具有属性和行为（方法）。这种抽象就是封装。函数（避免全局变量，按需执行，提高代码重用性）就是最简单的封装。**重要特性：**数据隐藏。正常交互+安全性（“不要告诉我你是怎么做的，做就行。”）详看：JavaS...

2019-12-14 14:40:40 208

原创【fgm.cc练习4-7】各种数组方法的使用

练习地址：http://www.fgm.cc/learn/lesson4/07.html知识点都在注释里啦！就简单的几个常用的数组方法。HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <title>数组练习：各种数组方法的使用</tit...

2019-12-02 16:28:49 215

原创【fgm.cc练习4-6】当前输入框高亮显示

练习地址：http://www.fgm.cc/learn/lesson4/06.html鼠标获得焦点事件 onfocus();鼠标失去焦点事件onblur()；我写的是直接onclickHTML<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <title&...

2019-12-02 13:51:36 204

原创【fgm.cc练习4-5】css函数——设置/读取对象的属性

练习地址：http://www.fgm.cc/learn/lesson4/05.html获取css的属性：行内样式：style.css直接获取使用getComputedStyle获取对象之后，对象.属性或者对象[“属性”]，我这里的写法类似HTML<!DOCTYPE html><html lang="en"><head> <meta c...

2019-12-02 12:19:48 218

原创【fgm.cc练习4-4】arguments应用——求出函数参数的总和

练习地址：http://www.fgm.cc/learn/lesson4/04.html与【3-1】的练习一样。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>arguments应用——求出函数参数的总和</title> &l...

2019-12-02 09:02:41 260

原创【fgm.cc练习4-3】自动改变方向——幻灯片效果

练习地址：http://www.fgm.cc/learn/lesson4/03.html在原来的基础：https://blog.csdn.net/DGT4720/article/details/103290899上增加下面的内容，再把i%5改为i，即可。很low。if(i == 4){ k=1; } if(k == 1){ i--; } if(i == -1){ ...

2019-12-02 08:32:58 148

原创【fgm.cc练习4-2】自动播放——幻灯片效果

练习地址：http://www.fgm.cc/learn/lesson4/02.html实际效果有一些功能，我这里没有实现，比如图片淡出淡入效果，鼠标移入移出停止事件等。HTML<!DOCTYPE html><html lang="zh"><head> <title>自动播放——幻灯片效果</title> <link...

2019-11-28 11:54:13 180

原创【fgm.cc练习4-1】setTimeout应用：重点不是setTimeout，而是各种布局令我头大

练习地址：http://www.fgm.cc/learn/lesson4/01.html

2019-11-27 11:22:25 130

原创【fgm.cc练习3-9】倒计时时钟：setInterval & clearInterval & 正则表达式 & 条件运算符

倒计时100秒，可启动可停止。练习地址：http://www.fgm.cc/learn/lesson3/09.htmlHTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>倒计时时钟</title> <link r...

2019-11-25 08:45:53 233

原创【fgm.cc练习3-8】简易网页时钟：时间函数

打开网页，时间流逝。练习地址：http://www.fgm.cc/learn/lesson3/08.html实现方法：时间函数创建时间对象 new Date()调用方法间隔时间1s调用一次函数：window.setInterval(getTime,1000);另外，等待5s调用一次函数（只调用了函数一次): setTimeout(getTime,5000);如果要停止或者取消...

2019-11-24 16:16:52 200

原创【JavaScript断点调试】笔记

一、步骤：f12打开开发者工具打开Sources打开要调试的JavaScript代码文件在行号上单击打上断点二、调试bug的思路JavaScript是否成功执行进来JavaScript是否存在逻辑问题、变量问题、参数问题等各种符号三、工具control+o 查找js文件（window）逐语句执行F10：点击一次往后执行一行逐过程执行：直接执行完跳到下一个断点点击...

2019-11-19 23:42:38 220

原创【fgm.cc练习3-7】网页计算器

练习地址：http://www.fgm.cc/learn/lesson3/07.html抱歉，JavaScript部分暂时还实现不了，以后来补。网页源代码的JavaScript部分有两个正则表达式看不懂，希望朋友们可以指点迷津，感谢！现在只做了Html和CSS部分。HTML<!DOCTYPE html><html lang="en"><head>...

2019-11-18 22:25:21 185

原创【fgm.cc练习3-6】判断数字是否为两位数

练习地址：http://www.fgm.cc/learn/lesson3/06.html先贴我的代码：HTML：<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <title>判断数字是否为两位数</title> <link rel=...

2019-11-17 19:50:56 217

练习地址：http://www.fgm.cc/learn/lesson3/05.html实现效果：页面加载后，出现数字自己累加，类似如秒表。实现要点：setInterval函数。setInterval函数接收两个参数，第一个是函数名字，第二个是时间（毫秒为单位），函数功能是每隔多少时间执行一次函数。要取消这个函数可以用clearInterval函数，该函数接收一个参数，就是要取消的函数名称。...

2019-11-17 14:03:45 189

原创【fgm.cc练习3-4】输入两个数字，比较大小

练习地址：http://www.fgm.cc/learn/lesson3/04.html实现的效果看起来很简单，其实是我打脸了！这些练习虽然简单，但它更是在更深层次的考查一些容错性，错误操作处理的技巧。下面看我写的就很简单，思路天真单纯无害。HTML<!DOCTYPE html><html lang="zh"><head> <meta cha...

2019-11-15 10:41:15 241

原创【fgm.cc练习3-3】累加按钮，自加1

练习地址：http://www.fgm.cc/learn/lesson3/03.html按按钮会弹出增加1的数字，按钮文本也会增加1。不知第三课的练习为什么忽然变得简单好些，不敢乱说话，万一后面难到爆，那我欲哭无泪。代码如下：HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="...

2019-11-14 23:30:40 169

原创【fgm.cc练习3-2】用parseInt解析数字并求和

练习地址：http://www.fgm.cc/learn/lesson3/02.html这个比较简单，主要就是parseInt的使用。不多说了，代码如下：HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <title>用parseInt解析数字...

2019-11-14 23:18:50 189

原创【fgm.cc练习3-1】用typeof查看数据类型：转义 & <pre>

练习地址：http://www.fgm.cc/learn/lesson3/01.html终于来到第三课了！输出代码：可以使用pre和code标签。code 不保留原来内部元素的文本格式，诸如换行符、缩进符被删掉了。pre标签可以保留 pre 元素中的文本的空格和换行符，还可以包含链接、水平分割线、图像。简单来说，code是一行代码，pre是一段代码。转义字符：这里转义的是"&lt...

2019-11-14 22:56:40 217

原创【fgm.cc练习2-12】复选框（checkbox）全选/全不选/反选

练习地址：http://www.fgm.cc/learn/lesson2/12.html实现要点：判断checkbox是否被选中：box.checked，是的话返回true；否则false全选：循环设置每个checkbox.checked = true；文本innerText = “全不选”全不选：上述反向反选：循环+if判断该checkbox是否被选中，如果选中设置为false，反...

2019-11-14 19:36:29 264

原创【fgm.cc练习2-11】鼠标移过，改变图片路径

练习地址：http://www.fgm.cc/learn/lesson2/11.html实现效果：鼠标移到小图片上，大图片改变为相应的小图片。实现思路：跟上篇套路一样，这里主要用到flex布局。代码如下：HTML<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8">...

2019-11-14 13:53:02 160

原创【fgm.cc练习2-10】提示框效果

练习地址：http://www.fgm.cc/learn/lesson2/10.html实现思路：用js循环创建10个div，div里面的信息用数组存储（HTML形式，因为英文是粗体，要使用strong标签）。设置它的innerHTML为对应数组元素。onmouseenter事件触发其添加子元素img（使用onmouseover会出现闪烁问题：因为onmouseover是不断触发的）。onm...

2019-11-14 11:51:08 195

原创【fgm.cc练习2-9】单一按钮显示/隐藏

练习地址：http://www.fgm.cc/learn/lesson2/09.html实现思路：下拉三角形通过border来画：div宽高设为0，border值设大点，保留三角形底边那边的边框的颜色，其他颜色设为transparent。transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。具体可看这篇：CSS绘制三角形——border法。...

2019-11-13 23:15:23 194

原创【fgm.cc练习2-8】简易JS年历

练习地址：http://www.fgm.cc/learn/lesson2/08.html实现思路跟这篇差不多。也想过吧展示的节日信息放到js里面更换，但是考虑到这算是内容部分，还是放在HTML较好，反正都是要打一遍的。代码如下：HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="...

2019-11-13 19:19:36 170

原创【fgm.cc练习2-7】简易选项卡

练习网址：http://www.fgm.cc/learn/lesson2/07.html我太难了！这是目前为止的练习中，我花第二多时间的一个了！话不多说，“抱怨没有用，一切靠自己”（来自某位超级演说家）。上代码：HTML<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"&gt...

2019-11-12 21:39:29 193 1

原创【fgm.cc练习2-6】创建元素、增加子节点、循环

练习地址：http://www.fgm.cc/learn/lesson2/06.html鼠标移到在图片上面，不透明度增加。实现思路：通过循环使用JavaScript的createElement（）方法创建10个div节点，为它们增加样式：背景图片，margin等，最后加到container的div中作为子节点。代码如下：HTML<!DOCTYPE html><htm...

2019-11-12 18:28:16 158

原创【fgm.cc练习2-5】函数传参，改变Div任意属性

练习地址：http://www.fgm.cc/learn/lesson2/05.html用户输入属性和属性值，确定修改，重置reset。实现思路：写一个3参数函数：元素、属性、属性值。确认按钮点击事件就是通过这个函数修改div。重置按钮使用removerAttribute（）方法去掉属性。HTML<!DOCTYPE html><html lang="zh">...

2019-11-12 16:48:13 226

原创【fgm.cc练习2-4】弹出层&遮罩层：z-index

练习地址：http://www.fgm.cc/learn/lesson2/04.html主要思路是：按钮点击事件，设置弹出层的div的display为block显示，而且它的z-index危最大，让他覆盖在遮罩层上面。弹出层通过设置margin-top为负值使其上移到遮罩层来。遮罩层跟弹出层是兄弟节点关系，宽高是100%，通过背景和opacity设置。HTML<!DOCTYPE h...

2019-11-12 14:17:37 181

原创【fgm.cc练习2-3】求出数组中所有数字的和：字符串分割 & 字符串转数字

练习地址：http://www.fgm.cc/learn/lesson2/03.html主要思路就是读取input的value，然后将这个字符串分割成一个数组，这个时候数组里面装的还是字符串，所以在求和的循环中，用Number（）函数将字符串转换为数字。按钮点击事件将结果的innerText变为sum，display为block。代码如下：HTML<!DOCTYPE html>...

2019-11-12 09:43:58 168

原创【fgm.cc练习2-2】鼠标点击事件 & innerHTML & alert

练习网址：http://www.fgm.cc/learn/lesson2/02.html很开心咯！写完就能跑起来了，没有bug。其实还是因为太简单了，难度还不大，套路跟前面的练习一样，所以我才写得出来。贴代码：HTML<!DOCTYPE html><html lang="zh"><head> <meta http-equiv="content...

2019-11-12 08:41:50 209

原创【fgm.cc练习2-1】啦啦啦！这两天做了几个小练习好开心啊！

练习网址：http://www.fgm.cc/learn/lesson2/01.html学到了条件运算符的运用；getElementsByTagName的Element是有s的，所以只取一个元素需要加[0]，getElementById的Element是没有s的。代码如下：HTML<!DOCTYPE html><html lang="zh"><head&g...

2019-11-11 23:37:09 121

原创【fgm.cc练习1-6】鼠标移入移出事件&显示与隐藏

练习网址：http://www.fgm.cc/learn/lesson1/06.html尝试鼠标事件的函数里面，通过增加类名{display：block}来实现显示；删除类名来隐藏，结果跑不起来。然后就用了以下方法，直接改style.display。代码如下：HTML<!DOCTYPE html><html><head> <meta http...

2019-11-11 22:52:18 321

原创【fgm.cc练习1-5】鼠标事件

练习网址：http://www.fgm.cc/learn/lesson1/05.html思路就是通过鼠标移入和移出事件来改变div的类名，从而改变样式。鼠标事件可以看这篇。下面是我的代码HTML<!DOCTYPE html><html><head> <title>鼠标移入/移出改变样式</title> <meta ...

2019-11-11 18:57:16 156

原创【fgm.cc练习1-4】获取div元素

练习网址：http://www.fgm.cc/learn/lesson1/04.html思路是获取所有div得到一个数组，循环给它加上className。如何获取div元素，这里终于知道前几次练习中一直存在的一个疑惑了，就是得到的数组length为什么不是正确的？去掉空格之后就是正确了，原因可以看这篇。主要就是说如果用childNodes获取会把文本节点也获取到，我所说的空格也算文本节点。所...

2019-11-11 15:00:51 431

原创【fgm.cc练习1-3】我真的太菜了。老打错字！！！

练习网址：http://www.fgm.cc/learn/lesson1/03.html真的，我写完之后，本以为这太简单了吧，结果点击，没反应？？？啥？不可能啊，这不挺简单的吗？然后在网上各种找问题所在？别人写的跟我的一毛一样啊？为啥我的跑不出来？？哭唧唧呜呜呜…然后猛然发现自己把text打成tetx了啊啊啊啊啊…我太菜了贴上代码让大家嘲笑我：HTML<!DOCTYPE html&...

2019-11-11 13:43:56 130

原创【fgm.cc练习1-2】切换css文件、闭包运用

练习网址：http://www.fgm.cc/learn/lesson1/02.html里面的注释是我的一些疑惑或者问题，希望朋友们能指点迷津，感谢你们。我的代码：HTML<!DOCTYPE html><html lang="zh"> <head> <meta http-equiv="content-type" content="text/...

2019-11-11 11:01:01 245

原创【fgm.cc练习1-1】我开始得好艰难......感谢各位指点迷津！

最近开始做前端的简单小练习，网址贴在这了http://www.fgm.cc/learn/，好像还挺多人推荐的。我就在第一个小练习被打倒了。。。debug了一个下午也没找到问题所在，还call了好朋友来帮我看看，倒是发现我几个地方打错字了？？？结果也没成功跑起来。于是在CSDN提问了，没想到晚上就有两个朋友回答我了。实名感谢第二位朋友@天际的海浪，按照他的指点，我成功修改跑起来了！！！呜呜呜…我太难...

2019-11-11 08:53:14 313

空空如也

前端fgm练习：不去掉空格，子节点的个数为何不对？

简单练习：CSS多个类名，样式为何不见了？