HTML\CSS
关注
分享
扫一扫
文章平均质量分 84
FungLeo
键鼠轻游戏人间 风流谈笑傲江湖
展开
-
修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG
修复 iPhone X H5 底部安全区域定位按钮下内容穿透 BUG今日，开发了一个 h5 项目，其中有部分页面使用了底部按钮，采用的是相对于浏览器窗口定位的样式制作的。但是在 iPhone X 上面，出现了在按钮下方，居然有页面穿越的情况，这就尴尬了。对于我这种不用 iPhone 的人来说，说了一句 mmp 然后就得去解决这个问题。iPhone X 安全区域的问题找到这张图片...原创 2018-07-04 16:50:46 · 7768 阅读 · 3 评论 -
移动端H5 css3模拟边框最新研究(超实用) by FungLeo
移动端H5 css3模拟边框最新研究(超实用) by FungLeo前言在之前写的一篇博文《移动端H5的一些基本知识点总结 第五节 边框的处理》中,我提到,可以使用 box-shadow:0 0 0 1px #ddd; 这样的方式,来模拟边框.当然,博文中的内容并没有错,但是却有一定的局限性.因此,今天在这里,纠正和完善我之前的博文中的缺陷. 为什么要模拟边框,而不是直接写边框? 因为边框原创 2016-05-13 16:25:42 · 11266 阅读 · 0 评论 -
无聊用一个DIV写了一套字母数字表
无聊用一个DIV写了一套字母数字表没什么可说明的.直接看代码吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div class="show"></div></body></html><style> .sh原创 2016-04-15 16:33:13 · 1793 阅读 · 0 评论 -
[FungLeo原创]移动端系列博文基础reset.scss和mixin.scss
移动端系列博文基础reset.scss和mixin.scss下面我将写一系列的关于移动端的博文,如果每次都需要在博文前面引用这样一段reset.scss和mixin.scss,那将是一件相当恶心的事情,所以,我将这一段独立出来,发表一篇总的引用博文.以后的博文,只需要引用一个链接就可以了.算是当成一个@mixin,可以随时@include的一段博文片段吧. 我的CSS部分将全部使用sass来进行原创 2016-03-13 14:26:51 · 4975 阅读 · 0 评论 -
移动端H5各种各样的列表的制作方法(四) by FungLeo
前面三章,都是说一个普通的列表应该如何去实现.难度由易到难,但总的来说,一看就能掌握.这一章,我们来做图文列表.两列的图文列表是非常常见的.在JD\TB等电商移动端H5更是比比皆是.这里,我们先来做一个最简单的.原创 2016-03-15 10:39:43 · 7876 阅读 · 0 评论 -
移动端H5各种各样的列表的制作方法(三) by FungLeo
移动端各种各样的列表的制作方法(三) by FungLeo前情回顾在上一篇博文《移动端各种各样的列表的制作方法(二)》中,我们再通过两个DEMO,演示了一下在移动端H5中更多需求的列表制作.不过,看起来,好像还是蛮简单的.这一章,接着深入. 如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.带小图标的列表上面两章,我们做了一些普通的列表原创 2016-03-14 17:05:49 · 8400 阅读 · 0 评论 -
移动端H5各种各样的列表的制作方法(一) by FungLeo
移动端各种各样的列表的制作方法(一) by FungLeo前言随着移动互联网的发展,大量前端人员从pc端转移动端.而很多PC端的前端经验并不适用于移动端.前几日我撰写的一篇博文《移动端H5的一些基本知识点总结》获得了大量的点击量.因此,FungLeo决定,在接下来的时间里,我将围绕移动端,展开一系列的教程. 本系列文章的CSS部分,将全部采用SASS语法撰写.如果您不会SASS,建议阅读相关教程原创 2016-03-14 15:17:50 · 18406 阅读 · 0 评论 -
移动端H5各种各样的列表的制作方法(二) by FungLeo
移动端各种各样的列表的制作方法(二) by FungLeo前情回顾在上一篇博文《移动端各种各样的列表的制作方法(一)》中,我们通过两个简单的DEMO,演示了一下在移动端H5中的列表制作.不过,这两个演示还是太简单了.可能大家觉得不过如此嘛.这一章,我们将制作稍微复杂一点点的列表. 如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.带右箭原创 2016-03-14 16:27:56 · 9400 阅读 · 0 评论 -
移动端H5做一个不限个数的通栏按钮 by FungLeo
移动端H5做一个不限个数的通栏按钮 by FungLeo前言在移动端h5的页面上经常需要一些通栏的按钮.当然,要做一个通栏的按钮这个事儿还是巨简单的.可是,产品经理和设计师永远都会给你添点麻烦.比如,明明是格式一样的按钮,但这里是一个通栏的按钮,到下面,就变成了通栏需要两个按钮,进到内页,就是三个按钮挤在一个通栏上.如果没有一个合理的解决方法,那么,无疑是非常恶心的.因为,我们必须写多个样式.而我们原创 2016-03-18 17:03:42 · 3495 阅读 · 0 评论 -
css3的nth-child选择器的详细探讨
css3的nth-child选择器的详细探讨css3的nth-child选择器的详细探讨前言有哪些 nth-child nth-child研究开始构建DOM结构开始实践CSS代码为方便研究我们现给一段基础CSS代码选择第N个LI选择前三个选择从第四个开始到最后选择第四个到第八个选择奇数行选择偶数行选择369等三倍数行选择258等三倍数行选择14710等三倍数行选择 51原创 2016-03-06 16:16:09 · 14777 阅读 · 8 评论 -
移动端H5的一些基本知识点总结
移动端H5的一些基本知识点总结来到这家公司之后,和以前的工作发生了很大的转变.以前我一直是做PC端页面的.来到现在这家公司之后,主要是做手机移动端的页面.移动端的页面在我这个做习惯了PC端页面的人看来,应该是很简单的一些事情.但是在上手的过程当中,还是发现,原来移动端虽然DOM结构要简单得多,但是需要注意的细节,还是非常多的.原因非常简单,那就是,你必须考虑所有的手机上不同分辨率的展示效果.移动端的原创 2016-03-06 01:29:17 · 9835 阅读 · 4 评论 -
纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局——高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安卓4.4的版本的手机上,自带的浏览器是不支持这个属性的.好吧,这还不时最坑爹的,在国产的猎豹浏览器以及其他一些浏览器里面,有可能也不支持.总而言之,这个坑踩大了.不过没关系,大部分的常见布局问题,我都能原创 2016-03-06 00:21:13 · 9342 阅读 · 0 评论 -
移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo
移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局.在制作大转盘抽奖的时候,一般使用到的插件是jQueryRotate这款插件.网上有很多可以参考的教程.不再赘述.这篇博文的意义是,一般情况下,这些奖项它都是直接做到图片上去了.当然,这样也没有什么不行,只是如果要修改奖项的话,还需原创 2016-03-17 11:01:48 · 17471 阅读 · 1 评论 -
移动端之在不同尺寸大小的手机上展示同一效果解决方案(修正二) by FungLeo
移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo前言,反思在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根据这个根植,来设置rem单位的样式.这样虽然解决了很多的问题.但是在面对不同宽度的手机的时候,还是需要去自适应设置很多的内容.当然,因为手机分辨率的不同,我们可以自由的将页面设置在320(iphone5s)原创 2016-04-18 10:45:07 · 15713 阅读 · 3 评论 -
[FungLeo原创]CSS预编译技术之SASS学习经验小结
[FungLeo原创]CSS预编译技术之SASS学习经验小结前言接触CSS是05年.使用xhtml+css开发是06年.但真正全面采用xhtml+css开发却是08年开始的.因为居于三线城市,比一线程序的前驱者还是晚了一些.虽然现在已经发展到了html5+css3了.CSS也比以前强大太多了.但是这个语言却并没有什么本质性的改变,甚至,都不能算是一门编程语言.这两年前端行业发展日新月异,大批后端工程原创 2016-03-11 00:14:56 · 6189 阅读 · 1 评论 -
CSDN 博客 修改文章搜索为 bing 搜索，且只搜索自己的博客的方法
CSDN 博客 修改文章搜索为 bing 搜索，且只搜索自己的博客的方法csdn 自带的博客搜索调用的百度的代码，但是搜索效果很不理想，而且默认为全站搜索。在我们的博客里面进行搜索的大多数人，都应该是希望只搜索当前博客的。所以我就写了一段代码，来实现这个功能。 首先，你必须是博客专家，有插入 html 的权限。插入自定义组件CSDN 的博客专家允许插入自定义的 html 代码。但是我尝试了一下原创 2017-11-10 14:09:25 · 16613 阅读 · 0 评论 -
css3 做一个会动的菜单 menu 按钮动画效果
css3 做一个会动的菜单 menu 按钮动画效果需要做一个会的动画按钮效果，小前端部知道如何实现，我看了一眼需要的效果，给他写了一个简单的 demo。设计师给了俩图片，一个是 三 这样的菜单图标，另一个是点击时，变成 X 的图标。希望在这两个图标之间，有动画切换效果。效果演示地址：http://runjs.cn/detail/al9vgagm因为图标非常简单，我们可以用 css 把这俩图标画出来，原创 2017-09-11 11:45:06 · 5352 阅读 · 4 评论 -
HTML5+CSS3 做一个灵动的动画 TAB 切换效果
HTML5+CSS3 做一个灵动的动画 TAB 切换效果设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。最终实现效果如下： 为了 gif 动画能够展示细节，我将动画时间延长到了 3 秒代码分享地址：http://runjs.cn/detail/h2dqt3td实现思路间隔竖线，因为不是顶天立地的原创 2017-09-15 11:58:40 · 9180 阅读 · 3 评论 -
html 中 a 链接的 download 属性的神奇使用
html 中 a 链接的 download 属性的神奇使用一般来说，我们在页面中提供下载的时候，都需要去配置一些服务端的东西，比如指定 zip 文件就通知浏览器下载这个文件。但是，比如 .jpg 这样的图片文件，如何使它变成下载呢？浏览器可以直接打开访问这个文件的呀。再比如，.pdf 文件，有的浏览器支持直接打开，有的浏览器不支持，则会下载。等等之类的问题。好，现在的问题是，我需要方可点击这个链接，原创 2017-08-23 15:16:35 · 22197 阅读 · 13 评论 -
CSS3 做一个有闪光效果的进度条
CSS3 做一个有闪光效果的进度条今天刚入职的小前端看到一个进度条的效果，想要实现，但是不知道如何下手，于是，我写了一个demo给它看下。最终效果：CSS3 实现闪光效果进图条如上链接所示，不仅仅是有一个进度的效果，关键是，在进度效果上还有一个闪光效果。开始实现HTML<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"原创 2017-08-14 17:48:00 · 4163 阅读 · 6 评论 -
[转载]CSS居中完全指南
原载于CSS-Trick，本文着重提取文中的方法，不完全翻译。如有需要，直接原文查看。人们经常抱怨在CSS中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。接下来，我们做一个‘决定树’来帮我们把问题变的简单一点。首先你需要居中：水平需要居中 inline 或者 inline-* 元素（如文字或者链接）？需要居中 block 类的元素？需要居中多转载 2016-03-03 10:05:10 · 1438 阅读 · 0 评论 -
CSS 幽灵元素方案垂直居中注意事项
之前，我们转载了一篇博文CSS居中完全指南，在这篇文章中，提到了一种使用幽灵元素方式的解决垂直居中的问题的方案。这种方案非常适合解决一些图片布局，因此我也在项目中经常使用这种解决方案。首先，我们温习一下原文的说法： 如果上述两种方式均不能使用，你可以使用“幽灵元素”技术，这种方法采用伪元素 ::before 撑开高度 ，文字垂直居中。.parent { position: relative原创 2017-08-17 22:53:40 · 2039 阅读 · 0 评论 -
图片自适应父元素大小，并左右上下居中的css方法
图片自适应父元素大小，并左右上下居中的css方法前言这种效果多见于矩形盒子里面调用不规则的图片，希望能够达到的效果。这个效果可以很简单的用css来实现，虽然已经烂熟于心，但是并未记录下来。今天看到又有这个需求，所以写了一个简单的demo，放在这里，便于自己记忆。效果图：代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2017-05-10 13:57:24 · 9100 阅读 · 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 to the element to provide a better experience than翻译 2017-02-22 10:06:21 · 3858 阅读 · 0 评论 -
【转载】谷歌 HTML/CSS 规范
【转载】谷歌 HTML/CSS 规范背景这篇文章定义了 HTML 和 CSS 的格式和代码规范，旨在提高代码质量和协作效率。通用样式规范协议省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面转载 2017-01-05 18:55:07 · 2308 阅读 · 0 评论 -
移动端H5 QQ在线客服链接代码
很难找,在网上找了很久都没有找到,最终在群里问朋友,才找到这段代码.虽然代码不长,但是建议需要的朋友收藏一下.绝对有效!移动端H5 QQ在线客服链接代码<a href="mqqwpa://im/chat?chat_type=wpa&uin=2679571084&version=1&src_type=web&web_src=bjhuli.com">报名咨询</a>经过测试,安卓没有问题,IOS能到QQ原创 2016-07-05 23:05:00 · 37912 阅读 · 12 评论 -
巧用box-shadow实现布局区域间隔变色
巧用box-shadow实现布局区域间隔变色前言之前给客户做了一个网站,整体是1200px宽.因此,网页整体是放在一个 1200px的盒子里的.但是今天,客户突然要求实现这样的变色效果,一个区域是灰色的,一个区域是白色的.原布局效果图想要达到的效果我了个擦擦…这是要更换原有的html布局的呀….思路首先,我是拒绝更换html布局结构的.我真心不愿意去修改html的布局,因为牵扯到的地方会比较多,所以原创 2016-06-13 22:50:02 · 7335 阅读 · 0 评论 -
移动端H5各种各样的列表的制作方法(七最终章) by FungLeo
移动端H5各种各样的列表的制作方法(七最终章) by FungLeo前情回顾前五章的学习地址: 《移动端H5各种各样的列表的制作方法(一)》 《移动端H5各种各样的列表的制作方法(二)》 《移动端H5各种各样的列表的制作方法(三)》 《移动端H5各种各样的列表的制作方法(四)》 《移动端H5各种各样的列表的制作方法(五)》 《移动端H5各种各样的列表的制作方法(六)》 如果你是先看到原创 2016-03-16 15:38:00 · 8255 阅读 · 0 评论 -
移动端H5各种各样的列表的制作方法(六) by FungLeo
移动端H5各种各样的列表的制作方法(六) by FungLeo前情回顾前五章的学习地址: 《移动端H5各种各样的列表的制作方法(一)》 《移动端H5各种各样的列表的制作方法(二)》 《移动端H5各种各样的列表的制作方法(三)》 《移动端H5各种各样的列表的制作方法(四)》 《移动端H5各种各样的列表的制作方法(五)》 如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下原创 2016-03-16 11:07:26 · 4531 阅读 · 0 评论 -
CSS字体中英文名称对照表：如宋体对应SimSun
在CSS文件中，我们常看到有些字体名称变成了乱码，这是由于编写者将中文字体的名字直接写成了中文，并且再上传或者拷贝复制的时候无意间变成了乱码。为了避免这种状况出现，在CSS文件中使用中文字体时，最好使用中文字体的英文名称，我们常用中文字体的英文名称对照表如下：Windows、Mac OS和Office自带的字体中英文对照表：中文名英文名UnicodeUnicod转载 2015-09-14 10:49:50 · 2504 阅读 · 0 评论 -
jQury animate操作 background-position 方法
今天遇到一个奇怪的问题，在使用jQury animate操作background-position的时候，怎么都不成功，在换成了css方法之后就成功了。问题是，css方法是没有动画效果的。经过百度搜索了一番，语焉不详。CSDN上找到一篇文章：http://blog.csdn.net/goodshot/article/details/8648706，其中说到，animate操作的CSS参数是包括bac原创 2015-09-08 13:07:43 · 4523 阅读 · 0 评论 -
FengFocus 焦点图插件（昨天写了博客，今天封装了）
FengFocus 使用说明FengFocus Demo查看 FengFocus Demo为什么要写 FengFocus ？自从开始学习 jQuery 我就深深的被它给吸引了。虽然年岁有点大了。但是止不住想要学习的冲动。根据我个人的学习经验，我认为实战是唯一提升自己的途径。所以我自己写了一些 jQuery 插件。去年自己写的第一个焦点图插件，命名为 FengFocus 1.原创 2015-09-04 13:10:43 · 1850 阅读 · 0 评论 -
自己写的一个JQUERY焦点图
以前写了一个JQUERY焦点图插件。但是过于冗长，其逻辑非常费解。今天心血来潮，决定重新写一下。暂时还没有封装成插件。回头抽时间封装成插件。我的焦点图要实现的功能如下：HTML结构异常简单所有样式在CSS中实现，而不是在JS中实现，便于修改样式。实现自动轮播（废话）有标题，有导读有方向控制，向左滚动，向右滚动之前写的当然都满足我的这些要求。但是不够简练。今天写的，我自己感觉好多了。首先，原创 2015-09-04 00:18:42 · 1265 阅读 · 0 评论 -
前端最重要的工作——HTML构架
1. 善用HTML标签，不要一路DIV+SPAN 2. 良好的结构，排除冗余 3. 良好的HTML语义，利于后端理解，更加利于项目的SEO工作 4. 善用ID，善用CLASS。不要全部ID，更不要全部CLASS 5. 充分考虑改版需求，构架要灵活。原创 2015-09-03 19:14:50 · 1585 阅读 · 0 评论 -
IE7下li Bug
先前一直没有遇到这个问题，今天居然给碰上了~~~IE7下li Bug会发现在IE6–7下，LI底部会多出几个像素，网上很多人说这是li的3pxbug，实际不然。底部的空隙和字体大小和高度有关。并不一定是3px。出现这个bug的条件如下 必要条件： li的子元素设置了浮动（例如：本例中的span设置了左浮动）充要条件： (IE6/7)li设置了width、height、zoom 之一 （例如：转载 2015-09-01 19:48:36 · 819 阅读 · 0 评论 -
写好jquery的良好习惯
在前端工作中，我们需要写很多的javascript代码。我本人对JS一窍不通。因此，在逐渐的学习jquery。这还是比较简单的，可以完成我日常工作中的大多数需求。 但是在学习中，要保持良好的习惯。我的个人总结如下：善用变量，尤其是对DOM结构中的ID以及CLASS多写注释，自己不熟，前面写后面忘，所以要多谢注释善用函数，对重复运用的代码写成函数，多处调用多写分号，很多分号可以省略，但还是写原创 2015-09-02 09:49:05 · 1009 阅读 · 0 评论 -
一劳永逸的解决jquery的本地引入的方法
很多人都建议jquery使用cdn加速的方式引入。当然，我不反对这么做。但是以我自己做项目的便利性，我还是习惯把jq放在本地使用。原因有以下几点：项目的可靠性。不会受外在的情况的影响。在断网的情况下依旧可以工作。（我这个随时随地写代码的人哪）。好，jq本地引入有什么问题？JQ2不兼容IE低版本，所以，针对IE低版本，要使用JQ1.11版同时引入html5.js，以让低版本IE支持HTML5原创 2015-08-27 17:23:32 · 14090 阅读 · 0 评论 -
我自己整理的一份reset.css的scss版 以作记录
上午发了一下less版的reset。但是现在领导要求全部转scss了。于是我尝试自己转换一下。 但是过程中出错频繁。非常让我头疼。 在less中，可以混入任何class。但是在scss中，需要用@mixin 申明 和 @include 调入。 当然，这样是有优点的，就是在less中，可能会把不需要的混入css给编译出来（在这个样式没有使用变量的情况下，因为他无法分辨这是普通样式还是混入样式。）原创 2015-08-27 14:39:23 · 4389 阅读 · 2 评论 -
我自己整理的一份reset.less 以作记录
一般在做一些项目的时候，都需要一份reset.css和style.css两个文件。因此，我自己的reset.css会把一些共用的css全部放在里面，而不仅仅是reset。原创 2015-08-27 11:55:32 · 3528 阅读 · 0 评论 -
Sublime Text 写sass的时候，每次都需要输入一个分号的问题的解决方法
一直使用less，但是最近公司要求前端全部学习sass。本来这也没什么问题。但是傻逼的是，我给sublime配置上sass插件之后，发现每次写一个参数都需要手工写一个分号。这让我非常郁闷。以至于我一度想要放弃使用sass。例如，我们用 m0 这个代码的时候，生成的代码如下：margin: 0我想要的不是这个啊！！！我想要的是margin: 0;这个啊！！憋屈。。。。今天突然想到，我们写sass的时候原创 2015-08-26 16:12:13 · 3288 阅读 · 2 评论