CSS
文章平均质量分 62
小菜101
这个作者很懒,什么都没留下…
展开
-
css中伪类与伪元素的区别
看了网上的有助于理解css中伪类与伪元素区别的帖子,做了如下笔记:一:定义:1.css伪类用于向某些选择器添加特殊的效果2.css伪元素用于将特殊的效果添加到某些选择器3.都是向选择器添加特殊效果的(即用css无法描述的效果)二:理解:a. 伪类的效果是通过给要加特殊样式的元素,增加一个类来完成实现的伪元素的效果是通过给要加特殊样式的内容加一个元素来实现的原创 2016-10-30 13:46:59 · 1168 阅读 · 0 评论 -
关于弹出层的总结
关于弹出层的我的做法: 例如:点击“修改”按钮,弹出弹出框,并将需要修改的信息附到弹出框中; 思路: 1. 点击修改按钮,弹出阴影遮罩,阴影遮罩的样式代码如下: .mask{ width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; z-index:原创 2017-02-06 14:37:49 · 389 阅读 · 0 评论 -
css中使用“-webkit-appearance: none;”去除系统默认appearance的样式引发的问题
解决网站bug时,发现一个棘手的问题:的复选框选中了没有打钩,经排查,是由于css中“-webkit-appearance: none;”导致的,改成“-webkit-appearance: checkbox”后恢复正常。查询资料:总结如下: 1.-webkit-appearance的说明: 改变按钮和其他控件的外观,使其类似于原生控件。-webkit-appea原创 2017-01-19 15:18:28 · 15083 阅读 · 0 评论 -
利用伪元素:before实现的快递单查询垂直列表的demo
先看下实现的效果:代码如下//html <ul> <li class="cur"> <span>【已扫描待审查】 操作人:张三</span> <p>操作时间:2017-06-16 10:39:57</p> </li> <li> <span>【已扫描待审查】 操作人:李四</span> <p>操作时间:2017原创 2017-07-17 10:52:17 · 282 阅读 · 0 评论 -
利用transition属性实现一个简单小巧的hover效果
在实际工作中,简单利用css3的属性可以让页面更生动,如下面的例子:“了解详情”的hover效果比单纯的颜色变换效果更生动。而实现的方式就是简单的利用了css3transition属性。页面代码结构如下:<div class="box"> <a href="#"> <span>了解详情</span> <em></em> </a></div>原理定位原创 2017-12-19 19:05:51 · 1033 阅读 · 0 评论 -
CSS3动画相关属性的总结
css3动画相关属性的总结概述在最近的项目中,好多都要用到微交互,而这些微交互与css3的动画属性密不可分,例如下面的的微交互: CSS3动画相关属性有:transition,transform,animation,下面对这些属性和属性值做一个总结。transition过渡属性(1)概述W3C 的解释:CSS Transitions allows proper...原创 2018-04-20 08:42:08 · 1128 阅读 · 0 评论 -
CSS3的transform以及3D相关属性总结
CSS3的3D相关属性总结概述项目中遇到微交互、增加页面用户体验的需求,运用CSS3的transform变化的3D属性就可以达到效果。transform概述W3C 的解释:CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional ...原创 2018-04-20 10:48:20 · 3646 阅读 · 0 评论 -
table布局的一些总结
工作中遇到的自适应表格,实现过程并不顺畅,花费了一些功夫。将其中不熟悉的技术点总结如下,期待下次可以行云流水的做出来。1、自适应表格如何实现文本溢出点点的效果自适应的表格,由于单元格的流动性,文字不存在溢出这样情况,如下图所示:如何解决自适应表格内容过多将布局撑乱的情况?给table标签加如下css声明:table-layout: fixed;table-layout作用就是...原创 2019-02-19 14:20:12 · 2579 阅读 · 0 评论