随笔分类 -  CSS

精细的媒体查询。相对于其他的媒体查询，更加精细
摘要：/* 超大屏幕（4K 及以上显示器） */ @media (min-width: 2560px) { .c-bor-item { width: calc(100% / 12); height: 120px; padding-right: 15px; margin-bottom: 20px; } } 阅读全文
posted @ 2025-02-20 12:48 我喜欢喝糖水 阅读(14) 评论(0) 推荐(0)
常用媒体查询尺寸
摘要：@media screen and (max-width: 767.98px) { } @media screen and (min-width: 768px) { } @media screen and (min-width: 992px) { } @media screen and (min-w 阅读全文
posted @ 2023-06-29 18:30 我喜欢喝糖水 阅读(25) 评论(0) 推荐(0)
a 标签 name 熟悉因为头部固定,导致置顶遮挡解决方案
摘要：.quess{ padding-top: 70px;/* 70px是导航栏高度 */ margin-top: -70px; } .quess 是锚点的类名 原理： padding影响锚点元素的定位，margin不影响锚点元素的定位。 所以使用padding调整锚点元素跳转后的位置，使用margin抵 阅读全文
posted @ 2021-11-19 17:12 我喜欢喝糖水 阅读(113) 评论(0) 推荐(0)
原生 input radio 优化
摘要：男 女 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> div { position: relative; line-height: 30px; 阅读全文
posted @ 2019-12-17 15:42 我喜欢喝糖水 阅读(895) 评论(0) 推荐(0)
前端优化
摘要：1，前端点击，阻止鼠标选中文字：-webkit-user-select: none; 2，label 事件冒泡阻止： 阅读全文
posted @ 2019-10-17 15:04 我喜欢喝糖水 阅读(141) 评论(0) 推荐(0)
文字动态颜色变化效果
摘要：被你发现了，哈哈哈。这是一个有趣的小Demo哇。 鼠标左键键扫描选中上面区域查看效果 .gradient-text { background-image: linear-gradient(90deg, $red, $orange); background-clip: text; line-heigh 阅读全文
posted @ 2019-09-19 18:24 我喜欢喝糖水 阅读(391) 评论(0) 推荐(0)
快速了解 Flex 弹性布局
摘要：引言：2009年，W3C提出了一种新的方案—-Flex布局，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。转眼就是8102年，如今弹性布局也已经被大多浏览器所支持：Chrome 21+ , Opera 12.1+ , FireFox22+ , Safar 阅读全文
posted @ 2018-11-03 23:45 我喜欢喝糖水 阅读(594) 评论(0) 推荐(0)
css动画制作挂图效果
摘要：采用css 的动画制作一个简单的挂图。直接上代码： 实现比较简单：点击查看demo效果 阅读全文
posted @ 2018-08-16 23:04 我喜欢喝糖水 阅读(199) 评论(0) 推荐(0)
块级格式化上下文（block formatting context）BFC
摘要：最近实在是很郁闷。因为越发的感觉有些东西，有时候我们很少用或者是没有意识的去用的时候，就会忘记，比如BFC，这个概念我很早之前就看过，但是 经常的自己还是会忘记，这就是我目前学习碰到的问题了，没有意识到技术点，用或者不用自己不会考虑很多，所以好记性不如烂笔头，自己还是得总结一下。 思考： 1，BFC 阅读全文
posted @ 2018-07-14 20:22 我喜欢喝糖水 阅读(170) 评论(0) 推荐(0)
Input 与 button 之总有刁民想害郑
摘要：不定期更新的日常又来啦。 我们有时候在做网页的时候可能会碰到一种情况，那就是浏览器对行内块元素之间会产生默认距离（当元素间留白的时候），常见的就是Input 与button，比如： （图 1） 可以看到text文本框与按钮之间有一个空隙（那个标出的白色块）。我目前了解的方式是：1、代码注释：比如 < 阅读全文
posted @ 2018-06-28 01:49 我喜欢喝糖水 阅读(191) 评论(0) 推荐(0)
CSS多级菜单
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ background-color: darkgray; } #nav{ position 阅读全文
posted @ 2018-03-19 15:11 我喜欢喝糖水 阅读(246) 评论(0) 推荐(0)
CSS 旋转图片
摘要：<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> function imageRotation(name) { document.getElementById('image').classNam 阅读全文
posted @ 2018-03-16 20:59 我喜欢喝糖水 阅读(180) 评论(0) 推荐(0)
css花纹背景
摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> .patterns { width: 200px; height: 200px; float: 阅读全文
posted @ 2018-03-16 10:55 我喜欢喝糖水 阅读(696) 评论(0) 推荐(1)
设计一个精致按钮
摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{background: #ededed; color: #999; margin: 32p 阅读全文
posted @ 2018-03-14 22:09 我喜欢喝糖水 阅读(173) 评论(0) 推荐(0)

我喜欢喝糖水的博客友链：股票指标编程学习