前端
文章平均质量分 83
福星高照~
这个作者很懒,什么都没留下…
展开
-
React、JSX简介、渲染列表、基础和复杂的条件渲染
其中,react-basic为项目名(自定义)原创 2024-07-04 18:04:25 · 431 阅读 · 0 评论 -
Web APIs-DOM-事件相关整理(完成网页交互)
三要素:事件源(对象:按钮、dom元素、文本框)、事件类型(方式:鼠标经过mouseover、鼠标单击click等)、事件处理程序(做啥事:)程序检测有没有事件产生(事件:比如单机一个按钮(编程时系统发生的动作或者事情)),一旦有触发,就立即调用一个函数作出响应。淡入淡出-----获得焦点,透明度为1,离开焦点,透明度为0(total.style.opacity=0)焦点事件(表单获得光标):focu是(获得焦点)、blur(失去焦点)文本事件(表单输入触发):input (用户输入事件)原创 2024-06-25 22:13:44 · 762 阅读 · 0 评论 -
Web APIs--Dom获取&属性操作
操作元素内容(修改元素的文本更换内容DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。方法:1.对象.innerText 属性2.对象.innerHTML 属性1. 元素innerText 属性将文本内容添加/更新到任意标签位置显示纯文本,不解析标签4.操作元素属性。原创 2024-06-20 16:31:29 · 740 阅读 · 0 评论 -
JavaScript对象
改和增语法一样,判断标准就是对象有没有这个属性,没有就是新增,有就是改。原创 2024-05-23 21:20:21 · 702 阅读 · 0 评论 -
JavaScript函数
显示转换:Boolean(内容)原创 2024-05-22 22:33:09 · 625 阅读 · 0 评论 -
JavaScript初识2
一、编译型语言(Java等语言)优点:运行速度快,代码效率高,编译后的程序不可修改,保密性较好。缺点:代码需要经过编译方可运行,可移植性差,只能在兼容的操作系统上运行。二、解释型语言(JavaScript、Python等)优点:可移植性较好,只要有解释环境,可在不同的操作系统上运行。缺点:运行需要解释环境,运行起来比编译的要慢,占用资源也要多一些,代码效率低,代码修改后就可运行,不需要编译过程。原创 2024-05-20 22:07:58 · 810 阅读 · 0 评论 -
JavaScript初识
未定义是比较特殊的类型,只有一个值 undefined。只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。工作中的使用场景:我们开发中经常声明一个变量,等待传送过来的数据。如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined,就判断用户是否有数据传递过来。原创 2024-05-20 20:55:04 · 739 阅读 · 1 评论 -
JavaScript基本软件和配置
格式化在学vue时可以关掉。原创 2024-05-20 09:47:42 · 136 阅读 · 0 评论 -
CSS定位
1. 一定记住 相对定位、固定定位、绝对定位 两个大的特点:(1)是否占有位置(脱标否) (2) 以谁为基准点移动位置。2. 学习定位重点学会子绝父相。问题:1. 绝对定位和相对定位到底有什么使用场景呢?2. 为什么说相对定位给绝对定位当爹的呢?原创 2024-05-15 21:55:53 · 1797 阅读 · 0 评论 -
前端开发必备利器---像素大厨PxCook
3. 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word。复习点:我们用到清除浮动,因为 box-hd 里面的盒子个数不一定是多少,所以我们就不给高度了,但是里 面的盒子浮动会影响下面的布局,因此需要清除浮动。3 号盒子为底下部分,box-bd -- 里面是无序列表,有 10 个小 li 组成。1 号盒子是通栏的大盒子 banner,不给宽度,给高度,给一个蓝色背景。原创 2024-05-14 16:05:21 · 5083 阅读 · 2 评论 -
CSS清除浮动详解、本质和方法总结
① 父级没高度。(有高度就不会有浮动引起的问题了)② 子盒子浮动了。(只有浮动的盒子会引起脱标 会有问题)③ 影响下面布局了,我们就应该清除浮动了。原创 2024-05-14 15:37:24 · 861 阅读 · 1 评论 -
CSS常见网页布局样式、详解、流程、代码
开始写top:top是顶栏的,所以不用设宽度,默认的块级元素和浏览器一样宽可以发现,banner上下有边距,代码调整为box分成好几个盒子,所以用ul和li来表示li是有小圆点的,但此时还看不到添加box的样式后可以看到要去掉小圆点,这一步通常在使用ul和li时都会用到,需要记住,可以直接写li{},不用前面加类再写,如.box li{}现在就可以设置li的高度和宽度了,这个时候li前面要加类.box出现这种情况,就是我们前面讲解的浮动float了添加:还原创 2024-05-14 14:44:50 · 1881 阅读 · 1 评论 -
CSS浮动(float)是什么、为什么、浮动特性、应用举例
什么是浮动.left,.right {/* 层叠性 */.right {左青龙原创 2024-05-12 22:02:08 · 883 阅读 · 0 评论 -
css、盒子模型2个案例、代码分析、结论总结
1. 布局为啥用不同盒子,我只想用div?标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p2. 为啥用辣么多类名?类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。3. 到底用 margin 还是 padding?大部分情况两个可以混用,两者各有优缺点,但是根据实际情况,总是有更简单的方法实现。最后一定多运用辅助工具,比如屏幕画笔,ps等等案例2:快报模块。原创 2024-05-10 15:57:49 · 166 阅读 · 0 评论 -
网页美工、ps的基本操作
来做的,所以以后我们大部分切图工作都是在。,鼠标可以变成小手,拖动 PS 视图。因为网页美工大部分效果图都是利用。:可以打开我们要测量的图片。右击标尺,把里面的单位改为。, Ctrl+ 减号(-):可以打开标尺,或者。Ctrl+ 加号(+)可以取消选区,或者在。原创 2024-05-10 14:50:53 · 220 阅读 · 0 评论 -
css盒子模型详解
这部分是重中之重,一定要掌握!!!!!!页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面目标:1.能够准确阐述盒子模型的4个部分2.能够利用边框复合写法给元素添加边框3.能够计算盒子的实际大小4.能够利用盒子模型布局模块案例5.能够给盒子设置圆角边框6.能够给盒子添加阴影7.能够给文字添加阴影。原创 2024-05-09 17:11:12 · 591 阅读 · 0 评论 -
前段基础重点总结、css和HTML常用重点部分整理
body {/* 复合属性:简写方式,顺序不可换 */*/(1)shift+alt+下箭头-----------复制(2)ctr+d---------------选定多个相同单词(一起改)(3)ctrl+alt+上/下箭头---------添加多个光标(4)Ctrl+h-------全局替换(5)ctrl+g---------快速定位到某一行(6)shift+alt+拖动鼠标------------选择某个区块。原创 2024-05-09 15:50:34 · 482 阅读 · 0 评论 -
前端、css三大特性、层叠性、继承性、优先级、权重的叠加、练习题代码分析
4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为。text-,font-,line-这些元素开头的可以继承,以及color属性。, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是 0。CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和字号。如果子元素没有设置行高,则会继承父元素的行高为 1.5。此时子元素的行高是:当前子元素的文字大小 * 1.5。如果是复合选择器,则会有权重叠加,需要计算权重。原创 2024-05-08 22:17:07 · 411 阅读 · 0 评论 -
前端、css背景颜色、图片、平铺、图片位置、图像固定、复合写法等、案例分析代码
背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)二、案例分析五彩导航练习价值:1. 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.2. 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.3. 链接里面需要设置背景图片.因此需要用到背景的相关属性设置.4. 鼠标经过变化背景图片,因此需要用到链接伪类选择器.原创 2024-05-08 15:26:56 · 1109 阅读 · 0 评论 -
前端、css元素显示模式的分类特点总结、模式转换,snipaste的使用,案例代码分析
了解元素的显示模式可以更好的让我们布局页面.1. 什么是元素的显示模式2. 元素显示模式的分类3. 元素显示模式的转换1.原创 2024-05-07 16:30:21 · 726 阅读 · 1 评论 -
前端、css复合选择器分类介绍、代码及案例演示、注意事项
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。元素2 可以是儿子,也可以是孙子等,只要是元素1 的后代即可。(2)加类选择器也是可以的,可以实现特定几个的变化。选择元素1 里面的所有直接后代(子元素) 元素2。又称为包含选择器,可以选择父元素里面的子元素。元素1 是父级,元素2 是子级,最终选择的是。元素1 和 元素2 可以是任意基础选择器。选择元素 1 里面的所有元素 2。元素1 是父级,元素2 是子级,原创 2024-05-06 22:13:29 · 934 阅读 · 0 评论 -
前端、css、Emmet语法生成HTML标签、生成css样式、快速格式化代码
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法.1. 快速生成HTML结构语法。1.1快速生成HTML结构语法。2. 快速生成CSS样式语法。原创 2024-05-06 20:18:59 · 272 阅读 · 0 评论 -
前端、CSS基础选择器、字体属性、文本属性、引入方式、调试工具的介绍和使用、代码及案例
2.使用调试工具① Ctrl+滚轮 可以放大开发者工具代码大小。② 左边是 HTML 元素结构,右边是 CSS 样式。(或者上下)③ 右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色。④ Ctrl + 0 复原浏览器大小。⑤ 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误。⑥ 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。原创 2024-05-05 16:32:37 · 367 阅读 · 4 评论 -
前端基础、HTML新手常用快捷键总结及示例效果
(6)shift+alt+拖动鼠标------------选择某个区块(可以进行整体修改或删除)(7)ctrl+“+”/ctrl+“-”------------放大或缩小整个界面。(7)ctrl+“+”/ctrl+“-”------------放大或缩小整个界面。(2)ctr+d---------------选定多个相同单词(一起改)(2)ctr+d---------------选定多个相同单词(一起改)(6)shift+alt+拖动鼠标------------选择某个区块。原创 2024-04-28 16:22:30 · 308 阅读 · 1 评论 -
前端基础、HTML标签、文本格式化标签、特殊字符代码总结
文本会在浏览器窗口右端时自动换行,如果想强制换行,就需要使用换行标签 break。特点:1.单个标签。2.和段落不同,换行知识简单的开始新的一行,段落之间会插入一些垂直间距。2.lang语言,定义语言,zh-CN中文,en英文,fr法语......特点:1.加了标题的字体会变粗,字号会变大,2.一个标题独占一行。DOCTYPE>不是HTML标签,只是文档类型声明标签。2.标题标签-,作为标题使用,并依据重要性递减。1.标签语义:即标签的含义,如:标题标签,段落标签。原创 2024-04-28 22:01:09 · 489 阅读 · 0 评论 -
前端基础、HTML表格列表表单标签、表单控件、使用场景及代码
(定义项目/名字)和(描述每一个项目/名字)一起使用名词1名词1解释1名词1解释2原创 2024-04-29 22:26:37 · 1002 阅读 · 0 评论