使用flex布局,在每一行上,需要固定X个元素,超过的元素做换行处理。 假设如下Html代码: <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div…

2022-09-30 0条评论 11点热度 0人点赞 admin 阅读全文

某些场合下(例如表单填写、需要打印手写签字等地方)需要给文字或者div增加下划线,这里记录下我遇到的几种实现方案。 文字下划线 给文字添加下划线其实比较简单,使用如下属性: text-decoration 属性 这个属性可以给文字设置一下装饰效果,比如删除线,下划线啥的。 text-decoration: overline 上划线 text-decoration: line-through 贯穿线 text-decoration: underline 下划线 text-decoration: blink 闪烁 te…

2022-09-29 0条评论 13点热度 0人点赞 admin 阅读全文

要在网页上显示类似O2(氧气)、m2(立方米)这样带上下标的。 先上示例代码,再解释: O<span style="vertical-align: sub;">2</span> m<span style="vertical-align: super;">2</span> 在css中,可以使用vertical-align 属性的sub、super或者text-top、text-bottom属性值来显示文字的上标和下标。下面我们就来介绍一下css vertical-ali…

2022-09-23 0条评论 21点热度 0人点赞 admin 阅读全文

在用Html/CSS做一些流程图,需要用到上下的箭头,如图所示: 以下是我用Html/CSS的实现方式,箭头使用的是svg(path)画出来的,箭头的颜色目前是黑色,使用:fill="#000000",包括箭头高度、宽度,颜色等等,可能根据实际情况调整。 HTML代码如下: <html> <style> .my-arrow-wrap { position: relative; height: 40px; border-left: 1px solid #000; margin: 10vh 50…

2022-08-12 0条评论 53点热度 0人点赞 admin 阅读全文

iView的模态对话框(Modal)默认情况下,如果里面的内容很多,需要滚动的时候,会使整个屏幕滚动(滚动条会出现在屏幕最右侧),而我们理想的状态应该是对话框中进行滚动,这样对话框的Header和Footer都不用滚动就一直显示在屏幕上,方便关闭和提交等按钮的直接操作。 实在的方法很简单,稍加修改CSS便可,css加上: .ivu-modal-body { max-height: calc(100vh - 150px); overflow-y: auto; } 我们给Modal里面的内容使用用的ivu-modal-…

2022-08-11 0条评论 47点热度 0人点赞 admin 阅读全文

需要将less文件编译成传统的css文件 传统命令行下实现less转css # node和npm的安装忽略,首先安装less npm install -g less # 利用lessc将less转成css lessc /path/to/test.less /path/to/test.css 利用IDEA的File Watchers自动将less转成css 安装node、npm、less这些都忽略了,假设都安装好了; 首先到plugins查找安装File Watchers插件 安装重启IDEA后,在setting→T…

2022-08-07 0条评论 80点热度 0人点赞 admin 阅读全文

CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 还可以使用父div宽度来计算(以下例子,父级div的宽度减去50px): .foo { width: calc(100% - 50px); } 其他示例: 其中50vw表示50%的viewport width(屏幕或者说可视屏幕的宽度) 100vh,意思就是100%的高度。 .foo { width: c…

2022-07-20 0条评论 66点热度 0人点赞 admin 阅读全文

DIV或者其他标签内的多行文本文字,默认情况下的很多时候,可能对齐方式排版的对齐方式不对,不是很好看(右侧不对齐),如图: 为了让网页美观,希望让文本两段对齐,可以使用来进行对齐 示例的代码如下: .my-div { word-wrap: anywhere; text-align:justify; } 修改后如图就两端对齐了,好看多了:  

2022-07-11 0条评论 61点热度 0人点赞 admin 阅读全文

如题,可能有一些需求(例如使用其他人的组件,不方便修改JS代码等情况),需要让CSS来控制某些超链接无法点击,例如,有以下Html代码: <a class="baidu-link" href="https://www.baidu.com">Baidu.com</a> 要使Baidu.com无法点击,可以可以给a标签加pointer-events: none; 代码如下: .baidu-link { pointer-events: none; }  

2022-05-20 0条评论 183点热度 0人点赞 admin 阅读全文

CSS给div设置透明度的方式有多种,根据自己的实际情况做选择 opacity取值是[0,1]之前的小数都可以,直接使用opacity: 0.5,意思是透明度50%,不过这种方式有个问题,就是整个div全部透明了,且div里面的内容(包括文字)也会产生透明: .my-div { opacity: 0.5; } 如果想要让div里面的内容不透明,可以使用这种方式: RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带…

2022-05-14 0条评论 109点热度 0人点赞 admin 阅读全文