随笔分类 -  htmlcss

摘要:效果如下,文字随着背景明暗变化 <svg viewBox="0 0 660 300"> <defs> <filter id="comform"> <feImage :href="image1" x="0" y="0" width="100%" height="100%" preserveAspect 阅读全文
posted @ 2023-08-09 17:35 月下云生 阅读(75) 评论(0) 推荐(0) 编辑
摘要:学习新的浏览器api:showOpenFilePicker,showDirectoryPicker,getDirectoryHandle,getFileHandle,removeEntry 之前文件上传使用的是: <input type="file"> 今天看到直接使用浏览器api即可实现文件读取, 阅读全文
posted @ 2023-04-10 19:03 月下云生 阅读(463) 评论(0) 推荐(0) 编辑
摘要:1.图片主要格式PNG-8、PNG-24、JPEG、GIF、比较新的格式:WEBP、AVIF、JPEG XL 2.设备独立像素:设备独立像素 = CSS 像素 = 逻辑像素 物理像素:又称为设备像素。显示屏是由一个个物理像素点组成的,1334 x 750 表示手机分别在垂直和水平上所具有的像素点数。 阅读全文
posted @ 2023-04-04 15:18 月下云生 阅读(31) 评论(0) 推荐(0) 编辑
摘要:实现效果: 1.所有规格可以联动 2.库存不足置灰不可选 3.再次点击可以取消选择 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I 阅读全文
posted @ 2022-12-02 18:01 月下云生 阅读(121) 评论(0) 推荐(0) 编辑
摘要:1.backdrop-filter背景模糊,背景过滤属性,是个非继承属性MDN上是这么说的:可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)。因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明。 backdrop-filter: blur(6rpx); 兼容性 2 阅读全文
posted @ 2022-06-28 16:50 月下云生 阅读(354) 评论(0) 推荐(0) 编辑
摘要:1.微信小程序中碰到 height:40rpx;line-height:40rpx;并不能上下居中 要实现如上效果,代码往简单写最开始想到用height跟line-height结合text-align实现居中效果: height: 40rpx; line-height:40rpx; width: 8 阅读全文
posted @ 2022-05-25 18:39 月下云生 阅读(50) 评论(0) 推荐(0) 编辑
摘要:1.页面渲染 a.解析HTML文件代码,生成DOM树,生成css树包括display:none的标签和js动态添加的元素或者样式 b.DOM树和css树结合生成渲染树(Render Tree) c.根据生成的渲染树的进行布局(Layout),计算渲染树节点在设备视口(viewport)的位置和大小, 阅读全文
posted @ 2022-01-06 10:41 月下云生 阅读(67) 评论(0) 推荐(0) 编辑
摘要:一. " "键盘中的按键space键,在HTML、字符串中都会被压缩成一个 二. &nbsp;w3cschool描述为 HTML中的常用字符实体是不间断空格(&nbsp;).在HTML中直接按space敲出多个空格只会保留一个,&nbsp;用于与添加多个空格,也能用它的实体编号&#160;.(类似的 阅读全文
posted @ 2021-12-17 15:45 月下云生 阅读(2610) 评论(0) 推荐(0) 编辑
摘要:1.溢出 当一个盒子的内容(子元素、孙子元素等后裔)超过盒子本身的大小的时候,就会出现溢出。 2.overflow 通常用overflow(overflow-x,overflow-y)来处理内容溢出。 overflow: hidden; 超出盒子的内容被隐藏。 overflow:auto;当内容超出 阅读全文
posted @ 2021-10-11 16:41 月下云生 阅读(2209) 评论(0) 推荐(0) 编辑
摘要:1.通过设定边框来实现 <div class="demo"></div> .demo { width: 0; height: 0; border: 50px solid transparent; border-top: 50px solid black; margin: 0 auto; /* bor 阅读全文
posted @ 2021-09-17 15:32 月下云生 阅读(38) 评论(0) 推荐(0) 编辑

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