将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。 设置下拉菜单的高度添加过渡效果，高度为auto时过渡效果失效。 <style> ul{ list-style: none; margin: 0; padding: 0; } ul li a{ display: block; text-decorat ...
分类：
Web程序 时间：
2020-06-09 20:47:39
阅读次数：
81
前言 对于气泡对话框或者Popover与内容连接部分会有小三角形效果，可能在以前直接用图片去实现，其实用纯css即可实现，下面要实现的效果分别是微信对话框和面包屑，以此回顾记录一下。 效果如下： css写三角形原理 首先我们设置一个div元素的宽高和边框，观察效果 .demo1 { width: 4 ...
分类：
Web程序 时间：
2020-06-05 10:29:55
阅读次数：
77
这是一个系列，带着大家封装一个纯 CSS 框架，从零学习 SASS 语法。 代码仓库点我传送 因为简单，强依赖原生 Javascript 对虚拟 DOM 不友好（如 React、Vue、Angular），使用虚拟 DOM 对使用原生 Javascript 编程（JQuery）不友好。没有代码是最棒的 ...
分类：
Web程序 时间：
2020-06-02 09:17:48
阅读次数：
94
做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果，如下图： 看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望： 兼容性好，对各大主流浏览器有好的支持响应式截断，根据不同宽度做出调整文本超出范围 ...
分类：
Web程序 时间：
2020-05-31 11:27:03
阅读次数：
75
<div class="inRadio RadioStyle"> <input type="radio" checked onclick="editWareHouseIt(this)" id="editOrInsHouse01" name="editOrInsHouse" value="01"> < ...
分类：
Web程序 时间：
2020-05-25 13:57:49
阅读次数：
170
前言 由于HTML语言的定位问题，在网页中实现居中也不是如word中那么简单，尤其在内容样式多变，内容宽高不定的情况下，要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多，但是都不太完整，所以小茄今天就来总结下纯CSS实现居中的各种方案。学疏才浅，文中如有不当之处，万望指出！ 6种方案 1 ...
分类：
Web程序 时间：
2020-05-22 11:19:33
阅读次数：
53
今天是2016.12.13是南京大屠杀公祭日。不少相关站点都将网站全部变为灰色，以表示哀悼。 为了更多的小伙伴可以达成这种效果，在哀悼日可以表达一份哀悼。我们今天也来给出相关方法。 看下腾讯大苏网 这种效果是用纯CSS来实现的。 filter: grayscale(100%); -webkit-fi ...
分类：
Web程序 时间：
2020-05-19 10:56:53
阅读次数：
75
Float定位溢出隐藏 优点： 纯CSS实现，性能好，不用js调优 兼容性高 多行省略，自动显示 缺点： 单词截断 代码如下： <div class="ellipses-div"> <span class="ellipses-text">这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段 ...
分类：
Web程序 时间：
2020-05-18 19:03:14
阅读次数：
72
天天写前端的你，会自己写一个轮播图吗，而且不能用js哦，知道轮播图的原理吗？ 今天我们要讲的是如何只用css实现轮播图效果，也叫 ，就是我们经常在APP或网站首页顶部看到的一系列图片切换。就像淘宝官网首页那样： 实现原理 一图胜千言，先上图： 解释一下，轮播图并排排列，组成一张很宽的图片，而手机屏幕 ...
分类：
Web程序 时间：
2020-05-17 19:28:03
阅读次数：
90
div css3样式表制作鼠标滑过导航条淡进淡出效果点击》div css3样式表制作鼠标滑过导航条淡进淡出效果div+css3制作一个会动画的导航，当鼠标滑过内容块时，底部背景动画显示，css3与字体引用谷歌字体目录，让这个css3动画导航更加的美光。div css样式表A标签属性hover纯CSS ...
分类：
其他好文 时间：
2020-05-17 13:27:45
阅读次数：
52
