FungLeo's Blog

键鼠轻游戏人间 风流谈笑傲江湖

修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG

修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG 今日,开发了一个 h5 项目,其中有部分页面使用了底部按钮,采用的是相对于浏览器窗口定位的样式制作的。 但是在 iPhone X 上面,出现了在按钮下方,居然有页面穿越的情况,这就尴尬了。对于我这种不用 iPhone 的人来...

2018-07-04 16:50:46

阅读数:1434

评论数:2

CSDN 博客 修改文章搜索为 bing 搜索,且只搜索自己的博客的方法

CSDN 博客 修改文章搜索为 bing 搜索,且只搜索自己的博客的方法csdn 自带的博客搜索调用的百度的代码,但是搜索效果很不理想,而且默认为全站搜索。在我们的博客里面进行搜索的大多数人,都应该是希望只搜索当前博客的。所以我就写了一段代码,来实现这个功能。 首先,你必须是博客专家,有插入 ...

2017-11-10 14:09:25

阅读数:15637

评论数:0

HTML5+CSS3 做一个灵动的动画 TAB 切换效果

HTML5+CSS3 做一个灵动的动画 TAB 切换效果设计师给了一个 tab 切换的效果图。虽然是一个很小的功能,但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。最终实现效果如下: 为了 gif 动画能够展示细节,我将动画时间延长到了 3 秒 代码分享地...

2017-09-15 11:58:40

阅读数:3695

评论数:0

css3 做一个会动的菜单 menu 按钮动画效果

css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo。设计师给了俩图片,一个是 三 这样的菜单图标,另一个是点击时,变成 X 的图标。希望在这两个图标之间,有动画切换效果。效果演示地址:http://...

2017-09-11 11:45:06

阅读数:3659

评论数:4

html 中 a 链接的 download 属性的神奇使用

html 中 a 链接的 download 属性的神奇使用一般来说,我们在页面中提供下载的时候,都需要去配置一些服务端的东西,比如指定 zip 文件就通知浏览器下载这个文件。但是,比如 .jpg 这样的图片文件,如何使它变成下载呢?浏览器可以直接打开访问这个文件的呀。再比如,.pdf 文件,有的浏...

2017-08-23 15:16:35

阅读数:7757

评论数:0

CSS 幽灵元素方案垂直居中注意事项

之前,我们转载了一篇博文CSS居中完全指南,在这篇文章中,提到了一种使用幽灵元素方式的解决垂直居中的问题的方案。这种方案非常适合解决一些图片布局,因此我也在项目中经常使用这种解决方案。首先,我们温习一下原文的说法: 如果上述两种方式均不能使用,你可以使用“幽灵元素”技术,这种方法采用伪元素 :...

2017-08-17 22:53:40

阅读数:1186

评论数:0

CSS3 做一个有闪光效果的进度条

CSS3 做一个有闪光效果的进度条今天刚入职的小前端看到一个进度条的效果,想要实现,但是不知道如何下手,于是,我写了一个demo给它看下。最终效果:CSS3 实现闪光效果进图条如上链接所示,不仅仅是有一个进度的效果,关键是,在进度效果上还有一个闪光效果。开始实现HTML<!DOCTYPE h...

2017-08-14 17:48:00

阅读数:1557

评论数:5

图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法前言这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然已经烂熟于心,但是并未记录下来。今天看到又有这个需求,所以写了一个简单的demo,放在这里,便于自己记忆。效果图:代码<!DOCTYPE...

2017-05-10 13:57:24

阅读数:5762

评论数:0

Styling Broken Images (给加载失败的图片加上css样式) - 不完全翻译

Styling Broken Images (给加载失败的图片加上css样式) - 不完全翻译前言 Broken images are ugly.  But they don’t always have to be. We can use CSS to apply styles ...

2017-02-22 10:06:21

阅读数:2108

评论数:0

【转载】谷歌 HTML/CSS 规范

【转载】谷歌 HTML/CSS 规范背景这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率。通用样式规范协议省略图片、样式、脚本以及其他媒体文件 URL 的协议部分(http:,https:),除非文件在两种协议下都不可用。这种方案称为 protocol-relat...

2017-01-05 18:55:07

阅读数:1803

