随笔分类 -  HTML+CSS

摘要:在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号。在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片。这样做尽管可以达到目的,但是很不方便,开发过程耗时较长而且维护修改起来较困难。用css counter配合伪类的content完美的解决了这个问 阅读全文
posted @ 2019-09-16 20:55 Jesse131 阅读(545) 评论(0) 推荐(0) 编辑
摘要:在前端开发工作中总会遇到各种各样的坑,今天这篇博文就是为了记录下踩过的坑,分析后发现容易掉坑里的地方一般是自己不熟悉的知识点或者是易忽略的知识点。故作此文,谨以自勉。 <! more ios上overflow:hidden失效 需要添加position:relative属性 img还是backgro 阅读全文
posted @ 2018-07-16 18:59 Jesse131 阅读(655) 评论(0) 推荐(0) 编辑
摘要:在前端开发中我们经常需要将元素垂直居中对齐,我们很自然的想到使用vertical align属性,但是使用后却发现有时候能起作用,有时候却又不起作用。究其原因还是因为我们没有将vertical align属性弄清楚,今天就来分析一下这个属性,若分析有误,还请原谅,望一起探讨! "规范介绍" 适用元素 阅读全文
posted @ 2018-07-15 11:37 Jesse131 阅读(450) 评论(0) 推荐(0) 编辑
摘要:在前端开发工作中总会遇到各种各样的坑,今天这篇博文就是为了记录下踩过的坑,分析后发现容易掉坑里的地方一般是自己不熟悉的知识点或者是易忽略的知识点。故作此文,谨以自勉。 用css3播放逐帧动画 动效设计师给了我们11张(300 300)帧动画图片,现需要用css3以动画的形式播放这些图片 第一个想到的 阅读全文
posted @ 2018-05-23 20:43 Jesse131 阅读(424) 评论(0) 推荐(0) 编辑
摘要:尽管css选择器效率问题已经不是什么新鲜问题,但是我觉得还是有必要拿出来认真分析一下。之前只是看到别人这么写我也跟着这么写,并没有想清楚问什么要这样写?这样写真的能提高页面渲染效率吗?尽管自己技术不怎么样,但还是需要拿出一种打破砂锅问到底的决心来深究一下css选择器效率问题,通过自己写个demo亲自 阅读全文
posted @ 2016-12-05 22:23 Jesse131 阅读(1722) 评论(0) 推荐(0) 编辑
摘要:今天在整理IE滤镜时 "网站访问这里" ,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的。今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容方法 chrome: IE8及以下:需要注意的是IE下模糊程度较浅一点,可以将 的值适当调大 阅读全文
posted @ 2016-09-26 21:37 Jesse131 阅读(927) 评论(0) 推荐(0) 编辑
摘要:选择器 优先级 实例ID选择器 100类选择器 10伪类选择器 10 :link :visited :focus :hover :actived :lang UI元素状态伪类 E:enabled{}匹配所有用户界面(form表单)中处于可用状态的E元素 E:disabled{}匹配所有用户界面(fo 阅读全文
posted @ 2016-03-12 23:16 Jesse131 阅读(352) 评论(0) 推荐(0) 编辑
摘要:在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢?网上搜索了一下,其实也挺简单的,可以采用以下方法: 下载地址:JPlaceHolder.js 阅读全文
posted @ 2015-10-28 20:29 Jesse131 阅读(898) 评论(0) 推荐(0) 编辑
摘要:在网页布局中我们经常会用到display:inline-block;好处是:能够将块状元素按照内联元素的方式布局,同时能设置宽高。个人感觉很好用,可是用多了慢慢的问题就来了? 1.display:inline-block;在IE6/7中不兼容 解决办法:display:inline-block;*d 阅读全文
posted @ 2015-10-12 20:18 Jesse131 阅读(1786) 评论(1) 推荐(0) 编辑
摘要:在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛。不错方法确实是这样,但是不要忘了border-radius是css3属性,IE8不兼容!!!那么问题来了,怎样在IE8下完美兼容呢? 网上有很多关于css 阅读全文
posted @ 2015-09-25 20:04 Jesse131 阅读(1557) 评论(0) 推荐(0) 编辑
摘要:在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候。 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下。 先大致解释一下这些单位的意思: 1、px px单位名称为像素,像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于 阅读全文
posted @ 2015-09-17 21:27 Jesse131 阅读(3675) 评论(0) 推荐(1) 编辑
摘要:1、chorme 最小字体的兼容性。问题描述:ff和IE最小字体可设置为1px,可是chorme中文版最小字体是12px,小于12px的字体全部显示为12px.解决方案:chorme支持CSS3的,可用 font-size : 12px; -webkit-transform : scal... 阅读全文
posted @ 2015-09-06 08:24 Jesse131 阅读(988) 评论(2) 推荐(3) 编辑
摘要:在工作中做一个图片半透明遮罩时发现在IE8下不兼容一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了。先说说rgba的含义:r代表red,g代表green,b代表blue,a代表透明度。红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0,.5)就是透... 阅读全文
posted @ 2015-08-30 20:47 Jesse131 阅读(6080) 评论(0) 推荐(0) 编辑
摘要:png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1、把图片保存成PNG-8格式。 2、把背景色一起切入并保存为JPG格式。 以上两种方法我试了试,好像效果并不好png8格式仍就会有黑边。 解决方法: 1、不要直接改变图片的透明 阅读全文
posted @ 2015-08-30 10:21 Jesse131 阅读(778) 评论(0) 推荐(0) 编辑
摘要:最近在工作中总是要求IE8兼容CSS3属性,在网上搜了搜主要是引入了一个htc文件(ie-css3.htc或者PIE.htc。个人认为这两个文件的作用差不多,具体差异值得探讨)下载地址:https://github.com/Jesse121/HTML5-CSS3/tree/master/CSS3支持... 阅读全文
posted @ 2015-08-30 08:54 Jesse131 阅读(583) 评论(0) 推荐(0) 编辑
摘要:谷歌中这样是解释的: 图片底部的空隙实际上涉及行内元素的布局模型,图片默认的垂直对齐方式是基线,而基线的位置是与字体相关的。所以在某些时候,图片底部的空隙可能是 2px,而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。 解决办法: 给img定义vertical 阅读全文
posted @ 2015-08-29 20:49 Jesse131 阅读(385) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示