使用Vant开发过程中，因为涉及到一些定制化的UI开发，在使用cell的时候，需要把边框去掉，可以通过设置属性来去掉边框： 在form里，也需要去掉每一个表单form里的边框（横的分割线），如图： 可以看到，每个表单也是一个一个的cell，但是查看文档，是没有地方设置的，通过摸索，可以通过css来实现： .van-cell:after { border-bottom: none; }
使用Vant开发过程中，因为涉及到一些定制化的UI开发，在使用cell的时候，需要把边框去掉，可以通过设置属性来去掉边框： 在form里，也需要去掉每一个表单form里的边框（横的分割线），如图： 可以看到，每个表单也是一个一个的cell，但是查看文档，是没有地方设置的，通过摸索，可以通过css来实现： .van-cell:after { border-bottom: none; }
在发生重大哀悼事件时候，需要紧急将网站变灰以示哀悼，在此给大家总结了几种方法，通过简单修改一下站点样式即可实现。 另外主要方便快捷的方法是使用CSS样式的grayscale()方法。 grayscale() : 对图片进行灰度转换，grayscale是 <filter-function> 的子属性，当100%参数时候的效果如下： 最简单地把页面的<html>开始标签中间之间加： style="-webkit-filter: grayscale(100%);" 或者修改站点CSS样式 html…
如题，需求是需要控制网页打印部分区域只在网页显示，打印时不出现。 利用媒体查询，定义两个class: 是只有打印的时候出现，网页上不显示 是只有网上上显示，打印的时候不出现指定的div或者元素，例如一些打印的按钮，可以设置成这种情况。 css代码如下： .print-only { display: none; } @media print { .no-print { display: none; } .print-only { display: block; } }
使用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…
某些场合下（例如表单填写、需要打印手写签字等地方）需要给文字或者div增加下划线，这里记录下我遇到的几种实现方案。 文字下划线 给文字添加下划线其实比较简单，使用如下属性： text-decoration 属性 这个属性可以给文字设置一下装饰效果，比如删除线，下划线啥的。 text-decoration: overline 上划线 text-decoration: line-through 贯穿线 text-decoration: underline 下划线 text-decoration: blink 闪烁 te…
要在网页上显示类似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…
在用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…
iView的模态对话框（Modal）默认情况下，如果里面的内容很多，需要滚动的时候，会使整个屏幕滚动（滚动条会出现在屏幕最右侧），而我们理想的状态应该是对话框中进行滚动，这样对话框的Header和Footer都不用滚动就一直显示在屏幕上，方便关闭和提交等按钮的直接操作。 实在的方法很简单，稍加修改CSS便可，css加上： .ivu-modal-body { max-height: calc(100vh - 150px); overflow-y: auto; } 我们给Modal里面的内容使用用的ivu-modal-…
需要将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…
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…