CSS
在线小白www
这个作者很懒,什么都没留下…
展开
-
textarea中的 placeholder 不显示
解决方法:1. textarea闭合标签不要换行2. 标签设置原创 2022-07-14 12:02:39 · 181 阅读 · 0 评论 -
css实现心形,及点赞特效
转载:点赞按钮居然还能这么玩❤️? - 掘金<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.转载 2022-02-16 10:58:24 · 1243 阅读 · 0 评论 -
css设置伪元素层级在父元素下面
一:父元素设置:transform-style:prserve-3d;伪元素设置:/*Z方向负向旋转,元素层级下降,Z方向垂直屏幕,X方向左右,Y方向上下*/transform:translateX(-10px)二:伪元素设置:z-index:-1原创 2022-02-14 13:49:04 · 773 阅读 · 0 评论 -
flex布局,当页面宽度变小时,元素被压缩
当子元素设置固定宽度时,如果整体宽度变小,固定元素的宽度就会被压缩。解决方法是给固定宽度的子元素添加 flex-shrink:0flex-shrink指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据flex-shrink的值的。...原创 2021-07-15 18:50:37 · 1474 阅读 · 0 评论 -
简单复现鼠标跟随事件 - - - 背景图随鼠标的移动而移动
效果:原理:获取鼠标的相对位移,将获得的相对位移赋值到背景图上 $('.wrap').mousemove(function (e) { var x = (e.offsetX * -1 / 25), y = (e.offsetY * -1 / 25); // $(this).css('background-position', x + 'px ' + y + 'px'); $(this).css('transform', 'translate3d(' +原创 2022-01-04 14:14:18 · 964 阅读 · 0 评论 -
事件坐标:screenX,clientX,pageX,offsetX的区别
e.screenX/e.screenY:事件发生时鼠标相对于电脑屏幕的坐标。e.screenX,e.screenY的最大值不会超过屏幕分辨率。e.clientX/e.clientY:事件发生时鼠标在浏览器内容区域的坐标。浏览器内容区域就是浏览器窗口中用来显示网页的可视区域,不包括滚动条和工具栏,也不随滚动条的移动而移动。当浏览器窗口缩小时,e.clientX/e.clientY的最大值也会缩小。e.pageX/e.pageY:事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。原创 2022-01-04 11:50:47 · 786 阅读 · 0 评论 -
css实现渐变三角形
.box2 { width: 100px; height: 100px; background: linear-gradient(to bottom right, #fff 0%, #fff 49.9%, rgba(148, 88, 255, 1) 50%, rgba(185, 88, 255, 1) 100%); }原创 2022-01-04 11:06:46 · 1547 阅读 · 0 评论 -
标签中文本内容太长回车换行,导致渲染出现空格问题
问题:标签中的文本太长,放在一行不方便观看,也不美观。随直接对文本内容换行处理,但是因此渲染出来的页面,在换行的地方会出现空格。如下,可以看到产生了空格,如果是在符合位置换行,差别还不是很明显,但如果在文字之间换行,就非常明显。解决:在文本渲染出来,需要换行的位置加上br换行,这样再回车就不会产生空格。可以看到渲染文本已经不存在空格了!...原创 2022-01-04 10:07:03 · 753 阅读 · 0 评论 -
input禁止输入的方法
1. readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。<input type="text" value="test" readonly="readonly">2. disabled被禁用的 input 元素可复制,不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type="hidden"> 一起使用。<input type="text" value="tes.转载 2021-10-08 15:27:08 · 542 阅读 · 0 评论 -
translate3d:(0,0,0)
触发GPU硬件加速!让动画更流畅。原创 2021-10-08 15:16:24 · 287 阅读 · 0 评论 -
table中的一些属性
1. align设置表格的水平对齐方式,值有left、center、right。2. valign设置表格的垂直对齐方式,值有left、center、right。3. rowspan设置合并的行数。4. colspan设置合并的列数。5. table的style重要属性:1、cellspacing:指定单元格之间的间距。为0的时候表格间是没有间距的。2、cellpadding:单元格边界与单元格内容之间的间距,默认为0。...原创 2021-10-08 14:02:08 · 2184 阅读 · 0 评论 -
设置placeholder的颜色、字体
<style> input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:red; } input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ ...原创 2021-10-08 11:23:18 · 265 阅读 · 0 评论 -
input无法和其他元素对齐
vertical-align:middle;原创 2021-10-08 10:44:10 · 186 阅读 · 0 评论 -
css隐藏元素的几种方法
1.display:none不占据空间,把元素隐藏起来,所以动态改变此属性时会引起重排(改变页面布局),可以理解成在页面中把该元素删除掉一样;不会被子孙继承,但是其子孙是不会显示的,毕竟都一起被隐藏了。2. opacity:0只是透明度为100%,元素隐藏,依然占据空间,隐藏后不会改变html原有样式;会被子元素继承,且子元素并不能通过opacity=1,进行反隐藏;opacity:0的元素依然能触发已经绑定的事件。3. visibility:hidden元素会被隐藏,但是不会消失,依然原创 2021-10-08 10:41:30 · 474 阅读 · 0 评论 -
实现删除线
1. text-decorationtext-decoration 通常我们用于给链接修改装饰效果(注意: 这个属性允许对文本设置某种效果,如加下划线。如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。2. del标签所有浏览器都支持,通常与ins标签配合使用,来描述文档中的更新和修正。ins的实现效果是给文本加上下划线。以上两种效果都是一样↓。...原创 2021-10-08 10:21:02 · 153 阅读 · 0 评论 -
input不能输入的问题
转载:input框不能输入问题今天就很神奇,input框不能输入!就很奇怪,百度了一下,发现是为了解决盒子直接的空隙问题,把fon-size设置为了0。。。不能友好玩耍了。下面是百度的几种input不能输入的原因。1. input框设置了readonly属性这个就很好理解了,readonly属性把input框设置成了只读,就不可以输入了。<input type="text" readonly="readonly" placeholder="这是一个只读框"/>只读字段是不能转载 2021-10-08 10:05:43 · 8458 阅读 · 0 评论 -
css hack
1. 什么是CSS Hack? CSS Hack是通过在css样式中加入一些特殊的符号,让不同的浏览器是被不同的符号(什么样的浏览器是被什么样的符号是有标准的,CSS Hack就是让你记住这个标准),以达到应用不同的CSS样式的目的。例如:1、margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍,也就是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px,而在非ie6中显示的距左侧对象的距离是设置的值20px;所以要想设置一个对象距离左侧...转载 2021-09-28 11:23:44 · 221 阅读 · 0 评论 -
移动端开发点击元素会闪一下或者出现黑色背景
网页在pc端点击元素时没有闪烁,但是在移动端会出现明显的闪烁。给元素添加属性-webkit-tap-highlight-color:transparent;原创 2021-09-24 09:50:52 · 553 阅读 · 0 评论 -
移动端文字被放大-webkit-text-size-adjust
PC端页面文字在移动端没有等比例缩小,而是变得很大,设置html,body{-webkit-text-size-adjust: 100%;}-webkit-text-size-adjust 的本职是用于mobile的,见规范CSS Mobile Text Size Adjustment Module Level 1 和 apple 的 Safari Web Content Guide。之所以现在的桌面版webkit浏览器支持他,是因为实际上这是一下bug。Bug 56543 – CSS pro.转载 2021-09-24 09:42:46 · 932 阅读 · 0 评论 -
柱状图--百分比高度
<!DOCTYPE html><html lang="en"><head> <style> body { padding: 0; margin: 0; background-color: #fff; } .contanir { height: 300px; width: 400px; position: relative; } .re.原创 2021-09-22 14:07:23 · 235 阅读 · 0 评论 -
a标签嵌套
浏览器解析后↓原因:a标签嵌套a标签,浏览器会自动加上结束符。而HTML的嵌套规范里就有一条:a标签不能嵌套a标签。解决方法:1. 使用object标签 用object嵌套内层a标签。缺点:IE8及以下不支持。2.父元素设置display: block;或display: inline-block;并设置宽高和position: absolute;调整内外a标签的样式,调整层级关系。如此只能达到满足效果,浏览器解析依然不是嵌套关系。...原创 2021-09-01 11:11:33 · 516 阅读 · 0 评论 -
swiper插件自定义每个slide的长度
一般swiper可以通过父元素的宽度以及显示的个数来自动分配每个slide的长度,但是实际开发中,一般都需要自定义slide的长度,这个时候需要设置var mySwiper = new Swiper('.swiper-container',{ slidesPerView : 'auto', // 开启自定义slide宽度,配合css样式设置即可})然后再自己设置slide的长度,即可实现理想效果。...原创 2021-08-12 18:35:37 · 1630 阅读 · 0 评论 -
设置盒子内的元素从底部开始排列
如果有好几个盒子,有高有低,让他们都靠底部对齐,有两者方式1. 万能的flex设置align-item:flex-end2. vertical-alingvertical-align:bottom原创 2021-08-05 15:01:38 · 2456 阅读 · 0 评论 -
简单的视差滚动(background-attachment)
效果如下↓代码如下↓<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></script> <title>Document</title> <style>.转载 2021-08-02 18:19:37 · 268 阅读 · 0 评论 -
css实现鼠标不可点击
1. 不可点击样式cursor:not-allowed该方法只能实现样式为不可点击,但是点击仍然会触发相应的是事件。2. 禁止触发事件pointer-events:none该样式会阻止默认事件的发生,但鼠标样式会变成箭头样子。如果同时使用这两种样式,会阻止事件的触发,但鼠标并不会显示禁止样式,而是箭头样式。在实际开发中,我们可以使用cursor:not-allowed;然后用js阻止事件的发生。...转载 2021-08-02 10:54:33 · 1638 阅读 · 0 评论 -
writing-mode
writing-mode定义了文本在水平或垂直方向上是如何布局的。vertical-lr示意图如下↓,IE兼容writing-mode:tb-lr。vertical-rl示意图如下↓,IE兼容writing-mode:tb-rl。ps:t--top,b--bottom,l-left,r-right。用的较多的就是这两种属性,先主要介绍这两种。...原创 2021-07-29 14:33:02 · 218 阅读 · 0 评论 -
IE浏览器关于带透明度的颜色显示问题
十六进制:带透明度的颜色表示会失效。包括background-color、color、box-shadow、linear-gradient等。rgba:background-color、color、box-shadow可以正常显示,linear-gradient也可以正常显示,但filter中的颜色如果使用rgba颜色会有一定误差。总结:如果兼容性要求较高,尽量少使用透明度,直接用十六进制的正色表示。...原创 2021-07-28 11:33:30 · 309 阅读 · 0 评论 -
liner-gradient渐变兼容IE8、IE9
兼容写法:/* Firefox 3.6+ */ background: -moz-linear-gradient(0deg, #00a485c2 30%, #00c8a033 100%); /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(0deg, #00a485c2 30%, #00c8a033 100%); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linea原创 2021-07-28 10:36:54 · 639 阅读 · 0 评论 -
通过css设置img的src
转载:https://blog.csdn.net/qq_31279347/article/details/88653807可以利用css的content属性,具体如下通过css设置img的src如下<style> img { content:url(https://image.png); }</style>转载 2021-07-26 18:48:05 · 4321 阅读 · 0 评论 -
swiper3 tab切换不同模块(display:none)出现不能自动播放,或样式混乱问题
问题一:tab控制display:none切换不同模块时,只有第一个模块的swiper方法可以正常显示,第二个并没有初始化,所以并没有轮播效果,处理方法:添加参数 { observer: true, observeParents: true, }解释:这两个参数为监视器,当swiper的样式等发生改变时,可以自动初始化swiper插件。问题二: 切换时,不同模块的swiper可以初始化,但自动播放失效。百度结果:添加参数autoplayDisa.原创 2021-07-23 16:03:43 · 1001 阅读 · 0 评论 -
当z-index比较难搞
有时候页面中需要用z-index,但是z-index经常会出现失效的情况,与父元素的position属性冲突,需要各种调position,结果还不尽如人意。这时候可以使用plan B。即可以用opacity代替z-index的,或者考虑visibility。只是给大家提供一种思路。...原创 2021-07-23 15:46:58 · 206 阅读 · 0 评论 -
css隐藏自带的滚动轴,并修改滚动条样式(兼容版)
第一种::-webkit-scrollbar { display: none; }缺点:不通用,兼容性差。IE不兼容第二种/*webkit内核*/::-webkit-scrollbar { width:0px; height:0px;}::-webkit-scrollbar-button { background-color:rgba(0,0,0,0);}::-webkit-scrollbar-track {原创 2021-06-21 17:09:29 · 438 阅读 · 0 评论 -
圣杯布局与双飞翼布局
作用:圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。区别:圣杯布局:为了让中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。双飞翼布局:为了让中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该div里用margin原创 2021-06-15 18:30:30 · 78 阅读 · 0 评论 -
三栏布局的五种方式
1. 浮动布局 <div class="con"> <div class="left">left</div> <div class="right">right</div> <div class="middle">middle</div> </div> .con div { min-height: 200px; } .left { .转载 2021-06-15 15:13:34 · 192 阅读 · 0 评论 -
两栏布局的几种方式
<div class="con"> <div class="left">left</div> <div class="right">right</div> </div>1. float + margin-left .left { float: left; width: 200px; height: 200px; background-color: a..原创 2021-06-15 11:53:54 · 137 阅读 · 1 评论 -
input标签设置文件上传类型
(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持。)1. 允许上传文件数量允许选择多个文件:<input type="file" multiple>只允许上传一个文件:<input type="file" single>2. 上传指定的文件格式如指定默认格式为gif、png<input type="file" accept="image/gif,image/png" />如果不限制上传图片的格式,只限制图片可写成:accept=“image原创 2021-06-11 10:56:57 · 3749 阅读 · 0 评论 -
css实现平行四边形
.box1 { width: 100px; height: 100px; background-color: #8f9bec; transform: skew(-20deg,0); -ms-transfotm:skew(-20deg,0); -webkit-transform:skew(-20deg,0); -moz-transform:skew(-20deg,0); -o-transform:skew(-20.原创 2021-06-09 15:47:30 · 175 阅读 · 0 评论 -
css实现三角形
.item { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 50px solid transparent; border-bottom: 50px solid blue; }原创 2021-06-09 15:39:55 · 60 阅读 · 0 评论 -
animation设置动画后,保持在动画最后位置
设置animation-fill-mode:forwards原创 2021-06-08 16:34:14 · 1951 阅读 · 0 评论 -
img标签设置宽高后,没有给是src会出现边框
img[src = ""]{opacity:0;}原创 2021-06-02 10:55:39 · 245 阅读 · 0 评论