2018年11月_司_尘

原创 CSS实现三角形

有时候在页面之中我们会碰到一些小三角，那么在实现上当然不只是简单的图片，今天小编来介绍一下用CSS如何制作一个小三角形，话不多说直接撸上代码：<style> div{ margin: 100px auto; /*这边只是让盒子在页面中居中*/ width: 0; height: 0; /*实现三角形必须给盒子...

2018-11-29 17:06:01 271

原创 CSS3flex布局

小编在学习CSS3时了解到弹性盒子以flex相关属性实现，flex布局某种程度上可以代替浮动而且比浮动有更好的自适应性，下面小编先来介绍一下他的相关用法（flex属性之中有很多很杂小编介绍的是一种常见的布局至于其他属性可以参考一下手册）。被定义弹性的盒子就有两个主轴默认情况下向右向下当然可以调整我们先看一个案例<style> *{ margin: 0; ...

2018-11-29 16:33:39 117

原创 JavaScript常见轮播图的实现

在电商网页中最常见最显眼的就是轮播图，那么js中如何实现轮播图呢？小编今天以自己做的一个案例来讲一下，这个案例里包含了很多东西，轮播图的实现用到了很多原理，所以可能篇幅有点大但都不是废话，每一步怎样做的都非常详细，所以认真阅读肯定会有收获的。首先轮播图的切换原理我们要了解，为什么是一个渐进切换的效果，在这边我们就要抛弃切换图片用url的方法在js中这种方法low到爆而且也无法实现切换的这种...

2018-11-18 19:15:56 574

原创 JavaScript倒计时栏的实现

这边小编也是刚刚过完双11呀（快递还没有到很绝望），剁完手来写上这新学的知识。双十一很多电商网站随处可见倒计时的框图那他们到底是怎样实现的时刻计时。主要用法在于对js中Data对象的方法，话不多说直接撸上代码，主要难点在于对每一项时间的获取<style> #countdown{ margin: 200px auto; font-size...

2018-11-15 21:36:00 266

原创 JavaScript搜索栏实现(焦点问题)

小编这边主要是介绍一个js中搜索栏的实现（没有提交数据那些），重点在于对焦点问题的理解。那么这边小编就是要实现这样的一个搜索框对焦点的理解：通俗来讲当我们鼠标单击一个盒子时光标停留在该盒子事件上实现用户与栏之间的交互，这样就表明该盒子获取了焦点，以案例来说我们平常搜索栏点击可以输入文字，这个时候该搜索栏就获得了焦点。同理失去焦点也是同样当点击页面其余位置时失去对先前盒子可以进行...

2018-11-12 14:01:21 2828

原创 JavaScript模态框实现

模态框在网页中很常见就是在当前页面中弹出一个框供与客户交互。类似于这样。首先我们要明白该框工作原理至于怎样与后端进行交互联系这边先不做介绍我们首先是单纯的了解怎样在网页中实现这样的一个框图的显现。值得注意的是框图产生时一般的我们滚动鼠标发现网页仍在移动。实现这样框图就是加了两个盒子第一个盒子实现背景：将整个页面覆盖（透明色）第二个盒子实现交互框。小编这边来实现一个最简单...

2018-11-08 20:35:15 1130

天明的博客