笔记
流灬
这个作者很懒,什么都没留下…
展开
-
事件委托之实现简单的计算器
事件委托:原理就是事件有冒泡机制,当子元素触发事件后,事件会往外传给父元素。此时事件可以添加给只添加父元素,然后统一处理子元素的需求或者还可以分开处理。通过下面的例子来了解事件委托:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <m...原创 2020-04-07 07:21:08 · 671 阅读 · 0 评论 -
生成随机大小颜色位置正方形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-03-24 23:32:10 · 999 阅读 · 0 评论 -
实现切换按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-03-24 23:25:14 · 360 阅读 · 0 评论 -
用wihle实现一个乘法表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-03-19 23:52:40 · 124 阅读 · 0 评论 -
学习总结
总结了解html知道前端的三大工具:html、css、js他们的关系和在一个网页中他们各自担当的角色。html是结构,css是表现、js是行为使用html的基本标签会使用基本html标签,如u ins b br p img a border sub sup strong i table ol ul dl lid d dt td th tr form input del span d...原创 2020-03-15 22:19:51 · 78 阅读 · 0 评论 -
CSS——景深perspective属性
学习了css的3D动画属性和过渡属性后,我们已经可以用它来实现一些动画效果了,比如实现一个正方体。但是当我们实现了这个效果后会发现一个问题,就是我们能看到的面的大小都是一样的。事实上,它每个面的大小确实是一样大的,但是结合现实生活,我们会发现这样一个现象——相同大小的物体,假设它摆在我们眼睛的正前方,我们所能感知到它的大小也是会随着它离我们的距离而改变的。离我们越近,我们感知上感觉它越大,越远越小...原创 2020-03-08 16:35:16 · 3083 阅读 · 0 评论 -
简单用PS处理PSD文件
我们在写一个页面时经常需要插入一些图片,当从UI手上拿到设计稿后该如何快速简单的把所需要的图片从psd文件上单独存为一个图片呢?接下来讲述一些基本的操作。psd文件中有多个图层,所以当我们想要去选择自己所需图层时,应该先选择“移动工具”,然后勾选工具栏的“自动选择”和“图层”。这样的话我们移动工具点击时选中的是一个图层,而不是一组。如图红色区域所示:想要同时选择多个图层就选择的同时按住...原创 2020-03-03 08:58:25 · 1466 阅读 · 0 评论 -
元素高度自适应
在我们写网页时,不仅得把UI给我们的图给一比一还原出来,还需要去考虑网页会不时进行内容更新的问题和网页在不同窗口、不同分辨率在显示的效果。就拿内容更新来说,如果你把所有元素的高度在写网页的初期都固定了,那么进行内容更新时将会造成很大的麻烦,甚至就因为一点小改动而需要重新去布局。举个最直观的例子:.BOX{ width:800px; height:200px; margin:0 au...原创 2020-03-01 13:06:35 · 1179 阅读 · 0 评论 -
什么是盒模型
每个网页的结构都是由HTML元素构成的,而每个HTML元素在页面上加载的时候都是以一个盒子的形式去显示出来的。可以说盒模型是一个页面渲染的单位,通过定位每个盒子的大小及位置来完成整个网页的布局。盒子自身是没有样式的,通过CSS给这个盒子添加样式。盒子由内容层和背景层组成,背景层由背景颜色和背景图片组成,且背景层是不占网页的空间的。盒子内容层则由以下四部分组成:内容区(content)...原创 2020-02-24 09:24:59 · 136 阅读 · 0 评论