Shiryan
Shiryan

【书】CSS揭秘

这本书介绍的方法主要是运用了CSS3的知识，居然的兼容写法，自行查阅
查询属性的支持程度入口
浏览器前缀处理工具Autoprefixer

CSS编码技巧

1、减少代码重复

  • 当某些值相互依赖时，应该把它们的相互关系用代码表达出来
  • 代码易维护 vs 代码量少
  • currentColor
  • 继承inherit

2、了解视觉差异
3、响应式页面设计

  • 媒体查询的断点不应该由具体的设备来决定，而应该根据设计自身来决定
  • 实现弹性可伸缩的布局，并在媒体查询的各个断点区间内指定相应的尺寸

4、合理使用简写

  • 合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险

5、合理使用预处理器

第二章、背景和边框

1、半透明边框

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;

background-clip 属性规定背景的绘制区域，背景色。

  • 由于background-clip的值默认是border-box，背景的颜色会入侵到边框的位置，所以需要设置为padding-box修正。

2、多重边框

box-shadow：可接受第四个参数数组，水平偏移、垂直偏移、模糊程度、扩张半径

  • 可用逗号分隔语法，创建任意数量的投影，第一层投影位于最顶层
//可用这个方法实现多个边框，但是如果边框是虚线那就不行了
box-shadow: 0 0 0 10px #eee,0 0 0 15px #ddd,0 0 0 20px #ccc;
  • outline:如需两层边框，可先设置一层常规边框，再加上outline（描边）属性来生产外层的边框。
  • 使用方式和border一样，位于border外面，可通过outline-offset设置其与边框直接的距离。不接受使用逗号添加多个值。如今，如元素时圆角，则无法贴合圆角（bug，未来可能会可以）。如使用这个属性，最好在不同浏览器中完整地测试最终效果。

3、灵活的背景定位

background-position：运行指定背景图片距离任意角的偏移量。

  • 回退方案：在不支持background-position扩展语法的浏览器中，我们把老套的right、bottom定位值写进background的简写属性中。
background-position: right 20px bottom 20px;

background-origin：修改背景图片background-position定位的标准。默认是padding-box;

background-origin:border-box/padding-box/content-box;
  • 因此background-position是以 padding box 为准的进行定位的。
  • 想背景图片距离边角的偏移量跟内边距保持一致，可修改background-origin的值为content-box。
  • 如不想修改background-origin的默认值，可设置calc()，使用这个函数计算。
background-position: calc(100% - 10px) calc(100% - 10px);

4、边框内圆角

【书】CSS揭秘_第1张图片
要实现上图效果，我们习惯会用两个盒子实现。下面介绍一个使用一个盒子实现上图效果。

background-color: pink;//设置盒子背景颜色
border-radius: 10px;//设置圆角
box-shadow: 0 0 0 10px #655;//设置盒子阴影
outline: 11px solid #655;//设置盒子outline，一般设置比圆角，阴影大一点，为了更好的效果

5、条纹背景

linear-gradient：直线过渡
radial-gradient：圆过渡，以中心的为起点，颜色过渡

  • 通过背景颜色过渡设置，再设置背景大小
  • 后面的颜色使用0代替对应的百分百，可以避免修改比例的时候，要改两个数据。
  • 注：两个颜色后面跟的百分百是指在哪个位置开始这个样式，两个的差值就是过渡的部分
