随笔分类 -  css

摘要://隐藏滚动条 ::-webkit-scrollbar { display: none; } 项目详情展示模式和项目操作模式的区分 详情展示只读模式 readonly布尔值控制整个详情展示 项目操作模式, 若有时间线,那么只有当前时间线的可操作,其他全部为readonly只读模式 流程线控制,用流程 阅读全文
posted @ 2022-11-23 13:53 SultanST 阅读(18) 评论(0) 推荐(0) 编辑
摘要:父盒子 overflow:hidden; 图片 float:left; 简介 overflow:hidden; 阅读全文
posted @ 2022-11-11 11:44 SultanST 阅读(15) 评论(0) 推荐(0) 编辑
摘要:1.z-index简介 (1) 概念 z-index属性指定了元素与元素之间的z轴上的顺序,而z轴决定元素之间发生覆盖的层叠关系。 (2) 属性值 1.默认auto 为什么元素添加定位属性(不包括static)后会覆盖普通元素? 元素添加定位属性(不包括static)后,z-index默认是auto 阅读全文
posted @ 2022-11-11 10:18 SultanST 阅读(478) 评论(0) 推荐(0) 编辑
摘要:如果要给一个dom元素,同时设置多个不同的CSS变换(transform)属性时, 在属性中间用空格隔开即可, 旋转 缩放 扭曲 等同时执行多个效果! div{ width: 100px; height: 100px; background: red; <!--这里是设置变换过渡时间--> tran 阅读全文
posted @ 2022-11-08 09:29 SultanST 阅读(381) 评论(0) 推荐(0) 编辑
摘要:前言 修改svg颜色,一般直接修改文件的svg的fill属性就可以了,可以直接改svg属性,也可以通过css修改,但是前端一般都是通过img标签直接引入的svg图片,这样不管是从后期维护还是代码整洁度考虑,都更佳优秀,但问题也随之而来,没法通过css改变svg的颜色。 下面来介绍一种通过css改变通 阅读全文
posted @ 2022-11-08 09:09 SultanST 阅读(423) 评论(0) 推荐(0) 编辑
摘要:小程序的横向滚动生效需要具备以下条件 1.scroll-view 中的需要滑动的元素不可以用 float 浮动; 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的; 3.scroll-view 中的需要滑动的元素要用 dislay:inline- 阅读全文
posted @ 2022-11-07 17:13 SultanST 阅读(76) 评论(0) 推荐(0) 编辑
摘要:wxml <view class="conts"> <textarea class="areas" placeholder='订单备注' maxlength="{{orderNoteMax}}" bindinput="inputs"> <text class="currentWordNumber"> 阅读全文
posted @ 2022-11-04 08:53 SultanST 阅读(76) 评论(0) 推荐(0) 编辑
摘要:最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果。在网上搜索了一下,差不多都是互相转帖,用的都是类似的技巧: text-align:justify; text-justify:inter-ideograph; 但问题是,我怎么就看不到效果呢?无论是英文还是中文,在IE和chrom 阅读全文
posted @ 2022-11-02 13:55 SultanST 阅读(20) 评论(0) 推荐(0) 编辑
摘要:height:calc(100% - 20px); 注意:减号两边一定要打空格,不然会失效 阅读全文
posted @ 2022-11-02 13:54 SultanST 阅读(53) 评论(0) 推荐(0) 编辑
摘要:CSS 有很多令人欣喜的小技巧,可以让我们的页面效果更加美丽,现在,就让我们来看看工作中非常实用的 CSS 技巧吧。 一、文本选择颜色 当我们选中网页上的文字时,通常的效果是蓝底白字,其实,底色和字体颜色是可以改变的。 我们可以使用伪元素来实现这种效果: ::selection { backgrou 阅读全文
posted @ 2022-11-02 13:53 SultanST 阅读(49) 评论(0) 推荐(0) 编辑
摘要:如何清除图片下方出现几像素的空白间隙? 方法1: img{display:block;} 方法2: img{vertical-align:top;} 除了top值,还可以设置为text-top | middle | bottom | text-bottom 甚至特定的和值都可以 方法3: #test 阅读全文
posted @ 2022-11-02 13:53 SultanST 阅读(47) 评论(0) 推荐(0) 编辑
摘要:.font2 { display: inline-block; font-family: '微软雅黑'; font-size: 10em; position: relative; } .font2::after { content: attr(data-text); color: green; po 阅读全文
posted @ 2022-11-02 13:52 SultanST 阅读(42) 评论(0) 推荐(0) 编辑
摘要:小程序对换行很敏感,若数据渲染有换行,可能导致盒子高度改变(文本行高导致,空格也当作内容) vh和vw以及100%,rpx做样式适配 阅读全文
posted @ 2022-11-02 13:52 SultanST 阅读(17) 评论(0) 推荐(0) 编辑
摘要:伪元素需要设置content属性为“”才会成功 阅读全文
posted @ 2022-11-02 13:52 SultanST 阅读(9) 评论(0) 推荐(0) 编辑
摘要:display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: space-between; 阅读全文
posted @ 2022-10-27 12:33 SultanST 阅读(18) 评论(0) 推荐(0) 编辑
摘要:/* checkbox大小的调整 */ checkbox { transform: scale(0.7,0.7); } /*checkbox选中后图标样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { width 阅读全文
posted @ 2022-10-27 12:32 SultanST 阅读(18) 评论(0) 推荐(0) 编辑
摘要:flex布局 居中 display:flex; justify-content: center;检查侧轴是否居中,比如古代竖着写字,检查字是否在每条竹简的中央。 display:flex; align-items: center;检查横轴是否居中,比如现代人是横着写字,检查字是否写在上下横线的中间。 阅读全文
posted @ 2022-10-27 10:32 SultanST 阅读(19) 评论(0) 推荐(0) 编辑
摘要:/* radio样式修改 */ /* 单选、多选 勾选 */ /* 默认背景样式*/ radio .wx-radio-input{ width: 20rpx; height: 20rpx; background-color: #fff!important; text-align: center; l 阅读全文
posted @ 2022-10-27 10:31 SultanST 阅读(24) 评论(0) 推荐(0) 编辑
摘要://核心是 -webkit- background: -webkit-linear-gradient(left, #fb5c30, #ef1125); 阅读全文
posted @ 2022-10-27 10:30 SultanST 阅读(46) 评论(0) 推荐(0) 编辑
摘要:/* // 取消input的上下箭头,局部样式不能生效 */ input::-webkit-inner-spin-button { -webkit-appearance: none !important; } input::-webkit-outer-spin-button{ -webkit-app 阅读全文
posted @ 2022-10-27 10:30 SultanST 阅读(30) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示