随笔分类 - CSS

精灵图的使用

摘要：1. 精灵图大小缩小一半精灵图大小为宽208 高度 408 缩小为宽104 高度 208 2.量取选择图标的大小放图片的区域宽高 44px 图标大小宽高为23px 图标局部坐标为 59和198 .user{ width: 44px; height: 44px; } .user::befor 阅读全文

posted @ 2022-06-24 16:52 小成- 阅读(249) 评论(0) 推荐(0) 编辑

常见的水平垂直方式

摘要：1.利用绝对定位，先将元素的左上角通过 top:50%和 left:50%定位到页面的中心，然后再通过 translate 来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。 .parent { position: relative; } .child { position: abso 阅读全文

posted @ 2022-04-15 14:26 小成- 阅读(203) 评论(0) 推荐(0) 编辑

锚点跳转

摘要：. 效果图 1.定义参数 setup() { const name = ref('1.作业信息') //默认的值 const list = reactive([ //定义一个数据的数组 {name: "1.作业信息", id: '1'}, {name: "2.签字确认", id: '2'}, {na 阅读全文

posted @ 2022-04-08 15:52 小成- 阅读(33) 评论(0) 推荐(0) 编辑

适配

摘要：1.安装 postcss-plugin-px2rem 插件（px转化成动态的单位） module.exports={ css:{ loaderOptions: { postcss: { plugins: [ require('postcss-plugin-px2rem')({ rootValue: 阅读全文

posted @ 2022-03-25 16:31 小成- 阅读(310) 评论(0) 推荐(0) 编辑