前端学习
关注
分享
扫一扫
yi把菜刀
菜狗一枚，多多包涵
展开
-
JavaScript的关键字和保留字大全
ECMA-262第6版规定的所有关键字如下：breakdointypeofcaseelseinstanceofvarcatchexportnewvoidclassextendsreturnwhileconstfinallysuperwidthcontinueforswitchyielddubuggerfunctionthisdefaultifthrowdeleteimporttryECMA-262原创 2021-01-02 01:24:55 · 293 阅读 · 1 评论 -
通过JavaScript如何做一个仿京东的跟随图片放大镜效果？
效果示例：html+css的片段：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2021-01-01 01:47:11 · 311 阅读 · 0 评论 -
CSS权威指南之选择器补充
1.给拥有两种类属性的标签内加css样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-12-29 17:04:02 · 236 阅读 · 0 评论 -
Web APIs之DOM的各种操作(一)
什么是Web API？· Web APIs 是w3c 组织的标准· Web APIs 我们主要学习 DOM 和 BOM· Web 是我们 JS 所独有的部分· 主要学习页面的交互功能·需要使用之前的 JS 基础部分做铺垫API 和 Web API 总结：1.API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现2.Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果3.Web API 一般都有输入和输出(函数的传参和返回值)原创 2020-12-24 16:01:06 · 308 阅读 · 0 评论 -
JavaScript学习笔记（二）
1.字符串对象根据字符返回位置：str.indexof(‘要查找的字符’,起始位置)例如var str = '改革春风吹满地,春天来了' console.log(str.indexOf('春')); console.log(str.indexOf('春',3)); //从索引号是 3 的位置开始往后查找2.求某字符串中某字符出现的次数： var str = 'abcoefoxyozzozoopp'; var num=0;原创 2020-12-22 14:14:47 · 150 阅读 · 0 评论 -
JavaScript学习笔记（一）
我的Javascript基础学习交互编程的三个基本要素：1.用户输入2.程序内部处理3.输出结果基础知识点：1.数据类型: 字符串型。数字型，bool型，undefined型，null型,infinity(无穷大),-infinity(负无穷大),NaN(Not a number)2. 自增： n++ 或者 ++n3. 自减： n-- 或者 --n4. 一个等号为赋值，两个等号为判断，三个等号为全等5. && 逻辑与 ，|| 逻辑或 ，! 逻辑非6. if 语原创 2020-12-21 14:09:16 · 243 阅读 · 0 评论 -
CSS3新特性-2
CSS苦逼学习日记（13）2D转换之 transform如何让一个元素垂直居中呢？除了之前的使用了margin:0 auto;和行高等于盒子高度或者或者调内外边距之外还有什么更好的方法呢？当盒子高度变化之后如何不改代码也让一个盒子垂直居中呢？ 下面就是transform中的translate的使用：1. translate的使用使用方法 transform: translate(x,y)定义2D转换中的移动，向右和向下分别为x和y的正半轴1st：translate最大的优点:不会影响到其他盒子原创 2020-12-21 01:51:36 · 333 阅读 · 0 评论 -
CSS3新特性-1
CSS苦逼学习日记（12）1.属性选择器：属性选择器是选择一个标签内部所设置的某一个属性，这个属性可以是 class（类），可以使type（类型）等属性。属性选择器的权重是 10 和类选择器的权重一致有三种方式：符号解释=选择某属性的值全称为xxx的标签^=选择某属性的值开头为xxx的标签，若开头xxx为 icon，则 icon1，icon2等值都会被选择到$=选择某属性的值结尾为xxx的标签，若以data结尾，则 a-data,b-data等值都会被选择到原创 2020-12-21 00:11:39 · 231 阅读 · 0 评论 -
HTML5新特性
我的HTML简陋笔记（3）1.语义化块级元素：解释：根据语义来创建的新的标签标签名解释属性header头部标签块级nav导航栏标签块级section某个区域块级aside侧边栏标签块级footer尾部标签块级这些标签更能一眼看出此标签是什么作用，当然 因为是新特性，要注意兼容问题2.视频标签：视频标签使用：video此标签可以适应当前绝大多数后缀格式的视频：MP4 = MPEG 4文件使用 H264 视频编解码器和AAC原创 2020-12-20 03:02:08 · 329 阅读 · 1 评论 -
CSS一个盒子如何变成三角形？
CSS苦逼学习日记（11）你想成功做出以下的图形吗？上图在左右两边有一个斜着的竖线分割开了两部分内容，其实是在盒子内部多放了一个盒子实现的效果，因为这个盒子就是三角形的形状。那么是如何制作的呢？图一代码如下： .box1 { width: 0; height: 0; border-color: transparent red transparent transparent; border-s原创 2020-12-20 02:09:09 · 2304 阅读 · 1 评论 -
京东初始化主要的CSS
我的CSS苦逼学习日记（10）* { margin: 0; padding: 0 } em, i { font-style: normal } li { list-style: none } img { border: 0; vertical-al原创 2020-12-20 01:41:03 · 659 阅读 · 1 评论 -
单行或多行文字溢出用省略号替代
当一个文本框的大小装不下我们所需要的文字的时候，就自然会用到省略号，下图的为淘宝的省略号部分就是当文字溢出时用省略号表示。那么我们应该怎么才能做到这样的效果呢？下面为如何使用此方法：1.单行的文字溢出用省略号表示：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev原创 2020-12-20 01:33:47 · 894 阅读 · 1 评论 -
vertical-align 属性
CSS苦逼学习日记（8）vertical-align全部可使用的属性：vertical-aligin: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length下表为大部分的描述：值描述baseline默认。元素放置在父元素的基线上。sub垂直对齐文本的下标。super垂直对齐文本的上标 。top把元素的顶端与行中最高元素的顶端对齐 .。text原创 2020-12-20 01:00:27 · 5464 阅读 · 3 评论 -
鼠标样式/表单轮廓线
CSS苦逼学习日记（7）鼠标样式：cursorli { cursor: pointer; }设置火箭所在对象上移动的鼠标指针才用何种系统预定义的光标形状。有5种属性值： default ，pointer ， move ，text ， not-allowed1.default：小白 默认；2.pointer ： 小手；3.move：移动；4.text：文本；5.not-allowed：禁止<!DOCTYPE html><html lang="zh-CN">原创 2020-12-20 00:32:50 · 262 阅读 · 1 评论 -
精灵图与字体图标的区别和用法（附Icomoon字体图标的使用方法）
CSS苦逼学习日记（6）精灵图1.精灵图是什么？：把许多小图标都放在一个大图片上，这样利用小图标的时候只需要重复使用多次利用同一张大图片，减少加载各种图片路径的时间，减小程序（网页）的运行速率，带来更高更好的用户体验2.精灵图如何起作用？：因为许多小图片都放在一个大图片上，所以每个小图片都有自己所相对于大图片的x轴和y轴的坐标，默认的是x轴向右和x轴向下为正值，若要移动到相应的位置，（基本上都是负值）改变background-position的x，y值即可，简写为： background：url原创 2020-12-16 13:46:10 · 766 阅读 · 0 评论 -
table和dl
我的简陋html总结（2）1.dl标签（自定义列表）dl是自定义列表，和ul，li同属于列表标签类 <dl> <dt>这就是大哥</dt> <dd>小弟1</dd> <dd>小弟2</dd> <dd>小弟3</dd> </dl>使用方法如图所示。 dd，dt都是块级元素，他们不能互相包含（dt的儿子中不能有d原创 2020-12-12 23:58:46 · 632 阅读 · 0 评论 -
CSS定位知识总结
我的CSS苦逼学习日记(5)定位分为：静态定位 相对定位 绝对定位 固定定位 黏性定位.静态定位**静态定位是浏览器默认的定位方式，当一个元素未给position时，其定位方式默认为position:static ，无须记住，只需要了解即可相对定位：相对定位是在以元素原来位置为基础的移动，是相对于他原来的位置。原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置），因此，相对定位没有脱标，他最典型的应用是给绝对定位当父盒子。绝对定位：绝对定位是在元素原创 2020-12-12 23:28:50 · 200 阅读 · 0 评论 -
CSS浮动知识的自我总结
CSS苦逼学习日记（4）本日记讲述了我学习浮动的总结。浮动的意思是 float；特点：1.一个不管是行内元素还是块级元素还是什么什么的，只要给它设置了浮动（float），就可以给它设置宽度和高度了。2.浮动的元素会脱离标准流，不占有位置，相当于一个在路上排队的人上天了，在天上排队，在下面排队的人因为这个位置空缺，自然的可以向前进（浮动的元素可以设置高宽但是不占有位置），下面不是浮动的元素会占有浮动元素的位置，但是会被浮动的元素压在下面。3.设置浮动的元素之间没有默认的内外边距了，会紧紧的贴在一起原创 2020-12-10 23:55:33 · 239 阅读 · 0 评论 -
盒子模型相关知识总结
本文章叙述的内容有：1.盒子padding2.盒子的margin3.盒子的边框和圆角边框4.盒子的阴影和文字的阴影首先讲述盒子模型由哪些部分组成：一个盒子原型如图所示：由盒子大小，padding值，border值和magin值大小构成在各个浏览器都会为每个盒子添加一个默认的内外边距的值。若想清除全部的内外边距的值，则加 如下代码 * { margin: 0; padding: 0; }*的意思是：全部margi原创 2020-12-10 01:01:53 · 517 阅读 · 0 评论 -
关于background背景和img图片
img的相关内容：因为img是行内替换元素，可以直接设置高度和宽度等。但是不会独占一行若直接使用img不给任何修饰，则是显示图片的原本大小 img { width: 60px; height: 50px; }上图所示则是设计img的宽和高分别为60px和50pximg { width: 100%; height: 50%; }上图所示则是设计img的长和宽分别占原创 2020-12-09 00:25:23 · 792 阅读 · 2 评论 -
CSS的背景和三大特性
CSS的苦逼学习日记（1）CSS有三种书写形式：1.直接在元素标签内书写2.在<head>与</head>之间创造的<style></style>之中书写样式，默认的是在title标签之下书写3.另外创一个style.css文件，把相关的样式放入其中，实现逻辑和美化的分离，并在title标签下面用link标签将其路径记录下来，才可以将两者联系起来，这一种方法是实际开发之中用的最多的一种CSS的背景：行内元素，块级元素和行内块元素之间可以相互转换：原创 2020-12-08 23:48:33 · 191 阅读 · 0 评论 -
我的简陋html的简单总结
html的简单内容body是包含网页可视内容的主体部分，几乎所有的修改和设计都是针对于body内的内容块级元素的特点：1.比较霸道，自己独占一行2.高度，宽度，外边距以及内边距都可以控制3.宽度默认是容器(父级宽度)的100%4.是一个容器及盒子，里面可以放行内或者块级元素注意：1.文字类的元素内不能使用块级元素2.p标签主要用于存放文字，因此p标签里面不能放块级元素div3.同理，h1~h6 标签等都是文字类块级标签，里面也不能放其他块级元素行内元素的特点：1.相邻行内元素在一行原创 2020-12-08 23:25:16 · 148 阅读 · 0 评论