评论数:0

移动端H5 QQ在线客服链接代码

很难找,在网上找了很久都没有找到,最终在群里问朋友,才找到这段代码.虽然代码不长,但是建议需要的朋友收藏一下.绝对有效!移动端H5 QQ在线客服链接代码<a href="mqqwpa://im/chat?chat_type=wpa&uin=2679571084&ve...

2016-07-05 23:05:00

阅读数:28529

评论数:10

巧用box-shadow实现布局区域间隔变色

巧用box-shadow实现布局区域间隔变色前言之前给客户做了一个网站,整体是1200px宽.因此,网页整体是放在一个 1200px的盒子里的.但是今天,客户突然要求实现这样的变色效果,一个区域是灰色的,一个区域是白色的.原布局效果图想要达到的效果我了个擦擦…这是要更换原有的html布局的呀….思...

2016-06-13 22:50:02

阅读数:6479

评论数:0

移动端H5 css3模拟边框最新研究(超实用) by FungLeo

移动端H5 css3模拟边框最新研究(超实用) by FungLeo前言在之前写的一篇博文《移动端H5的一些基本知识点总结 第五节 边框的处理》中,我提到,可以使用 box-shadow:0 0 0 1px #ddd; 这样的方式,来模拟边框.当然,博文中的内容并没有错,但是却有一定的局限性.因此...

2016-05-13 16:25:42

阅读数:10024

评论数:0

移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo

移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo前言,反思在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根据这个根植,来设置rem单位的样式.这样虽然解决了很多的问题.但是在面对不同宽度的手机的时候,还是需要...

2016-04-18 10:45:07

阅读数:10767

评论数:3

无聊用一个DIV写了一套字母数字表

无聊用一个DIV写了一套字母数字表没什么可说明的.直接看代码吧<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...

2016-04-15 16:33:13

阅读数:1427

评论数:0

移动端H5做一个不限个数的通栏按钮 by FungLeo

移动端H5做一个不限个数的通栏按钮 by FungLeo前言在移动端h5的页面上经常需要一些通栏的按钮.当然,要做一个通栏的按钮这个事儿还是巨简单的.可是,产品经理和设计师永远都会给你添点麻烦.比如,明明是格式一样的按钮,但这里是一个通栏的按钮,到下面,就变成了通栏需要两个按钮,进到内页,就是三个...

2016-03-18 17:03:42

阅读数:2713

评论数:0

移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo

移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局.在制作大转盘抽奖的时候,一般使用到的插件是jQueryRotate这款插件.网上有很多可以参考的教程.不再赘述.这篇博文的意义...

2016-03-17 11:01:48

阅读数:14783

评论数:1

移动端H5各种各样的列表的制作方法(七最终章) by FungLeo

移动端H5各种各样的列表的制作方法(七最终章) by FungLeo前情回顾前五章的学习地址: 《移动端H5各种各样的列表的制作方法(一)》 《移动端H5各种各样的列表的制作方法(二)》 《移动端H5各种各样的列表的制作方法(三)》 《移动端H5各种各样的列表的制作方法(四)》 《移动端...

2016-03-16 15:38:00

阅读数:6215

评论数:0

移动端H5各种各样的列表的制作方法(六) by FungLeo

移动端H5各种各样的列表的制作方法(六) by FungLeo前情回顾前五章的学习地址: 《移动端H5各种各样的列表的制作方法(一)》 《移动端H5各种各样的列表的制作方法(二)》 《移动端H5各种各样的列表的制作方法(三)》 《移动端H5各种各样的列表的制作方法(四)》 《移动端H5各...

2016-03-16 11:07:26

阅读数:3277

评论数:0

移动端H5各种各样的列表的制作方法(五) by FungLeo

移动端H5各种各样的列表的制作方法(五) by FungLeo前情回顾前四章的学习地址: 《移动端H5各种各样的列表的制作方法(一)》 《移动端H5各种各样的列表的制作方法(二)》 《移动端H5各种各样的列表的制作方法(三)》 《移动端H5各种各样的列表的制作方法(四)》 如果你是先看...

2016-03-16 10:12:43

阅读数:5016

评论数:0

提示
确定要删除当前文章?
取消 删除