随笔分类 -  CSS

页面样式
摘要:核心代码(提供思路) <up-waterfall v-model="flowList"> <template v-slot:left="{leftList}"> <view v-for="(item, index) in leftList" :key="index"> <!-- 这里编写您的内容,i 阅读全文
posted @ 2025-01-22 17:25 xuanPhoto 阅读(8) 评论(0) 推荐(0) 编辑
摘要:效果 HTML/CSS <template> <div> <div class="identify-btn-media"> <div class="identify-btn-box active"> <div class="loading"> <div class="line1"></div> <d 阅读全文
posted @ 2024-07-10 17:11 xuanPhoto 阅读(139) 评论(0) 推荐(0) 编辑
摘要:变量名称必须以两个破折号(--)开头,且区分大小写! 因为$被sass抢了 @被less抢了 所以用 --开头声明变量 body { --blue: #1e90ff; } div{ color: var(--blue); } 用js获取并赋值--blue document.querySelector 阅读全文
posted @ 2022-11-22 22:31 xuanPhoto 阅读(26) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-07-21 10:23 xuanPhoto 阅读(32) 评论(0) 推荐(0) 编辑
摘要:.landscape-container { position: absolute; overflow: hidden; } // 竖屏 @media screen and (orientation: portrait) { .landscape-container { width: 100vh; 阅读全文
posted @ 2022-04-29 14:37 xuanPhoto 编辑
摘要:reset html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu 阅读全文
posted @ 2022-04-29 14:31 xuanPhoto 编辑
摘要:重绘和回流是渲染步骤中的一小节,但是这两个步骤对于性能影响很大。 重绘 重绘是当节点需要更改外观而不会影响布局的,比如改变 color就叫称为重绘 回流 回流是布局或者几何属性需要改变就称为回流 减少回流 使用 visibility替换 display: none,因为前者只会引起重绘,后者会引发回 阅读全文
posted @ 2021-09-13 19:12 xuanPhoto 编辑
摘要:<style style="display: block" contenteditable> </style> 是的在style上面加上 style="display: block" contenteditable 就可以在页面中实时编辑css 页面也能是实时响应 阅读全文
posted @ 2021-08-31 09:34 xuanPhoto 编辑
摘要:预览缩略图 html <body> <style> div { width: 160px; height: 160px; display: flex; justify-content: center; background: pink; /* 居中 */ } img { /* 核心是max- */ 阅读全文
posted @ 2021-08-28 11:03 xuanPhoto 编辑
摘要:.box{ cursor:url('xxx/pointer.cur'); // 注意图片格式 } 阅读全文
posted @ 2021-07-09 15:06 xuanPhoto 阅读(97) 评论(0) 推荐(0) 编辑
摘要:::-webkit-scrollbar-track-piece { background-color: #fff; -webkit-border-radius: 0 } ::-webkit-scrollbar { width: 10px; height: 10px } ::-webkit-scrol 阅读全文
posted @ 2021-07-06 10:36 xuanPhoto 阅读(47) 评论(0) 推荐(0) 编辑
摘要:left:12px; 重置就用 left:unset; 这样处理的背景就是 right和left相互排斥了 你想用right 但修改的目标有left了所以你加上right也会被left影响 就可以用left:unset 覆盖它 阅读全文
posted @ 2021-06-24 10:40 xuanPhoto 阅读(580) 评论(0) 推荐(0) 编辑
摘要:html <section class="playContainer"> <li class="playBtn"> <a href="#" title="start">Start</a> </li> <li class="pauseBtn"> <a href="#" title="pause">Pa 阅读全文
posted @ 2021-01-18 16:24 xuanPhoto 阅读(234) 评论(0) 推荐(0) 编辑
摘要:为什么重写Sass? 为什么使用Dart? 各种实现的后续规划? 阅读全文
posted @ 2019-08-09 17:28 xuanPhoto 阅读(1538) 评论(0) 推荐(0) 编辑
摘要:<div class="redbox">文字文字</div> 问题复现 // 会左右滚动 因为 width:100%; 你还 padding-left:30px; .redbox{ width:100%; height:30px; padding-left:30px; background:#c00 阅读全文
posted @ 2019-05-08 14:25 xuanPhoto 阅读(180) 评论(0) 推荐(0) 编辑
摘要:demo .imgList { &::-webkit-scrollbar { display: none; } overflow-x: auto; overflow-y: hidden; white-space: nowrap; li { width:px2rem(140); height:px2rem(... 阅读全文
posted @ 2018-04-25 20:32 xuanPhoto 阅读(1862) 评论(0) 推荐(0) 编辑
摘要:css伪类 :after 在元素后面插入内容 :hover 鼠标移入时进行 :before 在元素前面插入内容 :link 未选中的链接 :active 点击后产生什么变化 :nth-child 匹配父级的第几个元素 :nth-of-type() 某个元素下的第几个元素 阅读全文
posted @ 2017-11-02 17:42 xuanPhoto 阅读(251) 评论(0) 推荐(0) 编辑
摘要:因为body和html,默认高度是auto 所以相对于他们作为父元素设置position:relative的top值需要加上body,html{height:100%;} 阅读全文
posted @ 2017-07-04 10:06 xuanPhoto 阅读(509) 评论(0) 推荐(0) 编辑
摘要:background-color: transparent; 或者 background-color: rgba(239, 239, 239, 0); 两者原理一样 阅读全文
posted @ 2017-05-19 11:47 xuanPhoto 编辑

点击右上角即可分享
微信分享提示