随笔分类 -  css

1 2 下一页
less的使用
摘要：1、嵌套 .a{ width: 100px; .b{ width: 200px; } } 2、函数 .text-overflow() { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break 阅读全文
posted @ 2021-03-10 10:36 kimingw 阅读(116) 评论(0) 推荐(0)
神器的css，css保留状态（css事件）
摘要：经过我的分析css保留改变的状态总共有三种方法。 （1）、a标签锚点点击，然后根据:target伪类保留状态。 css #a:target+div,#b:target+div{ color: teal; } html <a id="a" href="#a">123</a> <div>123</div 阅读全文
posted @ 2020-11-17 10:56 kimingw 阅读(459) 评论(0) 推荐(0)
ztext简单的介绍
摘要：1、ztext是一个把元素3d化的插件。（现在包括svg、img、font） 2、ztext其实文档很完善而且即插即用。 https://bennettfeely.com/ztext/ 3、简单介绍一下怎么使用 （1）css h1 { color: #90a4ae; font: bold 5em " 阅读全文
posted @ 2020-08-28 15:59 kimingw 阅读(490) 评论(0) 推荐(0)
svg配合css多变形
摘要：1、获取多边形的点（n是几边形，w是宽，h是高） const polygon = (n: number, w: number, h: number) => { let deg = 2 * Math.PI / n let points = [] for (let i = 0; i < n; ++i) 阅读全文
posted @ 2020-08-25 16:54 kimingw 阅读(317) 评论(0) 推荐(0)
grid布局简单讲解
摘要：1、首先介绍最近学习的简写 .test{ place-content: center; place-items: center; } /* 相当于 */ .test{ align-content:center; // 垂直内容方向 justify-content: center; // 水平内容方向 阅读全文
posted @ 2020-07-21 16:42 kimingw 阅读(301) 评论(0) 推荐(0)
重新总结flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）
摘要：1、flex，主要就是按比例分配。（例如：两个div的flex:1，就大小相等） 2、flex-direction，几种排序的方式。 3、justify-content，几种横向内容排序的方式。 4、align-items，几种竖向内容排序的方式。 5、flex-wrap，换行与不换行。 6、ali 阅读全文
posted @ 2018-09-11 15:04 kimingw 阅读(1249) 评论(0) 推荐(0)
逐帧动画的使用
摘要：1、如果对性能要求不高可以直接使用jquery的animate 注意：这会导致jQuery的bug，窗口失去焦点时停止触发。 2、可以使用第二种方案，直接替代jquery的animate，使用velocity.js直接替代animate 性能会更好，而且不会引发那个bug 3、可以直接使用css3的 阅读全文
posted @ 2018-08-22 15:21 kimingw 阅读(296) 评论(0) 推荐(0)
移动端浏览器问题
摘要：1、防止手机中网页放大和缩小 2、启动或禁用自动识别页面中的电话号码 3、html5调用安卓或者ios的拨号功能 4、上下拉动滚动条时卡顿、慢 5、禁止复制、选中文本 6、长时间按住页面出现闪退 7、iphone及ipad下输入框默认内阴影 8、ios和android下触摸元素时出现半透明灰色遮罩 阅读全文
posted @ 2018-01-29 11:34 kimingw 阅读(472) 评论(0) 推荐(0)
css的checkbox样式变化
摘要：1、CSS 2、HTML 阅读全文
posted @ 2017-08-03 17:22 kimingw 阅读(302) 评论(0) 推荐(0)
css3的cursor
摘要：1、cursor属性参考表 还有zoom-in/zoom-out 还有grab/grabbing 2、css （1）前面的基本上就 （2）后面两个有兼容性问题 阅读全文
posted @ 2017-08-03 15:25 kimingw 阅读(616) 评论(0) 推荐(0)
css活用，半星星的效果
摘要：1、首先下载要用到星星字体 2、css 3、HTML 阅读全文
posted @ 2017-08-03 15:20 kimingw 阅读(383) 评论(0) 推荐(0)
css活用，评分点击星星
摘要：1、字符图集 2、css样式 3、HTML 4、JS 阅读全文
posted @ 2017-08-03 15:17 kimingw 阅读(311) 评论(1) 推荐(0)
css字体font-family
摘要：1、"Arial" 2、"Microsoft YaHei" 3、"黑体" 4、"宋体" 5、sans-serif 6、Tahoma 7、\5b8b\4f53 8、KaiTi（楷体） 9、Microsoft JhengHei（微软正黑体） 10、FangSong（仿宋） 阅读全文
posted @ 2017-06-10 16:38 kimingw 阅读(234) 评论(0) 推荐(0)
inline-block空隙总结
摘要：如果inline-block，宽度都是50%会留有空隙，解决方法如下 1、标签之间不留空格 （1）直接不留空 （2）注释不留空 （3）标签尾连接 2、margin负值 阅读全文
posted @ 2017-05-22 14:15 kimingw 阅读(126) 评论(0) 推荐(0)
css自动换行与不换行
摘要：1、自动换行 2、不换行 3、浮动效果不换行 阅读全文
posted @ 2017-04-12 16:41 kimingw 阅读(538) 评论(1) 推荐(1)
flex实验总结
摘要：1、父元素 2、子元素 阅读全文
posted @ 2017-01-03 18:38 kimingw 阅读(459) 评论(0) 推荐(0)
CSS的7种常用的垂直居中的方法
摘要：1、绝对定位上下百分之五十然后上外边距做外边距都是他的宽高的一半 2、根据上面的方法有一定的变化，不过也是根据绝对定位 3、用于文本且单行，line-height要等于父元素高度 4、利用display:table;与display:table-cell;(注意只有.child框内元素会垂直居中) 阅读全文
posted @ 2016-12-01 14:39 kimingw 阅读(243) 评论(0) 推荐(0)
webstrom配置sass与less
摘要：1、less （1）安装一个稳定版的node。 （2）然后再安装less （3）然后直接在webstrom里导入那个lessc.cmd 2、sass 安装ruby。 安装完之后点开，Start那个安装好的文件。 然后webstrom导入那个ruby文件里的sass.bat 阅读全文
posted @ 2016-11-16 09:49 kimingw 阅读(233) 评论(0) 推荐(0)
CSS代码片段【图文】
摘要：1、垂直对齐 2、图片增加灰度 首先创svg 然后是图片 效果图： 原图： 3、背景渐变动画 效果图： hover后的样子： 4、只在一边或者两边显示阴影 5、制造模糊文本 6、用css动画制造省略号动画 7、图片边框偏光 8、缝合CSS3元素 9、三角形列表项目符号 10、网页顶部盒阴影 11、c 阅读全文
posted @ 2016-10-22 17:24 kimingw 阅读(358) 评论(0) 推荐(0)
table的border重合问题
摘要：1、 用css的方法直接实现 2、 修改table的属性。使用老旧的方法实现，不过就是丑很多 3、 类似于刚刚那种方法但是主要也是css，接着 table属性加css的结合用法 阅读全文
posted @ 2016-10-20 14:42 kimingw 阅读(3088) 评论(0) 推荐(0)

1 2 下一页