background: linear-gradient(to bottom,#eee 30%,#ddd 30%);
background: linear-gradient(to bottom,#eee 30%,#ddd 0);
background-size: 100% 15px;

斜向条纹（这个只适合45deg的斜向）

background: linear-gradient(45deg,#fb2 25%,#58a 0,#58a 50%,#fb2 0,#fb2 75%,#58a 0);
background-size: 50px 50px;

更好的斜向条纹

  • repeating-linear-gradient：
  • repeating-radial-gradient：
  • 这两个方法，色标是无限循环重复的，直到填满整个背景。
background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0,#58a 30px);
  • 水平垂直用上面的，斜向的用下面的

灵活的同色系条纹

  • 大多情况下，我们想要的条纹图案，颜色往往是属于同一色系，只是在明度方面有着轻微的差异。
  • 除了为每种条纹单独指定颜色，有一种更好的方法：就是把深颜色指定为背景颜色，同时把半透明的白色的条纹叠加在背景色上来得到浅色条纹。
background: #58a;
background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0, transparent 30px);

6、复杂的背景图案

网格

background: white;
background-image: 
linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;

【书】CSS揭秘_第2张图片

background: #58a;
background-image: 
linear-gradient(white 1px,transparent 0),
linear-gradient(90deg, white 1px,transparent 0);
background-size: 30px 30px;

【书】CSS揭秘_第3张图片

background: #58a;
background-image:
        linear-gradient(white 2px,transparent 0),
        linear-gradient(90deg, white 2px,transparent 0),
        linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
        linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 75px 75px,75px 75px,15px 15px,15px 15px;

【书】CSS揭秘_第4张图片
波点

  • 生成两层圆点阵列图案，并把它们的背景定位错开，这样可得到真正的波点图案

image.png

  • 第二层背景的偏移定位值是贴片宽高的一半。如是使用css预处理器，可通过mixin函数传参来避免修改时要修改多个地方。

【书】CSS揭秘_第5张图片

  • 优化：第一组和第二组合并为一层渐变，把第三组和第四组合并为一层渐变

【书】CSS揭秘_第6张图片

  • 可根据需求修改。可使用预处理器的mixin来简化代码。
  • 未来：角度渐变
background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red );

【书】CSS揭秘_第7张图片

  • 还可以使用这个章学到的只是和混合模式结合起来。使用background-blend-mode属性并设置一个非normal属性，可得到根据有趣的图案。如http://bennettfeely.com/gradi...。

7、伪随机背景

得到不同颜色和不同宽度的垂直条纹。

  • 方案：把条纹平面拆散为多个图层，一种颜色作为底色，另三种作为条纹，然后让条纹以不同的间隔进行重复平铺。使用质数来增加随机真实性，这个是蝉原则。

image.png

  • 蝉原理也可以运用在别的地方：如图库的图片不同角度；动画

8、连续的图像边框

border-image的工作原理就是九宫格伸缩法，把图片切割成9块，然后把它们应用到元素边框相关的边和角。
【书】CSS揭秘_第8张图片

  • 效果：出现在拐角处的图片根据元素的宽高和边框厚度的变化而变化。
  • 法一：使用两个html元素，一个元素用来设置为背景，background-size: cover;，另一个用来存放内容。（不推荐，因为把结构和表现混合起来了）
  • 法二：主要思路是在背景图片之上，在叠加一层纯白的实色背景。

【书】CSS揭秘_第9张图片

  • 这个方法也可以用在渐变图案上，如老式信封样式的边框

【书】CSS揭秘_第10张图片

  • 如果通过border-image实现这个效果，只可以为border-image-source指定一个gif动画。
  • border-image，搭配渐变图案很强大。如脚注，需要给border-image属性再加上一条由渐变生成的垂直条纹，并在渐变中写好要裁切的长度。粗细交个border-width控制

【书】CSS揭秘_第11张图片

第三章、形状

9、自适应的椭圆

当任意两个相邻圆角的半径之和超过border box的尺寸时，用户代理必须按比例减小各个边框半径所使用的值，直到它们不会相互重叠为止
【书】CSS揭秘_第12张图片
半椭圆

  • 斜杆(/)两侧的值，分别代表四个角的水平和垂直半径，，方向：左上，右上、右下、左下。可缩写

【书】CSS揭秘_第13张图片
四分之一椭圆

10、平行四边形

嵌套元素方案：使用两个盒子，对外盒子使用skew()变形，对内容反向的skew()变形（不推荐）
image.png
这种思路，也可运用于别的效果：
如在IE8以下实现多重背景
边框内圆角

  • 在不能使用“多重边框”技巧时，可用这个方法模拟多层边框。或多层虚线边框，或在多重边框有透明空隙。

11、菱形图片

基于变形的方案

  • 外盒子旋转，里面的图片反向旋转，图片是否放大有区别的，1.42是根据勾股定理算出，图片的宽度与容器的对角线相等（图片需是正方形，且需要一层额外的div标签）

【书】CSS揭秘_第14张图片
裁切路径方案

  • 主要思路是使用path-clip，这个是借鉴svg的，但兼容性有限。它允许我们用一系列（以逗号隔开的）坐标来指定任意的多边形。也可使用百分比值，它可自动解析为元素自身的尺寸。
  • 还可参与动画。如鼠标悬停时平滑地扩展为完整的面积。

【书】CSS揭秘_第15张图片

12、切角效果

使用渐变效果，接受一个角度作为方向，然后线性渐变
【书】CSS揭秘_第16张图片

  • 要弄两个角的话，用两层过渡，设置background-size使每层渐变分别只占据整个元素一半的面积。且要设置不平铺。

【书】CSS揭秘_第17张图片

  • 可使用预处理器mixin，减少修改时的工序。

弧形切角
【书】CSS揭秘_第18张图片

  • 上面基于渐变的方案，代码过于繁琐冗余，且并非完全没问题。可使用其他替换方案，
  • 1border-image+svg。并通过一个内联的svg图像来产生切角。存在不兼容border-image的问题
  • 2裁切路径方案。存在当内边距不够宽时，会裁切掉文案。

13、梯形标签页

通过变形属性来改变它的尺寸，而不是内边距，避免在不支持3D的浏览器的样式怪异，实践证明垂直方向缩放1.3倍可补足它在高度上的缩水

  • 【书】CSS揭秘_第19张图片

可通过修改transform-origin为bottom left或bottom right，可得到左侧倾斜或右侧倾斜的标签。但斜边的角度依赖于元素的宽度。如宽度不同，很难得到斜度一致的梯形。宽度变化不大的，这样很管用。
【书】CSS揭秘_第20张图片

14、简单的饼图

【书】CSS揭秘_第21张图片

  • 制作多个不同比率的静态饼图：使用上面的动画，用负的动画延时来直接跳至动画中任意时间点。
  • 在饼图显示的比率就是我们在animation-delay值在总的动画持续时间中所占的比率。为方便计算，我们可以设置一个长达100s的持续时间。

【书】CSS揭秘_第22张图片

  • 从0到100%的动画，只需创建一个CSS动画，把stroke-dasharray属性从0 158到158 158

【书】CSS揭秘_第23张图片

  • 优化指定一个特定的半径让周长无限接近100，就可直接把比率的百分比值指定为stroke-dasharray的长度。在SVG使用viewBox属性指定其尺寸，可自适应容器大小

【书】CSS揭秘_第24张图片

  • 相对于前面的方案，其实SVG的方案具有不少优点：
  • 1增加第三种颜色是非常容易，设置虚线描边，再用stroke-dashoffset来推后描边线段的起始位置即可
  • 2不需要特别担心打印。SVG视为页面内容，会被打印。但是依赖背景来实现的，往往打印不出
  • 3用内联样式来指定颜色。前者依赖伪元素，无法对它使用内联样式。

第四章、视觉效果

15、单侧投影

单侧投影：使用box-shadow的第四个长度参数，扩张半径一般设为模糊半径的相反值

box-shadow: 0 5px 4px -4px black;

邻边投影：扩张半径一般设为模糊半径的相反值一半，水平和垂直方向移动距离一般大于或等于模糊半径一半

box-shadow: 3px 3px 6px -3px black;

双侧投影：扩张半径是在四个方向上作用是均等的。唯一的办法是用两块投影（各边一块）来实现

box-shadow: 5px 0 5px -5px black,
            -5px 0 5px -5px black;

16、不规则投影

使用从SVG引入的filter的新属性，使用一些函数就可达到指定滤镜效果。如blur()、grayscale()、drop-shadow()
drop-shadow()：基本和box-shadow一样，但不能接收第四个扩张参数，不包括insert关键字，不支持逗号分隔多层投影语法。
【书】CSS揭秘_第25张图片
可平稳退化。可附加一个SVG滤镜，稍微好一点支持度。可在滤镜效果模范中为每个滤镜找到对应的SVG滤镜版本。也可把SVG滤镜和简化的CSS滤镜放一起使用，让层叠机制决定哪一行生效。

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));

