CSS
兴趣使然的码仔
要打开真理之门就需要付出对等的代价
展开
-
【CSS】选项卡动画悬浮放大并加阴影,移开恢复
【代码】【CSS】选项卡动画悬浮放大并加阴影,移开恢复。原创 2023-10-30 10:27:50 · 251 阅读 · 0 评论 -
使用图片做背景并设置充满固定屏幕
需要使用2个css属性,background-size和background-attachment,只需要如下两个设置即可实现:body { background: url(./login_bg.jpg) no-repeat center center; background-size: contain; background-attachment: fixed;}background-size指定背景图像的尺寸可选值width,height:设置固定宽高,只写一个值时,第二个原创 2022-04-26 12:04:29 · 277 阅读 · 0 评论 -
文字居于div底部的方式
CSS中的text-align属性只能控制文字在水平方向的左对齐(left),右对齐(right),居中(center),控制不了垂直方向的文字位置,对此有以下解决方案在div内部塞占位符标签,把文字挤到下方(不推荐)<div class="div"> <div class="place"></div> 我是祖父: 下面是爸爸</div><style>.div { height: 100px; }.pl原创 2021-12-13 14:30:39 · 12410 阅读 · 0 评论 -
Flex布局中justify-contnt属性失效的原因和解决方法
在开发过程中数次发现,在view组件中使用flex布局时组件内的justify-content属性没有生效。该属性是控制组建内元素在主轴上的对齐方式。属性失效的原因:因为该属性是控制在主轴上的对齐方式,所以在首对齐,中对齐,尾对齐等各种对齐效果生效时需要计算组件的宽度。当组件的 主轴长度属性(主轴为横轴时就是width,为纵轴时就是height)没有进行设置时,属于灵活延展的,所以无法进行计算...原创 2019-06-20 18:32:14 · 14902 阅读 · 1 评论 -
iconfont阿里图标库之使用Symbol模式引入图标(支持彩色)
前面的创建项目->添加图标->下载压缩包等步骤一致,可查看前一篇博文。下载压缩包后在html中添加图标的步骤如下:解压后将依赖文件放入工程目录demo开头的html文件和css文件可以删掉,只是演示如何使用的。在html中引入对应的js文件添加如下的html标签结构和图标名引入图标得到的效果如下...原创 2021-08-03 16:47:09 · 717 阅读 · 1 评论 -
iconfont字体图标的使用方法之Font class--超简单
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;转载 2021-08-03 16:04:01 · 4001 阅读 · 3 评论 -
关于SCSS中使用深度选择器
最近 开发过程中遇到一个问题,当对element-ui的样式进行覆写时,由于样式优先级关系导致自己写的样式"padding: 0"无法覆盖element的组件样式。在SCSS中使用::v-deep的话虽然样式覆写可以成功,但是该类内部的字标签类样式会失效。.class1{ ::v-deep .class2{ p{} }}如上,class2的 样式可以覆写,但是内部的p标签选择器的样式会失效。解决方案是可以把class2的覆写单独提炼出来再加上深度选择器。.class1{ .class2原创 2021-07-27 16:39:26 · 6842 阅读 · 0 评论 -
CSS进阶——瀑布流布局
先放代码,后续对代码详解html如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="test.css"> <ti原创 2020-11-28 15:53:38 · 138 阅读 · 0 评论