常用的css技巧使用

在日常开发中，如果css使用得当，我们可以减少js的使用，提高开发效率。下面介绍一些CSS开发的常用技巧。动画可以让我们完成一些常见的动画，比如等待加载，还有一些弹窗过渡动画等等，比如下面实现的轮播图//pug语法div.contentdiv.boxcontentdivdivdiv//手写笔syntax.contentposition:relative;宽度：200px；高度：200px；溢出：隐藏；.boxcontent位置：绝对；宽度：600px；高度：200px；溢出：隐藏；动画：无限移动5s；colors=redblue#ffe100forcol,jincolorsdiv:nth-child({j+1})width:200px;高度：200px；背景：col；float:left@keyframes向左移动0%：0向左移动50%：-200px；100%左：-400px；效果：本库animate.css使用了大量的动画动画效果。在日常开发中，我们可以使用输入类选择器来更改默认的复选框。快乐快乐Unhappyinput{opacity:0}span{position:relative;}span:before{position:absolute;宽度：15px；高度：15px；边框：1px实心#ddd；内容：'';左：-20px；顶部：3px；行高：15px；文本对齐：居中；color:green;}input:checked+span:before{content:'√';}input:disabled+span{text-decoration:line-through;}input:disabled+span:before{content:"×"}效果:伪元素before和after在日常开发中经常用到；例如绘制步长条：

1

2

3

4

5

li{位置：相对的;列表样式：无；向左飘浮;左边距：30px；边框：1px实心#d500ff；填充：5px；文本对齐：居中；边界半径：50%；宽度：30px；H八:30px;}li:after{position:absolute;顶部：19px；左：40px；宽度：30px；高度：2px；内容：'';背景：#d500ff;}li:before{position:absolute;10像素；高度：10px；内容：'>'；顶部：3px；左：61px；字体大小：18px；color:#d500ff;}li:last-child:before,li:last-child:after{display:none;}作用：在开发中，我们经常使用其他插件或其他样式。这时候我们可以使用cssweights来改变原有的样式。参考css的优先级和权重，按钮上的:hover,:active或者跳转链接也用的比较频繁。hover常用于当鼠标移到按钮上时改变按钮的背景色，active常用于点击按钮的效果。