css
css
张张的技术贴
这个作者很懒,什么都没留下…
展开
-
checkbox,自定义样式
content:'';原创 2023-06-14 16:14:37 · 410 阅读 · 0 评论 -
点击,切换,特效
点击,切换,特效,js,尽量只添加和删除,active,其他的用,css,写原创 2021-11-25 17:37:39 · 152 阅读 · 0 评论 -
宽度设置了百分之百,再设置padding,margin,元素就会超出
box-sizing: border-box;原创 2021-11-22 17:41:48 · 277 阅读 · 0 评论 -
swiper的一些坑
移动端(1)两行两列,总是显示两行以上,是因为,swiper-wrapper,宽度写死了(2)点击右键无效,左键还会跟着闪,pc端的滑动特效包一层判断@media (any-hover: hover){}原创 2021-11-16 11:10:30 · 932 阅读 · 0 评论 -
margin,不起作用
inline-block,点击切换,下面的高度会变(和border也有关),margin,不起作用原创 2021-11-15 10:36:00 · 373 阅读 · 0 评论 -
移动端点击失效
可能是没有加:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">原创 2021-11-14 17:34:31 · 322 阅读 · 0 评论 -
z-index,不生效
(1)没有定位,position: relative;(2)被后面的遮盖了原创 2021-11-05 16:28:34 · 70 阅读 · 0 评论 -
移动端,宽度,总是,980
原因:ios,如果没有设置宽度,默认980添加:<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">原创 2021-10-21 08:44:24 · 317 阅读 · 0 评论 -
点击,变样式,初始化,不用单独给第一个加样式
$('.cell li').eq(0).click();原创 2021-06-04 19:18:10 · 64 阅读 · 0 评论 -
轮播图,图片,大小自适应
.object-fit-cover{ height: 100%; width: 100%; object-fit: cover;}原创 2021-04-23 11:21:50 · 2189 阅读 · 0 评论 -
css,自己书写,三角形
div { width:0; height:0; border:10px solid transparent; border-right:10px solid #fff;}原创 2021-04-20 17:32:22 · 43 阅读 · 0 评论 -
点击特效,很多元素要变
可以给父元素的class加active,写样式的的时候,在子级元素前面将父级元素的名称换成active就行了原创 2021-04-20 17:01:13 · 39 阅读 · 0 评论 -
一个宽度固定,一个自适应
父级元素:display: flex;自适应的:flex: 1;原创 2021-04-16 17:47:28 · 74 阅读 · 0 评论 -
上标
.icon-r{ display: inline-block; font-size: 0.06rem; vertical-align: top; margin-top: -0.05rem;}<span class="icon-r">®</span><sup>...</sup> 上标<sub>...</sub> 下标<i>...</i> ...转载 2021-02-08 17:54:26 · 128 阅读 · 2 评论 -
rem与px
1、rem与px的换算比例是与设计图有关的,一般总宽度设计成750px2、标红的是设计图的总宽度除以100(1)设计图总宽度750:<script> var width = document.documentElement.clientWidth; if(width > 750){ document.documentElement.style.fontSize = '100px' }else{ document.documentEle原创 2021-02-01 18:31:06 · 323 阅读 · 0 评论 -
过渡,要加属性才会生效,也可以直接全部选中
transition: color 0.5s;transition: all 2s;原创 2021-01-19 17:51:30 · 46 阅读 · 0 评论 -
表单,input,输入字段禁用了自动完成
autocomplete="off"转载 2020-12-30 14:25:17 · 90 阅读 · 0 评论 -
图片自适应
图片,宽高,设置,object-fit,设置,图片可自适应原创 2020-12-28 18:02:07 · 92 阅读 · 0 评论 -
:after,清除浮动,要给父元素添加
.content:after { content: ''; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; }转载 2020-12-09 17:27:27 · 280 阅读 · 0 评论 -
兄弟级别的hover控制
#a:hover + #b{color : #FF0000;} ,该方式只能控制相邻的,下一个兄弟元素,前面的也不行<style> #a {color : #99ff66;} #a:hover + #b{color : #FF0000;}</style>HTML元素:<div id='a'>元素1</div><div id='b'>元素2</div><div id='c'>元素3&...转载 2020-12-01 18:30:25 · 1497 阅读 · 0 评论 -
划过,显示元素,一直闪现
可能是划过时,显示元素,遮挡了,划过元素原创 2020-12-01 18:27:43 · 106 阅读 · 0 评论 -
用,js,写划过特效,要注意,多次划过,划过结束,特效不结束
用,js,写划过特效,要注意,多次划过,划过结束,特效不结束原创 2020-11-30 17:55:56 · 138 阅读 · 0 评论 -
footer,删掉,overflow: hidden; 样式会崩
不是footer的问题,footer上面的元素的浮动影响的,上面浮动的div加上下面的代码,只写clear:both; 无效,一般该代码在base.css里.clear { zoom:1; }.clear:after { content:''; display:block; clear:both; }原创 2020-11-30 17:09:53 · 127 阅读 · 0 评论 -
transition不起效果
对于,display,的设置,不起效果原创 2020-11-30 16:48:48 · 209 阅读 · 0 评论 -
-webkit-line-clamp 实现限制文字显示多行,多余的用...代替
css {overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}转载 2020-11-11 10:14:00 · 104 阅读 · 0 评论 -
css3文字颜色渐变的实现方法
.font-color{ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#02ceff), to(#0082ff));}转载 2020-10-16 17:46:43 · 130 阅读 · 0 评论 -
css,图片宽高自适应,object-fit
object-fit: fill;转载 2020-10-13 16:59:56 · 193 阅读 · 0 评论 -
文字超出的部分,省略号显示,但是,隐藏的部分会显示
添加的元素不要设置高度,否则,隐藏的文字有可能会显示原创 2020-09-28 18:26:06 · 212 阅读 · 0 评论 -
自定义项目颜色:css自定义变量
定义变量::root { --frame-color: red;}使用变量:html { background-color: var(--frame-color);}jquery:修改变量:document.body.style.setProperty('--frame-color', 'yellow');读取变量:document.body.style.getPropertyValue('--frame-color').trim();删除变量:document.b.转载 2020-09-09 10:38:28 · 734 阅读 · 0 评论 -
ul,li,所有行跟随最大高度自适应
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> ul{ width: 100%; flex-wrap: wrap; /*align-items: s...转载 2020-07-23 19:08:30 · 856 阅读 · 0 评论 -
输入框只能输入正整数的最简实现
最简单的html代码实现输入框只能输入正整数,输入同时禁止了以0开始的数字输入,防止被转化为其他进制的数值<input type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">转载 2020-07-20 11:55:43 · 150 阅读 · 0 评论 -
文字超出的部分,省略号显示
width: 180px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;原创 2020-05-27 11:54:18 · 147 阅读 · 0 评论