-
欧美移动支付APP崛起:当“另类支付”不再另类
所属栏目:[系统] 日期:2020-03-19 热度:196
【金融特辑】光大****科技部DBA女神带你从0到1揭秘MGR 说起另类支付(alternative payments)/替代支付,在2019年之前,PayPal可能是第一个真正的另类支付选择。 这里的另类 是指,除了主要的支付方案(如Visa和MasterCard)或占主导地位的国内信用卡选项外,你[详细]
-
CSS3实现跳动的动画效果
所属栏目:[系统] 日期:2020-03-18 热度:90
这个要运用的新知识如下: 复制代码 代码如下: //css3新知识 display: flex; justify-content: center; align-items: center; animation: shadow .5s linear infinite; @keyframes shadow { 0%, 100% {transform: scaleX(1);} 50% {transform: scaleX(1.2)[详细]
-
margin 负值引起的层级(z-index)问题
所属栏目:[系统] 日期:2020-03-18 热度:102
先来看这么一段代码: 复制代码 代码如下: div div mce_style="background-color:Red;margin-top: -5px " a href="https://www.jb51.net/" mce_href="https://www.jb51.net/"脚本之家/a/div /div IE6和IE7下,内层的容器被外层覆盖,如图所示: 在IE8和ff下[详细]
-
比较全的CSS浏览器兼容问题整理总结
所属栏目:[系统] 日期:2020-03-18 热度:87
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声[详细]
-
CSS中使用border来创建三角形的基本方法讲解
所属栏目:[系统] 日期:2020-03-18 热度:158
副标题#e# 比较简单实用的还是使用border来创建三角形,今天主要研究这个的实现 将边框分别设置为红/黄/蓝/绿 CSS Code复制内容到剪贴板 .triangle{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#ff0000#ffff00#0000ff#[详细]
-
利用CSS的Sass预处理器(框架)来制作居中效果
所属栏目:[系统] 日期:2020-03-18 热度:108
副标题#e# 虽然使用 CSS 创建居中效果需要耍一些花招,特别是垂直居中效果,但我认为由此生出的诋毁,对于 CSS 则是不公平的。实际上我们有太多的方式使用 CSS 创建居中效果了,而且作为一名前端开发者,你真的有必要对其中的原理了解一二。 写这篇文章的目[详细]
-
CSS制作三角形广告引导文字效果
所属栏目:[系统] 日期:2020-03-18 热度:193
副标题#e# 街上经常碰到一些发各类广告传单的,有一次收到一张房地产广告的传单,顺手留下来,看着里面有些广告挺吸引人,同时也想练练自己css技术,故抽空做了一下。 原图某区域如下: 实现上图效果是需要一些想象力的,比如三角形的构成和左右两边的空白[详细]
-
CSS3中文字镂空、透明值、阴影效果设置示例小结
所属栏目:[系统] 日期:2020-03-18 热度:174
text-fill-color打造镂空文字: 代码 CSS Code复制内容到剪贴板 -webkit-text-fill-color:transparent; -webkit-text-stroke:1px#000; 效果 text-stroke-color透明值让文字更柔和: 代码 CSS Code复制内容到剪贴板 background-image:-webkit-linear-gradie[详细]
-
纯CSS3实现3D旋转书本效果
所属栏目:[系统] 日期:2020-03-18 热度:124
副标题#e# 有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用。 书本的3D模型是所有商品中最为简单的,因为其本质上[详细]
-
主流浏览器css兼容问题汇总
所属栏目:[系统] 日期:2020-03-18 热度:117
副标题#e# 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑。主要测试了chrome,firefox,ie8、9、11,360浏览器。 一、基本的css兼容: 1、可能很多人喜欢用css hack的形式去兼容ie浏览器,但是我自己用起来感觉其实不好使 。i[详细]
-
深入理解CSS选择器优先级
所属栏目:[系统] 日期:2020-03-18 热度:142
1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序 例如: CSS Code复制内容到剪贴板 .a{ color:red } .b{ color:green } 由于b晚于a定义,所以b覆盖a,反之则a覆盖b 2.类选择器优先级大于标签选择器 例如: CSS Code复制内容到剪[详细]
-
全面总结使用CSS实现水平垂直居中效果的方法
所属栏目:[系统] 日期:2020-03-18 热度:100
副标题#e# 说起水平垂直居中大家常看到的是使用绝对定位与负margin的配合或者是inline-block配合vertical-align:middle等方法。当然还有其他一些解决方案,比如说,在水平垂直居中系列中介绍了一些制作方案。但这些方案或多或少都存在一些局限性。假设,要[详细]
-
CSS设置DIV垂直居中的N种方法 兼容IE浏览器
所属栏目:[系统] 日期:2020-03-18 热度:108
副标题#e# 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有v[详细]
-
CSS中的z-index属性基本使用教程
所属栏目:[系统] 日期:2020-03-18 热度:154
副标题#e# CSS Code复制内容到剪贴板 z-index:auto|integer z-index 接受的属性值为:关键字auto和整数,整数可以是负值(Firefox2.0及之前不支持负值)。 需要注意的是 z-index 虽然很给力,却只能应用于定位元素(即设置了 position 属性为非 static 值)[详细]
-
CSS3 media queries + jQuery实现响应式导航
所属栏目:[系统] 日期:2020-03-17 热度:123
副标题#e# 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉[详细]
-
纯CSS实现导航栏Tab切换效果
所属栏目:[系统] 日期:2020-03-17 热度:173
副标题#e# 不用 Javascript,使用纯 CSS 方案,实现类似下图的导航栏切换: CSS 的强大之处有的时候超乎我们的想象,Tab 切换,常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。 实现 Tab 切换的难点在于如何使用 CSS 接收[详细]
-
关于清除浮动塌陷的几种方法总结
所属栏目:[系统] 日期:2020-03-17 热度:73
副标题#e# 什么是浮动呢? 定义这样说:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。 浮动的的元素有4点特性: 1.浮动元素会脱离标准文档流,已经不区分快和行了。[详细]
-
css让容器水平垂直居中的7种方式
所属栏目:[系统] 日期:2020-03-17 热度:85
副标题#e# 方法一:position加margin XML/HTML Code复制内容到剪贴板 divclass=wrap divclass=center/div /div CSS Code复制内容到剪贴板 /**css**/.wrap{width:200px;height:200px;background:yellow;position:relative; }.wrap.center{width:100px;height[详细]
-
利用CSS实现立方体360度旋转效果实例代码
所属栏目:[系统] 日期:2020-03-17 热度:122
示例代码: 复制代码 代码如下: !DOCTYPE html html head lang="en" meta charset="UTF-8" title/title style * { margin: 0; padding: 0} ul {list-style: none;} ul { width: 200px; height: 200px; margin: 200px auto; position: relative; transition[详细]
-
利用纯CSS自定义Checkbox和Radio的样式示例代码
所属栏目:[系统] 日期:2020-03-17 热度:175
首先看看不同平台的checkbox radio 我们可以利用CSS3的一些属性来实现自定义checkbox radio样式。 HTML 代码 // radio inputdiv class=radioinput id=male type=radio name=gender value=malelabel for=maleMale/labelinput id=female type=radio name=gen[详细]
-
前端制作动画的几种方式(css3,js)
所属栏目:[系统] 日期:2020-03-17 热度:138
副标题#e# 制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式。 1.css的transition。 语法: transition:[详细]
-
css解决display:inline-block;产生的缝隙(间隙)的方法
所属栏目:[系统] 日期:2020-03-17 热度:70
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙,这很显然不是我想要的效果,所以我就换成了左浮动,这样缝隙的问题是解决了,但是需要设置父元素的宽度才能实现水平左右滚动,这样又增加了代码量[详细]
-
CSS3 三维变形实现立体方块特效源码
所属栏目:[系统] 日期:2020-03-17 热度:85
三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能类似。3D变形与2D变形的最大不同就在于其参考的坐标轴不同,2D变形的坐标轴是平面的,只存在X轴和Y轴,而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间,X[详细]
-
css3学习之2D转换功能详解
所属栏目:[系统] 日期:2020-03-17 热度:178
CSS3提供了2D转换功能,能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform,使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix,还有基于这些分支出的translateX、scaleY等。 这里,我将会介绍到[详细]
-
CSS样式中大于号的使用及Css中处理继承方法
所属栏目:[系统] 日期:2020-03-17 热度:168
继承在一定程度上让程序在编写的过程中更加方便,但是有时候也会给我们的程序带来一定的困扰,所以认真的学习继承的原理,以及处理的方法很重要。下面是Css中处理继承的一个方法。 在一段CSS代码中见到一个大于号(),代码如下: BODY#css-zen-garden DIV#e[详细]