drop-shadow()本质是给任何非透明的部分打上阴影。文字也不例外。text-shadow:none也取消不了。如设置了文字投影，那也会在投影上打投影

17、染色效果

给图片加上一层蒙层，使用伪元素
关于滤镜的方案
sepia()：给图片增加一种降饱和度橙黄色染色效果，几乎所有像素的色相值会被收敛到35~40
saturate()：为每个像素提高饱和度
hue-rotate()：把每个像素的色相以指定的度数进行偏移。

filter: sepia(1) saturate(4) hue-rotate(295deg);

基于混合模式的方案
第一种：盒子包裹图片，盒子背景颜色设置为想要的主色调，图片设置为混合模式
【书】CSS揭秘_第26张图片

18、毛玻璃效果

【书】CSS揭秘_第27张图片

19、折角效果

以前：使用伪元素实现。有局限性，背景不是纯色不行，45°以外的折角不行。。。
45°折角的解决方法，注意尺寸的取值，要确保折角的长度是2em，则需要用勾股定理算出，值为根号2
image.png

第五章、字体排印

20、连字符断行

不提倡使用text-align: justify;
【书】CSS揭秘_第28张图片

21、插入换行

对应的名和值在一行
【书】CSS揭秘_第29张图片

22、文本行的斑马条纹

以前是用：nth-child()技巧来实现斑马条纹。
解决方案：给整个元素设置统一的背景图像。修改line-height时记得修改background-size
【书】CSS揭秘_第30张图片

23、调整tab的宽度

tab-size：css第三版，接受一个数字，表示字符数或者一个长度值（这个不那么实用）。通常设置为4或2.。

pre {tab-size: 2; }

24、连字

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
css3的属性

25、华丽的&符号

导入字体样式

26、自定义下划线

以前：用border-bottom或者box-shadow来设置，但是会有与文字距离大、阻止正常的文本换行行为
解决方案：借助CSS背景与边框（第三版）
image.png
还可以思考一下波浪线---用两层渐变

27、现实中的文字效果

凸版印刷效果，
背景浅文字深的情况下，投影浅色的，投影80%透明度的白色，效果不错
背景深文字浅的情况下，投影深色的
image.png

28、环形文字

【书】CSS揭秘_第31张图片
可动态通过js添加

第六章、用户体验

29、选用适合的鼠标光标

  1. 提示禁用状态
  2. 隐藏鼠标光标
  • 用一个透明的图片或者cursor: none;

30、扩大可点击区域

添加透明边框，为防止背景颜色扩张到边框，可使用background-clip:padding-box，要边框的话，就使用box-shadow设置
【书】CSS揭秘_第32张图片

31、自定义复选框

当label元素与复选框关联之后，也可以起到触发开关的作用
【书】CSS揭秘_第33张图片

32、通过阴影来弱化背景

一般：增加一层额外的HTML元素用于遮挡背景
伪元素方案：问题是无法绑定独立的js事件处理
box-shadow方案：两个问题：设置其大小的问题，无法阻止鼠标交互点击
backdrop方案：兼容性问题，不完全支持，慎用

dialog::backdrop {background: rgba(0, 0, 0, .8);}

33、通过模糊来弱化背景

当我们视线聚焦在距离较近的物体上时，远处的背景就是虚化的
方案：通过给底层元素添加一个类，对其应用模糊滤镜，添加动画会根据自然。但这个方案没有回退方案，可参考上面的box-shadow的效果，但是都有不一样的问题

transition: .6s filter;
filter:blur(5px) contrast(.8) brightness(.8);

34、滚动提示

【书】CSS揭秘_第34张图片

35、交互式的图片对比控件

CSS resize方案
resize：适用任何元素，只要它的overflow不是visible，默认是none，即禁止调整大小的特性，除了both，其值还有horizontal和vertical，它们可以限制元素调整大小的方向。
【书】CSS揭秘_第35张图片
范围输入控件方案
。。。。。。

第七章、结构与布局

36、自适应内部元素

需求：宽度也能像高度一样，外盒子自适应内盒子的宽度，而不是由其父盒子决定，且水平居中。即它的宽度是由内部因素来决定，而不是由外部因素来决定。
方案： CSS内部与外部尺寸模型（第三版）是较新的规范，为宽高定义了一些新的关键字，最有用的是min-content。这关键字将解析为这个容器内部最大的不可断行元素的宽度。
【书】CSS揭秘_第36张图片
了解：其他值还有max-content，类似inline-block，fit-content的效果与浮动元素是相同的

37、精确控制表格列宽

问题：对于不固定的内容，布局比较难，因为列宽根据其内容进行调整
方案：使用CSS2.1的属性table-layout，其默认值是auto，即自动表格布局算法。还可接收另外一个值fixed，更可控一下。
在使用时，只需对

元素或其他具有display:table样式的元素使用这个属性即可。为确保奏效，需为表格元素指定宽度，为使text-overflow:ellipsis;奏效，需为那列指定宽度

38、根据兄弟元素的数量来设置样式

需求：仅当列表项的总数为4时才为列表设置样式
方案：:only-child等效于：first-child:last-child，是第一项同时也是最后一项

li:first-child:nth-last-child(1) {
 /* 相当于li:only-child */
}

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
 /* 当列表正好包含四项时，命中所有列表项 */
}

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
 /* 当列表至少包含四项时，命中所有列表项 */
}

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
 /* 当列表最多包含四项时，命中所有列表项 */
}

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
 /* 当列表包含2～6项时，命中所有列表项 */
}

39、满幅的背景，定宽的内容

