- 博客(69)
- 收藏
- 关注
原创 Flex布局详解
建立在主轴为水平方向时测试,即 flex-direction: row默认值: flex-start 左对齐flex-end:右对齐center:居中space-between:两端对齐,项目之间的间隔相等,即剩余空间等分成间隙。space-around:每个项目两侧的间隔相等,所以项目之间的间隔比项目与边缘的间隔大一倍。(边0.5,间隔1)建立在主轴为水平方向时测试,即 flex-direction: row。
2023-09-19 23:48:47 271
原创 CSS笔记
参考的是它的包含块。对兄弟元素的影响:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对父元素的影响:不能撑起父元素的高度,导致父元素高度塌陷;/*选中的是div的儿子p元素,但是排除title属性值以“你要加油”开头的*/参考离它最近的能滚动的祖先元素,当它的父容器也被推走的时候它也会跟着走。3、绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。3、固定定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主。/*选中的是div的儿子p元素,但是排除类名为fail的元素*/
2023-09-19 08:00:18 477
原创 HTML基础知识
bmp:.bmp,不进行压缩的一种格式。支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动图。jpg:.jpg或.jpeg,有损的压缩格式。支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。gif:.gif,仅支持256种颜色,色彩呈现不是很完整。支持的颜色较少、支持简单的透明背景、支持动态图。png:.png,无损的压缩格式。支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。webp:.webp,专门在网页中呈现图片,具备以上格式的优势,兼容性不太好。
2023-08-03 13:08:13 260
原创 flex:1是什么意思?
flex为两个非负数字n1,n2:分别为flex-grow和flex-shrink的值。flex:1即为flex-grow:1,经常用作自适应布局,将父容器的display:flex,侧边栏大小固定后,将内容区flex:1,内容区则会自动放大占满剩余空间。flex是flex-grow、flex-shrink、flex-basis三个属性的缩写,推荐使用此简写属性,而不是单独下这三个属性。可以发现,flex-grow和flex-shrink在flex属性中不规定值则为1,flex-basis为0%。
2023-04-20 13:09:23 442
原创 Vue3学习日记
什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
2023-04-18 08:34:15 346
原创 Git学习日记
Git是一个免费开源的分布式版本控制系统,旨在快速高效地处理从小型到大型项目的所有事务。Git易于学习,占地面积小,性能快得惊人。它比Subversion、CVS、Perforce和ClearCase等SCM工具具有便宜的本地分支、方便的暂存区域和多个工作流等功能。分布式的版本控制系统出现之后,解决了集中式版本控制系统的缺陷:1、服务器断网的情况下也可以进行开发(因为版本控制是在本地进行的)2、每个客户端保存的也都是整个完整的项目(包含历史记录,更加安全)
2023-03-31 09:47:57 327
原创 一个列表引发的思考(简单版)
最近老板让我按照设计图写一个页面,不嫌丢人的说这是我第一次写页面,哈哈哈。 然后设计图里有一个这样的需求,感觉挺有意思的。
2023-02-23 22:29:47 716
原创 Vue之Vue-CLI
vue基础vue-cli:vue-cli是vue脚手架,专门做工程化开发vue-router:vue-router用于在vue中实现前端路由vuex:当应用足够复杂时,可以借助vuex保管数据element-ui:ui组件库vue3Vue组件化编程模块与组件、模块化与组件化模块理解:向外提供特定功能的js程序,一般就是一个js文件。为什么用:js文件很多很复杂。作用:复用js,简化js的编写,提高js运行效率。组件组件的定义:实现应用中局部功能代码和资源的集合。为什..
2022-05-17 09:26:59 275 1
原创 Vue之Vue基础
vue基础vue-cli:vue-cli是vue脚手架,专门做工程化开发vue-router:vue-router用于在vue中实现前端路由vuex:当应用足够复杂时,可以借助vuex保管数据element-ui:ui组件库vue3VueVue核心Vue简介采用组件化模式,提高代码复用率、且让代码更好维护。声明式编码,让编码人员无需直接操作DOM,提高开发效率。使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。初始Vue第一个案例想让Vue工作,就必须创..
2022-05-10 09:22:45 734
原创 我的前端学习路线
大四下学期,我决定转为前端。我也不知道自己的决定是不是对的,因为这样会让我的时间更紧迫。我现在要忙毕业的各种事情,还要从头学一下前端。我们是三月份开学,三月的最后一天我的毕业设计完工。于是从四月一号开始,我边写论文边学前端,还有处理毕业的各种事情。为了激励我学习,在此记录下我学习前端的时间线,希望我在这不多的时间里,能尽力学到更多掌握更多!!!加油ヾ(◍°∇°◍)ノ゙!!!课程名称开始日期结束日期课程链接htm
2022-05-04 15:13:13 939
原创 ES7~ES11新特性
ES7Array.prototype.includesIncludes 方法用来检测数组中是否包含某个元素,返回布尔类型值存在返回true,不存在返回falseconst mingzhu = ['西游记','红楼梦','三国演义','水浒传'];console.log(mingzhu.includes('西游记'));//trueconsole.log(mingzhu.includes('从百草园到三味书屋'));//false指数操作符在 ES7 中引入指数运算符「**」,用来实现
2022-05-03 15:13:29 217
原创 ES6杂记
ES6中对象的简化写法ES6允许大括号里面直接写入变量和函数,作为对象的属性和方法。例: let nickname = '果粒陈'; let myNickName = function(){ console.log("我的昵称是果粒陈"); } const person = { nickname, myNickName, } consol
2022-04-29 10:35:00 1354
原创 Ajax学习笔记
一、Ajax简介AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的去 新方式。1、XML简介XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML 和 HTM L 类似,不同的是 HTML 中都是预定义标签,而 XML 中没有预定义标签, 全都是自定义标签,
2022-04-28 21:55:48 118
原创 Ajax杂记
设置请求头//设置请求头xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//Content-Type:设置请求体内容的类型//application/x-www-form-urlencoded:参数查询字符串的固定写法也可以设置其他头信息例如:xhr.setRequestHeader('name','cxjcxj');//自定义的此时浏览器会报错:不想让他报错怎么办?答:step1:
2022-04-27 21:03:09 357
原创 Ajax发送post请求
需求:鼠标放在框框里的时候,向服务端发送请求,结果回来之后,把响应体结果呈现在div中html文件中写ajax代码,并运行解决办法://在js中新增app.post('/server',(request,response)=>{ //设置响应头。('名字','值') 设置允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); //设置响应体 response.send('HELLO AJAX
2022-04-27 20:18:05 941
原创 Ajax发送get请求
需求:点击发送请求,将相应信息返回显示至ajax中 页面不刷新基于上一个Ajax的案例,上一个案例页面是这样的:【点击发送请求,在框框中显示相关数据】
2022-04-27 19:43:59 835
原创 ajax案例
案例准备页面:JS:客户端发送请求时,如果url的路径请求行的第二段内容路径是/server,就会执行回调函数中的代码,并且由response做出响应运行:在浏览器中查看:在地址栏中输入`127.0.0.1:8000/server,切记这个server就是js文件第九行那个server。如果不对应的话是打不开的,会报错。我就报错了,我写成sever了呜呜呜┭┮﹏┭┮然后打开是这个样子滴...
2022-04-27 08:25:31 204
原创 express框架(一)
没用过express框架,我也是小白,就是学习的时候用到了,做个记录前提=>安装了node.js安装express基本使用:在浏览器中打开:
2022-04-26 23:33:04 792
原创 jQuery学习
初识jQuerywhat一个优秀js函数库使用了jQuery的网站超过90%中大型WEB项目开发首选write less, do morewhyHTML元素选取(选择器)HTML元素操作CSS操作HTML事件处理JS动画效果链式调用(每个方法返回值为this)**读写合一(**读是针对第一个,写针对是所有)浏览器兼容隐式遍历易扩展插件ajax封装…how引入jQuery 库使用文件jQuery核心函数: $或jQueryjQuery核心对象:
2022-04-26 20:50:34 1420
原创 浅学一下bootstrap
Bootstrap容器流体容器class="container-fluid"width: auto固定容器class="container"固定容器特性//阈值@screen-xs: 480px;@screen-xs-min: @screen-xs;@screen-phone: @screen-xs-min;@screen-sm: 768px;@screen
2022-04-23 21:38:26 689
原创 Less入门
less入门LESS是一种动态样式语言扩展了CSS的功能添加了变量, Mixin, 函数等特性可以通过客户端编译引入less编译的js文件, 会增加客户端加载速度【这种用来编译的js文件引入时放在下面】可以通过服务端编译通过nodejs实现可以通过预编译转化成css文件再从html引入使用考拉编译器注释通过//编写的注释在编译成css后不会暴露通过/**/编写的注释才会暴露变量变量为延迟加载整个文件加载完后才给变量赋值,因此某个变量值可能是在这行语句后面定义的值使
2022-04-21 14:47:53 169
原创 css3媒体查询
css3媒体查询css3媒体查询是响应式方案核心媒体类型 all 所有媒体(默认值) screen 彩色屏幕 print 打印预览 projection 手持设备 tv 电视 braille 盲文触觉设备 embossed 盲文打印机 speech “听觉”类似的媒体设备 tt
2022-04-21 12:55:43 82
原创 HTML+CSS
html自结束标签标签一般成对出现,但是也存在一些自结束标签。例如:<img><img /><input><input />属性在标签中(开始标签或结束标签)还可以设置属性,属性是一个名值对(x=y)文档声明(doctype)文档声明用来告诉浏览器当前网页的版本<!--- html5的文档声明,写在网页最前面 --><!doctype html>字符编码编码:将字符转换为二进制码的过程称为编码解码:将二
2022-04-21 12:48:50 796
原创 JavaScript高级之线程机制与事件机制
四、线程机制与事件机制1、进程与线程Ⅰ- 进程程序的一次执行,它占有一片独有的内存空间可以通过windows任务管理器查看进程可以看出每个程序的内存空间是相互独立的Ⅱ-线程概念:是进程内的一个独立执行单元是程序执行的一个完整流程是CPU的最小的调度单元Ⅲ-进程与线程应用程序必须运行在某个进程的某个线程上一个进程中至少有一个运行的线程:主线程 -->进程启动后自动创建一个进程中也可以同时运行多个线程:此时我们会说
2022-04-21 12:32:16 234
原创 JavaScript高级之面向对象高级
三、面向对象高级此部分要求你对前方函数高级部分的1、原型与原型链比较熟悉,如果掌握不够好理解会相对困难1、对象创建模式Ⅰ-Object构造函数模式方式一: Object构造函数模式套路: 先创建空Object对象, 再动态添加属性/方法适用场景: 起始时不确定对象内部数据问题: 语句太多/*一个人: name:"Tom", age: 12*/// 先创建空Object对象var p = new Object()p = {} //此时内部数据是不确定的// 再动态添加属性/方
2022-04-21 12:28:21 968
原创 每日力扣—1.两数之和
题目链接题目:首先来说:JavaScript中的Map.has()方法该方法用于检查Map中是否存在具有指定键的元素。它返回一个布尔值,该值指示映射中是否存在具有指定键的元素。Map.has()方法将要搜索的元素的键作为参数,并返回布尔值。如果该元素存在于Map中,则返回true;否则,如果该元素不存在,则返回false。再来,分析题意:根据题意遍历数组。当遍历到数组下标为 i 的位置时,可以算出与该数字之和为目标值的数值other:other = target - nums[i]此时
2022-04-20 23:38:28 725
原创 JavaScript高级之函数高级
二、函数高级1、原型与原型链Ⅰ-原型 [prototype]函数的prototype属性每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)原型对象中有一个属性constructor, 它指向函数对象给原型对象添加属性(一般都是方法)作用: 函数的所有实例对象自动拥有原型中的属性(方法)代码示例// 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)console
2022-04-20 10:47:35 224
原创 JavaScript高级之基础总结
一、JavaScript基础总结1、数据类型相关知识点Ⅰ-基本(值)类型String: 任意字符串Number: 任意的数字boolean: true/falseundefined: undefinednull: null -->使用typeof时返回objectsymbol (ECMAScript 2016新增)。 -->Symbol 是 基本数据类型 的一种,Symbol 对象是 Symbol原始值的封装 (en-US) 。bigint, -->BigInt
2022-04-19 20:00:54 927
原创 有亿点点开心(*^▽^*)
昨天把毕业论文的初稿完成,挺开心的。让老师看了一下,被老师夸了,更开心然后我拿着初稿先去免费的各种Paper**查重网站查了查,基本9%。虽然这种查重没有什么可信度,但是还是挺开心的,嘿嘿(▽)。希望等过几天学校开放查重的时候,查重率不要太高!!!...
2022-04-19 11:13:18 83
原创 JavaScript基础之BOM
BOM浏览器对象模型(browser object model)BOM可以使我们通过JS来操作浏览器在BOM中为我们提供了一组对象,用来完成对浏览器的操作BOM对象:Window 代表的是整个浏览器的窗口,同时window也是网页中的全局对象Navigator 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器Location 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面History 代表浏览器的历史记录,可以通过该对象来操作浏
2022-04-16 16:43:28 140
原创 JavaScript基础之DOM
DOMDOM,Document Object Model 文档对象模型JS中通过DOM来对HTML文档进行操作。只要理解了DOM皆可以随心所欲的操作WEB页面文档。文档指的是网页,一个网页就是一个文档对象。 对象指将网页中的每一个节点都转换为对象模型。 模型用来表示节点和节点之间的关系,方便操作页面节点(Node)节点是构成网页的最基本的单元,网页中的每一个部分都可以称为是一个节点虽然都是节点,但是节点的类型却是不同的常用的节点:文档节点 (Document),代表整个网页元素节
2022-04-15 19:19:52 1592
原创 JavaScript基础之基础
JavaScript基础JavaScript简介一个完整的JavaScript实现应该由以下三个部分构成:ECMAScript 标准DOM 文档对象模型BOM 浏览器对象模型JS也是一种面向对象的语言JS的编写的位置可以将Js代码编写到标签的指定属性中。不推荐使用<button onclick="alert('hello');">我是按钮</button> <a href="javascript:alert('aaa');">超链接</
2022-04-15 18:10:44 797
原创 搭建SprintBoot框架的项目
构建项目新建一个项目:点击下一步之后就是选择模板的页面的,我的项目需要用到的模板有:我选择的模块:项目名称和项目地址:至此项目构建完成application.yml配置
2022-01-19 22:20:43 733
原创 idea中yml文件里出现中文导致报错的解决方案
第一步,将所有的文件默认格式改为UTF-8如果还不行。第二步:将导致本次报错的yml文件格式修改为UTF-8,然后重新编译运行
2022-01-19 21:51:42 1363
原创 lambda表达式遍历输出
@Test public void testGetForList(){ String sql = "select id,name,email from customers where id < ?"; List<Customer> list = getForList(Customer.class,sql,12); System.out.println("=====foreach========"); for (Cust
2022-01-10 09:47:37 682
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人