XCharazz-CSDN博客

原创 vue入门

3.前端开发工作应用官网BS(bootstrap)+JQ(jquey)修改+Appui+iOS+android+H5(修改频率比较大)小程序+微信公众号活动页(清明节,五一.六一.七夕)活动主题+主题色+流行语后台项目(OA,商城后台,财务系统,尽调系统等等)不对外公开,没有注册,只有登录给公司内部人员使用对页面没有具体的要求表单+表格+数据统计给公司管理层看(后台首页)4.问题及解决方案1.遇到问题,找到问题原因,进行解决2.及时的整理,(有道云笔

2021-03-30 09:01:53 128 2

原创 JS------面向对象与正则

面向对象与正则1.面向对象继承1.1 原型链继承原型链继承：子类的原型对象 = 父类的实例对象//1.父类构造函数function Student(name,age,sex){ this.name = name; this.age = age; this.sex = sex; this.arr = [1,2,3];}Student.prototype.classId = "1116"Student.prototype.study = function(){

2021-01-10 14:50:19 269

原创 JS------面向对象

面向对象1.概念面向对象：编码的一种思维方式面向过程：注重过程（一步一步实现某个功能）面向对象：注重结果（把所有和这个对象相关的所以功能都封装在一个对象中，使用的时候直接调用就可以）组成：属性 — 特征描述,静态 ------- var方法— 行为，功能，动态 ---- function对象三大基本特征封装继承多态：一个对象的不同表现形式2.创建方式2.1字面量创建 var girlFriend1 = { "name":"如花",

2021-01-10 14:49:35 124

原创 js 事件高级

事件高级1.回顾表单事件表单域事件提交事件 onsubmit重置事件 onreset表单元素事件获得焦点事件 onfocus失去焦点事件 onbluronchange：失去焦点时内容和之前有变化时触发oninput/onpropertychange:输入框内容发生变化时触发(实时)window和document？window–窗口document–文档locationlocation.href : 获取设置当前窗口显示的urllocation.h

2020-12-27 21:22:14 109

原创 JS---------BOM

BOM1.回顾1.1 数组迭代方法every()：对数组进行判断，所有结果都为true，最后结果才为truesome():对数组进行判断，只要有一个为true，结果就为truefilter():对数组进行判断，满足条件的组成一个新的数组返回map():循环数组，返回的值会组成一个新的数组返回forEach():循环数组1.2 DOM获取通过选择器document.querySelector（）：选择器选中的标签中的第一个document.querySelectorAll（

2020-12-25 18:39:55 76

原创 JS------DOM

DOM1.回顾1.1 字符串方法charAt()charCodeAt()indexOf()lastIndexOf()截取substring()slice()substr()split()replace()toUpperCase(),toLowerCase()trim()1.2 数组数组栈方法push，popunshift，shiftsplice(start，deleteCount，items)indexOf()sort()reve

2020-12-25 18:39:24 79

原创 js数组方法

数组方法1.字符串方法通过下标获取charAt(下标)：获取对应下标的字符charCodeAt(下标)：获取对应下标的字符编码 “0”–48 “a”–97 “A”–65检索位置，查找是否存在indexOf(searchValue,start):查询某个字符在另一个字符串中首次出现的位置，出现返回对应的下标，没有出现返回-1；作用：判断字符串中是否某个特定字符的存在lastIndexOf(searchValue,start):查询某个字符在另一个字符串中最后一次出现的位置，

2020-12-25 18:38:49 74

原创 JS时间对象与字符串对象

时间对象与字符串对象1.回顾定时器分类setTimeout语法：setTimeout(函数，时间ms)使用场景：广告弹窗setInterval语法：setInterval(函数，时间ms)使用场景：轮播图，倒计时，抽奖停止定时器clearInterval(intervalId)clearTimeout()封装实现功能声明一个函数，把主要代码放入到函数中找参数调用调试----- 来回目标值问题----&& 步长正负问题

2020-12-25 18:38:16 89

原创 js定时器

定时器1.定时器1.1 定时器的分类setTimeout：延迟定时器使用场景：广告弹窗语法：setTimeout(函数,时间ms) 延迟某个时间执行函数一次setInterval：间歇执行定时器使用场景:轮播图，倒计时，抽奖语法：setInterval(函数，时间) 间隔某个时间就执行函数一次1.2 定时器使用setTimeout<div>广告</div><script> var oDiv = document.ge

2020-12-25 18:37:37 170

原创 Javascript----------函数

函数1.函数函数的概念：函数是由事件驱动的或当他被调用时可重复使用的代码块使用场景：作为事件处理函数标签.事件 = function(){}函数封装代码复用1.1函数的声明和使用普通声明方式声明：function 函数名(){代码块}调用：函数名（）表达式声明声明：var 变量 = function （）{ 代码块}调用：变量名() //1.普通函数声明方式function study(){ console.log("沉迷学习，日渐消瘦");}

2020-12-25 18:36:05 60

原创 Javascript----------this与自定义属性

this与自定义属性1.回顾document.write和innerHTML的区别？共同点：都可以识别标签，都可以改变body标签的内容区别：innerHTML会覆盖document.write：写入的时候文档已经加载完成，会重绘文档-- 覆盖之前的内容。写入的时候文档没有加载完，不会覆盖原有的内容for循环：可以让特定代码执行指定的次数语法：for(初始化循环变量;循环条件;更新循环变量){ 循环体 }2.循环2.1 for循环嵌套图形//外循环控制

2020-12-17 22:24:10 283

原创 Javascript------流程控制语句

流程控制语句1.流程控制语句分类：顺序结构分支结构(分支结构、分支语句) ：if-else循环结构 for while1.1 分支结构ifif：如果，给一个假设条件，条件成立会执行一个操作语法：if(条件){ 条件成立执行的代码 }//1.如果有钱(100块),花两块买彩票，中500万var money = 99;if (money >= 100) { console.log("花两块买彩票，中500万"); console.log("买500万的泡面

2020-12-16 21:04:32 74

原创 JS------数据类型

1.数据类型根据数据特性、以及存储空间位置、存储容量进行划分2.1 数据类型的分类js数据类型分为6大类五大基本数据类型number ：数值string：字符串 “” ‘’boolean：布尔 true falseundefined：未定义null：空复合类型(复杂类型、引用类型)object ：对象array：数组function：函数2.2 基本数据类型number：小数、整数、负数、二进制、八进制、十六进制、NaN、infinity//1.

2020-12-16 09:42:58 65

原创 JavaScript--------js初识

1.js历史(了解)1995年，网景(NetScape)开发出了一款大型商用浏览器，后台用java解决问题：解决前端的表单提交问题要求：尽可能要和java像，要比java简单开发：布兰登.艾奇借鉴 10天命名：LiveScript ---- > javaScript (热点)微软 – 搭载了一个克隆版的JavaScript — JScriptECMA(欧洲计算机制造商协会)（记忆）制定标准：ECMAScript1.0 ECMAScript5.0: es5

2020-12-14 22:19:51 134 1

原创 CSS----------响应式布局之grid网格布局

响应式布局之grid网格布局二维布局更加灵活好用相对于弹性盒兼容性差(ie11以及以上)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fm3TGJoq-1607777189412)(media/grid布局容器.png)]<div class="container"> <div class="item"> <p>1</p> </div> <div