以前：使用两层HTML元素，一个做背景，一个做内容
【书】CSS揭秘_第37张图片

40、垂直居中

以往：表格布局法、行内块法
基于绝对定位的解决方案
【书】CSS揭秘_第38张图片
问题：

  • 1有时我们不能使用绝对定位
  • 2居中的元素的高超出视口，顶部的内容会被视口裁切掉
  • 3会导致元素的显示有一些模糊，因元素可能被放置在半个像素上，可以transfrom-style:preserve-3d来修复，但是不能确保未来没问题。

基于视口单位的解决方案

  • CSS值与单位（第三版）定义新的单位，视口，vw与视口宽度有关。1vw是指1%，而不是100%
  • 1vh表示视口高度的1%
  • 当视口宽度小于高度时，1vmin等于1vw，否则等于1vh
  • 当视口宽度大于高度时，1vmax等于1vw，否则等于1vh

【书】CSS揭秘_第39张图片
基于Flexbox的解决方案display:flex

41、紧贴底部的页脚

固定高度的解决方案：这个方案要求页脚的文案不会换行且改变页脚尺寸的时候也要做对应的修改
【书】CSS揭秘_第40张图片
更灵活的解决方案：使用flex布局

第八章、过渡与动画

42、缓动效果

弹跳动画
【书】CSS揭秘_第41张图片
弹性过渡
。。。。。

43、逐帧动画

主要是采用steps()这个调速函数，而不是基于贝塞尔曲线的调速函数。
steps()：会根据你指定的步进数量，把动画切分为多帧，而且整个动画会在帧与帧之间硬切，不会做任何插值处理。一般这种硬切效果我们极力避免，但是如果是用图片实现加载动画，这个效果就比较好用。
http://simurai.com/blog/2012/12/03/step-animation

44、闪烁效果

animation-direction: alternate是第偶数个循环周期，alternate-reverse是第奇数个循环周期。
它会同时反转调整函数，从而产生更加逼真的动画效果。
【书】CSS揭秘_第42张图片

45、打字动画

方案：核心思想就是让容器的宽度成为动画的主体；
ch：是CSS3中引入的新单位，表示“0”字形的宽度。在等宽字体中，“0”字形的宽度和其他所有字形的宽度是一样的
【书】CSS揭秘_第43张图片
有兼容性问题。

46、状态平滑的动画

提供一个盒子展示，平滑地让背景图片移动。
【书】CSS揭秘_第44张图片

47、沿环形路径平移的动画

头像是颠倒的，
【书】CSS揭秘_第45张图片

终于看完这本书了，整个过程断断续续的，看的非常慢，看完的时候都忘得差不多了，收获是有的，但不是很大，这本书很多知识点是用到了CSS3的知识点，所以使用的时候，要注意兼容性问题。。不管怎样，算是一个好的开始吧！！！加油！！！

