利用CSS3 选择器和 配合实现tab切换 效果： 代码： 原理就是点击label的时候就会选中input标签，然后通过CSS让当前选中的那个元素的对应内容显示就好了。 利用:target实现遮罩层效果 单击按钮的时候会弹出遮罩层，如果再点遮罩层的话就会把遮罩层给隐藏。 代码： 长期更新...
原创
2021-08-04 11:05:43
154阅读
瀑布流 又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指置。 为什么使用瀑布流 瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对
转载
2020-10-02 13:48:00
2133阅读
2评论
30行代码实现纯CSS—3种换肤老规矩，先把代码给大家，拿去粘贴直接用，无需引用，不
原创
2022-08-23 10:50:38
139阅读
纯手写的简单贪吃蛇小游戏
原创
精选
2024-05-30 19:31:41
450阅读
在现代前端开发中，获取屏幕的宽度和高度通常依赖于 JavaScript。然而现代 CSS 也可以获取到屏幕的宽高，通过自定义属性（CSS Variables）和一些数学函数来实现这一目标。本文将详细解析如何使用 CSS 的 @property 规则和一些数学运算来获取屏幕的宽高，严格的说是获取视口的宽度和高度。
使用CSS获取屏幕宽高仅是一种实现方式，部分属性和数学函数有一定的兼容性问题，所以线上
原创
精选
2024-08-27 10:51:26
222阅读
原文地址：http://www.cnblogs.com/yes123/p/3944047.html纯css+js下拉菜单实例代码分享一个css+js下拉菜单代码，js+css实现的简单下拉菜单，兼容性不错。例子：<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta
转载
精选
2014-08-29 06:04:01
508阅读
本主题修改自其他大佬：Rocket1184/MaterialCnblogs: Material Theme for cnblogs.com (github.com) 只需在博客后台选择“禁用模板默认CSS”，就可在任意主题中使用 特点： 1.文章半透明效果,默认白色(可修改)，透明度76%(可修改) ...
转载
2021-07-24 14:43:00
81阅读
2评论
流传很广的一个例子。<style type="text/css">div.roundedcorner{background: #3a6ea5; width: 200px; color:white}b.r {display:block;background: #fff}b.r b {display:block;height: 1px;overflow: hidde
转载
2009-09-29 15:42:42
567阅读
如果能避免使用JavaScript就实现DOM元素动画效果,那我非常乐于不用JS去实现。 因为更高效，而且不需要JS框架来一步步处理，代码更美观优雅。 用纯CSS来实现很难确定的一个特效是 上下滑动——当向上滑的时候内容渐变隐藏，向下滑动内容渐变显示。 之所以难以实现的原因是你可能不能获得内容的高度。 在经历了多种多样的CSS属性之后，我发现了一种利用纯CSS来实现滑动特效的方法。HTML部分
转载
2013-08-27 19:17:00
2111阅读
2评论
原文地址: CSS Triangles 演示地址：CSS Triangles Demo 原文日期: 2013年8月5日翻译日期: 2013年8月9日本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements)最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指
原创
2022-02-16 15:05:16
971阅读
纯CSS圆角效果
纯CSS圆角效果
纯CSS圆角效果
1 <html> 2 <head> 3 <title>纯CSS圆角效果</title> 4 <meta http-equiv="content-type" content="text/html; charset=gb2312"> 5 <
转载
2010-04-09 09:26:00
241阅读
2评论
纯css 瀑布流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co ...
转载
2021-10-19 16:34:00
541阅读
2评论
做一个星级评价的功能不是很难，但是要单纯用CSS写估计就有点难度了，先来个截图： 效果很简单，可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法：CSS： 以下为引用的内容： .jsstar &nb
转载
2022-11-28 16:31:28
76阅读
感谢印记中文的 QC-L[1] 对本文进行，英文原文: English Version[2]。在 重新构想原子化 CSS中，我提到了 UnoCSS[4] 的一个预设，它提供了在纯 C...
转载
2021-11-22 16:53:28
460阅读
在Web开发中。通过CSS代码也能够实现一些简单的图片，当然，假设你有耐心，也能够实现较为复杂的图片噢。 那么请问为什么有图片不去用而须要用CSS来实现呢？一是由于性能的原因，图片带给server和client的压力比几行CSS代码要大得多。二是由于没有必要。有些简单的效果利用CSS就能够直接完毕了
转载
2017-05-31 11:20:00
377阅读
2评论
原文地址: CSS Triangles 演示地址：CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements)最近重新设计了我的...
转载
2013-08-09 10:34:00
765阅读
2评论
感谢印记中文的 QC-L[1] 对本文进行翻译，英文原文: English Version[2]。在 重新构想原子化 CSS中，我提到了 UnoCSS[4] 的一个预设，它提供了在纯 C...
转载
2022-01-14 17:42:58
304阅读
不需要图片和js技术。能够兼容各种浏览器，不兼容opera.支持三种按钮状态，即正常，
原创
2022-04-22 15:45:10
431阅读
第一章、基本的圆角框 原创：冰极峰 转载请注明出处 2009年11月30日10:19:34 序言：在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的
转载
2009-11-30 17:40:00
113阅读
什么是Tootips? 这就是Tooltips如你所见，这些附加的说明文字在鼠标经过的时候显示。 当然,支持HTML.如: .<html> <head> </head> <style type="text/css"> /*Tooltips*/ .tooltips{ position:relative; /*这个是关键*/ z-index:2; } ....
转载
2009-05-25 10:03:00
107阅读
2评论
