随笔分类 -  CSS

基于CSS的轮播图
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基于CSS的轮播图 阅读全文
posted @ 2023-02-21 14:29 一只懒懒的熊Zz 阅读(34) 评论(0) 推荐(0)
css实现图片的瀑布流且右上角有计数
摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片背景铺满</title> <style> .container{ column-count: 4; column-gap: 2; } .item{ position: rela 阅读全文
posted @ 2021-11-10 17:26 一只懒懒的熊Zz 阅读(89) 评论(0) 推荐(0)
vue表格遍历渲染，flex布局两列对齐应用
摘要：1、当我们使用vue的v-for循环遍历数据并渲染成table表格时，业务需求要求遍历成两列，通过flex布局来实现，但是由于每一列的字段长度不一样，所以会存在高度不一样的问题 整个容器我们使用flex布局，列1和列2是div标签，div固定宽度为容器宽度的50%，div中的第两个元素为span，但 阅读全文
posted @ 2021-09-18 13:49 一只懒懒的熊Zz 阅读(1383) 评论(0) 推荐(0)
table表格长度超出屏幕范围，可滑动
摘要：步骤： 1、将table表格用div标签包裹起来 2、设置div的style="overflow:auto;width:100%" 3、设置table的style="white-space:nowrap" <template> <div> <div class="container"> <p>整体情 阅读全文
posted @ 2021-05-21 10:09 一只懒懒的熊Zz 阅读(2430) 评论(0) 推荐(0)
CSS实现Loading加载中动画
摘要：过度动画： 前端开发过程中，有时需要自定义Loading做加载动画，该动画是类似windows系统关机的动画，这个是在vue工程中自定义的一个Loading组件，vue的代码和htm的差别不大，自己调整一下成html文档格式就好了，虽然vue也自带了loading组件，但感觉不好用，尤其是我们需要把 阅读全文
posted @ 2021-04-16 17:23 一只懒懒的熊Zz 阅读(1073) 评论(0) 推荐(0)