你可能感兴趣的:(css,前端)

  • 用Python写前端 eternity_ld 前端python开发语言
    分享一个让开发交互式Webapp超级简单的工具。不会HTML，CSS，JAVASCRIPT也没事。交互式Webapp非常实用，比如说做一个问卷调查页面、一个投票系统、一个信息收集表单，上传文件等等，因为网页是可视化的，因此还可以作为一个没有服务端的图片界面应用程序而使用。如果你有这样的开发需求，那用Python真的是太简单了。借助于PyWebIO（pipinstallpywebio），你可以分分钟
  • 【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法 杰九 vue.js前端springboot
    【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法在进行前端开发之前，需要熟悉vue的一些基本用法，这里举例了一些常见的基本用法1.v-if,v-else,v-else-if用于条件渲染元素。当条件为真时，元素会被渲染；否则不会渲染。示例TypeATypeBNotA/B2.v-show也用于条件渲染，但它总是会渲染并保留，只是通过CSS的display属性控制可见性。示例显示/
  • SpringBoot3+Vue3+NaiveUI博客后台管理系统源码 | 小蚂蚁云 小蚂蚁开源 后端vue架构低代码
    项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、NaiveUI、MySQL等技术栈实现的单体前后端分离后台管理系统；后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈，前端基于Vue3、TypeScript、Vite等技术栈实现，采用Naiv
  • 小蚂蚁云后台管理系统|XiaoMaYi 小蚂蚁开源 后端vue
    项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统；后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈，前端基于Vue3、TypeScript、Vite等技术栈实现，采用
  • 【前端高频面试题--ES6篇】 码上有前 前端es6学习javascript
    作者：“码上有前”文章简介：前端高频面试题欢迎小伙伴们点赞、收藏⭐、留言前端高频面试题--ES6篇往期精彩内容ES6ES6概念let和constletConst解构赋值模板字符串对象简化箭头函数形参赋初始值Rest参数扩展运算符扩展运算符的应用Symbol的基本使用对象添加Symbol类型的属性Symbol内置值迭代器生成器PromiseSetMapclass类数值扩展对象扩展模块化往期精彩内容【
  • SpringBoot中使用TraceId进行日志追踪 java15655057970 面试学习路线阿里巴巴springboot状态模式后端
    **查询日志的痛点：**项目中每当我们查询日志的时候都是看前端请求什么接口，根据一些关键字进入服务器查询日志中是否有这个关键字，然而这个关键字在日志里面并不是唯一的，所以要生成一个唯一的标识，每一次请求都是唯一的一串字符，查询会过滤掉很多无用的信息，快捷查找到这次请求。为了解决这个痛点，就使用了TraceId。一、TraceId定义用于标识某一次具体的请求ID。当用户的请求进入系统后，会在RPC调
  • SpringBoot + Vue 前后端分离开发项目源码 左李滢Just
    SpringBoot+Vue前后端分离开发项目源码SpringBootVue前后端分离开发项目源码本仓库提供了一个完整的SpringBoot+Vue前后端分离开发项目的源码。该项目展示了如何使用SpringBoot作为后端框架，Vue作为前端框架，实现前后端分离的开发模式。通过本项目，您可以学习到如何搭建一个高效、可扩展的Web应用架构项目地址:https://gitcode.com/open-s
  • 【前端】--- ES6下篇（带你深入了解ES6语法） 心.c 前端es6ecmascript
    前言：ECMAScript是JavaScript的标准化版本，由ECMA国际组织制定。ECMAScript定义了JavaScript的语法、类型、语句、关键字、保留字等。ES6是ECMAScript的第六个版本，于2015年发布，引入了许多重要的新特性，使JavaScript更加现代化。进制ES6中增加了二进制和八进制的写法：二进制使用前缀'0b'或'0B'，八进制使用前缀'0o'或'0O'二进制
  • java枚举转json 软件老王 枚举json
    1、背景java后端的枚举类型，要展示到前端，提供给用户进行下拉选择，java后端需要封装enum为json字符串提供给前端，需要首先将枚举类型转为list，然后再转为json字符串。2、方案方案也很简单，使用EnumSet.allOf(TestEnum.class)，将数据获取到再塞到list中就可以了。代码如下：importcom.alibaba.fastjson.JSONObject;imp
  • 多功能系统下的专业游戏陪玩小程序，线上开黑陪玩与线下家政服务全囊括
    技术栈与工具前端技术栈UniApp框架：用于开发跨平台的移动应用。Vue.js：用于构建用户界面。微信小程序云函数：用于在微信小程序中实现后端逻辑。后端技术栈PHP：用于开发后端服务。MySQL：用于存储用户数据和陪玩人员信息。TP6框架：用于开发后端服务。开发工具HBuilderX：用于开发UniApp项目。微信开发者工具：用于开发微信小程序。适用行业陪玩行业：游戏陪玩领域国内已经很成熟。陪聊行
  • 浅谈视频智能化的发展与应用 weixin_33692284 前端后端人工智能ViewUI
    视频监控发展到今天，大家对视频系统规模的快速发展是有目共睹的。近年来基于成熟的以太网技术，大规模数字化视频监控系统的建设变得非常简单，很多项目拥有成百上千个前端点位，达到上万个前端点位的超大规模监控系统也不少见。随着视频监控系统规模的增加，在图像质量越来越好的当下，能否让摄像机看懂正在发生的事件并提出告警，这正是近年来非常流行的智能化需求的由来。本文将对目前智能视频分析技术的发展做些简单的阐述。一
  • nginx闲谈 沉默monkey nginx运维
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录介绍特点高并发轻量级模块化设计应用场景web服务器反向代理正向代理（类似机场）配置demo负载均衡缓存处理https与ssl/tlsapi网关介绍nginx高性能（同比tomcat性能高20%），轻量的weib服务器和反向代理服务器，能解决大量并发连接（C10K问题），高并发，高可靠，低内存消耗，支持多功能模块（如前端静态资源
  • 制作动态菜单 大磊程序员(“hello world”) Java后端javascript开发语言ecmascript
    动态菜单的说明什么叫做动态菜单？动态菜单就是根据用户属于不同的角色，每个角色还有不同的菜单，左侧菜单栏会有不同的显示前端加载流程menu.js修改/src/api/menu.js中的请求地址，如下所示：//获取菜单exportconstGetMenus=params=>{returnrequest({url:'/admin/system/index/menus',method:'get',para
  • Vue.js 单页应用（SPA）开发教程：从零开始构建你的第一个项目 Milk夜雨 vue.jsvue.js前端javascript
    单页应用（SPA，SinglePageApplication）是现代前端开发的主流模式。Vue.js是一个非常适合构建SPA的框架，它通过VueRouter实现页面导航，通过组件化开发和状态管理实现复杂的交互功能。本篇教程将带你了解SPA的基本概念，并一步步创建一个Vue.js单页应用。什么是单页应用（SPA）？单页应用是一种只有一个HTML页面，通过JavaScript动态加载内容的应用。特点包
  • Node.js的解释 web15085415935 面试学习路线阿里巴巴node.js
    1.Node.js入门教程1.1什么是Node.js？1.1.1Node.js是什么？Node.js是一个基于JavaScript的开源服务器端运行时环境，允许开发者用JavaScript编写服务器端代码。与传统的前端JavaScript主要运行在浏览器端不同，Node.js通过提供一个非阻塞的异步模型，允许开发者在服务器端创建高性能的网络应用程序。比喻：想象你把JavaScript看作是一个厨师
  • vue2在线生成二维码 家里有只小肥猫 javascript前端开发语言
    亲情提示：如果可以让后端生成就让后端生成实在不行再前端解决（分享方法只是为了让你快点下班不是为了让你能者多劳）创建npminstallqrcodejs2pnpminstallqrcodejs2importQRCodefrom'qrcodejs2'data:{qrcode:'',}submitCode(){if(this.$refs.qrcode){this.qrcode='';this.$refs
  • 参加【2025年春季】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！ 白帽子凯哥 web安全学习安全CTF夺旗赛网络安全
    基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、SQL注入（7-8天）2、文件上传（7-8天）3、其他漏洞（14-15
  • 最受欢迎的WebAssembly Web开发框架：Blazor前端开发 ScriptWELL wasm前端
    WebAssembly（简称Wasm）是一种用于在Web平台上运行高性能代码的二进制格式。它可以在现代Web浏览器中以原生速度执行，并为开发人员提供了使用其他编程语言编写Web应用程序的能力。在WebAssembly的推动下，出现了许多与其兼容的Web开发框架，其中最受欢迎的之一是Blazor。Blazor是一个由微软开发的Web开发框架，它允许开发人员使用C#语言编写前端Web应用程序。Blaz
  • 【前端知识】简单易懂的vue前端页面元素权限控制 问道飞鱼 前端开发技术vue.js前端javascript权限控制
    文章目录设计思路代码实现1.**权限数据管理**2.**权限判断方法**3.**动态控制元素**4.**路由权限控制**5.**无权限页面**总结相关文献在前端实现基于Vue的权限控制，通常需要结合后端返回的用户权限数据，动态控制页面元素的显示与隐藏、按钮的可点击状态等。以下是设计思路和代码实现：设计思路权限数据管理:从后端获取用户的权限数据（如角色、权限列表等），并存储在Vuex或组件的data
  • 打造高效React应用：CSS方案深度解析
    大家好，我是长林啊！一个爱好JavaScript、Go、Rust的全栈开发者；致力于终生学习和技术分享。在React以其声明式编程范式和组件化架构，成为了构建用户界面的首选技术之一。然而，随着项目规模的扩大和设计需求的多样化，如何高效地管理CSS样式成为了每个React开发者都需要面对的挑战。本文将从一下三个方面进行介绍，探讨如何在React中应用和管理样式，包括内联样式、CSS类、CSSModu
  • 分布式微服务搭建 Xi-Tong 微服务架构云原生linuxcentosbashjdk
    分布式微服务架构搭建（举出一个项目搭建的例子，其他项目可参考本文档）基于Nginx作为web服务器、JDK作为Java运行环境、MySQL作为关系型数据库、Nacos作为服务发现和配置中心、Maven作为项目管理工具、Redis作为缓存和消息中间件（视具体需求而定）、Node.js与npm作为某些微服务（如前端服务或特定业务逻辑服务）的开发和依赖管理工具，可以搭建一个完整的分布式微服务架构项目。以
  • 前端开发概述 不会写代码的菜 html前端html
    我们前后端工程师都一样,最终目的都是开发和维护软件,以给用户以更好的服务我们可以将软件分为以下几类:系统软件:WindowsLinuxmacOS应用软件:officeqq游戏软件:王者荣耀绝地求生我们的软件通常由服务器端和客户端组成客户端:通过客户端来使用软件,我们通常使用电脑时能看到的也就是客户端的软件,服务器端我们平常在使用过程中是无法看到的客户端的形式:文字客户端:一种古老的方式,通过命令行
  • React 前端框架开发详细操作 编码小袁 前端框架
    一、引言在当今的web开发领域，React作为一款流行的前端框架，以其高效的组件化开发模式、虚拟DOM带来的高性能以及灵活的生态系统，受到了广大开发者的青睐。无论是开发小型的单页应用还是大型的企业级项目，React都能展现出强大的能力。本文将详细介绍React前端框架的操作使用方法，帮助开发者快速上手并深入理解React开发。二、环境搭建在开始使用React进行开发之前，需要先搭建好开发环境。以下
  • React 前端框架简介与应用 仰望丨苍穹 前端：技巧与实践前端框架react.js前端
    React是一个用于构建用户界面的JavaScript库，在前端开发中被广泛应用。1：主要特点1.1：组件化开发React提倡以组件的方式构建用户界面。每个组件都具有独立的功能和逻辑，可以重复使用和组合，提高了开发效率和代码的可维护性。例如，一个网页中的导航栏、侧边栏、内容区域等都可以分别构建为不同的组件。1.2：虚拟DOMReact引入了虚拟DOM（VirtualDOM）的概念。当数据发生变化时
  • React 前端框架：简介与核心概念 一ge科研小菜鸡 工具前端框架
    React是由Facebook开发和维护的一个用于构建用户界面的JavaScript库。它专注于通过组件化的方式构建单页应用（SPA），允许开发者高效地创建复杂、交互性强的界面。React的核心特点是其虚拟DOM、组件化开发和声明式编程，使其成为目前最流行的前端开发框架之一。1.React的优势1.1组件化开发React的核心是组件（Component），它允许开发者将界面划分为多个独立的、可重用
  • 如何使用媒体查询实现响应式网页设计？ 破碎的天堂鸟 学习教程媒体css前端
    使用媒体查询（MediaQueries）实现响应式网页设计是现代网页开发中的一项核心技术，它允许开发者根据设备的屏幕尺寸、分辨率、方向等特性动态调整网页布局和样式，从而提供更好的用户体验。以下是详细说明如何使用媒体查询实现响应式网页设计的方法：1.媒体查询的基本概念媒体查询是CSS3引入的一项功能，通过@media规则，开发者可以根据设备的特性（如宽度、高度、方向等）应用不同的样式规则。媒体查询可
  • 如何通过减少HTTP请求来提升页面加载速度？ 破碎的天堂鸟 学习教程http网络协议网络
    通过减少HTTP请求可以显著提升网页加载速度，这是因为HTTP请求的次数直接影响了页面加载时间。以下是一些具体的方法和策略：1.合并文件将多个CSS文件合并为一个CSS文件，将多个JavaScript文件合并为一个JavaScript文件。这可以减少浏览器发起的HTTP请求次数，从而加快页面加载速度。示例：将所有样式表和脚本文件打包成一个文件，以减少请求数量。2.使用CSSSprites（雪碧图）
  • 【前端开发】前端开发深度解析：HTML、CSS、JavaScript与Vue.js RS迷途小书童 前端开发探索之旅javascripthtmlcss前端vue.js
    一、HTML：构建网页的基石1.1简介HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用于创建网页的标准标记语言。它使用各种标签（tags）来描述网页上的内容，包括文本、图像、链接、视频、音频等。HTML是网页开发的基础，与CSS（层叠样式表）和JavaScript等技术一起，共同构建出丰富多彩的网页世界。HTML文档由一系列的元素构成，每个元素都由开始标签、内容和
  • 前端路由的hash模式和history模式 bsr1983 前端hashhistory路由模式
    hash模式和history模式是前端路由实现的两种常见方式，分别基于不同的浏览器特性实现。下面从浏览器实现、前端框架实现及相关标准定义三个方面详细解释这两种模式。1.浏览器实现1.1Hash模式•核心机制：•基于浏览器的location.hash属性和hashchange事件。•#后的内容（如#home）被称为“fragmentidentifier”，不会被浏览器发送到服务器，因此只在前端有效。
  • 前端一次性在接口中给后端传多个文件流的集合作为参数 柠檬花开_ 前端javascript上传文件文件流
    前端上传文件后，文件流暂存在数组中。保存时，接口传参多个文件流一、前端暂存文件流//上传附件，attachFiles前端暂存文件流为一个数组httpSuggestionRequest:function(param){console.log(param,'param')if(this.attachFiles.length===10){this.$message.error('上限10个文件！');r
  • jQuery 跨域访问的三种方式 No 'Access-Control-Allow-Origin' header is present on the reque qiaolevip 每天进步一点点学习永无止境跨域众观千象
    XMLHttpRequest cannot load http://v.xxx.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. test.html:1
  • mysql 分区查询优化 annan211 java分区优化mysql
    分区查询优化 引入分区可以给查询带来一定的优势，但同时也会引入一些bug. 分区最大的优点就是优化器可以根据分区函数来过滤掉一些分区，通过分区过滤可以让查询扫描更少的数据。 所以，对于访问分区表来说，很重要的一点是要在where 条件中带入分区，让优化器过滤掉无需访问的分区。 可以通过查看explain执行计划，是否携带 partitions
  • MYSQL存储过程中使用游标 chicony Mysql存储过程
    DELIMITER $$ DROP PROCEDURE IF EXISTS getUserInfo $$ CREATE PROCEDURE getUserInfo(in date_day datetime)-- -- 实例-- 存储过程名为：getUserInfo-- 参数为：date_day日期格式:2008-03-08--    BEGINdecla
  • mysql 和 sqlite 区别 Array_06 sqlite
    转载： http://www.cnblogs.com/ygm900/p/3460663.html mysql 和 sqlite 区别 SQLITE是单机数据库。功能简约，小型化，追求最大磁盘效率 MYSQL是完善的服务器数据库。功能全面，综合化，追求最大并发效率 MYSQL、Sybase、Oracle等这些都是试用于服务器数据量大功能多需要安装，例如网站访问量比较大的。而sq
  • pinyin4j使用 oloz pinyin4j
    首先需要pinyin4j的jar包支持；jar包已上传至附件内 方法一:把汉字转换为拼音；例如：编程转换后则为biancheng      /** * 将汉字转换为全拼 * @param src 你的需要转换的汉字 * @param isUPPERCASE 是否转换为大写的拼音； true:转换为大写；fal
  • 微博发送私信 随意而生 微博
    在前面文章中说了如和获取登陆时候所需要的cookie，现在只要拿到最后登陆所需要的cookie，然后抓包分析一下微博私信发送界面 http://weibo.com/message/history?uid=****&name=**** 可以发现其发送提交的Post请求和其中的数据， 让后用程序模拟发送POST请求中的数据，带着cookie发送到私信的接入口，就可以实现发私信的功能了。
  • jsp 香水浓 jsp
    JSP初始化     容器载入JSP文件后，它会在为请求提供任何服务前调用jspInit()方法。如果您需要执行自定义的JSP初始化任务，复写jspInit()方法就行了 JSP执行     这一阶段描述了JSP生命周期中一切与请求相关的交互行为，直到被销毁。     当JSP网页完成初始化后
  • 在 Windows 上安装 SVN Subversion 服务端 AdyZhang SVN
    在 Windows 上安装 SVN Subversion 服务端2009-09-16高宏伟哈尔滨市道里区通达街291号   最佳阅读效果请访问原地址：http://blog.donews.com/dukejoe/archive/2009/09/16/1560917.aspx   现在的Subversion已经足够稳定，而且已经进入了它的黄金时段。我们看到大量的项目都在使
  • android开发中如何使用 alertDialog从listView中删除数据？ aijuans android
    我现在使用listView展示了很多的配置信息，我现在想在点击其中一条的时候填出 alertDialog,点击确认后就删除该条数据，（ ArrayAdapter ，ArrayList，listView 全部删除），我知道在 下面的onItemLongClick 方法中 参数 arg2  是选中的序号，但是我不知道如何继续处理下去 1 2 3
  • jdk-6u26-linux-x64.bin 安装 baalwolf linux
    1.上传安装文件(jdk-6u26-linux-x64.bin) 2.修改权限 [root@localhost ~]# ls -l /usr/local/jdk-6u26-linux-x64.bin 3.执行安装文件 [root@localhost ~]# cd /usr/local [root@localhost local]# ./jdk-6u26-linux-x64.bin&nbs
  • MongoDB经典面试题集锦 BigBird2012 mongodb
    1.什么是NoSQL数据库？NoSQL和RDBMS有什么区别？在哪些情况下使用和不使用NoSQL数据库？ NoSQL是非关系型数据库，NoSQL = Not Only SQL。 关系型数据库采用的结构化的数据，NoSQL采用的是键值对的方式存储数据。 在处理非结构化/半结构化的大数据时；在水平方向上进行扩展时；随时应对动态增加的数据项时可以优先考虑使用NoSQL数据库。 在考虑数据库的成熟
  • JavaScript异步编程Promise模式的6个特性 bijian1013 JavaScriptPromise
            Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性。         在我们开始正式介绍之前，我们想看看Javascript Promise的样子： var p = new Promise(function(r
  • [Zookeeper学习笔记之八]Zookeeper源代码分析之Zookeeper.ZKWatchManager bit1129 zookeeper
    ClientWatchManager接口 //接口的唯一方法materialize用于确定那些Watcher需要被通知 //确定Watcher需要三方面的因素1.事件状态 2.事件类型 3.znode的path public interface ClientWatchManager { /** * Return a set of watchers that should
  • 【Scala十五】Scala核心九：隐式转换之二 bit1129 scala
    隐式转换存在的必要性，   在Java Swing中，按钮点击事件的处理，转换为Scala的的写法如下：   val button = new JButton button.addActionListener( new ActionListener { def actionPerformed(event: ActionEvent) {
  • Android JSON数据的解析与封装小Demo ronin47
    转自：http://www.open-open.com/lib/view/open1420529336406.html package com.example.jsondemo; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject;    impor
  • [设计]字体创意设计方法谈 brotherlamp UIui自学ui视频ui教程ui资料
      从古至今，文字在我们的生活中是必不可少的事物，我们不能想象没有文字的世界将会是怎样。在平面设计中，UI设计师在文字上所花的心思和功夫最多，因为文字能直观地表达UI设计师所的意念。在文字上的创造设计，直接反映出平面作品的主题。 如设计一幅戴尔笔记本电脑的广告海报，假设海报上没有出现“戴尔”两个文字，即使放上所有戴尔笔记本电脑的图片都不能让人们得知这些电脑是什么品牌。只要写上“戴尔笔
  • 单调队列-用一个长度为k的窗在整数数列上移动，求窗里面所包含的数的最大值 bylijinnan java算法面试题
    import java.util.LinkedList; /* 单调队列 滑动窗口 单调队列是这样的一个队列：队列里面的元素是有序的，是递增或者递减 题目：给定一个长度为N的整数数列a(i),i=0,1,...,N-1和窗长度k. 要求：f(i) = max{a(i-k+1),a(i-k+2),..., a(i)},i = 0,1,...,N-1 问题的另一种描述就
  • struts2处理一个form多个submit chiangfai struts2
    web应用中，为完成不同工作，一个jsp的form标签可能有多个submit。如下代码： <s:form action="submit" method="post" namespace="/my"> <s:textfield name="msg" label="叙述：">
  • shell查找上个月，陷阱及野路子 chenchao051 shell
    date -d "-1 month" +%F     以上这段代码，假如在2012/10/31执行，结果并不会出现你预计的9月份，而是会出现八月份，原因是10月份有31天，9月份30天，所以-1 month在10月份看来要减去31天，所以直接到了8月31日这天，这不靠谱。     野路子解决：假设当天日期大于15号
  • mysql导出数据中文乱码问题 daizj mysql中文乱码导数据
    解决mysql导入导出数据乱码问题方法： １、进入mysql，通过如下命令查看数据库编码方式： mysql>  show variables like 'character_set_%'; +--------------------------+----------------------------------------+ | Variable_name&nbs
  • SAE部署Smarty出现：Uncaught exception 'SmartyException' with message 'unable to write dcj3sjt126com PHPsmartysae
      对于SAE出现的问题：Uncaught exception 'SmartyException' with message 'unable to write file...。 官方给出了详细的FAQ：http://sae.sina.com.cn/?m=faqs&catId=11#show_213 解决方案为：   01 $path 
  • 《教父》系列台词 dcj3sjt126com
    Your love is also your weak point. 你的所爱同时也是你的弱点。   If anything in this life is certain, if history has taught us anything, it is that you can kill anyone.   不顾家的人永远不可能成为一个真正的男人。 &
  • mongodb安装与使用 dyy_gusi mongo
    一.MongoDB安装和启动,widndows和linux基本相同 1.下载数据库,     linux:mongodb-linux-x86_64-ubuntu1404-3.0.3.tgz 2.解压文件,并且放置到合适的位置     tar -vxf mongodb-linux-x86_64-ubun
  • Git排除目录 geeksun git
    在Git的版本控制中，可能有些文件是不需要加入控制的，那我们在提交代码时就需要忽略这些文件，下面讲讲应该怎么给Git配置一些忽略规则。   有三种方法可以忽略掉这些文件，这三种方法都能达到目的，只不过适用情景不一样。 1.  针对单一工程排除文件 这种方式会让这个工程的所有修改者在克隆代码的同时，也能克隆到过滤规则，而不用自己再写一份，这就能保证所有修改者应用的都是同一
  • Ubuntu 创建开机自启动脚本的方法 hongtoushizi ubuntu
    转载自： http://rongjih.blog.163.com/blog/static/33574461201111504843245/ Ubuntu 创建开机自启动脚本的步骤如下： 1) 将你的启动脚本复制到 /etc/init.d目录下 以下假设你的脚本文件名为 test。   2) 设置脚本文件的权限 $ sudo chmod 755
  • 第八章 流量复制/AB测试/协程 jinnianshilongnian nginxluacoroutine
    流量复制 在实际开发中经常涉及到项目的升级，而该升级不能简单的上线就完事了，需要验证该升级是否兼容老的上线，因此可能需要并行运行两个项目一段时间进行数据比对和校验，待没问题后再进行上线。这其实就需要进行流量复制，把流量复制到其他服务器上，一种方式是使用如tcpcopy引流；另外我们还可以使用nginx的HttpLuaModule模块中的ngx.location.capture_multi进行并发
  • 电商系统商品表设计 lkl
    DROP TABLE IF EXISTS `category`; -- 类目表 /*!40101 SET @saved_cs_client = @@character_set_client */; /*!40101 SET character_set_client = utf8 */; CREATE TABLE `category` ( `id` int(11) NOT NUL
  • 修改phpMyAdmin导入SQL文件的大小限制 pda158 sqlmysql
    　用phpMyAdmin导入mysql数据库时，我的10M的 数据库不能导入，提示mysql数据库最大只能导入2M。 　　 phpMyAdmin数据库导入出错： 　　You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.
  • Tomcat性能调优方案 Sobfist apachejvmtomcat应用服务器
    一、操作系统调优 对于操作系统优化来说，是尽可能的增大可使用的内存容量、提高CPU的频率，保证文件系统的读写速率等。经过压力测试验证，在并发连接很多的情况下，CPU的处理能力越强，系统运行速度越快。。 【适用场景】 任何项目。 二、Java虚拟机调优 应该选择SUN的JVM，在满足项目需要的前提下，尽量选用版本较高的JVM，一般来说高版本产品在速度和效率上比低版本会有改进。 J
  • SQLServer学习笔记 vipbooks 数据结构xml
    1、create database school 创建数据库school 2、drop database school 删除数据库school 3、use school 连接到school数据库，使其成为当前数据库 4、create table class(classID int primary key identity not null) 创建一个名为class的表，其有一