css
文章平均质量分 51
css相关
仙女爱吃鱼
这个作者很懒,什么都没留下…
展开
-
css改写滚动条样式 + antd-table scroll:x 和scroll:y 属性不生效
antd table列宽设置不生效、antd table scroll:x 不出现 、antd table scroll: x 和scroll:y 同时设置不生效、antd scroll 样式改写原创 2022-08-15 15:38:14 · 3743 阅读 · 0 评论 -
create react app 后配置并启用scss_module带原来的class名
使用create react app 创建项目后,使用以下文件引入sass文件中的className名不生效我们发现页面中根本没有引用成功scss文件中的文件名把creat react app默认sass module 配置项改为true,我们发现文件名生效了,但是class名全部变成了在全局可区分的hash值 ,根本分辨不出当前class名具体是哪个元素因为css-loader默认的哈希算法是[hash:base64],这会将.title编译成._3zyde4l1yATCOkgn-DBWEL原创 2022-05-10 16:13:30 · 825 阅读 · 0 评论 -
css实现九宫格,不定宽高百分比(使用padding实现Div高度根据自适应宽度(百分比)调整)
css实现九宫格,但不一定有9个,可能有8个、7个,每两个格子间距是10px,一行放置3个格子,格子宽高比为1:2(最右的面试题) <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>原创 2022-04-14 23:01:20 · 1272 阅读 · 2 评论 -
七种方式实现三栏布局
三样布局:两边固定,中间自适应一.流体布局(float布局)1.首先绘制左右两栏,左栏左浮动,右栏右浮动2.再绘制中间一栏,留出左右两栏距离与间距<style> .container { border: 1px solid red; } /* 流体布局,先绘制左右栏 */ .left { float: left; width: 200px; height: 200px; background-color: aqua;原创 2022-04-05 22:48:02 · 9738 阅读 · 0 评论 -
react中px转rem(px2rem和px to rem &rpx的使用)
1.直接在scss文件中使用函数2.安装插件原创 2021-10-27 19:47:50 · 3833 阅读 · 0 评论 -
用了flex布局和overflow之后右边距失效解决办法
场景项目中自己写一个轮播图,使用display:flext布局和oveflow-x:scroll等属性设置后,右边距失效了(仅在移动端)解决办法为div添加伪元素 .swiperWrapper ::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; //占位但不可见 } .swiperWrapper { // backg原创 2021-09-26 22:58:30 · 1068 阅读 · 1 评论 -
ios端隐藏滚动条
子元素 padding-bottom: 60px;// 滚动条向下移,外层盒子给定高overflow:hidden,解决ios无法隐藏滚动条问题 box-sizing: border-box; overflow-x: scroll; /*解决ios上滑动不流畅*/ -webkit-overflow-scrolling: touch; /*纵向超出部分将会隐藏,即滚动条部分被挤出可视区域*/ overflow-y: hidden; scrollbar-width:原创 2021-09-23 12:23:35 · 2294 阅读 · 0 评论 -
react中使用swiper6.x(含完整css)
export const getTribeCourseAllDetail = (courseId) => {axios.defaults.withCredentials = true;return axios.get(https://tribecourse.58.com/course/detail?courseId=${courseId})// let courseDetail;// // 没有返回结果就去请求接口// function getDetail() {//原创 2021-09-17 18:02:56 · 1376 阅读 · 0 评论 -
react多行文字超出省略号失败解决办法
在react less文件中直接使用以下css属性失效// 单行文字加省略号 overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' // 两行文字加定高 overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', -webkit-line-clamp: 2, -webkit-box-orient: 'verti原创 2021-09-17 17:45:21 · 563 阅读 · 0 评论 -
react-id-swiper在app里滑动频繁导致页面崩溃解决办法
场景:使用了react-id-swiper在h5页面中,在app中开放入口后进行多次频繁滑动会导致页面崩溃分析:1.需求是每个tab下都有相应的swiper数据 ,所以每次切换tab都要向后端请求数据,swiper滑动过于频繁,动画还没播放完就已经去请求接口了,这样会导致内存溢出2.给swiper赋值动态数据时,为获取当前运动的swiper的index值,把swiper赋值给了this.state,这样就会导致在切换的时候一直触发this.setState,然后不停render影响性能解决办法:原创 2021-07-20 15:45:10 · 603 阅读 · 0 评论 -
object-fit和object-position实现图片原比例裁剪不拉伸适应
img标签的图片设置width:100%,height: 211px,默认图片拉伸或压缩以适应此宽高原有但是这样太丑了,所以我们需要把图片裁剪一下,让它不拉伸以原有比例填充屏幕,首先使用到object-fit这个属性,objtct-fit、object-position释义object-fit : CSS property specifies how the contents of a replaced element should be fitted to the box established原创 2021-07-06 17:55:34 · 497 阅读 · 0 评论 -
css3实现向右三角形与文字垂直居中
高度三角形14px,用于垂直对齐:14/2 = 7,对于该页边距顶部:-7px; .text { height: 12px; font-family: PingFangSC-Regular; font-size: 10px; font-weight: 400; line-height: 12px; color: rgba(51, 51, 51, 1); text-al原创 2021-06-10 16:43:45 · 602 阅读 · 0 评论 -
css选择器的认识
```#### [attribute]选择器 用于选取带有指定属性的元素a[target]选取带有target属性的a标签#### [attribute = value] 选取带有指定属性和值的元素a[taret = _blank]#### [attribute~=value] 选取属性值中包含指定词汇的元素[class~=flowe原创 2017-10-16 11:21:43 · 179 阅读 · 0 评论 -
bootstrap datepicker的配置与使用
bootstrap datepicker引入方式最好是本地文件因为可能需要修改js以完成配置bootstrap datepicker 插件结构 <!-- datepicker --> <div class="build-date clearfix"> <span class="select-title lh34">日期:&...原创 2018-07-11 11:36:44 · 2978 阅读 · 0 评论 -
table合并单元格、加滚动条、表格内容滚动、设置单元格宽度
合并单元格 <table border="1"> <thead>家庭成员关系表</thead> <tr> <th>姓名</th> <th>年龄</th> <th>家庭住址&原创 2018-07-11 11:26:50 · 2078 阅读 · 0 评论 -
art-templated的使用
art-template是什么art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。art-template 数据渲染方式1.引入art-template.js文件<script src="template-debug.js">...原创 2018-07-11 11:25:57 · 341 阅读 · 0 评论 -
art-templated的使用
## art-template是什么art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。## art-template 数据渲染方式### 1.引入art-template.js文件```js<script src="template-debug.js"&g...原创 2018-06-05 17:16:32 · 407 阅读 · 0 评论 -
关于使用了position定位页面底部留白和高度不能被撑起来的问题
关于使用了定位页面底部留白和高度不能被撑起来的问题页面的效果图应该是这样的,section会遮盖一些banner,footer位于文档的底部(不需要定位在屏幕底部)。所以一开始我把section footer放在一个元素中,为其父元素加了position: relative;为他们各加了position:aboslute,但是页面底部出现了留白情况,因为absolute就脱离了文档流,不能完...原创 2019-04-12 19:54:49 · 7059 阅读 · 1 评论 -
jquery文字提示框
使用jquery为table的某一个td添加文字提示框,鼠标滑入出现,鼠标滑出消失html //因为tbody的内容是后来添加的,所以可以直接根据table来找到要加效果的td元素 //如果html中td元素不是动态添加的,则可以直接给td加class名或id名,获取后再操作就可以了 &lt;tbody id="guding"&gt; &lt;/tbody&gt;j...原创 2018-08-01 15:21:29 · 9283 阅读 · 0 评论 -
前端预加载gif
内容描述待补充~<!-- 头部gif背景图 S --> <div id="Header" :style="`height:${H};`" class="Header" > <img id="headersBgGif" data-up="https://f2.kkmh.com/20200417tm.gif" src="https原创 2020-06-05 14:47:02 · 1410 阅读 · 0 评论 -
使用css写带纹理渐变背景图
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了。这次我们主要用到的网站是Hero Patterns——免费在线纹理素材库这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度。网站中背景色是纯色,如果我们需要渐变背景,就可以把纹理的背景色设置为透明色,然后把父元素的背景色设置为背景色html,body{ background: #000; min-width: 1024px; background原创 2020-06-05 14:41:57 · 1840 阅读 · 0 评论