css
文章平均质量分 65
每天都要进步哦
这个作者很懒,什么都没留下…
展开
-
input修改checkbox复选框默认选中样式
input修改checkbox默认选中样式,直接设置选中后的样式不生效,需要先给复选框设置-webkit-appearance: none(取消默认样式), 再设置样式才会生效。原创 2023-09-15 10:11:55 · 3203 阅读 · 0 评论 -
关于CSS选择器优先级的规则说明
important > 行内样式 > id选择器 > 类选择器 > 元素选择器 > 通配选择器。注:在vscode中,将鼠标移至选择器上,可显示结构和权重值。从第一位开始逐位对比,数字大的优先级高,如果相同对比下一位。b表示:一个选择器中【类、伪类、属性】选择器的个数。c表示:一个选择器中【元素、伪元素】选择器的个数。每个选择器都有一个权重值,格式为(a,b,c)此文档有权重值计算及其他相关知识的详细说明。a表示:一个选择器中【id】选择器的个数。统配选择器权重为(0,0,0)原创 2022-12-26 16:12:34 · 873 阅读 · 1 评论 -
JavaScript-实现横向文字弹幕功能
实现文字的跑马灯/弹幕效果,主要思路为:js中:定义一个数组存放文字信息,定义一个数组存放跑马灯播放信息,定义一个将文字信息添加至播放信息的方法,当页面加载时,执行该方法,如果存放文字信息的数组为空时,返回;如果播放信息的数组大于一定的数量且正在播放的信息为文字信息的最后一个,将播放信息数组赋值为空,即重置播放数组;如果文字信息不为空,通过遍历将文字信息添加至播放信息中,并添加高度属性(奇数显示在第二行,偶数显示在第一行,该属性在html结构中可用于设置动态高度),并设置添加的间隔时间;原创 2022-11-28 15:57:09 · 975 阅读 · 0 评论 -
css-实现卡牌的发牌和翻转动画
打开抽卡界面,卡牌出现并发牌至固定的位置,此时展示的是卡牌的背面;用户点击卡牌时,卡牌进行翻转,并展示卡牌内容,或者发牌后自动进行翻转和展示。本实例在页面挂载后自动播放动画,若需点击后再播放,只需将事件写入click事件当中即可。卡牌样式可根据具体需求设置。原创 2022-11-24 16:30:56 · 5102 阅读 · 1 评论 -
如何用css绘制一个三角形
问题描述:用css绘制一个三角形,其实是利用视觉的效果,将三个边设置成相同的颜色,另一个边设置其他颜色,再通过设置四个边的形状绘制出三角效果的图形步骤:1、写一个宽高为0的盒子2、选择三角形的底边,将此边界设置为一个颜色,另外三边设置另一个颜色(一般设置白色),即可显示三角效果示例:生成的三角效果如下: 可以根据自己的实际需要,和其他形状进行拼接完成想要的效果,或设置相应颜色、边界长度、边界样式完成想要的效果。...原创 2022-07-12 09:59:25 · 14572 阅读 · 0 评论 -
CSS常用子元素选择器-选择特定子元素
常用举例:p:nth-child(n + 2):除其父元素下的第一个p元素外所有p元素。p:nth-last-child(n + 2):除其父元素下倒数第一个p元素外所有p元素。2n:偶数。2n+1:奇数。-n+4:第一个到第四个。3n:3的倍数,每三个取一次。注:nth-child(n)和:nth-of-type(n)的区别:两者都可以选择其父元素下第n个子元素,但在子元素的类型上有所区分。p:nth-of-type(n):其父元素下的第n个p元素。p:nth-child(n):其父元素下的第n个且为p.原创 2022-06-22 11:17:23 · 4375 阅读 · 0 评论 -
CSS-防止图片挤压变形- object-fit、object-position属性
我们在上传图片时,由于图片尺寸与我们所设置的尺寸比例不一致,会出现图片被挤压变形的现象。在此介绍一下CSS属性object-fit和object-position,以此完美解决此问题的发生。object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。对图片进行剪切,保留原始比例:注:如果您还想切换被替换元素的内容对象在元素框内的对齐方式。可以通过使用 object-position原创 2022-06-13 14:17:01 · 2777 阅读 · 0 评论 -
css及css3详细学习笔记
CSS概念:css(cascading style sheet)-层叠样式表层叠:css的一个特点,指的是样式覆盖时的处理方式,样式:页面的外在特征。比如说背景颜色、字体大小、类型、边框大小等。即CSS就是专门用于处理页面样式的。作用:美化页面。跟HTML之间的关系: HTML:书写网页的内容 CSS:对页面进行美化使用方式: 内联方式:通过<head>中添加<style>标签,并在<style>中书写CSS代码。 外联方式:新...原创 2022-04-29 17:01:35 · 914 阅读 · 1 评论 -
sass的安装、概念和使用
世界上最成熟、最稳定、最强大的专业级CSS扩展语言!特性:兼容CSS:Sass完全兼容所有版本的CSS。我们对此严格把控,所以你可以无缝地使用任何可用的CSS库。特性丰富:Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力,一直使其保持领先地位。成熟:Sass已经经过其核心团队超过13年的精心打造。行业认可:一次又一次地,行业把Sass作为首选CSS扩展语言。社区庞大:数家科技企业和成百上千名开发者为Sass提供支持。框架:有无数的框架使用Sass构.原创 2022-04-28 10:33:01 · 5050 阅读 · 0 评论 -
CSS--移动端布局
基本概念背景:因为手机的尺寸和屏幕的像素越来越大,导致我们响应式布局很难保证网页能够100%适配主流的屏幕概念:使用css3的单位以及弹性布局等技术来实现移动端布局。一般移动端布局跟pc端是完全不一样的。屏幕像素逻辑像素:真正用于显示屏幕内容的像素设备物理像素:是屏幕一出场已经确定的像素逻辑像素和设备物理像素:设备物理像素是指屏幕的实际像素有多少。但现在的手机屏幕一般物理像素都是1920*1080或者2k或更高。但如果一个设备物理像素等于一个逻辑像素(css px原创 2022-04-26 18:11:43 · 3295 阅读 · 0 评论 -
CSS--响应式布局
常见布局固定布局主要内容区域基本是固定的尺寸,再水平居中好处:布局简单:大div设置固定宽度,利用margin:0 auto; 水平居中缺点:无适应性(对移动端不友好);会有滚动条;流式布局原理:主要内容区域以百分比来代替固定像素,不同的屏幕会有不同的表现,但是无论宽度怎么变换,页面布局不会发生变化。好处:对不同宽度有一定适应性缺点:当屏幕宽度足够小,导致内容无法查看响应式布局原理:利用媒体查询技术,实现当使用不同设备时可以采用不同的css样式。即一套代码,多端使用,原创 2022-04-26 18:02:03 · 560 阅读 · 0 评论 -
CSS--弹性布局(Flex-Layout)
基本概念概念:弹性布局(flex-layout)是一套css3新增的自适应布局模式,用于替代传统的div+css布局或辅助弹性布局主要是为了让盒子里面的子元素在面对容器不同宽度时都能够很好的适应。特别适合满足不同屏幕或设备。即对移动端友好。原理:给盒子设置css弹性布局的相关css属性来使用弹性布局。基本使用给容器设置css属性display:flex/inline-flex将该盒子变为一个弹性容器,它里面的子元素会以弹性布局的方式来处理。display:flex;会原创 2022-04-26 17:55:17 · 5431 阅读 · 1 评论 -
CSS高度塌陷问题-六种解决方案
问题背景子元素浮动后,无法撑起父元素高度,导致父元素高度丢失,其下元素会自动上移,导致页面布局混乱解决方案一、BFC 块级格式化环境(Block Formatting Context)BFC是页面元素的一个隐藏属性,默认是关闭的,开启BFC该元素会变成一个独立的布局区域。区域内的元素不会影响区域外的元素.开启BFC后的特点:1、开启BFC的元素不会被浮动元素覆盖2、开启BFC的元素子元素和父元素外边距不会重叠3、开启BFC的元素可以包含浮动的子元素开启BFC方式:1、原创 2022-04-26 09:50:24 · 5622 阅读 · 0 评论