随笔分类 - css
摘要：有一个页面本来使用2组的Bootstrap的List Group + Card(里面嵌套List Group的子项目数量的表格)，现在要增加1组变成3组，本来使用row和col-2类页面呈现还算布局合理，然增加1组后不能再使用row类(表格内容需要一定宽度显示)。只好考虑给容器盒子加上固定的宽度和d
阅读全文
摘要：在一个英文博客上看到用css实现的时间线，看着还是很简单的，写个demo记录下。 <style> .events::before { content: ""; position: absolute; top: 0; height: 100%; width: 1px; left: 50%; backg
阅读全文
摘要：<style> .parent { display: grid; grid-template-columns: 25% 75%; /* grid-template-columns: 1fr 3fr; */ /* 同上 */ height: 100px; } .child { border: 1px
阅读全文
摘要：最近要把一个长表格改成表头不随滚动向上滚动而是固定，复习下css的定位知识，记录下 <style> .box { border: 1px solid silver; position: relative; height: 200px; width: 300px; overflow: auto; }
阅读全文
摘要：最近领导给了个需求：一个web页面header和footer的部分不能随浏览器zoom in/out 改变样式及字体大小。 分析了需求和查阅相关资料后，写个demo，实现了整个页面不随ctrl+(+/-) 组合键或者ctrl+鼠标滚轮 缩放的效果，对于浏览器工具/设置的缩放没有效果。 键盘/鼠标事件
阅读全文
摘要：最近要开发一个打印物品铭牌标签的页面，从DB里面调出信息，打印出带n个条形码（水平和竖直方向都有）的12*10cm的标签，这种应用以前接触的少，特意研究记录下。 要打印非标准纸张，首先需要在目标打印机上新建纸张类型，规格设置为12*10cm，步骤如下： 设置-设备-打印机和扫描仪-打印服务器属性-创
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：animation动画 动画使元素逐渐从一种样式变为另一种样式。使用 CSS 动画之前，需要首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。使用@keyframes 规则定义动画关键帧，动画将在特定时间逐渐从当前样式更改为新样式。 <!DOCTYPE html> <html lang
阅读全文
摘要：最近要做一个类似于数据看板的页面，使用bootstrap5做基础的样式，一个页面划分为n个长宽不一的大小方块，需求要求背景色不用单色，要用渐变色，看起来会比较有质感，特意研究了下css的渐变色，这里记录下 <!DOCTYPE html> <html lang="en"> <head> <meta c
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div { margin-top: 0.25rem; margin-bottom: 0.25rem; } /* 使用margin属性居中 */ .margin-center
阅读全文
摘要：盒子模型 css的盒模型有2种，分别为： 1、w3c标准的盒子模型（标准盒模型），width和height指的是内容区域的宽度和高度； box-sizing: content-box; 2、IE标准的盒子模型（怪异盒模型），width和height指的是内容区域、边框、内边距总的宽度和高度。 box
阅读全文