04 2018 档案
摘要：一、API和WebAPI API就是接口，就是通道，负责一个程序和其他软件的沟通，本质是预先定义的函数。 Web API是网络应用程序接口。包含了广泛的功能，网络应用通过API接口，可以实现存储服务、消息服务、计算服务等能力，利用这些能力可以进行开发出强大功能的web应用。 二、DOM对象 通过DO
阅读全文
摘要：1、DOM文档对象模型:操作页面元素(标签) html文件看成一个文档，把文档看成一个对象 xml也是一种文档，标签自定义，系统不自带标签，偏向于存储数据 2、DOM树：由文档及文档中的所以元素（标签）组成的一个树形结构图，叫树状图，也叫DOM树 元素（element）：页面中的每个标签都是一个元素
阅读全文
摘要：一、内置对象 js中三种对象：内置对象、自定义对象、浏览器对象 实例对象是指通过构造函数创建出来，然后实例化的对象（new关键字） 静态对象是指不需要创建，直接调用的对象，可以在整个JS里调用的公共对象。有点类似于全局变量 二、Math Math属性 console.log(Math.PI);//3
阅读全文
摘要：一、面向对象 面向过程：凡事亲力亲为，每件事的具体过程都要知道，注重过程 面向对象：根据需求寻找对象，所有的事都用对象来做，注重结果 面向对象特性：封装、继承、多态（抽象性） js是一门基于对象的语言：js不是面向对象的语言，但是可以模拟面向对象的思想 对象是定义：有特征和行为，具体特指某一事物 二
阅读全文
摘要：一、介绍 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软
阅读全文
摘要：前面介绍了css3 2D变形（transform）移动、缩放、旋转、倾斜 有2D 也有3D，例如3D transform中有下面这三个方法： rotateX( angle ) rotateY( angle ) rotateZ( angle ) perspective 属性定义 3D 元素距视图的距离
阅读全文
摘要：backface-visibility 属性定义当元素不面向屏幕时是否可见。 如果在旋转元素不希望看到其背面时，该属性很有用。
阅读全文
摘要：渐进增强（progressive enhancement）：（向上兼容） 1.针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 （从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览
阅读全文
摘要：一、文字阴影 text-shadow text-shadow: h-shadow v-shadow blur color; 一、文字阴影 text-shadow text-shadow: h-shadow v-shadow blur color; 文字阴影：水平位置，垂直位置，模糊距离，阴影的颜色。
阅读全文
摘要：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。 它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 css3 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Fl
阅读全文
摘要：思路：利用两个长方形(比例是2:3 | 3:2)可以合成心形，然后利用动画，缩放大小实现心跳（纯代码），效果如下： 当然也有其他的方法制作心形，比如：两个圆 + 正方形，可以看另外一篇园友的文章：心跳 CSS
阅读全文
摘要：animation 属性是一个简写属性，用于设置六个动画属性： 1.animation-name 规定需要绑定到选择器的 keyframe 名称。 2.animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 3.animation-timing-function 规定动画的速
阅读全文
摘要：一. translate(x,y) 或者translateX(x)或者translateY(y) 注意点：translateX(x)和translateY(y)大写X和Y；只写一个值，默认y=0。 一个作用：使定位的盒子居中对齐，代替原来的方法——嵌套的定位盒子如何居中？ 二、scale(x,y)或
阅读全文
摘要：效果图如下： 代码：
阅读全文
摘要：transition 属性是一个简写属性，用于设置四个过渡属性： 1.transition-property 设置过渡效果的 CSS 属性的名称。一般写all 2.transition-duration 完成过渡效果需要多少秒或毫秒。单位有s和ms（1s=1000ms） 3.transition-t
阅读全文
摘要：LICEcap 非常轻量级，安装包不到 500KB。运行后会以窗口的方式显示在桌面，拖动选取一个合适的大小范围，点击 Record 选取保存路径就开始录屏了。LICEcap 在录屏过程中可以随时拖动窗口改变录屏范围，Stop 过后自动保存为 GIF 格式。 下载地址: 官方主页
阅读全文
摘要：一、 ::first-letter 第一个字 二、 ::first-line 第一行（以浏览器为准的第一行） 三、 ::selection 被选中的字行（鼠标选中的字段）只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline
阅读全文
摘要：一、结构（位置）伪类选择器（ : ） 1、:first-child 2、:last-child 3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) 二、属性选择器（[ ]） 1、[ 属性 ] 2、可以和正则表达式混用，如 $ 和 ^ 和 *
阅读全文
摘要：一、上传到第三方网站，然后引入例如视频上传到优酷网，然后得到代码 二、audio 标签定义声音，比如音乐或其他音频流。 1.audio支持三种音频格式ogg、mp3、wav，为了兼容性考虑，一般会引入其中的两种格式 2.属性： autoplay 如果出现该属性，则音频在就绪后马上播放。（注：可以au
阅读全文
摘要：一. input type属性 以下是Firefox显示效果(每个浏览器上的默认显示效果不同,可以通过css修改统一样式) 二. 其他新增属性： 1. placeholder placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点
阅读全文
摘要：1.header 标签定义文档的页眉（介绍信息）。 2.nav 标签定义导航链接的部分。如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。 3.footer 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
阅读全文
摘要：W3C统一验证工具(http://validator.w3.org/)用于分析代码. PR值全称为PageRank(网页级别)，PR值是Google用于标识网页的等级、重要性、网站的好坏的重要标准之一。级别从0到10级为满分。PR值越高说明该网页越受欢迎。 例如：一个PR值为1的网站表明这个网站不太
阅读全文
摘要：<body> <div class="bg">超大背景图定位一般使用top center</div> </body> <style> .bg{ width: 100%; height: 1100px; border: 1px solid #000; background: url(bg.png) n
阅读全文
摘要：一、normallize.css(github的一个项目 点击进入链接 二、.其他的一些初始化(借鉴) article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display
阅读全文
摘要：网站优化是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，网站优化包括整站优化、站内优化、站外优化，就是时适合搜索引擎检索，满足搜索引擎排名的指标，从而在搜索引擎检索中获得搜索引擎排名靠前，
阅读全文
摘要：<body> <!-- h1里面嵌套a,并且有网站名,方便seo --> <h1> <a href="#">小米官网</a> </h1> </body> <style> a { display: block; width: 55px; height: 55px; background: url(lo
阅读全文
摘要：1.怎么找到网站的图标: 网址/favicon.ico 代码引入 后续待补充>... 2.转换ico图标网站——比特虫（http://www.bitbug.net/）
阅读全文
摘要：一、什么是字体图标: 1. 字体图标可以和图片一样改变透明度,旋转度,等等 2.本质是文字,可以改变大小颜色等等比较适用于移动端 总结;图标字体具有矢量效果，放大缩小不失真，而且可以使用CSS任意更改图标字体的颜色,能够缩小源文件的体积，减少http的请求，提高页面的性能. 二、推荐的网站: 1.
阅读全文
摘要：首先，我们应该知道引入精灵图的原因： 具体是因为，网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。 其次，我们应该知道精灵图和图标字体(有文章介绍)在使用的过程中
阅读全文
摘要：如下图所示,每个导航栏目的文字个数不一样多，有的长，有的短,如何用一张背景图片，适应不同字数”的导航条,“滑动门”设计的非常巧妙，采用两个相同的背景图像，一左一右，一个负责提供左边框，一个负责提供右边框。如下图所示，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动
阅读全文
摘要：<body> <div>一定要首先强制一行内显示，再次和overflow搭配使用,三个步骤缺一不可</div> </body> <style> div{ border: 1px solid #000; width: 250px; white-space: nowrap;/* 第一，强制一行*/ ov
阅读全文
摘要：利用display：none和display：blocks设置鼠标经过的一个效果。 注意的几个点：1.子绝父相定位 2.设置百分比宽高 3.播放按钮放用背景图做 4.a:hover .mask的写法
阅读全文
摘要：1、display:none,不会占位置，下面的盒子顶上来了，与之对应的是display：block，和js搭配用来做特效。 2、visibility: hidden隐藏元素以后占位置下面的盒子顶不上来，与visibility: hidden对应的是visibility: visible 3、ove
阅读全文
摘要：这样写完之后，会发现中间边框明显更粗，因为是两个盒子的边框并在一起。 解决方法是设置负的margin值 然后我们设置鼠标经过盒子的样式，会发现，有盒子边框有一边不会变色 解决方法是：使用相对定位可以解决，如果li本身就具有定位，这时候可以使用z-index提高层级
阅读全文
摘要：1、图片和文字是默认基线（baseline）对齐，这样会导致图片下方出现3px的空隙 2、解决方法是使用其他的对齐方式，比如middle，top等等 3、使用浮动使文字环绕似乎更美观 注意：vertical-align大多是行内块和文字的对齐方式，比如img和input
阅读全文
摘要：<body> <input type="text" name="" id=""> <textarea name="" id="" cols="30" rows="10"></textarea> </body> <style> input { outline: none;/* 取消默认的表单轮廓线 *
阅读全文
摘要：【注意】 通过以上的设置，可以实现为行内非替换元素设置宽高及内外边距。但是替换时，还需要注意转换为块级元素只是，position的副作用，他们本身的作用还会干扰布局效果。 块级元素的宽度会继承其父元素。但是，只有为行内元素设置display:block;才会有这样的效果，其他转换之后并不会默认带来这
阅读全文
摘要：情景：给脱标（使用了浮动或者定位）的元素增加了一个父级元素，但是又不方便给高度的情况下 （父盒子给高度也是一个解决方法，但是大多数情况下，因为盒子的内容会经常改变，父盒子高度固定，需要每次去调整） <body> <div class='box'> <div class="red"></div> <d
阅读全文
摘要：1.正常情况，按照顺序，最后的盒子在最上面，默认z-index为02.当使用z-index，数字越大，越优先显示在上面3.注意，只要定位的盒子才可以使用该方法 <body> <div class="box1">注意，只要定位的盒子才可以使用该方法</div> <div class="box2">当使
阅读全文
摘要：情景：四个盒子如下图布局，使用浮动，可以看到3和4是顶对齐的 此时会看到出现bug，4盒子上不去，解决方法是把4盒子放到2盒子和3盒子中间
阅读全文
摘要：子绝父相布局经常使用，是一种比较经典的定位布局 父盒子使用相对定位：占位置，不会对下面的同级盒子产生影响；基准点，子盒子以父盒子左上角为基准点进行移动 子盒子使用绝对定位：不占位置，完全脱标，不会对兄弟元素产生影响
阅读全文
摘要：一、相对定位： 1.脱标，但是保留原来位置（下面的盒子上不来，也可以说是半脱标） 2.偏移从以自己标准流中的位置为原点 二、绝对定位 1.完全脱标，不保留原来位置 2.父元素没有定位的情况，子盒子以当前屏幕为基准点进行移动 3.父元素有定位（相对，固定，绝对）的情况，子盒子以父元素（有定位的最近祖元
阅读全文
摘要：<div class="father"> <div class="son"></div> </div> <style> .father { width: 300px; height: 300px; border: 1px solid #000; position: relative; } .son
阅读全文
摘要：情景：块元素和行内元素使用浮动以后，模式会发生什么变化？ 结论：块元素使用浮动，会默认转换成行内块元素，行内元素使用浮动，会默认转换成行内块元素。 【注意】通过以上的设置，可以实现为行内非替换元素设置宽高及内外边距。但是替换时，还需要注意转换为块级元素只是float副作用，他们本身的作用还会干扰布局
阅读全文
摘要：情景：两个盒子，第一个盒子设置100px的下外边距，第二个盒子设置200px的上外边距，试问两个盒子相差多少px？ 最终的答案是200px，取较大值，而不是想加等于300。
阅读全文
摘要：有两个div，里面各有文字1和文字2，如何实现文字1和文字2的距离，可以使用高度剩余法。
阅读全文
摘要：问题：大盒子div下面有一段小盒子span标签包含的文字，怎么使其居中显示？ 第一种方法大盒子text-align: center 第二种方法大盒子box 用 padding-left/padding-right,同时调整大盒子宽度，使大盒子宽度不变 注：50px是随便取得值，具体的值需计算。 第三
阅读全文
摘要：问题：子盒子设置上外边距，父盒子会随着子盒子塌陷，嵌套块元素垂直外边距合并 <style> *{ padding: 0; margin: 0; } .father { height: 500px; width: 500px; background: rgb(184, 184, 167); } .so
阅读全文
浙公网安备 33010602011771号