最近更新

[置顶]想学web前端开发或UI设计,到底什么人适合自学?什么人适合报班培训?

[置顶]严重警告:再来我网站原封不动的剽窃文章者,小心扒皮!

心情很抑郁,只想吐槽一下

这几个月一直在录制前端的课程,每天关在小小的录播室里面对着话筒,对着屏幕录课,刚开始感觉挺心无旁骛,没有任何杂事影响我,可以专心的打磨课程。可是连续几个月的闭关,没有和周围的同事有什么交流,唯一沟通的就是负责视频剪辑的小妹,几个月后,感觉人越来越抑郁,关键是才录制完第一阶段,我就有种要憋疯的节奏。也...

transform:translate(-50%,-50%)到底和margin-left:负的宽度的一半有什么区别?

今天在腾讯课堂上公开直播课的时候,遇到一个问题没有解决,特尴尬,左右排查代码已经是没有问题了,下课后,再仔细把代码改了改,突然发现原来是绝对定位后要居中对齐,我用了一种更新的方法导致的。就是下面这个效果,当把变色龙那个舞台居中对齐的时候,我用的是transform:translate(-50%,-5...

flex布局space-between最后一行左对齐的方法

当用flex布局的时候,大部分的分布都会使用space-between的方式,但是当最后一行的个数和上面行的个数不一样的时候,最后一行的分布就显得尴尬。比如我们想要这样的效果:但是却出现这样的效果:如果每一行列数不确定,宽度不确定,间隔不确定的情况下,最好的方法就是为最后一个元素设置margin-r...

js原生代码实现无缝滚动循环播放幻灯片

js原生代码实现无缝滚动循环播放幻灯片
幻灯片的代码可以很简单,也可以很复杂,普通的上一张下一张的幻灯片很容易做,但是最后一张要切换到第一张的时候,大部分都是从最后一张拉回到第一张,中间有长长的滑动,而要实现无缝循环播放,貌似最后一张后面又...

利用CSS中display:table/table-cell可以解决大部分垂直居中、多列等高、自适应布局

尽管flex布局已经是大势所趋,但是IE11的支持都还不是很友好,在要兼容IE9的PC端,浮动、定位布局等老方法还是依然使用。特别是IE8+开始支持的display:table和display:table-cell,在一些特殊布局方面提供了很好的帮助,还是需要掌握。翻了很多文章,终于看到一篇介绍详细...

这是我看到深入解释vertical-align最好的文章!

最近在备CSS基础的课程,以为很简单的事情,结果却在一些基本的概念上翻了车,有时候你以为简单的事情,其实你并不理解它的原理。在百度上翻了一下午,终于找到了一篇好文章,是翻译自国外的,很有意义,所以转载到自己博客上。这是中文的链接:你所不知道的vertical-align这是英文的链接:Vertica...

DOM基础10:两个矩形的碰撞

学习了拖拽后,那么碰撞就是拖拽一个对象去碰另一个对象,检测是否碰上了。这里的碰撞是两个矩形对象的碰撞,如果是圆形或者不规则形状,方法又不一样了。这个小案例是拖动老鼠去碰撞灯,老鼠只能在可视区内移动,碰上了灯,灯变亮了。具体效果点击查看知识点:1、利用getBoundingClientRect( )方...

web的经典布局方案介绍

布局是网页的框架,灵活的布局可以让页面信息得以合理的摆放,强健的布局方案可以适应不同分辨率下页面的显示。1、上中下三栏式2、左右两栏式3、左右加页眉页脚4、左中右三栏式       浮动布局    &...

js小案例:商品分类筛选

js小案例:商品分类筛选
具体效果点击查看具体的js代码如下:<script>         var crumbData...

js小案例:QQ邮箱拖拽删除邮件

js小案例:QQ邮箱拖拽删除邮件
具体效果点击查看具体的js代码如下:<script>         // 加载数据 &nbs...

js小案例:购物车的实现

js小案例:购物车的实现
具体效果点击查看具体的代码就不贴html和css的了,把js代码贴一下吧。<script> var oInputCheck = document.query...

DOM基础9:拖拽原理

HTML5现在已经有了拖放的API,也就是说拖放已经成为了HTML5的标准,不过还是先了解一下JavaScript最原始的拖拽原理。一、拖拽的基本原理拖拽是基于三个事件触发的:onmousedown : 选择元素onmousemove : 移动元素onmouseup   : 释放元素oDi...

DOM基础8:事件冒泡和事件捕获

一、事件流当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致...

DOM基础7:事件绑定的第二种方式addEventListener

以前都是直接为对象绑定一个事件处理函数,但是这种方法会导致事件的覆盖。//给一个对象绑定一个事件处理函数的第一种形式 //obj.onclick = fn; function fn1() {     ale...

DOM基础6:event.stopPropagation与event.preventDefault的区别和兼容性

event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的时候调用。这个有点像飞机的黑匣子。事件对象必须在一个事件调用的函数里面使用才有内容。事件函数:事件调用的函数,一个函数是不是事件函数,不在定...

DOM基础5:Event事件对象

基于事件的响应,让页面和用户之间产生交互行为是JavaScript的一大特征。比如,当下面的事件发生的时候,就产生了一个JavaScript事件。当用户单击鼠标时当网页已加载时当图像被加载时当鼠标移动到元素上时当输入字段更改时提交HTML表单时当用户敲击一个键时HTML DOM事件允许JavaScr...

DOM基础4:对CSS样式的操作

查找到html元素之后,很大一部分操作都需要修改元素的css样式。一般操作CSS样式的方法有如下几种:一、style对象element.style.properties这个style对象的属性是可读可写的,只是它只能读取和设置元素对象的行间样式表。比如:element.style.color=&qu...

DOM基础3:对元素节点的操作

元素节点可谓是关键,对于元素节点的增删改查是最常用的。一、获取元素节点的方法document.getElementById()  document(Element).getElementsByClassName()document(Element).getElementsByTa...

DOM基础2:document中的节点

因为只讨论HTML DOM,所以,html文档下面的所有对象都是document下面的对象。html最外面的对象就是document了。所以,我们也只讨论document下面的对象的属性和方法。通过这些对象的属性和方法,我们就可以对html所有的元素进行操作。比如增删改查html元素,操作html元...

DOM基础1:DOM对象初了解

如果说ECMAScript是JavaScript语言的硬核部分的话,那么DOM就是JavaScript的宿主环境之一。使用HTML DOM,JavaScript可以访问和更改HTML文档的所有元素。DOM(Document Object Model):文档对象模型当一个html页面被加载后,浏览器就...
Top