CSS/HTML
关注
分享
扫一扫
文章平均质量分 85
给迷迷糊糊的自己，留份笔记
飒小北
这个作者很懒，什么都没留下…
展开
-
Flex 弹性布局
Flex布局诞生背景:布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为...原创 2018-10-25 10:49:53 · 220 阅读 · 0 评论 -
css动画插件 - animation.css的基本使用
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3...原创 2019-04-23 10:12:23 · 186 阅读 · 0 评论 -
CSS- 利用bootstrap完善表格之内容过多
表格中td的内容过多，希望通过省略号来表示， 当hover内容的时候，利用bootstrap tip提示信息， 展示出完整内容。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c原创 2019-03-14 11:07:15 · 680 阅读 · 0 评论 -
CSS3特效-移动端开关按钮样式
在移动web中，经常会用到一个开关按钮。 其本质是checkbox。效果图代码 //css /*switch*/.switch { position: relative; display: inline-block; width: 50px; height: 30px;}.switch input[type=checkbox] { display: none;...原创 2019-01-25 17:56:40 · 2524 阅读 · 0 评论 -
CSS3特效-自定义radio 单选列表勾选样式
单选列表勾选样式( radio)效果图:代码://css/*ridio tick*/.radio--tick { display: none;}.radio--tick+label{ display: inline-block; width: 100%; position: relative;}.radio--tick+label:after{ conte...原创 2019-01-25 17:41:55 · 2261 阅读 · 0 评论 -
CSS3特效-自定义radio
自定义checkbox样式效果图:代码// css.radio { display: none;}.radio+label { display: inline-block; position: relative;}.radio+label { padding-left: 20px; box-sizing: border-box;}.radio+label:...原创 2019-01-25 17:36:31 · 349 阅读 · 0 评论 -
CSS3特效-自定义checkbox样式
前言: 在实际开发过程中，大多数时候都不会用原生的checkbox样式，因为太丑了， 如果我们不用任何ui库的话， 就要手动写一个了， 原理就是将默认的checkbox 的input标签隐藏掉， 然后在与其一套的label标签前/后加一个checkbox的图标(可以是图片，也可以使svg，这里我们用的svg).效果图:代码://css.checkbox{ displa...原创 2019-01-25 16:47:31 · 1625 阅读 · 0 评论 -
CSS3特效-帧动画动起来
在油管上看到的一个教程， 感觉挺好玩的， 照着做了一下，代码没有几行，就是根据图片定位， 让每一帧动画显示出来。运行效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport&原创 2019-01-25 10:23:42 · 713 阅读 · 0 评论 -
让你的网页，点哪都是小心心~~~
效果如下:简单粗暴的代码: &lt;script&gt; !function (e, t, a) { function r() { for (var e = 0; e &lt; s.length; e++) s[e].alpha &lt;= 0 ? (t.body.removeChild(s[e].el), s.splice(e, ...原创 2018-11-20 14:19:40 · 1777 阅读 · 3 评论