2020-12-14 09:01:47 174

原创 CSS-----------响应式布局

day18自适应 :随着屏幕发生宽高大小变化响应式布局响应式：随着屏幕发生宽高大小变化 + 盒子布局发生变化需要技术点：媒体查询 + 流式布局(phone端)用户界面鼠标样式cursor盒子变大小属性resize:none不可变/both水平垂直尺寸可变/vertical垂直可变大小/horizatail水平方向可变大小新盒模型文本多列布局排列多行文字大量文字...

2020-12-14 09:01:16 65

原创 CSS------视口布局

视口布局vw,vh 视口单位相对单位所有设备的视口100vw ,100vh100vw : viewport width 视口宽度，浏览器可视区域的宽度100vh : viewport height 视口高度，浏览器可视区域的高度750px 100vw 1vw = 7.5px;375px 100vw 1vw = 3.75px以设计稿为准:假设还是750px设计稿 750px=100vw 1px=0.13333vw;预设字体基础值 100px 1r

2020-12-14 09:00:50 141

原创 CSS--------Less 移动端布局

LESS变量类混入导入.css--->.css .less --->.less 导入@import "文件路径";嵌套父子嵌套 .a>.b .a { .b { }}兄弟平行 .a +.b .a { }.b { }如果想加伪类；.a{ //&代指上一级选择器 &:hover { }}编译后效果:.a:hovr {

2020-12-14 09:00:21 177

原创 CSS---------弹性盒子

弹性盒布局css3(伸缩盒布局)传统布局的局限性清除浮动影响很难实现居中结构不灵活不能随时添加盒子弹性盒布局非常灵活提供一套浏览器内置布局特点：一维布局固定的css属性[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ae7v8cWh-1607776830159)(media/弹性盒兼容性.png)]决定了这个布局一般用在移动端[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2E36pPXE-1

2020-12-14 08:59:29 97

原创 CSS---------过渡变形动画

动画：过渡，变形，关键帧动画过渡从一个状态到另外一个状态（两个状态的连接最初，最终）的变化，并且时间的持续transition: 要过渡的属性持续时间s/ms 运动的曲线延时的时间s/ms;transition: width 2s linear 0s; transition: all 1s linear 2s; transition:width 2s linear 0s ,height 1s linear 0s ,background-color .5s

2020-12-14 08:58:55 108

原创 CSS3属性

css3 就是css第3个版本增加了一些选择器，布局，动画，背景，新盒模型，私有前缀;选择器表单选择器:focus 聚焦选择器选择的是当下被聚焦的表单元素input:focus {}:checked 勾选选择的是当下被勾选的复选框或单选框input:checked {}:disabled 选择的是当前被禁用的元素:enabled 选择的是当前没有被禁用的元素::placeholder 选择的是文本框里提示的文字案例：修改单选框和复选框的默认样式[外链图片转存失败

2020-12-14 08:58:07 69

原创 CSS-----语义化标签表单控件类型

语义化标签解决语义化兼容性问题表单控件类型表单控件属性音视频标签css3新增选择器新增语义化布局标签header.footer,nav ,aside, article>section, figure （推荐在移动端使用）ie8及其以下不支持语义化布局标签 —》 1. 不要在PC端用这些标记 2. 解决兼容性问题**解决兼容性问题 **ie8- 不认识标记那我们让它认识即可手动去创建这些标记document.createElement("标..

2020-12-14 08:56:35 151

原创 CSS--------BFC布局经典的多列布局

BFC规则1. 什么BFC规则？Block Formatting Context 块级格式化上下文块级元素的渲染区域规则 BFC盒子外部不影响内部内部不影响外部2. 哪些属性可以触发BFC规则？ 1. float不为none 2. position属性为absolute和fixed 3. oveflow不为visiable 4. html 根标签 3. BFC有哪些规则 1. BFC盒子内部的子标签按照垂直从上到下排 2. 共用一个BFC盒

2020-12-12 20:25:19 92

原创 CSS-------兼容性问题

兼容性问题1、ie8下图片边框问题（记）<a> <img src=""></a>解决办法：reset.cssimg { //取消默认添加的边框 border:none;}2. ie7下子元素相对定位父盒子overflow属性失效问题3. ie6下小高度盒子问题原因：ie6下有默认行高4. ie6浮动双边距问题5. ie8下透明度问题（记）背景透明, 内容不透明background-color:rgba(0,0

2020-12-12 20:12:31 70

原创 CSS----- 实现箭头表单结构文本溢出处理

实现箭头原理：定位两个三角形（边框）<style> .box { width: 50px; height: 50px; /* background-color: pink; */ position: relative; margin-left: 100px; margin-t

2020-12-12 19:58:05 310

原创 CSS------------鼠标样式属性

鼠标样式属性cursor:auto; 默认cursor:crosshair; 加号cursor:text; 文本竖标cursor:wait; 等待cursor:help; 帮助cursor:progress; 过程cursor:inherit; 继承cursor:move; 移动cursor:ne-resize; 左下右上箭头cursor:ns-resize; 向上向下箭头cursor:nw-resize; 左上右下箭头

2020-12-12 19:47:13 273

原创 CSS-----项目前期工作

文件命名规范统一用小写的英文字母，数字和下划线的组合，不得包含汉字空格和特殊字符。原则： 1）方便理解，见名之意2）方面查找例如：首页—index产品列表—prolist产品详细页面—pro_detail新闻列表—newslist新闻详细页面—news_detail发展历史—history关于我们—aboutus联系我们—linkus，contactus信息反馈—feedback留言—leavewords图片命名规范图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类

2020-12-12 19:46:03 105

原创 CSS----------PS基础操作

PS基础操作标尺设置ctrl+R 或者视图–》标尺鼠标放上去右键切换单位为像素标尺工具按shift拉出水平线和垂直线按shift+alt可以测量角度吸管工具标尺那点住吸取颜色即可文字工具T编辑—》首选项—》单位与标尺 ----》文字单位设置为px抓手工具快捷键空格选择工具快捷键 V作用：选择图层，拖拽图层切片工具1.切刀选择区域文件—》导出—》存储为web所用格式选择切片改类型背景透明选png 颜色单一选gif 普通图片选 jp

2020-12-12 19:26:42 57

原创 CSS-------微信滑动门技术

微信滑动门技术什么？特殊背景图技术（特点：背景图颜色单一，对称的，阴影，边框…）原理：是一张宽度大小固定的图片铺到宽度不确定的盒子里，需要父子关系的两个盒子，内部盒子（子元素span）铺图片的右上角位置(backgrpund-position:100% 0%)，外侧盒子（父元素a）铺图片的左上角位置(backgrpund-position:0% 0%) <style> * { padding: 0; margin:

2020-12-12 19:26:00 126

原创前端面试题3（html/css）

一、简述BFC规则特性，及解决的问题?1、BFC规则内部的标签会在垂直方向上一个接一个的放置垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。BFC的区域不会与float的标签区域重叠计算BFC的高度时，浮动子标签也参与计算BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然2、BFC解决的问题解决外边距折叠特性的第②条：垂直方向上的距离由ma

2020-12-12 19:14:19 130

原创前端面试题2（html/css）

一、图片间隙问题，如何解决?两个图片之间和图片下方多出的空白间隙可以使用以下方式解决。方法 1：将图片显示为块：解决下方间隙img{display:block;}方法 2：改变图片的 vertical-align :解决下方间隙img{vertical-align:middle;}除了 middle值，还可以设置为 top| bottom 等方法 3：设置图片父级标签的 font-size:0;line-height:0; 水平间隙，图片下方间隙都能解决.imgwrap{font-

2020-12-12 19:11:56 72

原创前端面试题1（html/css）

一、常见的浏览器及其内核浏览器：IE，Chrome，FireFox，Safari，Opera。内核：Trident，Gecko，Blink，Webkit。1，使用Trident的是internet explorer，国产的绝大部分浏览器。2，使用Gecko的是Mozilla Firefox3，使用Blink的是Chrome和Opera4，使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit二、b和strong (i和em)标签的区别?

2020-12-12 19:04:16 75

原创 CSS--------定位position 溢出圆角边框

布局核心：盒模型（间距）浮动（并排）定位（覆盖+ 特殊位置）定位类型position静态定位position:static; 默认值静态定位不能使盒子位置变化不适合布局作用：解决低版本浏览器兼容问题相对定位position:relative;能不能使盒子发生位置变化 yes 2. 参考对象：自身初始位置 3. 脱离不脱离标准流不脱离标准（保留原来位置） 4. 是否适合布局：不适合布局（压盖，

2020-12-11 21:23:57 472

原创 CSS-----浮动带来的影响及解决办法

布局第二大块盒模型行内块行内块并排缺点：中间有间距文本内容行数多少不一样的时候会出现对不齐现象浮动属性作用：专业解决并排float: left左侧浮动/right右侧浮动/none不浮动;float:none;默认值标准状态标准流浏览器解析块元素从上到下一行一个垂直排列行内元素并排中间有间距[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cRafAEU-1607447845637)(media/标准流.png)]浮动特

2020-12-09 01:19:21 357

原创 CSS----基础入门（03）

盒模型组成以及用法背景属性语义化理解选择器进阶，优先级计算外边距margin使用：上外边距可以使盒子向下移动左外边距可以使盒子向右移动右下外边距不能使盒子发生移动只能将这个盒子与其他盒子的距离拉开外边距可以设置负值margin:10px;margin: 0 auto ;水平居中（1.块类型 2.明确可以计算的宽度）*{margin:0;padding:0;}内边距padding使用：上下左右内边距全部有用移动内容位置加了内边距.

2020-12-09 01:17:13 96

原创 CSS--基础入门（02）~~盒模型

文本相关的css属性元素的分类与转换布局核心—》盒模型在线的css手册网址:http://css.cuishifeng.cn/text-decoration-line.html文本相关的css属性字体大小颜色字体粗细字体斜体正体字体类型行高（行间距）水平对齐方式垂直对齐方式字符间距词间距文本格式化输出首字母操作缩进文本修饰字体属性font:字体是否是斜体字体粗细字体大小/行高字体类型;字体是否是斜体 .

2020-12-09 01:14:06 145 1

原创 CSS-基础入门（01）

超链接列表系列表格结构引入CSS三个方法的区别css选择器（基础）css文本属性超链接链接 anchor 锚点<a href='跳转的地址'>文本or img or div </a> 属性：href:跳转地址target:设置打开方式target:_self本页/_blank空白页，新页base标记<head> <meta charset="UTF-8"> <meta name="viewpor.

2020-12-09 01:11:54 51

原创前端发展史及浏览器内核

前端开发用前端技术实现用户界面前端技术：基础三大要素 html5 css3 javascript +js衍生物（vue,react,angular框架,node.js）用户界面:pc端 + 移动端app （页面+交互+数据渲染）发展史web1.0阶段蒂姆·伯纳斯·李 [1] （Tim Berners-Lee）界面：只能读不能写web2.0阶段布兰登·艾奇（Brendan Eich，1961年～） JS 有了交互只能读还能写建设者web3.0阶段（大前端）

2020-11-25 08:34:15 133

原创 Typora的使用方法

1.标题ctrl+1 一级标题ctrl+2 二级标题ctrl+i…6or# + 空格标题文字 +enter 一级标题## + 空格标题文字 +enter 二级标题....6个day01HTML语言2.段落 ctrl+0阿湖府邸是否合适改二手房东风浩荡是非得失阿飞赛诺菲3. 插入图片ctrl+shift +i(img-XG57zqNu-1606096157695)(media/1.jpg)]设置：文件—》偏好设置—》图片—》勾选优先本地路径—》关闭—》打开<img

2020-11-23 10:08:16 353

空空如也

空空如也