CSS3
文章平均质量分 66
大狗派克
这个作者很懒,什么都没留下…
展开
-
移动端overflow:hidden出现不兼容
禁止页面滚动:body{style="overflow:hidden;"} 可以实现大部分超出页面禁止滚动,可并非兼容所有移动手机。document.body.addEventListener('touchmove',function(event){ event.preventDefault();},false);PC端禁止键盘上下键var move=fu原创 2015-11-03 11:33:29 · 6014 阅读 · 0 评论 -
浏览器对HTML5特性检测工具Modernizr
最近在做公司移动端运营的项目,需求中多处地方都会涉及动画。相信很多前端开发都会有这种感触,对CSS3中的动画属性很熟悉,但是由于对动画运动过程的理解不深入,经常只能望而止步。CSS3中动画这在Web页面中具有点睛之笔,让人眼前一亮,这段时间我会抽空来整理关于动画这块的知识点,希望能在总结的同时分享给有需要的朋友们,如果有什么好的建议和想法欢迎相互交流学习。无论是动画还是别的CSS3的新特性在移动端都原创 2016-04-14 21:32:19 · 7970 阅读 · 0 评论 -
项目问题反思——CSS优先级
前言对于前端而言,了解css样式的优先级,对开发或处理bug有着事半功倍的效果,今天在做项目的时候,突然碰到一个优先级的小问题,刚开始不知道所因,后来才发现这个问题是由优先级造成的。先描述下问题,鼠标悬停在父容器时,子容器显示,移开消失。看到这个问题,可能有些人要喷了,这和优先级有毛线关系,看起来的确没关系,其实还是存在一定关系的。假如你在书写子容器样式时,采用的是内联式写法,那么这个悬停是否还有原创 2016-03-15 01:11:46 · 615 阅读 · 0 评论 -
CSS3实现手机1px边框,细如发丝
前言我们使用手机App的WebView和浏览器查看网页时,经常能看见那细如发丝的“0.5px”的边框、线条,让整个页面效果看起来更加细致。这里所谓的“0.5px”是如何实现的呢,web页面中最小的单位是1px,“0.5px”已经脱离了web定义的单位标准,如果直接使用“0.5px”那么它其实是以1px像素呈现。我在这里说下所谓的移动端“0.5px”像素实现方法,如果小弟理解的有什么错误,欢迎各位大原创 2016-03-10 22:22:19 · 9954 阅读 · 1 评论 -
相邻兄弟选择器(+)
今天在做导航栏的时候,需求里面需要实现一个小的动画效果,需求:导航栏中,鼠标移入每个链接,链接字体颜色发生改变,同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故,动画使用JQuery的animation函数来实现的。当完成导航栏的制作后,我突发奇想如果不需要用到任何JS是否可以实现该动画。 先看下测试中导航栏的代码 HTML<div class="nav"> <u原创 2016-03-31 17:12:26 · 7738 阅读 · 0 评论 -
CSS垂直居中的几种方法
单行内容居中单行文字居中,只需要设置文字的line-height属性和父容器等高即可。 <div class="box"> <p>我是一行测试文字</p> </div> div.box{width: 200px;height: 100px;background-color: #999;margin: 20px;} .box p{line-height:原创 2016-03-30 17:59:38 · 807 阅读 · 0 评论 -
html5 列表居中
style> .header{ width: 800px; background: pink; border: 1px solid black; margin: auto; } .header ul{ display: table;原创 2015-07-26 21:32:48 · 6694 阅读 · 0 评论 -
学习使用:before和:after伪元素
特别声明:此篇文章由胡均根据Louis Lazaris英文文章原名《Learning To Use The :before And :after Pseudo-Elements In CSS》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2011/07/1转载 2015-07-27 23:05:26 · 2237 阅读 · 0 评论 -
CSS3特效之转化(transform)和过渡(transition)
在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition)。有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(transform)和过渡(transition)扯上关系了,其实并非如此,转化(transform)属性让动画的变换多元化,而过渡(transition)属性是动画中的一种表现形式,也可以说成是动画一个版原创 2016-04-17 20:31:53 · 16159 阅读 · 0 评论