- 博客(21)
- 收藏
- 关注
转载 整理的一些起类名时常用的单词
命名写法:每个单词中间以“_”隔开 —main_left_box{}驼峰命名 从第二个单词开始每个单词的首字母大写 ---- #mainLeftBox{}用包含选择器,定义元素时候能找到这个元素并且不影响其他元素即可如:.top p span em{}可以写成 .top em{}前提是,不影响其它元素样式命名原则:可根据每块元素的主题 或者功能、在页面上的位置来定义名称,便于管理查找和维护常用简例如下:(可根据内容需要组合使用)顶部:top:顶导航:topNav top_nav页
2020-06-26 23:33:23
361
原创 JSONP是什么
查资料的解释: JSONP数据交互协议一般用于Ajax跨域请求。Ajax直接请求普通文件存在跨域无权限访问的问题,然而web页面上调用js文件则不受是否跨域的影响(凡是拥有src该属性的标签都有跨域的能力),于是通过web端跨域访问数据的时候,设法把数据装进js格式的文件里面。获取之后便可以在web端进一步进行处理。为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一 个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将
2020-06-26 23:25:33
472
原创 百度前端Day25-27训练
题目:使用上方的HTML结构(可以根据需要自行微调)为基础编写JavaScript代码当变更任何一个select选择时,更新 result-wrapper 的内容当所选时间早于现在时间时,文案为 现在距离 “所选时间” 已经过去 xxxx当所选时间晚于现在时间时,文案为 现在距离 “所选时间” 还有 xxxx注意当前时间经过所选时间时候的文案变化注意选择不同月份的时候,日期的可选范围不一样,比如1月可以选31天,11月只有30天,注意闰年同样,需要注意,通过优雅的函数封装,使得代码更加可读且可
2020-06-11 17:26:59
192
原创 十进制转二进制(含反转数组的3种方法)
反转数组使用知识点:可直接使用reverse()方法直接反转使用pop()方法,返回值是删除的项且是从数组后面开始删除使用push():接受任意数目的参数并添加到数组的末尾,返回值是新数组的长度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
2020-06-07 15:04:09
574
原创 圣杯布局和双飞翼布局的区别
圣杯布局和双飞翼布局:实现两边定宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。圣杯布局和双飞翼异同:相同点:圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部float浮动,但左右两栏加上负margin让其跟中间栏div并排,以形成三栏布局。不同点:不同在于解决”中间栏div内容不被遮挡“问题的思路不一样:圣杯布局,为了中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: re
2020-05-30 21:25:06
334
原创 使用javaScript做一个简单的切换消息页面
当页面需要容纳的信息过多,我们需要做一个简单的列表消息盒子来容纳消息,使得不跳转页面也可以分开显示消息,完整代码如下所示,需要注意的有两个部分当实现章节文章栏的隐藏的时候,是使用的定位,将3部分文章都开启绝对定位,即这3部分文章都脱离了文档流,层叠在了一起,默认情况下最后一遍文章是在最前面的,为了实现我们选择哪篇文章就让哪一篇显示的目的,我们就要可以添加一个类来动态的控制这些文章栏的z-index在我们使用JavaScript控制类的增加和删除的时候,需要注意的是,添加类的同时也要删除之前已经添加了的
2020-05-29 21:59:16
196
1
原创 闭包
闭包*指有权访问另一个函数作用域中的变量的函数,常见的创建闭包的方式就是在一个函数内部创建另一个函数闭包与变量因为闭包保存的是整个变量对象,而不是某个特殊的变量,所以闭包只能取得函数中任意变量的最后一个值,我们可以使用匿名函数重新在函数内复制一个仅存在在该匿名函数内的变量,与之前的变量相互独立出来,就可以使每个函数返回的变量值不相同function foo(){ var result = new Array(); for (var i =0; i<10;i+
2020-05-27 16:07:54
121
原创 数组的常见方法
方法名方法的作用concat连接2个或更多数组,并返回结果every对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回true, 否则返回falsefilter对数组中的每一项运行给定函数,返回该函数会返回 true的项组成的数组forEach对数组中的每一项运行给定函数。这个方法没有返回值join将所有的数组元素连接成一个字符串indexOf返回第一个与给定参数相等的数组元素的索引,没有找到则返回-1lastInde...
2020-05-25 18:30:54
88
原创 参数的值传递和引用传递
ECMAScript包括两个不同类型的值:基本数据类型:指的是简单的数据段,基本数据类型有Number、String 、Boolean、Null和Undefined。基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值 var a = 10; var b = a; b = 20; console.log(a) //a的值还是为10图示的话可以表示为:即可以看出b只是保存了a复制的一个副本。a和b是相互独立的,所以改变b并不会对
2020-05-25 15:50:31
210
原创 margin部分知识点整理
关于margin值为百分比时的参照元素:1.普通元素百分比margin都是相对于容器宽度计算的2.绝对定位元素的百分比margin是相对第一个定位祖先元素(relative、absolute,fixed)的宽度计算的,不管是垂直还是居中margin重叠通常特性:只发生在block水平元素(不包括flaot和absolute元素)不考虑writing-mode,只发生在垂直方向margin重叠3种情况相邻的兄弟元素父级和第一个子元素父级和最后一个子元素margin设置成auto在什
2020-05-23 21:27:46
310
原创 关于absolute的几点小结
关于absolute的几点小结float造成环绕效果,absolute保持跟随效果,absolute存在时float效果失效,absolute跟float一样具有包裹性,即由内容撑开宽高absolute具有跟随性,当没有设置top/left等偏移值时,这个元素只是脱离了文档流,会对后面的元素产生影响,但它自身原来在什么位置,现在还是在什么位置(即可以依据absolute的跟随性和margin来对元素进行定位),如下面这个例子:使用独立的absolute实现定位 下拉框与绝对定位: 大众做法:1
2020-05-23 00:14:23
257
原创 使用绝对定位实现居中的两种方法
方法一:1.左右居中(绝对定位)先给父元素开启相对定位,再给子元素开启绝对定位,然后将子元素向左移动自己的50%,使子元素的中点与父元素的起点对齐,然后再将子元素向右移动父元素的50%,这样子元素和父元素的中心点就刚好重合了<style> .box1{ width: 1000px; height: 50px; background-color: pink; position: relative; } .box2{ wid
2020-05-21 15:49:46
21864
1
原创 div包裹图片时div的高度会高于img高度
产生原因:img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会多出3px如下所示:解决办法:设置display:blockimg { vertical-align: middle; }即很多时候我们需要重置样式reset.css,部分代码如下:@charset "utf-8";/* 样式重置 */article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset,
2020-05-21 14:44:08
521
原创 如何给布局设置边框的时候边框能不重合
**问题:**我们再写页面的时候,经常会遇到需要给每个item加边框的情况,又因为每个item是相邻的,所以如果给每个item设置边框的话,边框会出现重合的现象,**解决办法一:**如下所示可以给item重合的边设置margin为负的边框宽度<style> ul { list-style: none; margin: 0; padding: 0; } /* 布局样式 */
2020-05-19 17:02:16
659
原创 如何解决一行放多个item后,item中间间隔相等且两边无空隙的问题
问题:在我们进行布局时, 我们经常会遇到要求中间摆放多个item,且两边不需要空隙的情况,我们通常会使用使用float浮动,然后设置margin-right/margin-left让他们之间产生间距, 那么这样会导致最后总有一个元素设置的margin-right/margin-left是多余的解决方法:解决办法一: 每一行的最后一个元素, 总是加一个class, 通过类选择器去除这个margin-right解决办法二: 通过伪类选择器,但是不支持IE8,或者会兼容性问题解决办法三(最优解):w
2020-05-19 15:03:53
733
原创 表单常见元素及input常见type
表单常见元素:form(表单):一般情况下,其他表单相关元素都是它的后代元素input:单行文本输入框、单选框、复选框、按钮等元素textarea:多行文本框select、option:下拉选择框button:按钮label:表单元素的标题fieldset:表单元素组legend:fieldset的标题input的常用属性:type:input的类型text:文本输入框(明文输入)password:文本输入框(密文输入)radio:单选框checkbox:复选框butt
2020-05-17 20:48:51
1638
原创 URL的介绍
URL是什么:URL的全称是Uniform Resource Locator(统一资源定位符)URL就是资源的地址、位置,互联网上的每个资源都有一个唯一的URL通过1个URL,能找到互联网上唯一的1个资源URL的基本格式 = protocol://hostname/path = 协议://主机地址/路径URL常见的协议:http:超文本传输协议,访问的是远程的网络资源,格式是http://http协议是在网络开发中最常用的协议,https协议相当于是http协议的安全版file:访问
2020-05-17 10:35:05
605
原创 target&iframe&a元素部分总结
target可以有以下几种取值1._self:默认值,在当前窗口打开URL2._blank:在一个新的窗口中打开URL3._parent:在父窗口中打开URL4._top:在顶层窗口中打开URL5.某个frame的name值:在某个frame中打开URLiframe元素:在一个HTML文档中嵌入其他HTML文档frameborder属性:用于规定是否显示边框1:显示0:不显示可以利用base元素设置当前页面所有a元素的默认行为,base元素写在head元素中<!DOC.
2020-05-17 10:27:51
376
原创 五大主流浏览器及四大内核
什么是浏览器最核心的部分----浏览器的内核也就是渲染引擎(Rendering Engine)。不同的浏览器内核有不同的解析、渲染规则,所以同一网页在不同内核的浏览器中的渲染效果也可能不同五大主流浏览器及四大内核:五大主流浏览器有:Google,IE,FireFox,Safari,opera常见的浏览器内核有Trident ( 三叉戟):IE、360安全浏览器、360极速浏览器、搜狗高速浏览器、百度浏览器、UC浏览器Gecko( 壁虎) :Mozilla FirefoxPresto(急板乐曲)
2020-05-17 10:15:27
242
原创 为什么JavaScript中的方法或者变量名称前会加下划线
为什么JavaScript中的方法或者变量名称前会加下划线即我们需要清楚加下划线不是js的某种要求,是程序员约定俗成的。1.通常变量前加下划线表示“私有变量”2.函数名前加下划线表示“私有函数”“私有”这个词不是js的官方说法,js也根本没有“私有变量”这种东西,只是程序员之间模仿其他有私有变量的语言的一种约定俗成的说法。只为代码维护方便,没特别意义。不是说加了下划线就有本质变化了在JavaScript的变量名或函数名前加“_” ,一般表示“私有”。//此函数名前加'_',即一方面表示此函数是'
2020-05-14 17:19:09
2098
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人