相关搜索 >> css

  • 0616css3 伪元素模拟单、复选框特效 之 如何更容易的选中阅读(792)条2017/6/16 14:48:37

    一、概述:本来Css3模拟单、复选框是挺容易的,问题不是在这个上面,而是如何更容易的选中。而不仅仅是那个单、复选框的区域。所以本实例是整行都可以选中。本实例采用纯Css3配合来完成的,并不需要js,相反以前做的部分还是用JS事件去做这个效果,发现真的很LOW。随着html5越来越普及,估计以后代码都会越来越精简了!效果如下图所示:二、实现及代码:1、因为只要点击input区域就可以选中或取消,所以我就围绕input来做动作,只要input足够大能点击的到...阅读全文

    Taget:css3 伪元素 技巧 

  • 0615html5+ js +css3 点击后水波纹扩散效果 兼容移动端阅读(1407)条2017/6/15 15:00:48

    一、概述:其实很早就看到过点击后水波纹扩散效果这种了,APP中比较常见,所以今天特意找了一些资料然后做成DEMO分享给大家,让大家更容易的学到并运用到实际项目中去。实例效果如下: 现在 新版 chrome 59.0 PC端 在【设置】中很多操作按钮已经有这个效,果如下:二、实现原理:1、超出按钮隐藏;2、里面新增加标签模拟圆;3、用JS控制圆的宽度及坐标;4、关键是css3样式控制从小到大逐渐透明的动画。三、源代码:(兼容移动端)预览地址:http://www.8...阅读全文

    Taget:特效 移动端 demo 

  • 0614css 兼容ie8 rgba()的办法阅读(597)条2017/6/14 15:56:11

    今天遇到了一个问题,要在一个页面中设置一个半透明的白色div。这个貌似不是难题,css3只需要给这个div设置如下的rgba即可:background: rgba(255,255,255,.1);但是要兼容到ie8。这个就有点蛋疼了。因为ie8不支持rgba()函数。下面我们总结一下rgba()函数的含义。rgba的含义,r代表red,g代表green,b代表blue,红绿蓝是三原色。所有颜色都可以由这三种颜色拼合而成。a代表透明度。比如rgba(255,255,255,0.1)就是透明度为0.1的白色。在现代浏览器中是...阅读全文

    Taget:兼容 css rgba ie8 

  • 0826完美 全兼容 解决 文字两端对齐 justify阅读(1030)条2016/8/26 11:05:43

    text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了。justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline或inline-block。但justify对最后一行是无能为力的。我们在对齐姓名时,因为只有一行,当作最后一行,所以不会两端对齐的效果。姓名对齐我们比较常用的是 (半个中文空格), (一个中文空格)来添充两个字,三个字的姓名,使包括四字的姓名都能对齐。例如: 欧阳大...阅读全文

    Taget:对齐 兼容 css 

  • 0818给li设置float浮动属性之后,无法撑开外层ul的问题。阅读(1243)条2016/8/18 15:28:14

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查了相关内容,是因为给li设置了浮动之后它就脱离当前正常的文档流,所以没办法撑开外层ul的高度。以下面代码为例,其实有好几种解决方法,我用的这种并不是最简单的。<!DOCTYPE html ><html ><head><meta charset="utf-8"><title>给li设置fl...阅读全文

    Taget:css 浮动 

  • 0719.net自动合并输出css或js的解决方案附实例下载阅读(1102)条2016/7/19 16:25:42

    一、概述这是一个基于 aspnet 的自动合并输出js和css的解决方案。由ashx动态获取所要合并的文件,然后输出成一个文件。目的是为了减少服务器请求。当然在合并的过程中需要注意一些问题下面会讲到。底部附有下载地址,效果如下: 二、使用方法://file参数是ashx接收需要合并的文件,多个以豆号(英文)隔开,文件位置最好也是使用绝对地址,这样不管在哪里都可以调用得到 //t参数是类型,js/css//如果怕有缓存可以加随机参数在此不作演示<!...阅读全文

    Taget:ashx css js 

  • 0504解决中文Chrome内核浏览器最小字体的BUG 阅读(1094)条2016/5/4 9:42:01

    最近在做个小字体的内容展示,发现一个奇怪的问题,在Chrome内核的浏览器里,最小字体是12px,比这再小的字体都被统一显示了12px了。在网上搜索了一下才知道。因为中文字体在小于12px的情况下会遇到阅读困难的问题,所以Chrome把最小的字体设置成了12px了。解决的办法有改配置和加样式两种,这里就介绍一下样式修改的方式,因为你不可能要求所有访问都都改浏览器配置吧?哈哈~在网页样式里加上这一句后,就可以显示更小的字体了。-webkit-text-s...阅读全文

    Taget:css chrome bug 

  • 0412Sublime Text 3自动完成插件px值转rem值阅读(2738)条2016/4/12 17:10:27

    一个CSS的px值转rem值的Sublime Text 3自动完成插件。本文件结尾附使用演示链接。插件效果如下:安装 克隆项目   https://github.com/hyb628/cssrem.git进入packages目录:Sublime Text -> Preferences -> Browse Packages...复制下载的cssrem目录到刚才的packges目录里。重启Sublime Text。配置参数参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrempx_to_rem - px转rem的单位比例...阅读全文

    Taget:css rem sublime 插件 

  • 0317css图片文字水平垂距中阅读(971)条2016/3/17 22:16:22

    一、本文概述想必大家在做效果的时候经常会碰到文字会垂直距中的效果,单行、多行混合的情况,单行距中已无问题,height,line-height又或者padding:上下相同即可。在网上搜索到不少资料,本人实践后的经验是父级标签属性:display:table-cell;vertical-align:middle;距中标签元素:vertical-align:middle;display: inline-block;使用以上两个技巧即可以使得标签内的文字或图片垂直距中。当然这些使用的同时会有些属性会干扰到垂直距中,如:pos...阅读全文

    Taget:css 图片 文字 距中 

  • 0309利用css3-animation来制作逐帧动画阅读(1127)条2016/3/9 21:14:30

    css3我在5年之前就有用了,包括公司项目都一直在很前沿的技术。最近在新的项目中,用了大量的css3动画,但是真的沉淀下来仔细的去深入css3动画的各个属性发现还是很深的,这里就写下关于帧动画steps属性的理解我们知道css3的animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-modeanimation-timing-function其中1-7大多都有介绍,但是...阅读全文

    Taget:css3 animation 动画 

  • 1028CSS定位属性之间的相互作用 阅读(1225)条2015/10/28 17:27:41

    1. 引言原文:bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT译者:爱前端,乐分享的FedFun,前端痴王海庆的博客。译言:来看下CSS标布局情况下,定位相关属性之间的相互作用,意译为主,不当之处敬请指正。阅读建议5分钟。2. 正文在定位元素时,我们经常用到四个属性display、position、float和偏移属性top right bottom left等。但不是在每个元素上都可以同时应用这四个属性,一些特殊的值组合会覆盖其他属性的应用,这些组合有:display: n...阅读全文

    Taget:css 

  • 0618移动端开发,几个你可能不知道的CSS单位属性阅读(2570)条2015/6/18 21:04:06

    1. rem"em" 单位是我们开发中比较常用到的,它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小;“rem” 中的 “r” 代表 “root”,它表示以根(即“html”)元素的单位大小为基准来设置当前元素的单位大小,所以不管当前元素是任意子节点,一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的,这里的 “em” 和 “rem”...阅读全文

    Taget:移动 css rem em 

当前第  1  页 / 共  9  页  总共104条记录  

12345678