使用Vant开发过程中,因为涉及到一些定制化的UI开发,在使用cell的时候,需要把边框去掉,可以通过设置属性来去掉边框: 在form里,也需要去掉每一个表单form里的边框(横的分割线),如图: 可以看到,每个表单也是一个一个的cell,但是查看文档,是没有地方设置的,通过摸索,可以通过css来实现: .van-cell:after { border-bottom: none; }  

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

在发生重大哀悼事件时候,需要紧急将网站变灰以示哀悼,在此给大家总结了几种方法,通过简单修改一下站点样式即可实现。 另外主要方便快捷的方法是使用CSS样式的grayscale()方法。 grayscale() : 对图片进行灰度转换,grayscale是 <filter-function> 的子属性,当100%参数时候的效果如下: 最简单地把页面的<html>开始标签中间之间加: style="-webkit-filter: grayscale(100%);" 或者修改站点CSS样式 html…

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

如题,需求是需要控制网页打印部分区域只在网页显示,打印时不出现。 利用媒体查询,定义两个class: 是只有打印的时候出现,网页上不显示 是只有网上上显示,打印的时候不出现指定的div或者元素,例如一些打印的按钮,可以设置成这种情况。 css代码如下: .print-only { display: none; } @media print { .no-print { display: none; } .print-only { display: block; } }  

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

使用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条评论 200点热度 0人点赞 admin 阅读全文

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

2022-09-29 0条评论 135点热度 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条评论 104点热度 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条评论 178点热度 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条评论 194点热度 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条评论 173点热度 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条评论 146点热度 0人点赞 admin 阅读全文