css
lamCCH
自学成才
展开
-
给Element表格添加滚动条并修改滚动条样式
需求如题,添加CSS样式:::v-deep .el-table__body-wrapper { height: 500px !important; /*给一个固定高度*/ overflow-y: auto; /*y轴溢出显示滚动条*/ &::-webkit-scrollbar { width: 4px; /* y轴滚动条宽度 */ height:4px; /* x轴滚动条宽度 */ background-color: #f5f5f5; /*滚动条背景*原创 2022-02-23 14:42:54 · 2527 阅读 · 0 评论 -
同一行的图片和文字垂直居中对齐
项目中经常会有图片和文字同行的情况,而且默认文字和图片底部对齐,影响美观,怎么垂直居中对齐呢,其实很简单:给当前图片和文字分别加上以下CSS样式就可以了。vertical-align:middle原创 2022-02-23 09:12:32 · 1241 阅读 · 0 评论 -
CSS3动画实现左右滚动效果
CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。项目中一些比较酷炫的页面效果就是CSS3做出来的。今天我们做一个简单的左右滚动的动画效果。效果如下:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devi.原创 2021-09-17 17:40:14 · 4936 阅读 · 0 评论 -
H5+原生app项目键盘弹起背景被上推、挤压的解决方法
最近做了原生app嵌套H5的手机端应用。因为是第一次做手机端应用,遇到问题挺多。现总结下登录页遇到的问题。正常样式如图:当点击输入框,键盘会弹起,此时样式就错乱了。输入框和底部的背景图会上移,遮挡住头部背景文字。给输入框加了高度之后,调整样式,输入框正常了,但底部的背景图还是被挤压上来了。然后修改了样式后还是不行。通过样式查看,背景图被挤压的原因是因为键盘弹起时改变了屏幕的可视区域大小,所以底部的div就上来了。既然键盘弹出时会改变屏幕大小,那我们在键盘弹起时不让它改变不就可以了吗?在moun原创 2020-08-26 11:01:43 · 2118 阅读 · 2 评论 -
阿里图标的引入方式
平时做项目肯定少不了图标,一些组件自带一些图标,但是可能没有我们需要的,这时候就要借助于强大的阿里图标了。怎么使用呢?一、font-class方式1.输入想要搜索的图标名搜索(要先登录账号)2.将图标加入购物车3.点击购物车,将图标加入项目,可以新建项目,也可以选择原有的项目4.加入到项目后,会自动跳转到项目里,展示此项目里所有的图标5.选择Font class,然后点击更新代码6.代码更新完毕后会生成一个链接,将链接复制到浏览器地址栏,复制所有代码7.在项目src/assets下新建一个原创 2020-08-13 09:34:12 · 1218 阅读 · 0 评论 -
一句代码让网站变灰
4月4日是中国的传统节日--清明节,当天全国举行了哀悼活动,以此表达对全国各族人民对抗击新冠肺炎疫情斗争牺牲的烈士和逝世的同胞深切哀悼。在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动。4月4号当天你打开任何网页、视频网站,基本都是灰色的。他们是怎么实现的呢?使用了css3的滤镜filter。filter:grayScale(100%);举个例子:比如 google网...原创 2020-04-07 16:31:24 · 370 阅读 · 0 评论 -
怎么下载一个网站的logo
今天学到一个黑魔法,就是下载一个网站的logo图比如我想下载百度的 logo,直接在网址后面跟上 /favicon.ico 即可。www.baidu.com/favicon.ico打开后右键保存就好了。...原创 2020-04-03 17:26:09 · 8072 阅读 · 2 评论 -
下划线输入框
实现下划线输入框效果,如图:代码如下:html代码:<span style="font-size:16px;">组长: <input type="text" class="input" /></span>CSS:.input{ border:0; border-bottom:1px solid #c0c0c0; ...原创 2019-10-11 09:43:57 · 1977 阅读 · 0 评论 -
display和visibility
把元素的display 设定为 none,该元素及所有包含在其中的元素,都不会在页面中显示。它们原先占据的所有空间也都会被“回收”,就好像相关的标记根本不存在一样。与此相对的是visibility属性,这个属性最常用的两个相对的值是visible(默认值)和hidden。把元素的visibility设定为hidden,元素会隐藏,但它占据的空间仍然在。...原创 2019-04-26 11:11:55 · 317 阅读 · 0 评论 -
再次总结解决元素高度塌陷的问题(围住浮动元素)
方法一:为父元素添加overflow:hidden原始布局:想要的效果: p元素里的文字移动到图片的右边,footer在section的下面.给img元素加了float:left后,虽然p元素里的文字移到了img的右边,但是它的父元素高度塌陷了.解决方法:给img的父元素section添加overflow:hidden,页面恢复正常.方法二:同时浮动父...原创 2019-04-24 18:22:31 · 436 阅读 · 0 评论 -
怎么让子元素在父元素中水平垂直居中
第一种方法:使用绝对定位此方法要求父元素要有高度,父元素开启相对定位,子元素开启绝对定位.注意:如果父元素没有高度也没有开启相对定位,则子元素会相对于body水平垂直居中.第二种方法:使用flex布局在flex布局中父元素是子元素的容器,子元素是父元素的项目.容器里设置的属性都是对于项目来说的,display:flex代表容器里的所有项目按flex布局,justify-conte...原创 2019-03-28 22:32:25 · 3013 阅读 · 0 评论 -
table表单中的td内容两端对齐
创建表格时,我们在单元格输入中文的字数不一样,会导致不美观,例如:我们需要将用户名末尾和密码末尾对齐,解决方法是在td中加个样式:text-align-last:justify,让它们两端对齐加了样式之后的效果:...原创 2019-03-17 18:58:36 · 5334 阅读 · 2 评论 -
css样式注意点
1、<a>标签内可以放任意标签,除了它自己。2、<p>标签内不能包含任何块级标签,比如<div>、<p>。<div>内可以放<p>标签。3、<div>是块级标签,<span>是行内标签。块级标签独占一行,行内标签只占它本身。块元素可以包含内联标签。4.、class属性和i原创 2019-01-05 23:12:00 · 359 阅读 · 0 评论 -
用calc()函数使页面高度在不同分辨率下自适应
市面上电脑种类很多,每个人的电脑屏幕分辨率又不一样,这就造成了同一个页面在不同的电脑上显示的不一样。这对前端来说是比较头疼的。那怎么让页面根据屏幕分辨率自适应呢?首先我们不能给要处理的容器设置固定高度,其次借助视口(viewport)和calc()函数来设置高度。视口通常与浏览器窗口相同,但不包括浏览器的UI, 菜单栏等——即指你正在浏览的文档的那一部分。整个视口的高和宽是 100vh、100vw1vh = 1% * 视口高度,1vw = 1% * 视口宽度vh、vw就是相对视口的长度单位,它是相对原创 2021-04-15 20:17:15 · 2339 阅读 · 0 评论 -
纯CSS制作loading加载
Loading在项目中几乎是都会用到的一个组件。很多组件库也都提供了相应的Loading组件,但是有时候组件自带的loading效果满足不了我们或者一些老的项目用不了组件的时候,我们可能需要自定义Loading效果。下面就说一下loading的制作。基实loading就是一个会旋转的圆环,首先我们要得到一个圆环,然后给它个动画就可以了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/原创 2021-01-05 16:20:11 · 617 阅读 · 1 评论 -
选择兄弟元素中的第几个元素
:nth-child(an+b)这个CSS伪类首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)0n+3或简单的3匹配第三个元素。1n+0 或简单的 n 匹配每个元素。2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素(n=0时,2n+0=0,第0个元素不存在,因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。2n+1 匹配位置为 1、3、5、7原创 2020-12-25 11:36:43 · 1583 阅读 · 1 评论 -
父子元素的宽度
父子元素的宽度1.正常情况<style> .parent{ width: 200px; height: 300px; background-color: aquamarine; } .child{ width: 100%; background-color: red; }</style> <div class="parent"> <div class="ch原创 2020-10-09 12:12:04 · 1927 阅读 · 0 评论