![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
gqzydh
这个作者很懒,什么都没留下…
展开
-
css 常用技巧
css图片文字水平垂距中父级标签属性:display:table-cell;vertical-align:middle;距中标签元素:vertical-align:middle;display: inline-block;原创 2017-12-13 13:23:50 · 177 阅读 · 0 评论 -
css 清除浮动
父级div定义伪类:after和zoom<style type="text/css"> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:lef...原创 2018-12-26 16:18:02 · 113 阅读 · 0 评论 -
input框限制只能输入正整数、字母、小数、汉字
有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字、小数点、英文字母、汉字等代码。例如,输入大于0的正整数代码如下:1,文本框只能输入数字代码(小数点也不能输入)代码如下:2,只能输入数字,能输小数点.代码如下:3,数字和小数点方法二代码如下:封装成单独的函数:代码如下:function keyPress(ob) {if (!ob.val...原创 2018-12-04 13:31:12 · 458 阅读 · 0 评论 -
jquery.animate.js调用Animate.css实现强大的css3动画
引用<link rel="stylesheet" href="animate.min.css"><script src="jquery.js"></script><script src="jquery.animate.js"></script>给指定的元素加动画样式<原创 2018-11-21 09:17:35 · 5903 阅读 · 0 评论 -
CSS实现水平垂直居中
CSS实现水平垂直居中实例PC端有兼容性要求,宽高固定,推荐absolute + 负marginPC端有兼容要求,宽高不固定,推荐css-tablePC端无兼容性要求,推荐flex //移动端推荐使用flexcss .boxs{ padding: 10px; background-color: #ccc; } .wp{border:1px solid red;width:300p...原创 2018-09-29 18:04:56 · 168 阅读 · 0 评论 -
translate()进行水平垂直居中
html<div class="load_box"> <div class="load_cont"> <div class="load_img"></div> 加载失败,稍后再试 </div></div> css原创 2018-09-10 13:52:34 · 2266 阅读 · 0 评论 -
css 制作图表
把工作中经常使用的一些能使用css 制作的一些图标,进行笔记,方便下次调用和分享,笔记持续更新css/* 三角形小标 */.sanjiao{ width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: transparent transparent red t...原创 2018-07-22 17:26:23 · 1205 阅读 · 0 评论 -
less 即学即用
推荐工具koala 是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。/* 是被编译的注释 */ // 是不被编译的注释 less中声明变量,要用@开头,例如:@变量名:值@test_width: 300px;.class...原创 2018-07-22 17:20:31 · 184 阅读 · 0 评论 -
css3常用动画+动画库
css3常用动画/* animation */.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}.a-fadein,.a-fadei...原创 2018-05-11 09:37:24 · 953 阅读 · 0 评论 -
纯css实现图片自动闪光划过效果
纯css实现图片自动闪光划过效果html>head>meta name="viewport" content="width=device-width, initial-scale=1">head>style type="text/css">*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: i原创 2018-01-15 17:38:15 · 7084 阅读 · 0 评论 -
css中的一些黑科技
css中的一些黑科技简单的文字模糊效果实现页面编辑CSS实现多重边框简单的文字模糊效果*{ color: transparent; text-shadow: #111 0 0 5px;}实现页面编辑CSShtml> body> style style="display:block" contentEditab原创 2018-01-22 22:13:43 · 326 阅读 · 0 评论 -
CSS3 触发animation和@keyframes定义的动画
重新触发CSS3 animation和@keyframes定义的动画结合CSS3的animation和@keyframes可以给元素定义动画,定义一个标题进入的动画如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>重新触发CSS原创 2019-03-07 09:50:35 · 6697 阅读 · 0 评论