要实现的九宫格效果图如下：公共样式：div{width:300px;height:300px;}ul{padding:0;width:100%;height:100%;}li{list-style:none;text-align:center;line-height:100px;margin:3px;background-color:#243F49;color:white;border:1pxsolidwhite;font-weight:bolder;}div>ul>li>1/li>li>2/li>li>3/li>li>4/li>li>5/li>li>6/li>li>7/li>li>8/li>

一.案例效果展示 二.搭建一个基本的html结构，将需要用到的图片居中html的结构非常简单，只要一个盒子里面放二张照片即可html代码：css代码：*{margin:0;padding:0;}body{display:flex;justify-content:center;align-items:center;background-color:#01C4DA;}三.首先我们要对二张图片进行翻转处理就应该给她们开启定位，这样他们就会覆盖在一起了.img_box{width:400px;height:500px;padding-top:140px;position:relative;}img{w

css中通常会在style标签内添加 scoped 来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式。这样做的原理是通过在打包的时候给每个样式都添加一个独一无二的hash值，从而避免父组件对子组件的样式的影响。添加后控制台显示的样式就会像这样：  设置了上述scoped的话，如果想要在父组件中修改子组件的样式时应该怎么样做呢？如果去掉scoped的话就会影响全局样式，但是加上scoped又不能在当前组件修改子组件的样式，这个时候就可以使用/deep/了。/deep/表示深度选择器用法： 注：除了/deep/以外，>>> 和 ::v-deep也可以实现同样的效果注意：/deep/只能

第一种image.png1，使用相对定位和绝对定位注意：当页面高度高于可视窗口的时候（也就是出现了滚动条）；这时如果再使用绝对定位向上滑动的时候，就已经不固底了，因为页面进来定位只计算一次；解决方案：使用fixed固定定位，永远把footer固定到底部，有滚动条也是不影响的；Document/*//第一种方式*/.container{/*//使用子绝父相*/position:relative;height:100vh;background:#f1f3f4;}header,main,footer{height:80px;line-height:80px;width:100%;}/*//设置绝对定

我发现，使用大写()时“ß”会转换为“SS”。但是我想比较两个字符串是否相等而不区分大小写。因此，当比较“gruß”和“GRUß”时，它应该与比较“gru”和“Gru”时相同。德语中没有大写的“ß”!因为我不知道还有哪些字符在相应的语言中不可用，所以我无法过滤所有没有1:1大写对手的字符。我能做什么？ 最佳答案 使用caseInsensitiveCompare()而不是转换字符串大写或小写:lets1="gruß"lets2="GRUß"leteq=s1.caseInsensitiveCompare(s2)==.orderedSam

作为一名全栈工程师，在日常的工作中，可能更侧重于后端开发，如：C#，Java，SQL，Python等，对前端的知识则不太精通。在一些比较完善的公司或者项目中，一般会搭配前端工程师，UI工程师等，来弥补后端开发的一些前端经验技能上的不足。但并非所有的项目都会有专职前端工程师，在一些小型项目或者初创公司中，职能划分并不明确，往往要一个人前后端全都会做，所以作为一名全栈工程师或者后端工程师，掌握必备的前端知识，也是必不可少的一项技能。今天就着重讲解一下，作为一名全栈工程师，前端CSS方面的必须要掌握的相关知识。 什么是CSS? CSS 指的是层叠样式表(CascadingStyleSheets)，描

前言本文给大家分享三个具有过渡效果的汉堡图标，当点击汉堡图标时，过渡为叉号图标。这种具有过渡特效的图标挺炫酷的，感觉一下子给网页增加一点新颖特色。早在2015年左右，国外挺多优秀门户网站都有使用类似的图标，那时不知道怎么实现，现在研究了一下，大概是使用了CSS伪类和动画的技巧来实现。一、示例代码（1）/src/views/Example/HamburgerIcon/index.vueexportdefault{data:()=>({isActiveHamburger1:true,isActiveHamburger2:true,isActiveHamburger3:true,}),methods

   最近有人私信我CSS 中的transition(过渡)和transform(动画)属性，这两个属性的参数确实比较复杂，它们可以做出CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习CSS的难记易忘之处，今天给大家详细总结出来。文章目录：一：transition过渡 1.1 transition-property指定过渡属性 1.2 transition-duration过渡时间 1.3 transition-delay过渡延迟 1.4 transition-timing-function过渡类型1.5 过渡的连写形式 二：transform2D动画效果tra

1、空格规则HTML代码的空格通常会被浏览器忽略。helloworld上面是一行HTML代码，文字的前部、内部和后部各有两个空格。浏览器的输出结果如下:helloworld可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。如果希望空格原样输出，可以使用标签。helloworld另一种方法是，改用HTML实体表示空格。helloworld2、空格字符HTML处理空格的规则，适用于多种字符。除了普通的空格键，还包括制表符（t）和换行符（r和n）。浏览器会自动把这些符号转成普通的空格键。helloworld上面代码中，文本内部包含了一个换行符，浏览

css3——filter(滤镜)属性css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的模糊效果、老照片（黑白照片）效果等语法filter:none|blur()|brightness()|contrast()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia();注意：1、当使用多个滤镜时，可以用空格分隔2、滤镜大多数使用百分比（%）1、none（默认值，无效果，与原图一样）代码语句filter:none;2、blur（px）——高斯模糊给图像设置高斯模糊。值越大越模糊；