Css3

雪碧图通过CSS背景定位的办法显示图片局部，缩小了加载图片的申请，进步网页速度。 根本步骤是 首先创立一个DOM标签给DOM设置 宽 高而后通过 background-image:url(图片地址) 的办法导入雪碧图在通过 background-position:x轴(程度) y轴(垂直) 找到图片所在的地位 即可案例： // 创立dom <i class="water"></i>// css .water { display: inline-block; width: 18px; height: 30px; background-image: url(/src/assets/Icon.png); background-position: -470px -286px; vertical-align: middle; position: relative; top: -3px; margin-right: 10px; }效果图：原图:

CSS3 的新个性1.选择器：（1）属性选择器： [属性名] [属性名=属性值] [属性名^=属性值] [属性名$=属性值] [属性名*=属性值]（2）伪类选择器：为特定状态的元素增加款式，例如 :hover、:active、:visited。（3）伪元素选择器：抉择特定局部的元素，例如 ::before、::after。（4）多重选择器：应用逗号分隔来同时抉择多个元素，例如 element1, element2。 2.盒模型： 2.1.边框圆角（border-radius）：能够设置元素的边框圆角。 border-top-left-radius 左上角 border-top-right-radius 右上角 border-bottom-right-radius 右下角 border-bottom-left-radius 左下角 复合属性：border-radius： 四个值：左上角 右上角 右下角 左下角 三个值：左上角 右上角和左下角 右下角 两个值：左上角和右下角 右上角和左下角 一个值：4个角都失效 当拿50%时，宽等于高为圆形，宽不等于高为椭圆形（百分比，参照的是元素自身的高度与宽度）。2.2.暗影成果（box-shadow）：能够为元素增加暗影成果。 参数： 1.X轴偏移量：必须。程度暗影的地位，容许负值。 2.Y轴偏移量：必须。垂直暗影的地位，容许负值。 3.暗影含糊半径：可选。含糊间隔，其值只能是正值，如果值为0，示意暗影没有含糊成果。 4.暗影扩大半径：可选。暗影的尺寸。 5.暗影色彩：可选。暗影的色彩。省略默认会彩色。 6.是否具备内暗影：可选。设置为inset时为外部暗影形式，若省略为外暗影形式。3.色彩： 3.1.CSS3 减少了对透明度的反对，应用 rgba()、hsla() 或 opacity 来设置。 rgba(R,G,B,A) R,G,B三个参数，正整数的取值范畴为：0-255。百分数值的取值范畴为0.0%-100%。A为透明度参数，取值在0-1之间，不可为负值。 例如：background-color:rgba(255,255,255,0.5);/*透明度为0.5的红色*/3.2.CSS3减少了突变色调。 liner-gradient(to bottom,#fff,#999)/*to bottom突变方向，前面两个参数示意色彩的起始点和完结点*/ 第一个参数为突变方向，能够用角度的关键词或英文来示意。 （1）0deg to top 从下向上 （2）90deg to right 从左向右 （3）180deg to bottom 从上向下 （4）270deg to left 从右向左 （5）to top left 从右下角到左上角 （6）to top right 从左下角到右上角 第二个和第三个参数，示意色彩的起始点和完结点，能够有多个色彩值。4.背景： ...

CSS3是层叠样式表的第三个版本，它引入了许多新的个性和性能，旨在加强网页款式的表现力和交互性。以下是一些CSS3新增的个性的简要概述： 1、边框和圆角： 通过border-radius属性，能够轻松实现元素的边框圆角成果，无需依赖额定的背景图片或简单的技巧。2、暗影和突变： CSS3新增了box-shadow属性，使得开发者能够间接通过CSS为元素增加暗影成果。此外，还引入了线性突变(linear-gradient)和径向突变(radial-gradient)等属性，容许开发者创立丰盛的突变背景成果。3、文字排版： CSS3为文字排版提供了一系列新的属性，如text-shadow（为文字增加暗影成果）、text-overflow（设置当文本溢出容器时的显示方式）、word-wrap（管制单词的换行形式）以及text-justify（调整文本的对齐和间距）等。4、媒体查问： CSS3的媒体查问性能使得开发者可能依据不同的设施或屏幕尺寸利用不同的款式，从而实现响应式布局和设计。这为挪动端适配提供了极大的便当。5、伸缩布局（Flexbox）： CSS3引入了伸缩布局模块，提供了一种灵便且高效的布局形式。通过Flexbox，开发者能够不便地实现元素的弹性布局，使得网页布局更加简洁、灵便和响应式。6、字体和多列布局： CSS3新增了@font-face规定，容许开发者在网页中引入自定义字体文件，从而丰盛了网页字体的抉择。同时，还引入了column-count和column-gap等属性，实现了多列布局的成果。7、过渡和动画： CSS3提供了transition和animation属性，使得开发者能够为元素增加过渡成果和动画成果，从而加强页面的交互性和生机。通过@keyframes，开发者还能够定义动画的关键帧和动画成果。8、变换和变形： CSS3反对2D和3D变换，通过transform属性，开发者能够对元素进行平移、旋转、缩放等变换操作。此外，还引入了filter属性，容许利用各种视觉效果和图像处理成果，如含糊、亮度、对比度等。这些新增的个性使得开发者可能更加灵便和高效地进行款式设计和布局，为网页带来更加丰盛的视觉效果和交互体验

CSS3 简介CSS的设计次要是为了实现文档内容与文档示意的拆散，包含布局、色彩和字体等方面。它还能够用于以不同的形式显示web页面，能够依据您的屏幕大小进行更改。对文档设计的更改能够疾速、轻松地利用。 什么是CSS?层叠样式表（CSS）是一种向Web文档增加款式（例如，字体，色彩，间距）的简略机制。 什么是CSS3?CSS3是CSS语言的最新倒退，旨在扩大CSS2.1。它带来了许多新性能和附加性能，如圆角，暗影，突变，过渡或动画，以及多列，灵便的框或网格布局等新布局。 边框(Border)该border-radius属性可用于创立圆角。此属性通常定义外边界边缘的角的形态。在CSS3之前，切片图像用于创立相当麻烦的圆角。 .box { width: 300px; height: 150px; background: #cff; border: 2px solid #fcc; border-radius: 20px; } <div class="box"></div>色彩(Color)CSS3减少了对作为元素设置色彩值的一些新的性能的符号rgba()，hsl()和hsla()。 rgba色彩的值能够应用rgba()性能符号在RGBA模型（红色-绿色-蓝色-alpha）中定义色彩。RGBA色彩模型是具备alpha通道的RGB色彩模型的扩大，用于指定色彩的不透明度。 alpha参数承受从0.0（齐全通明）到1.0（齐全不通明）的值。 h1 { color: rgba(0,0,255,0.5); } p { background-color: rgba(0%,0%,100%,0.3); } <h1>这是一个题目</h1> <p>这是一个段落</p>hsl色彩的值色彩也能够应用hsl()性能符号定义为HSL模型（色相-饱和度-亮度）。色相示意为色轮或圆形（即以圆形示意的彩虹）的角度（从0到360）。该角度以较少的单位数给出，因为该角度通常以度为单位进行度量，以至该单位隐含在CSS中 饱和度和亮度以百分比示意。100%饱和度示意全彩，并且0%是灰色暗影。然而，100%亮度为红色，0%亮度是彩色，50%亮度是失常的 h1 { color: hsl(360,70%,60%);}p { background-color: hsl(480,50%,80%);} <h1>这是一个题目</h1> <p>这是一个段落</p>hsla色彩值能够应用hsla()性能符号在HSLA模型（色调饱和度-亮度-alpha）中定义色彩。HSLA色彩模型是具备Alpha通道的HSL色彩模型的扩大，该Alpha通道指定了色彩的不透明度。 alpha参数承受从0.0（齐全通明）到1.0（齐全不通明）的值。 h1 { color: hsla(360,80%,50%,0.5);}p { background-color: hsla(480,60%,30%,0.3);} <h1>这是一个题目</h1> <p>这是一个段落</p>背景(background)background-size属性该background-size属性可用于指定背景图像的大小。在CSS3之前，背景图片的大小由图片的理论大小决定。背景图像的大小能够应用像素或百分比值，以及关键字来指定auto，contain和cover。不容许应用负值。 .box { width: 250px; height: 150px; background: url("images/sky.jpg") no-repeat; background-size: contain; border: 6px solid #333;} <div class="box"></div>留神：背景图片的原始大小为500x300像素，然而应用background-size CSS属性，咱们依然能够在较小的框中显示残缺的图片 ...

css3的新个性css3新增了很多新个性，如伪类选择器、属性选择器、边框款式、flex弹性布局、动画、色彩突变、@media响应式布局等 flex弹性布局flex全称Flexbox(弹性盒子布局)，flex是CSS3新增的一种布局模型，能够灵便、响应式的设置页面布局。flex能够为盒状模型提供最大的灵活性。依据父元素设置好的宽度/高度等一系列属性，子元素会依据父元素的宽度/高度来进行填充扭转，使元素在对齐、排列和散布变得更加不便。容器属性： display：设置为display: flex;或display: inline-flex;来定义一个弹性容器。flex-direction：指定主轴的方向，能够是row（程度方向）、row-reverse、column（垂直方向）、column-reverse。flex-wrap：管制我的项目在容器中是否换行，能够是nowrap（不换行）、wrap（换行）、wrap-reverse。justify-content：定义我的项目在主轴上的对齐形式，如flex-start、center、flex-end、space-between、space-around。align-items：定义我的项目在穿插轴上的对齐形式，如flex-start、center、flex-end、baseline、stretch。align-content：定义多根轴线的对齐形式，只有一根轴线时不起作用。我的项目属性： flex：设置我的项目的伸缩比例，能够管制我的项目在容器内的占比。flex-grow：定义我的项目的放大比例，默认为0，即不放大。flex-shrink：定义我的项目的放大比例，默认为1，即能够放大。flex-basis：定义我的项目在没有伸缩空间时的初始大小。align-self：定义单个我的项目在穿插轴上的对齐形式，笼罩容器的align-items属性。更多详情：https://www.cnblogs.com/qdhxhz/p/11953758.html案例： css* { padding: 0; margin: 0; list-style: none;}html,body { width: 100%; height: 100%;}.box { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; // 头部 .header { width: 100%; height: 50px; background: hotpink; } // 身材 .main { flex: 1; overflow: auto; background: salmon; } // 脚部 .footer { width: 100%; height: 50px; background: skyblue; }}html <!-- 引入css文件 --> <link rel="stylesheet" href="./index.css"> <!-- flex弹性布局 --> <div class="box"> <div class="header">头部</div> <div class="main">身材</div> <div class="footer">脚部</div> </div>效果图： ...

css3新增的个性1.选择器 例如: :nth-child、:first-of-type、:last-of-type2.边框与圆角 CSS3提供了更灵便的边框与圆角设置，如 borede-radius能够轻松地创立圆角成果3.背景与突变 CSS3引入了背景突变性能，包含线性突变和径向突变，使背景设计更加活泼。4.过渡 transition属性容许元素在状态扭转时平滑地过渡其属性值，如色彩、大小、地位等，提供简略的动画成果。5.变换 transform属性能够对元素进行旋转、缩放、歪斜和平移等操作，加强了页面的交互性和视觉效果。6.@media @media 是 CSS3 媒体查问的一部分，它容许开发者依据设施的特定条件（如宽度、高度、方向等）来利用不同的 CSS 款式。这使得开发者可能创立响应式网站，即网站可能依据用户设施的不同（如桌面电脑、平板电脑、手机等）主动调整其布局和款式，以提供最佳的用户体验。 例子:能够应用 @media 查问来确保一个元素在小屏幕设施上显示为一个块级元素，而在大屏幕设施上显示为一个行内元素。这能够通过编写相似上面的 CSS 代码来实现：7.flex弹性盒布局 flex 是 CSS3 引入的一个新的布局模式，称为弹性盒子布局，它不须要应用浮动和定位等传统布局技术。 CSS3动画CSS3的动画次要通过@keyframes规定和animation属性实现@keyframes规定 这个规定用于创立动画。你能够定义关键帧和过渡细节来管制动画的执行。例如，你能够设置动画开始时（0%或from）和完结时（100%或to）的款式，以及在动画过程中的其余关键帧的款式。animation属性是所有动画属性的简写属性，用于将动画绑定到选择器。你能够指定动画的名称、动画的时长、动画的提早、动画的迭代次数、动画的播放方向等。 上面是一个点单的动画事例

变量css模板：theme.scss //导入字体包@font-face { font-family: SYHTHea; src: url('../font/SourceHanSansSC-Heavy_0.otf'); font-weight: normal; font-style: normal;} @font-face { font-family: SYHTLgt; src: url('../font/SourceHanSansSC-Light_0.otf'); font-weight: normal; font-style: normal;} $background:#000000;我的项目中须要用到的变量式款式随时再此文件中减少reset.scss @import "./theme.scss"; // 对立浏览器默认规范盒子模型// 全局应用字体包html{ box-sizing: content-box; font-family: SYHTHea;}// 革除标签默认间距html,body,div,span,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0;}/* 旧版本浏览器对H5新标签兼容解决 */article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}// 革除标签默认款式ol,ul,li { list-style: none;}blockquote,q { quotes: none;}blockquote:before,blockquote:after,q:before,q:after { content: ""; content: none;}// 表格重置table { border-collapse: collapse; border-spacing: 0;}th,td { vertical-align: middle;}/* 全局自定义标签款式 */a { outline: none; text-decoration: none; -webkit-backface-visibility: hidden;}a:focus { outline: none;}input:focus,select:focus,textarea:focus { outline: -webkit-focus-ring-color auto 0;}// 滚动条款式::-webkit-scrollbar { width: 10px; height: 10px;}/*定义滚动条轨道 内暗影+圆角*/::-webkit-scrollbar-track { border-radius: 10px; background-color: rgba($color: #ffffff, $alpha: 0.7);}/*定义滑块 内暗影+圆角*/::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3); &:hover { background-color: rgba(0, 0, 0, 0.53); cursor: pointer; }}最初在main.js或者app.vue中援用就能够了import "./assets/styles/reset.scss"; ...

Features ■ Qualcomm Atheros QCN9074/QCN9024■ 6GHz, max 23dBm per chain, up to 4949Mbps■ Single Band 6GHz 4x4 WiFi 6E (802.11ax)■ 4 spatial streams (4SS)■ M.2 E Key Interface■ PCI Express 3.0 InterfaceQCN9074 and QCN9024 are both model numbers of Qualcomm's system-on-chip (SoC) products, which are used in mobile devices such as smartphones and tablets. The QCN9074 is a newer and more advanced SoC compared to the QCN9024. It is based on the 5nm manufacturing process and has a more powerful CPU and GPU, as well as better support for advanced connectivity features such as Wi-Fi 6E and 5G. ...

IPQ4019 and IPQ4029 are both system-on-chips (SoCs) developed by Qualcomm for use in networking devices such as routers, gateways, and access points. While they share some similarities, there are a few key differences between the two. Here are some of the differences between IPQ4019 and IPQ4029:CPU and GPU: The IPQ4019 has four cores running at a clock speed of up to 717 MHz, while the IPQ4029 has four cores running at a clock speed of up to 2.2 GHz. The IPQ4029 also has a more powerful GPU (Adreno 610) compared to the IPQ4019 (Adreno 304). ...

最近思考了一下如何实现网站主题色彩切换，解决方案就是应用css变量。现在网站开发过程中css变量被应用到的频率越来越高，而且 Element plus 也是用 css 变量来重构了简直所有组件的款式零碎。CSS 变量是一个十分有用的性能，简直所有浏览器都反对。 这篇文章就来说一下css变量的应用形式。 全局作用域下的css变量通常的最佳实际是定义在根伪类 :root 下，这样就能够在 HTML 文档的任何中央拜访到它了： :root { --main-bg-color: brown;}<!-- 在须要的元素中应用 -->element { background-color: var(--main-bg-color);}这样定义一系列的变量后，就意味着能够动静批改它们。上面是通过 js 管制 css 变量，能够这样做： // 获取全局 css 变量getComputedStyle(document.documentElement).getPropertyValue(`--main-bg-color`)// 设置 css 变量document.documentElement.style.setProperty('--main-bg-color', 'red')部分应用css变量.div200 { --main-bg-color: #000; height: 100px; background-color: var(--main-bg-color); margin-top: 20px;}如果您想要通过 js 管制某个元素的 css 变量，能够这样做： // 获取某个标签上的css变量getComputedStyle(document.querySelector('.div200')).getPropertyValue('--main-bg-color')// 设置 css 变量document.querySelector('.div200').style.setProperty('--main-bg-color', '#fff')具备了这些条件，动静切换网站主题大略就是这样的思路。 如果你应用的是vue3技术栈，还有更加优雅的形式来操纵css变量，useCssVar | VueUse。 文章首发于我的博客-《css变量实现动静扭转主题色》

这是我在冲浪的时候，看到的一个款式，分享给大家，Css真的想象力太丰盛了。这个滚动的下划线，还真想不出是背景色做的。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .title { width: 800px; color: #333; line-height: 50px; } .title span { background: linear-gradient(to right, #1890ff, #fa541c) no-repeat right bottom; background-size: 0 4px; transition: background-size 1500ms; } .title span:hover { background-position-x: left; background-size: 100% 2px; } </style></head><body> <h2 class="title"> <span>10年来，中国特色大国内政以元首内政为引领，以推动构建人类命运共同体为主线，应变局，解困局，翻新局， 为保护世界战争、促成独特倒退作出了新的奉献。</span> </h2></body></html>

Grid简介CSS Grid Layout(又叫Grid或者CSS Grid)，它是一个二维网格的布局零碎。在这之前通过了tables,float,positioning和inline-block,但它们都相当于一个hack，并且性能较少。Flex布局尽管是一个很棒的布局工具，但它是一维的，只能离开操作行和列。 Grid术语Grid Container(容器)当你对一个元素设置了display:grid后，它就是一个grid容器,如下: <style> .container { display: grid }</style><div class="container"> <div class="item item-1"> </div> <div class="item item-2"> </div> <div class="item item-3"> </div></div>Grid Item(我的项目)同样沿用下面的代码，在设置grid容器后，该容器的所有间接子标签都是grid我的项目。这和flex布局是一样的 Grid Line(网格线)它是形成grid布局的分界线。它们既能够是程度的(row grid lines)也能够是垂直的(column grid lines) Grid Cell（网格单元）由两条相邻的row grid lines（行）和两条相邻的column grid lines(列)组成的一个单元 Grid Track（网格轨道）两条相邻网格线之间的空间。能够把它们看成网格的列或行。这里是第二行和第三行网格线之间的网格轨道 Grid Area(网格域)由四条网格线组成的总空间，它能够由任意数量的grid cells组成 CSS Grid 容器中可用的属性display定义一个元素作为grid container并创立一个单列多行的grid formatting context(网格格式化上下文GFC), 行数由容器内的子元素(包含微元素和文本节点)决定 值： grid - 生成一个块级gridinline-grid - 生成一个内联grid display: grid | inline-gridgrid-template-columns 、 grid-template-rows该属性定义的网格是一个显式网格, 应用grid-template-columns和grid-template-rows属性定义网格的行和列（网格轨道）, 都应用 空格分隔多个数值, 这些值代表网格轨道的大小，而且数值间的空格代表网格线 比方在容器上只显式设置grid-template-columns，那么grid-template-rows则默认为auto <style> * { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 180px 20% auto 1fr 10vw; } .item { height: 100px; } .item1 { background: #e7c98c; } .item2 { background: #a21eee; } .item3 { background: #e690dd; } .item4 { background: #a7b7c7; } .item5 { background: #23cccc; } .item6 { background: #5fddc3; } </style> <div class="container"> <div class="item item1">grid cell 1</div> <div class="item item2">grid cell 2</div> <div class="item item3">grid cell 3</div> <div class="item item4">grid cell 4</div> <div class="item item5">grid cell 5</div> <div class="item item6">grid cell 6</div> </div>成果如图：则示意定义了一个5列N行的网格，行将网格容器分为5列，每列宽度别离为180px,20%,auto,1fr,10vw等不同单位的值。 ...

1、图片文字盘绕 shape-outside 是一个容许设置形态的 CSS 属性。它还有助于定义文本流动的区域 .any-shape { width: 300px; float: left; shape-outside: circle(50%);}圆形：shape-outside: circle(50%); //第一个值代表半径椭圆：shape-outside: ellipse(60px 80px); //第一个值代表半径；第二个值代表半径多边形：shape-outside: polygon(0 0,100% 100%,0 100%);（三角形）shape-outside: polygon(100px 0,200px 60px,200px 120px,100px 200px,0 120px,0 60px);（六边形）//起码3个值，也就是说，至多要3个点组成一个三角形，每个点有x，y方向挪动的两个值（均从左上方开始挪动） 2、:where() 简化代码 原：.parent div,.parent .title,.parent #article { color: red;}改：.parent :where(div, .title, #article) { color: red;}3、实现平滑滚动 但凡须要滚动的中央都加一句scroll-behavior:smooth 来晋升滚动体验！a、常常应用的锚点定位性能就有了平滑定位性能，如<a href="#">返回顶部</a>b、全局css中也倡议增加html, body { scroll-behavior:smooth; }4、背景混合模式 .blend-2 { background-image: url(../xx/xxx.jpg); width: 100vw; height: 500px; background-color: #20126f; background-size: cover; background-blend-mode: overlay;}background-blend-mode分为如下几种模式 normal：默认值。设置失常的混合模式multiply：正片叠底模式screen：滤色模式overlay：叠加模式darken：变暗模式lighten：变亮模式color-dodge：色彩减淡模式saturation：饱和度模式color：色彩模式luminosity：亮度模式5、图像填充文字效果 background-clip 属性规定背景的绘制区域border-box：以盒边界来裁剪padding-box：以内边距为边界来裁剪content-box：以内容区域来裁剪回归主题：background-clip: text; 顾名思义 就是 以文字的范畴来裁剪背景图片h1 { background-image: url('./flower.jpg'); background-clip: text; -webkit-background-clip: text; color: transparent; background-color: white;} ...

如果有关注我的 Twitter 的敌人应该看到了，我上周末钻研了两天 AI 画图，当初用 Ai 做图太强了，上周又降级 Stable Diffusion 玩了一下，和我去年试的时候相比弱小了好多，而且插件LoRA模型玩法都还在疾速迭代，Midjourney 也能够在理论工作上用失去。我也会持续在 Twitter 上公布一些相干的内容，有空的话我会独自整顿一期 AIGC 相干的内容。 这期内容我终于把 Twitter 私信自荐的内容整顿了一下，很多产品都很有意思，能够尝试看看。 本周刊记录乏味好玩的独立产品设计开发相干内容，每周公布，往期内容同样精彩，感兴趣的搭档能够点击订阅我的周刊。为保障每期都能收到，倡议邮件订阅。欢送通过 Twitter 私信举荐或投稿。 作者自荐产品1. Tico-贴抠作者 @lijing_1003 是一个偏iOS平台的集体独立开发者 。上个月刚上架了一款拼贴图App，名字叫“Tico贴抠”。这款App外围性能是利用iOS16下iPhone相册的抠图个性，将抠图素材拖拽到App画布上，并进行后续编辑丑化。反对有限次抠图并拖拽，能够对抠图增加描边、投影、滤镜等成果。对于想要疾速制作拼贴图（如封面图、穿搭图等等）的用户，Tico应该是一款不错的便捷工具。 2. OpenSoul Voice Diary这是一款不便用户用声音记录日记的 APP，这个利用的次要特点是容许用户应用他们的声音记录他们的想法、感触和日常生活的事件，从而创立一个有声的日记。它能够帮忙用户更容易地表白本人，并提供一种更加天然和直观的日记记录形式。 该应用程序还具备一些其余性能，例如能够在日记中增加图片，创立标签以便于组织和搜寻，设置揭示来揭示用户记录日记等等。用户还能够应用该应用程序中的文本转换性能将其录制的语音转换为文字。 此外，这是一个付费APP，利用的开发者 @opensoul_me 在推特上私信给我发了50个兑换码，有趣味体验的敌人能够兑换尝试一下：兑换码在这里：Opensoul - promo codes。 3. ToMemo - 多功能快捷键盘的内容整顿利用作者@le0zh0u 开发了 ToMemo 和海螺笔记两款软件。自荐一下ToMemo，能够看成ios中懒人短语 + 快捷键盘 + 剪切板历史的合体，然而有一些本人的想法和思考。针对扩大键盘做了较多的优化，心愿能够成为近程键盘使用者对性能扩大的场地。过年期间也开始集成短语合集「新年祝愿」，让用户能够在过年期间疾速发送祝愿文案。利用主体性能都是收费的，进阶版次要给个性化需要和高级性能需要的用户购买应用。更多介绍能够在官网看。 4. 寻隐-用文字找照片作者@immazzystar 已经是一个算法工程师，当初在做独立开发，最近的产品名叫Queryable，是一个离线的文字相册搜寻工具，你能够用任何长度的「句子」来搜寻你相册里最靠近的照片(如："蓝色雨衣女孩在雨中行走")。它仅在本地运行，不会拜访网络，你能够敞开网络权限。曾经有可用的中文模型了。也被「少数派」和「差评」举荐，iOS 16.0，iPhone 11及以上的机型。 5. vibee-scene playlist widget作者 @BigBigChampagne 大香槟自荐一下vibee，是一款主打场景歌单的小组件app，基于apple music，将来会增加spotify。咱们最近也取得了中国区app store的编辑举荐。设计的十分不错，颜值很高。 6. Teach Anything作者 @lvwzhen 最近做了一款基于OpenAI接口的产品：Teach Anything ，用简略的例子解释简单问题。自从有了小孩后，每天总有各种十万个为什么的问题。发现 AI 很适宜用于这个教育方向，所以做了一个简略的小工具，欢送大家试用。 7. straw.page作者 @okozzie_ 自荐，这是一个在手机上就能用的网站创立器，很乏味，能够看看他的视频介绍。 8. FeboxFEBOX 是一款跨平台的内容珍藏，能够永恒保留所有网页、图片、选区、链接等资源 目前已上架Chrome和Edge利用市场。做的很残缺的一个产品了。 为什么开发这个产品？常常穿插应用各个浏览器或者不同的电脑，无奈对立保留本人的书签。 保留的内容很长时间不关上，再次应用时原链接曾经生效，无处可查。 心愿有个跨平台的云书签能主动保留我所有的珍藏内容，无用内容荡涤，主动归档。 在心愿查找问题时，心愿优先查找我已经珍藏过的内容，未找到再去浏览器搜寻。 ...

css3属性currentColor明天在日常开发中遇到了一个需要，须要切换伪类的背景色。而后我尝试了各种方法，甚至用到了css的变量法都没能实现，而后我就找小伙伴去聊这个问题，看看他有没有什么好办法。他给我提供了两个计划：1.继承父级的背景色2.用currentColor，继承父级的文字色彩currentColor 当我看到currentColor时，一脸的问号？？？ 这货是啥，vue貌似没有这个参数吧。 而后我简略谷歌了一下，what，这个货色好，我喜爱。简略介绍一下 currentColor, 他是css3属性，能够继承最近的父级的color属性, 兼容性也不错，ie9+以上都能够，基本上市面上支流浏览器都能够了。 接下来介绍一下如何应用 .father { color: red;}.father::after { background: currentColor;}是不是很简略？ 对，就是这么简略，只有更改父级的color属性，那么伪类就能够继承父级的color色彩了。这样咱们就能够动静的更改伪类的色彩了。 本文参加了SegmentFault 思否写作挑战赛，欢送正在浏览的你也退出。

不想搞那么简单了，间接来步骤吧。 1，关上装修后盾2，按下F12，进入代码查看器3，在代码界面，按下F键查找：.tshop-pbsm-shop-self-defined 这个类4，只复制英文字母，而后看到第1个，记住是第1个5，而后在左边的款式栏目能够看到这个类的款式5，增加这个款式：height：200px6，回到装修界面，而后能够看到有模块呈现了7，over，代码呈现了

炫酷的玻璃状态按钮的制作<font color=white>作者:博哥 工夫:2023-01-18</font>### 一.前置常识HTMLCSS3### 二.案列成果## 三.重要参数筹备1.页面背景色 --background-color: #350048;2.父容器宽度 --container-width: 600px;3.按钮宽度 --bth-width: 155px;4.按钮高度 --btn-height: 50px;5.按钮背景色 --btn-a-background-color: rgba(255,255,255,0.05);6.按钮暗影色 --btn-a-box-shadow: 0 15px 35px rgba(0,0,0,0.2);7.按钮边框色彩 --btn-a-border-top-color:rgba(255,255,255,0.1);8.按钮圆角 --btn-a-border-radius:30px;9.按钮字体色彩 --btn-a-color: #fff;10.按钮为元素 背景色 --btn-a-before-background-color:rgba(255, 255, 255, 0.15) 11.按钮背景伪元素的宽高 --btn-before-background-width:30px;--btn-before-background-height:10px;--btn-after-background-width:30px;--btn-after-background-height:10px;12 鼠标挪动时按钮背景伪元素宽高 height: 50%;width: 80%;13 伪元素背景色和暗影 1.背景1background: #ff1f71;box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71, 0 0 60px #ff1f71;2.背景2background: #2bd2ff;box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff, 0 0 60px #2bd2ff;3.背景3background: #1eff45;box-shadow: 0 0 5px #1eff45, 0 0 15px #1eff45, 0 0 30px #1eff45, 0 0 60px #1eff45;undefined}undefined ## 四.具体实现步骤思路解析>观看B站教程博哥教你疾速实现毛玻璃发光按钮制作_哔哩哔哩_bilibili

1，文本行数限度.add-text-row-limit(@row) { overflow: hidden; text-overflow: ellipsis; .create(); .create() when (@row > 1) { display: -webkit-box; -webkit-line-clamp: @row; -webkit-box-orient: vertical; } .create() when (@row = 1) { white-space: nowrap; }}1.1，应用p { .add-text-row-limit(1);}2，三角箭头.add-triangle-arrow(@position, @size, @bk-color, @arrow-direction: @position) { position: absolute; content: ''; border: @size solid transparent; .create(); // 高低 .create() when (@position = top) { left: 50%; top: 0; transform: translate(-50%, -100%); } .create() when (@position = bottom) { left: 50%; bottom: 0; transform: translate(-50%, 100%); } .create() when (@arrow-direction = top) { border-bottom-color: @bk-color; border-top: 0; } .create() when (@arrow-direction = bottom) { border-top-color: @bk-color; border-bottom: 0; } // 左右 .create() when (@position = left) { top: 50%; left: 0; transform: translate(-100%, -50%); } .create() when (@position = right) { top: 50%; right: 0; transform: translate(100%, -50%); } .create() when (@arrow-direction = left) { border-right-color: @bk-color; border-left: 0; } .create() when (@arrow-direction = right) { border-left-color: @bk-color; border-right: 0; }}2.1，应用：div::after { .add-triangle-arrow( 箭头的地位: left | right | bottom | top, 箭头大小: 5px, 箭头色彩: blue, 箭头方向?: left | right | bottom | top, );}3，媒体查问@pad-screen: 768px;@iPad-pro-screen: 1024px;@screenDeviation: 0.1;.phone(@content) { @media screen and (max-width: (@pad-screen - @screenDeviation)) { @content(); }}.phoneOrPad(@content) { @media screen and (max-width: @iPad-pro-screen) { @content(); }}.ipad(@content) { @media screen and (min-width: @pad-screen) and (max-width: @iPad-pro-screen) { @content(); }}.notIpad(@content) { @media screen and (max-width: (@pad-screen - @screenDeviation)), screen and (min-width: (@iPad-pro-screen + @screenDeviation)) { @content(); }}.pcOrPad(@content) { @media screen and (min-width: @pad-screen) { @content(); }}.pc(@content) { @media screen and (min-width: (@iPad-pro-screen + @screenDeviation)) { @content(); }}3.1 应用div { .phone({ font-size: 15px; });}

成果如图： 能够移入开展。 特色：1，带有箭头2，箭头处带有暗影3，有交互操作 箭头，能够用border来实现： width: 0;height: 0;border: 190px solid transparent;border-left: 60px solid transparent;援用可用box-shadow实现，然而如果是贴合非规定图形的暗影，能够用到滤镜： filter: drop-shadow(5px 0 5px rgba(0, 0, 0, .2));交互：以后放大，其余兄弟节点渐入通明 .parent{ .child{ opation: 1 } &:hover{ .child{ opation: .2; &:hover{ opation: 1 } } }}代码：vue3demo.vue <template> <div class="step"> <div class="item" v-for="item in list"> <div class="content"> <h2> <Ellipsis> {{ item.count }} <small>项</small> </Ellipsis> </h2> <h3> <Ellipsis> {{ item.title }} </Ellipsis> </h3> <Ellipsis class="desc"> {{ item.desc }} </Ellipsis> </div> </div> </div></template><script setup>const list = [ { count: 13, title: '测试的题目啊', desc: '测试的内容测试的内容' }, { count: 17, title: '测试的题目啊', desc: '测试的内容测试的内容' }, { count: 12, title: '测试的题目啊', desc: '测试的内容测试的内容' }, { count: 38, title: '测试的题目啊', desc: '测试的内容测试的内容' },]</script><style scoped lang="scss">.step { display: flex; align-items: stretch; overflow: hidden; position: relative; .item { width: 25%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; position: relative; height: 375px; color: #fff; filter: drop-shadow(5px 0 5px rgba(0, 0, 0, .2)); z-index: 0; transition-duration: .3s; cursor: default; .content { position: absolute; left: 0; top: 0; z-index: 0; transition-duration: .3s; height: 100%; width: 100%; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding-left: 20%; } &:before { content: ''; display: block; position: absolute; z-index: 0; width: 0; height: 0; right: -249px; border: 190px solid transparent; border-left: 60px solid transparent; pointer-events: none; } &:nth-child(1) { background-color: #7C97CA; z-index: 3; &:before { border-left-color: #7C97CA; } } &:nth-child(2) { background-color: #5F7CB2; z-index: 2; &:before { border-left-color: #5F7CB2; } } &:nth-child(3) { background-color: #5771A0; z-index: 1; &:before { border-left-color: #5771A0; } } &:nth-child(4) { background-color: #294A87; z-index: 0; } h2 { font-size: 80px; font-weight: bold; color: #FFFFFF; line-height: 117px; margin: 0; transition-duration: .3s; small { font-size: 28px; font-weight: 400; color: #FFFFFF; line-height: 45px; transition-duration: .3s; } } h3 { font-size: 36px; font-weight: 400; color: #FFFFFF; line-height: 56px; margin: 0; transition-duration: .3s; } .desc { margin-top: 14px; font-size: 24px; font-weight: 300; color: #FFFFFF; line-height: 33px; transition-duration: .3s; } }}.step { &:hover { .item { .content { opacity: .1; } &:hover { width: 40%; .content { padding-left: 30%; opacity: 1; } h2 { font-size: 100px; small { font-size: 32px; } } h3 { font-size: 40px; } .desc { font-size: 24px; } } } }}</style>

CSS3中采纳弹性盒中弹性我的项目的压缩规定默认状况下，当弹性盒空间有余时，弹性我的项目会相应压缩，当具体的压缩规定是什么呢？咱们来看一个示例 <style> .contain { width: 300px; height: 300px; background: red; display: flex; } .item1 { width: 200px; height: 200px; background: green; flex-shrink: 1 } .item2 { width: 400px; height: 200px; flex-shrink: 2; background: blue; }</style><body> <div class="contain"> <div class="item1"></div> <div class="item2"></div> </div></body>失去的后果是item1的宽度为140px,item2的宽度为160px,也就是说，item1的压缩值是60px，item2的压缩值为240px。压缩值算法如下： 加权值 = 每个弹性我的项目的理论内容宽度 * 压缩比例 之和压缩值 = 弹性我的项目的理论内容宽度 压缩比例 弹性盒超出宽度 / 加权值 将下面的示例来演算一下：弹性盒超出宽度 = 200 + 400 - 300 = 300加权值 = 200 1 + 400 2 = 1000item1压缩值 = 200 1 300 / 1000 = 60item2压缩值 = 400 2 300 / 1000 = 240 ...

什么是BFC首先，什么是FC，FC的全称是 Formating Context（格式化上下文）。元素在规范流外面都是一个FC，例如 div,p 标签等都是属于一个FC。 看一下W3c的文档对规范流和formatting context的解释9.4 Normal flow Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context. 简而言之 块级元素的布局是属于BFC(Block Formatting Context)行内级元素的布局是属于IFC(Inline Formatting Context)那么咱们能够了解为，块级元素布局的上下文环境就是BFC,它就是一个大箱子，与外部环境隔离 造成BFC条件（间接照搬MDN）创立新的块格局上下文<html> 元素不是惟一可能创立块格局上下文的元素。任何块级元素都能够通过利用某些 CSS 属性来创立一个 BFC 除了文档的根元素 (<html>) 之外，还将在以下状况下创立一个新的 BFC： 应用float 使其浮动的元素相对定位的元素 (蕴含 position: fixed 或position: sticky应用以下属性的元素 display: inline-block表格单元格或应用 display: table-cell, 包含应用 display: table-* 属性的所有表格单元格表格题目或应用 display: table-caption 的元素块级元素的 overflow 属性不为 visible元素属性为 display: flow-root 或 display: flow-root list-item元素属性为 contain: layout, content, 或 strictflex items网格布局元素multicol containers元素属性 column-span 设置为 all总结一下：html是一个BFC, 然而body不是一个BFC，overflow属性除了visible外都是一个BFC ...

那天尝试应用Lightly的HTML在线编辑器在iPad上编程，成果切实太惊艳啦！从导入素材到预览网页成果，我素来没想过在iPad上竟然还能够文本高亮和主动填充，编程体验曾经齐全能够媲美电脑了。 在这篇教程中，咱们次要在iPad上演示HTML在线编辑器的成果，大家能够依据本人的爱好随便抉择其余平板或笔记本电脑作为编程设施哦！另外，这篇文章须要肯定的 HTML 和 CSS 编程根底。之前从未接触 HTML 和 CSS 编程的小伙伴，能够查看咱们的一些入门文章：HTML制作可切换主题的简略网页 教程素材和源代码传送门：https://03c306cbfb-share.ligh... 先来看看网页的预期成果： 关上Lightly的HTML在线编辑器后，咱们能够在我的项目面板上新建HTML我的项目，而后再从左侧我的项目栏中上传所须要的素材。间接应用素材和代码包关上我的项目快照的小伙伴，也能够点击“复制我的项目”把整个我的项目的所有内容复制到本人的我的项目面板中。 如果是间接新建空白我的项目的小伙伴，大家关上我的项目后会发现外面曾经内置了 Hello World 的根底模板。点开 HTML 文件后，能够间接在 IDE 内的屏幕右侧预览网页成果，在 iPad 中也能够间接上传设施中的文件。 因为网页页面其实很简洁，HTML 文件其实很简略，咱们只须要专一 <body> 标签的局部就能够了。咱们这次做的首页能够分为两个局部：顶端的导航栏和首页内容。 导航栏局部咱们持续把导航栏的内容细化，放到 <div> 标签分类标签里。<div> 的英语全称是 division，即分区。咱们能够通过 class 来给分区命名，而后在 CSS 中调整参数。 在导航栏中，咱们别离放入网页 LOGO、导航链接文本和购物车图标。其中，<nav> 标签即导航栏标签，咱们能够在外面设置清单和链接文本。 <div class="container"> <div class="navbar"> <img src="asset/logo.png" class="logo"> <nav> <ul> <li><a href="">首页</a></li> <li><a href="">对于</a></li> <li><a href="">合集</a></li> <li><a href="">类型</a></li> </ul> </nav> <img src="asset/cart.png" class="cart"> </div>在 Lightly 中，咱们只须要打出局部关键字，就能够应用 Tab 来主动填充代码。在 iPad 上也能够哦！ 实现 HTML 的局部后，咱们转到 CSS 文件调整页面的元素。这时候，咱们方才所应用的 div 分类名称就能派上用场了。 ...

周末浏览codepen时发现一个不错的动画交互成果，如上图所示，有一个多个色彩的嵌套圆形追随鼠标挪动，且和文字造成不同的反差色，交互成果给人眼前一亮的感觉，本文将开展阐明其实现过程。 动画成果合成基于下面的动画效果图能够次要合成为以下几块内容： 有一个三种色彩的嵌套圆形嵌套圆形追随鼠标挪动圆形挪动过程中和文字产生反差色成果圆形挪动过程中随同弹性成果后面两个性能点实现较为简单，前面两个性能点须要对相干知识点有肯定的理解，实现起来绝对较快，接下来进入代码实现过程。 代码实现实现三个圆形嵌套就三个div即可，此处款式应用SCSS，写法绝对简洁，应用@each函数循环解决，代码如下： <div class="shapes"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape shape-3"></div></div>scss .shapes { position: relative; height: 100vh; width: 100vw; background: #2128bd; overflow: hidden;}.shape { position: absolute; border-radius: 50%; $shapes: (#005ffe: 650px, #ffe5e3: 440px, #ffcc57: 270px); @each $color, $size in $shapes { &.shape-#{index($shapes, ($color $size))} { background: $color; width: $size; height: $size; margin: (-$size/2) 0 0 (-$size/2); } }}到此一个简略的多个圆形嵌套的图形就进去了。 而后就是让该图形追随鼠标挪动起来，这里只须要监听鼠标挪动事件即可实现。上面的 cursor 是核心的原点， shape 则是三个圆形。 const cursor = document.querySelector('.cursor')const shape = document.querySelectorAll('.shape')document.body.addEventListener("mousemove", evt => { const mouseX = evt.clientX; const mouseY = evt.clientY; cursor.style = `transform: translate(${mouseX}px, ${mouseY}px);` shape.forEach(item => { item.style = `transform: translate(${mouseX}px, ${mouseY}px);` })})接下来实现圆形和文字的反差色成果，这里用到了CSS3中的混合模式 mix-blend-mode 中的混合模式 screen，中文翻译为“滤色”，计算公式如下： ...

css -层叠样式表 -网页理论是一个多层的构造，通过css能够别离为网页的每一个层来设置款式，而最终只看到最下面一层。 -是用来设置网页中元素的款式 第一种形式（内联款式，行内款式）： 在标签外部通过style属性来设置元素的款式 毛病：款式只能对一个标签失效，必须每个标签复制，开发时相对不要应用内联款式例：<p style="color:red;font-siza:60xp">少小离家老大回</p> 第二种形式（外部样式表） 将款式编写到head中的style标签里 通过css选择器选中元素并为其设置各种款式，整体设置页面，全副利用 毛病：只能在一个网页起作用，不能跨页面应用例：<style> p{ color:green; font-size:60px; } </style> 第三种形式（内部款式） 跨页面应用办法：在文件名里面新建一个文件，名为xx.css,后缀肯定要.css ---->而后写入 p{ color:green; font-size:60px; } ------>而后在原文件用link标签援用 <link rel="stylesheet" href="./xx.css"> 益处：能够应用浏览器的缓存机制，从而放慢网页的加载速度，进步用户体验link标签： 属性： rel援用样式表 css href援用门路

QCN9074 802.11ax 4x4 2.4GHz wifi6 QCN9074 11ax 4x4 MU-MIMO 2.4G M.2 WiFi 6 (802.11ax) 4×4 MU-MIMO 2.4GHz QCN9074 Single Band Wireless Module DR9074-2.4G(PN01.1) https://www.wallystech.com/Ne... MT7915/MT7975/IPQ6000/IPQ6018/IPQ6010/IPQ4019/IPQ4029/ipq4018/IPQ8072/IPQ8074/QCN9074/QCN9072/QCN9024/IPQ5018/BY:Wallys Communications (Suzhou ) Co., LTDEMAIL:sales3@wallystech.com Product Description 9074-2.4G (PN01.1) based on IPQ9074 Chipset is an enterprise wireless moduleintegrated with 4×4 MU-MIMO 2.4GHz Single Band Wireless Module designed specifically toprovide users with mobile access to high-bandwidth video streaming, voice, and datatransmission for office and challenging RF environment in factories, warehousesestablishment. ...

Scss是Sass3版本当中引入的新语法个性，齐全兼容css3的同时继承了Sass弱小的动静性能。scss文件能够编译为css文件，上面咱们来看一下将scss编译为css的办法。 咱们能够应用node来将scss编译为css。上面咱们来看一下应用node将scss编译为css的办法。 应用nodejs的npm包装置sass 1、装置sass npm install sass2、应用以下命令将scss编译为css sass style.scss style.css3、sass提供四种编译选项 nested：嵌套缩进的css代码，它是默认值。expanded：没有缩进的、扩大的css代码。compact：简洁格局的css代码。compressed：压缩后的css代码。生产环境当中，个别应用最初一种办法 sass --style compressed style.scss style.css也能够通过sass监听某个文件或目录，一旦原文件有变动，就会主动生成编译后的版本 sass --watch sass/style.scss:css/style.css

正式开始文章前，先看图，看到以下图片你会想到什么呢？是不是程序员的标配来了，格子衫。没错，明天的内容就是用CSS画格子。 前言看到下面各种各样的格子，你会用什么形式实现呢？因为格子的大小间隙及方向多变，不能每次都创立很多的元素实现，那么就没有施展到CSS的弱小实力了，以上每个格子格调都只须要一个元素承载，剩下的交给CSS吧。 认真看格子尽管有不同的模式，然而是有法则的反复的，比方第一个格子咱们能够拆解为以下两块组成。 这样看是不是就清晰多了，咱们只须要写入多个条纹笼罩在一起即可。怎么实现条纹的款式呢？那就进入到咱们文章的正题。 实现CSS repeating-linear-gradient() 函数，用于创立反复的线性突变 "图像"，基于此函数咱们就能够画出格子的款式了。先看看语法： background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);参数名形容angle定义突变的角度方向。从 0deg 到 360deg，默认为 180deg。side-or-corner指定线性突变的起始地位。由两个关键字组成：第一个为指定程度地位(left 或 right)，第二个为指定垂直地位（top 或bottom）。 程序是随便的，每个关键字都是可选的。color-stop1, color-stop2,...指定突变的起止色彩，由色彩值、进行地位（可选，应用百分比指定）组成。那么咱们下面第一幅图片的款式就能够按上面的写法: background: repeating-linear-gradient(#8ae8ff80 0 17%, transparent 0 28%);留神点，每一个后续的反复的条纹的起止地位要蕴含上一个条纹的地位，不然就会呈现突变色彩。两幅图联合的格子款式最终repeating-linear-gradient代码如下： background:repeating-linear-gradient(to right, #998aff80 0 16%, transparent 0 28%), repeating-linear-gradient(#8ae8ff80 0 17%, transparent 0 28%);整体代码HTML<div class="patterns"> <div class="plaid"> </div> <div class="plaid"> </div> <div class="plaid"> </div> <div class="plaid"> </div> <div class="plaid"> </div> <div class="plaid"> </div> <div class="plaid"> </div> <div class="plaid"></div></div>CSS$white:#ffffff80; //white$clr1:#998aff80; //purple$clr2:#8ae8ff80; //baby blue$clr3:#fffeb580; //yellow$clr4:#ff6eff50; //pink$clr5:#9cffe480; //green$clr6:#ffd49c80; //orange$clr7:#ff8a8d80; //red$clr8:#3850eb50; //blue*{ margin:0; box-sizing:border-box;}body{ height:100vh; display:flex; align-items:center; justify-content:center;}.patterns { height:100%; width:100%; display:grid; grid-template-columns: repeat(4,1fr); border:15px solid white; }.plaid { margin:15px;}// plaid styles counter clockwise.plaid:nth-child(1){ background:repeating-linear-gradient(to right, $clr1 0 16%, transparent 0 28%), repeating-linear-gradient($clr2 0 17%, transparent 0 28%);}.plaid:nth-child(2){ background: repeating-linear-gradient(45deg, transparent 0 8%, $clr3 0 14%),repeating-linear-gradient(-45deg, $white 0 6%, $clr4 0 14%), repeating-linear-gradient(-45deg, transparent 0 2%, $clr8 0 4%);}.plaid:nth-child(3){ background:repeating-linear-gradient($clr5 0 5%, transparent 0 13.6%) ,repeating-linear-gradient(to right, $clr6 0 10%, $white 0 13.6% ); }.plaid:nth-child(4){ background: repeating-linear-gradient(45deg, $clr7 0 3%, transparent 0 6%),repeating-linear-gradient(-45deg, $clr8 0 3%, $white 0 6%);}.plaid:nth-child(5){ background: repeating-linear-gradient(45deg, transparent 0 10%, $clr5 0 12%),repeating-linear-gradient(-45deg, transparent 0 12%, $clr7 0 20%), linear-gradient(45deg, transparent 0 10%, $clr2 0 25%, transparent 0 45%, $clr2 0 55%, transparent 0 70%, $clr2 0 100%) ;}.plaid:nth-child(6){ background:repeating-linear-gradient(to right, $white 0 15%, $clr5 0 45%), repeating-linear-gradient(transparent 0 15%, $clr8 0 45%), repeating-linear-gradient(to right, transparent 0 20%, $clr8 0 25%);;}.plaid:nth-child(7){ background: repeating-linear-gradient(45deg, $clr2 0 5%, transparent 0 15%),repeating-linear-gradient(-45deg, $clr4 0 12%, $white 0 25%),repeating-linear-gradient($clr2 0 12%, $white 0 25%);}.plaid:nth-child(8){ background: repeating-linear-gradient( to right, $white 0 10%, transparent 0 20%),repeating-linear-gradient( $clr2 0 7%, transparent 0 10%),linear-gradient( to right, $clr8 0 70%, $clr6 0 100%);}最初看到最初是不是感觉很简略，连忙试试看吧，画出属于咱们程序员的各种格子成果进去吧。如果感觉有用，点赞，关注，珍藏起来，说不定哪天就用上啦~ ...

css flex 容器盒子总结(很有用，工作中常常用到) display: flex (块布局)| inline-flex(行内布局);flex-direction: row(默认值) | row-reverse | column | column-reverse;决定主轴的方 向(即我的项目的排列方向)flex-wrap: nowrap(默认值) | wrap | wrap-reverse; 决定容器内我的项目是否可换行flex-flow: 这个属性根本没啥用justify-content： flex-start(左对齐-默认值) | flex-end(右对齐) | center(居中) | space-between(两端对齐)|space-around(每个我的项目两侧的距离相等); 定义了我的项目在主轴的对齐形式。align-items：flex-start(穿插轴终点对齐)| flex-end(穿插轴起点对齐) | center (穿插轴中点对齐)| baseline(我的项目的第一行文字的基线对齐) | stretch(若子项目无设置高度，则100%占满容器高度, (默认值)); 定义了我的项目在穿插轴上的对齐形式align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值); 多根轴线的对齐形式，如果我的项目只有一根轴线，那么该属性将不起作用(即当flex-wap 设置为wap 可换行的状况下， align-content才无效，即在穿插轴上的对齐形式)先总结这么多， 有工夫了减少图例解释

我所了解的Less的一些益处函数式编程css自定义变量用于整体主题调整嵌套语法简化开发复杂度mixin的写法.defaultBorder(@width: 10px, @style: solid, @color: red){ border: @width @style @color;}when条件判断函数.area(@width) when(@width <= 200px){ width: @width; background-color: yellow;}@media screen and (max-width: 200px){ .when{ .area(100px); }}@media screen and (min-width: 201px){ .when{ .area(210px); }}loop循环函数.widthFun(100);.widthFun(@n, @i:10) when (@i <= @n){ width-@{i}{ width: (@i * 100% / @n); } .widthFun(@n,(@i+10))}// 下面这段loop编程成css:width-10 { ·width: 10%;}width-20 { ·width: 20%;}width-30 { ·width: 30%;}width-40 { ·width: 40%;}width-50 { ·width: 50%;}width-60 { ·width: 60%;}width-70 { ·width: 70%;}width-80 { ·width: 80%;}width-90 { ·width: 90%;}width-100 { ·width: 100%;}罕用的数值计算函数// unit()对数值连贯单位/去除单位width: unit(@num, px);// round()对数值四舍五入取整数width: round(@num);// ceil()对数值向下取整数width: ceil(@num);// floor()对数值向上取整数width: floor(@num);// percentage()把小数转化为百分比width: percentage(@num);// abs()对数值取绝对值width: unit(abs(@num));// lighten()色彩提亮color: lighten(@color, 10%);// darken()色彩变暗background-color: darken(@bgColor, 20%);Less的匹配模式（相似于函数重载）// 示例：方向不同的款式三角形.sanjiao(down ,@w: 100px, @c:#ff6600){ border-width: @w; border-color: @c transparent transparent transparent; border-style: solid;}.sanjiao(top ,@w: 100px, @c:#ff6600){ border-width: @w; border-color: transparent transparent @c transparent; border-style: solid;}.sanjiao(left ,@w: 100px, @c:#ff6600){ border-width: @w; border-color: transparent @c transparent transparent; border-style: solid;}.sanjiao(right ,@w: 100px, @c:#ff6600){ border-width: @w; border-color: transparent transparent transparent @c ; border-style: solid;}#tranigle{ width: 0; height: 0; overflow: hidden; .sanjiao(right)}Less中的论据间接应用函数默认数值 ...

fastposter v2.7.0 公布 电商海报编辑器fastposter海报生成器，电商海报编辑器，电商海报设计器，fast疾速生成海报 海报制作 海报开发。二维码海报，图片海报，分享海报，二维码推广海报，反对Java Python PHP Go JS 小程序。基于Vue 和Pillow fastposter v2.7.0 公布 电商海报编辑器 大版本更新 大版本升级 对立应用token，与专业版保持一致对立应用id，后续会弃用posterId精简fast.py代码到200行简化响应代码去除动态QRcode生成减少响应头Fastposter，返回对应版本号批改登录界面token反对启动参数，或者app.yml文件配置批改代码生成，反对token减少示例海报调整组件设置更新应用文档相干地址开发文档：https://poster.prodapi.cn/docs/在线体验：https://poster.prodapi.cn/专业版在线体验：https://poster.prodapi.cn/pro/代码仓库-github代码仓库-gitee只需三步，即可实现海报开发 启动服务 > 编辑海报 > 生成代码一、启动服务docker run --name fast-poster -p 5000:5000 tangweixin/fast-poster二、编辑海报 三、生成代码 实用场景：电商主图编辑器在线作图电商海报编辑器Java生成二维码分享海报图片Java Graphics2D绘制海报图片微信小程序生成海报分享朋友圈PHP生成二维码海报图片自定义商业海报图片H5生成海报图片二维码分享海报图片canvas生成海报图片通过JSON生成海报图片二维码推广海报分享海报捐献如果你感觉 fastposter 对你有帮忙，或者想对咱们渺小的工作一点反对，欢送给咱们捐献 社区进群加作者微信，请备注来自fastposter。

1、勾销el-select的选中状态的黄框

在线CSS3压缩丑化格式化在线CSS3压缩丑化格式化 本工具能够将压缩的CSS,CSS3代码丑化格式化显示,也能够将格式化的CSS代码压缩成单行减小文件体积。反对下载层叠样式表是一种用来为结构化文档增加款式的计算机语言，由W3C定义和保护。CSS3当初已被大部分古代浏览器反对，而下一版的CSS4仍在开发中。 https://toolgg.com/css/

Transform（变换）Transform属性能够将元素进行2D或3D转换，能够将元素旋转，缩放，挪动，歪斜等。语法: transform: none|transform-functions;罕用的Transform的办法有： rotate(angle) 将元素旋转特定角度；例如，transform:rotate(30edg)，旋转30度；translate(x,y) 将元素从以后地位向x轴y轴挪动x或y个地位；例如，transform:translate(20px,30px)，向右挪动20px，向下挪动30px；scale(x,y) 进行缩放，依据给定的x和y，在x轴或者y轴进行缩放；例如，transform:scale(0.5,2)，在轴放大一半，在y轴放大一倍；skew(x-angle,y-angle) 依据x轴和y轴转动给定的角度；例如，skew(30deg,20deg)，围绕x轴把元素转动30度，围绕y轴把元素转动20度。transition（过渡）transition 为以后元素设置过渡成果。经常搭配:hover等能够引起元素属性变动的伪类一起应用，能够将元素的单个或多个属性的值A平滑的过渡为值B。语法： transition: property duration timing-function delay;transition的属性有： property： 值为all 或者 none 或者 指定CSS属性的name，指定过渡会变动的css属性；duration： 过渡继续的工夫，须要多少秒或毫秒能力实现（必填）；timing-function： 过渡成果的转速曲线（加速度）；delay： 过渡成果开始的工夫，提早多少工夫开始；例子： div{ width:100px; transition: width 2s; -webkit-transition: width 2s; /* Safari */}div:hover {width:300px;}animation（动画）animation 属性是一个简写属性，用于设置一个关键帧属性和六个动画属性。语法： animation: name duration timing-function delay iteration-count direction fill-mode play-state;这一个关键帧属性和六个动画属性别离是： name： 要绑定到选择器的关键帧的名字duration： 动画继续的工夫；timing-function：动画成果的转速曲线（加速度）；delay： 动画成果开始的工夫，提早多少工夫开始；iteration-count： 定义动画播放次数，默认是1，能够设置为infinite始终播放；direction： 指定是否应该轮流反向播放动画，以及怎么正向反向播放动画；fill-mode： 规定当动画不播放时，元素的款式；play-state： 指定动画是否正在运行或已暂停，默认为running，设置paused暂停；@keyframes咱们须要应用@keyframes规定来定义关键帧，应用@keyframes规定，能够创立动画。创立动画是通过逐渐扭转CSS款式来实现的。能够应用关键字"from"和"to"来规定第一帧和最初一帧，也能够应用百分比来规定某一时间的某一帧。例如： @keyframes myanimation{ from {left:0px;} to {left:200px;}}@keyframes mymove{ 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;}}

外框css：.panel { position: relative; border: 15px solid transparent; border-width: 0.6375rem 0.475rem 0.25rem 1.65rem;//上下左右的边框高度取最大值 border-image-source: url(../images/border.png); border-image-slice: 51 38 20 132;//截取图片相应的地位放到边框上 margin-bottom: 0.25rem;}里边内容css：.inner { position: absolute; top: -0.6375rem; left: -1.65rem; right: -0.475rem; bottom: -0.25rem; padding: 0.3rem 0.45rem;}

真的烦，想做一个题目过长会省略，然而text-overflow怎么都不不起作用，只是overflow:hidden暗藏，然而没有省略号，搞了半天就是因为有flex布局，删除就好了。

flex基本概念：采纳flex布局的元素，称为flex容器，它的子元素则称为flex我的项目，容器默认存在两根轴：程度的主轴和垂直的穿插轴 容器属性flex-direction // 我的项目的排列方向flex-wrap //换行取值flex-flow // 下面两个的简写模式justify-content //我的项目在主轴上的对齐形式align-items //我的项目在穿插轴上的对齐形式align-content // 多根轴线的对齐形式我的项目属性order // 我的项目的排列程序，数值越小越靠前flex-grow //我的项目的放大比例flex-shrink //我的项目的放大比例flex-basis //我的项目占据的固定空间flex // 下面三个的简写，默认initial(0 1 auto)有两个快捷键：auto(1 1 auoto)和none(0 0 auto)align-self //设置单个我的项目的对齐形式 show you the code <div className="page"> <div className="layout1"> <div className="left">left</div> <div className="center">center</div> <div className="right">right</div> </div> <div className="layout2"> <div className="up">up</div> <div className="center">center</div> <div className="bottom">bottom</div> </div></div>.page{ .layout1{ height: 50vh; display: flex; .left,.right{ display: flex; align-items: center; width: 50px; background-color: cadetblue; } .center{ flex: auto; display: flex; align-items: center; justify-content: center; background-color: tomato; } margin-bottom: 20px; } .layout2{ height: calc(50vh - 10px); display: flex; flex-direction: column; .up,.bottom{ display: flex; justify-content: center; height: 50px; background-color: cadetblue; } .center{ flex: 1; display: flex; align-items: center; justify-content: center; background-color: tomato; } }}成果 ...

明天的知识点 (2022.01.20) —— 第1010天 (我也要出题)[js] 在js中删除子节点应用innerHTML=''与removeChild()有什么区别？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

Tio.java简介 为了让用户缩小查找API的工夫，t-io把罕用API以静态方法的模式会集于一个类，这就是Tio.javaTio.java自身并不实现过简单的业务，各业务实现依然散布在其它类中，Tio.java只是把用户关怀的API集中起来，便于用IDE查找而已具体请参考：https://www.tiocloud.com/doc/tio/245业务数据绑定 资源绑定是指把业务相干的数据和Tcp连贯（即ChannelContext）关联起来，譬如ChannelContext-A代表了用户张三，张三的userid是333，就用上面的代码进行绑定Tio.bindUser(ChannelContext-A, "333")t-io目前内置了4种资源绑定，当然用户能够灵便应用这些绑定从而解决业务层所有的资源绑定问题，譬如能够给group加前缀”ios-“，从而标记这个用户应用的是ios，譬如 Tio.bindGroup(ChannelContext-A, "333");Tio.bindGroup(ChannelContext-A, "ios-" + "333");内置的4种资源绑定办法中，一个ChannelContext是能够绑定到多个groupid的，其它三个绑定都是一对一或多对一的关系，也就是说一个ChannelContext能够同时属于group-a，group-b… …group-n上面贴一下这4个资源绑定的源代码 /** * 绑定业务id * @param channelContext * @param bsId * @author tanyaowu */public static void bindBsId(ChannelContext channelContext, String bsId) { channelContext.tioConfig.bsIds.bind(channelContext, bsId);}/** * 绑定群组 * @param channelContext * @param group * @author tanyaowu */public static void bindGroup(ChannelContext channelContext, String group) { channelContext.tioConfig.groups.bind(group, channelContext);}/** * 绑定token * @param channelContext * @param token * @author tanyaowu */public static void bindToken(ChannelContext channelContext, String token) { channelContext.tioConfig.tokens.bind(token, channelContext);}/** * 绑定用户 * @param channelContext * @param userid * @author tanyaowu */public static void bindUser(ChannelContext channelContext, String userid) { channelContext.tioConfig.users.bind(userid, channelContext);}业务数据解绑 ...

本次绘制的形态中难点次要有等腰梯形、等腰三角形、圆角等腰三角形1、电池成果：难点： 电池电量100%时凸出来的那局部红色怎么变成红色？（即电池正极凸出来的那局部怎么填充色彩？）解决： 电量100%时让显示电量的红色div溢出整个电池，并在电池凸出来局部的两边别离应用一个红色div盖住即可。如图： 未盖住：　盖住了： 代码实现： <style>.dyestuff-battery{ display: inline-block; position: relative; width: 98px; height: 160px; padding-top: 14px; overflow: hidden; } .dyestuff-battery + .dyestuff-battery{ margin-left: 20px; } .dyestuff-battery::before{ /* 盖住电池凸出局部右边 */ position: absolute; /* top: 1px; */ top: 0; left: 0; z-index: 5; content: ' '; width: 34%; height: 14px; background-color: #fff; } .dyestuff-battery::after{ /* 盖住电池凸出局部左边 */ position: absolute; /* top: 1px; */ top: 0; right: 0; z-index: 5; content: ' '; width: 34%; height: 14px; background-color: #fff; } .dyestuff-battery-outter{ position: relative; height: 100%; padding: 8px; /* border: 8px solid #D8252B; */ border-radius: 12px; background-color: #D8252B; } .dyestuff-battery-outter::before{ position: absolute; top: -14px; left: 34%; content: ' '; height: 14px; width: 32%; border-radius: 4px 4px 0 0; background-color: #D8252B; } .dyestuff-battery-inner{ position: absolute; top: 8px; left: 8px; bottom: 8px; right: 8px; display: flex; justify-content: center; align-items: center; border-radius: 10px; background-color: #fff; } .dyestuff-battery-inner::before{ position: absolute; top: -14px; left: 39%; content: ' '; height: 14px; width: 22%; background-color: #fff; } .dyestuff-battery-text{ position: relative; z-index: 2; font-size: 20px; } .dyestuff-battery-progress{ position: absolute; width: 100%; left: 0; bottom: 0; height: 0; background-color: #D8252B; }</style><div> <div class="dyestuff-battery"> <div class="dyestuff-battery-outter"> <div class="dyestuff-battery-inner"> <div class="dyestuff-battery-text">0%</div> <div class="dyestuff-battery-progress"></div> </div> </div> </div> <div class="dyestuff-battery"> <div class="dyestuff-battery-outter"> <div class="dyestuff-battery-inner"> <div class="dyestuff-battery-text">40%</div> <div class="dyestuff-battery-progress" style="height: 40%;"></div> </div> </div> </div> <div class="dyestuff-battery"> <div class="dyestuff-battery-outter"> <div class="dyestuff-battery-inner"> <div class="dyestuff-battery-text">100%</div> <div class="dyestuff-battery-progress" style="height: calc(100% + 14px);"></div> </div> </div> </div></div>2、水彩笔成果：难点： 等腰梯形的绘制解决： 应用clip-path绘制等腰梯形代码实现： ...

css之position: fixed;不绝对网页定位

1.Animista网站地址:http://animista.net/网站形容:在线生成 css 动画2.Animate CSS网站地址:http://daneden.github.io/anim...网站形容:齐全的CSS3动画库3.Angrytools网站地址: https://angrytools.com/css/an...4.Hover.css网站地址: http://ianlunn.github.io/Hover/网站形容: 纯CSS3鼠标滑过成果动画库Hover.css是许多CSS动画的汇合，与下面的动画不同，每次将元素悬停时都会触发。一组CSS3反对的悬停成果，可利用于链接、按钮、徽标、SVG和特色图像等。** 用法它非常简单:只需将类的名称增加到元素中，比方 <button class="hvr-fade">Hover me!</button>5.WickedCSS网站地址: http://kristofferandreasen.gi...WickedCSS是一个小的CSS动画库，它没有太多的动画变体，但至多有很大的变动。 其中大多数是咱们曾经相熟的基础知识，但它们的确很洁净。它的用法很简略，只需将动画的名称增加到元素中即可。<div class="bounceIn"></div> ** 应用 JS document.querySelector('.my-element').classList.add('bounceIn')** 应用 JQ$(".my-element").addClass("bounceIn")豌豆资源搜寻网站https://55wd.com 6.Three Dots 网站地址: https://nzbin.github.io/threeThree Dots是一组CSS加载动画，它由三个点组成，而这些点仅由单个元素组成。** 用法只需创立一个div元素，并增加动画的名称<div class="dot-elastic"></div>7.TweenMax.js网站地址：https://www.tweenmax.com.cn/i...8.Velocity.js网站地址：http://shouce.jb51.net/veloci...

明天的知识点 (2021.12.15) —— 第974天 (我也要出题)[html] 应用canvas制作几座相连的山峰[css] 说说你对css中font-display的了解，它有什么作用？[js] 请问递归可不可以应用多线程？为什么？[软技能] 如何了解本身的致力与时机之间的关系？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

间接上成果看不到成果点这里办法一：借助mask-image属性<!-- more --> 从CSS代码能够看出，成果的实现除了“content内容生成技术”以外，次要是应用了mask-image属性，内容则是“webkit外围浏览器下的突变”了。 <h2 class="text-gradient" data-text="【css灵感】突变字">【css灵感】突变字</h2> <style>.text-gradient { display: inline-block; font-family: '微软雅黑'; font-size: 10em; position: relative; } .text-gradient[data-text]::after { content: attr(data-text); color: green; position: absolute; left: 0; z-index: 2; -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));}</style>办法二：background-clip + text-fill-color下的实现此办法尽管应用的CSS属性绝对多些，然而构造简略，易于控制，色彩的选取与管制也更准确，了解上也更容易了解。我集体是举荐应用办法二的。 <h1 class="text-gradient">【css灵感】突变字</h1><style>.text-gradient { display: block; color: green; font-size: 4em; text-align:center; font-family: '微软雅黑'; background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ebeef2), to(#2e9fff)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;};</style>看不到成果点这里

明天的知识点 (2021.12.10) —— 第969天 (我也要出题)[html] 应用canvas生成一张名片[css] 应用css画一个聊天气泡对话框[js] 在js函数的参数都是按值传递的吗？[软技能] 你来面试之前有理解过咱们公司吗？《论语》，曾子曰：“吾日三省吾身”（我每天屡次检查本人）。前端面试每日3+1题，以面试题来驱动学习，每天提高一点！让致力成为一种习惯，让奋斗成为一种享受！置信 保持 的力量！！！ 欢送在 Issues 和敌人们一起探讨学习！ 我的项目地址：前端面试每日3+1【举荐】欢送跟 jsliang 一起折腾前端，零碎整顿前端常识，目前正在折腾 LeetCode，打算买通算法与数据结构的任督二脉。GitHub 地址 微信公众号欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个Star, 同时欢送微信扫码关注 前端剑解 公众号，并退出 “前端学习每日3+1” 微信群互相交换（点击公众号的菜单：交换）。 学习不打烊，充电加油只为遇到更好的本人，365天无节假日，每天早上5点纯手工公布面试题（死磕本人，愉悦大家）。心愿大家在这虚夸的前端圈里，放弃沉着，保持每天花20分钟来学习与思考。在这变幻无穷，类库层出不穷的前端，倡议大家不要等到找工作时，才狂刷题，提倡每日学习！（不忘初心，html、css、javascript才是基石！）欢送大家到Issues交换，激励PR，感激Star，大家有啥好的倡议能够加我微信一起交换探讨！ 心愿大家每日去学习与思考，这才达到来这里的目标！！！（不要为了谁而来，要为本人而来！）交换探讨欢送大家前来探讨，如果感觉对你的学习有肯定的帮忙，欢送点个[Star]

援用阮一峰老师话说网格布局（Grid）是最弱小的 CSS 布局计划。CSS Grid 网格布局教程 它将网页划分成一个个网格，能够任意组合不同的网格，做出各种各样的布局。以前，只能通过简单的 CSS 框架达到的成果，当初浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有肯定的相似性，都能够指定容器外部多个我的项目的地位。然而，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"我的项目"针对轴线的地位，能够看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，而后指定"我的项目所在"的单元格，能够看作是二维布局。Grid 布局远比 Flex 布局弱小。 上面我给大家分享一个用grid实现的自适应9宫格，格子大小自定义，距离不变，以前都是用dom计算，好蠢。须要依据本人的布局个数，来计算每个格子大小，次要是每个格子的宽高减去相应行和列距离的大小，以九宫格为列，有3行3列，有行间距2 24px, 有列间距2 24px，每个格子的宽高都要减去48px / 3。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>grid</title></head><body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body><style> * { padding: 0; margin: 0; box-sizing: border-box } body { height: 100vh; padding: 20px; } .container { width: 100%; height: 100%; display: grid; /*行间距*/ grid-row-gap: 24px; /*列间距*/ grid-column-gap: 24px; /*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */ grid-template-columns: repeat(3, calc(33.33% - 16px)); grid-template-rows: repeat(3, calc(33.33% - 16px)); overflow: hidden; } .item { background: #33a8a5; }</style></html> ...

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197 喜爱看电影的敌人必定会留神到一个乏味的细节，就是电影出品方肯定会在片头的Logo环节做一个小特效：阴影流动之间光泽一闪而过，这样做不仅能够进步Logo的辨识度，还能够晋升质感，两全其美。参照华纳兄弟影业(Warner Bros. Pictures)的例子： 那么，在前端畛域，如果应用纯CSS技术，能不能实现相似的特效呢？答案当然是能够的，这次咱们以本站的Logo为例子，以一持万、提纲挈领地解说一下如何应用纯CSS技术实现图片Logo鼠标悬停光泽一闪而过的光影特效。 个别状况下，大多数前端开发会抉择 linear-gradient() ，这个办法创立一个示意两种或多种色彩线性突变的图片。其后果属于<gradient>数据类型，是一种特地的<image>数据类型。 简略用法： /* 突变轴为45度，从蓝色突变到红色 */ linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色突变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上，从蓝色开始突变、到高度40%地位是绿色突变开始、最初以红色完结 */ linear-gradient(0deg, blue, green 40%, red);那么它怎么和logo图片联合应用呢？首先创立一个对象，因为是logo，所以我应用a标签，也就是超级链接，随后申明伪类mylogo： <a href="/" class="mylogo" title="刘悦的技术博客"></a>之后，定义logo的款式： .mylogo{ display:block; margin: 0 auto; width:255px; height:200px; background-image:/logo.png; background-repeat: no-repeat; }接着就是linear-gradient()出场，原理并不简单，利用linear-gradient绘制一个红色半透明突变层，利用背景的负坐标暗藏起来，同时配合transition属性，在鼠标悬停(hover)的时候，设置1秒钟的延时动画，逐步将光斑的坐标进行位移，产生一种光泽掠过的成果： .mylogo{ width: 255px; height: 200px; background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%) no-repeat -270px 0, url(/logo.png) no-repeat; transition: 1s ease; } .mylogo:hover { background-position: 200px 0, 0 0; }这里须要留神的是，默认负坐标肯定要超过logo本体的宽度，否则位移就不够充沛，成果是上面这样的: ...

1.Float布局上面这段代码 div { background-color: #00FFFF;}p { width: 50px; height: 50px; border: 1px solid black;}#p1 { background-color: #A52A2A;}#p2 { background-color: #DEB887;}#p3 { background-color: #5F9EA0;}#p4 { background-color: #FF7F50;}最后的展现成果是当咱们给第一个p1增加float属性：right，让他浮动到右方之后 #p1 { background-color: #A52A2A; float:right;}能够看到p1曾经浮动到左边，且前面三个盒子顺次向上移占据了p1原本的地位，阐明当咱们设置float属性之后，浏览器会把它从惯例的文档流移走，它本来的地位也就空进去了而且float属性，不会让盒子产生margin塌陷，能够看到浏览器自带的margin，p1浮动到左边之后，p2的margin曾经塌陷而p1依然保留当咱们把所有盒子都设置为float:left时 p { width: 50px; height: 50px; border: 1px solid black; float: left;}咱们能够看到，蓝色盒子曾经被齐全压缩了，因为咱们之前说过，设置float属性会让盒子脱离以后的文档流，因而这四个盒子绝对于失常文档流来说不存在了，自适应调节使得其只蕴含<section>如何复原呢？在某个盒子上应用clear属性，将禁止其余盒子浮动在其四周， section { clear:left;}能够看到当禁止p1,p2,p3,p4浮动在<section>右边之后，<section>自成一行，成为最左端的标签当咱们给p2减少高度且设置float:right之后 #p2 { background-color: #DEB887; float: right; height: 100px;}如果咱们不想让p2和p3在竖直方向上重叠，给p3设置 p3 {clear:right}当p1的高度过高时，就会重叠p3 #p1 { background-color: #A52A2A; height: 200px; float: left;}这时咱们能够设置clear:both这样既禁止盒子在p3右边float，也禁止盒子在p3左边float当初咱们想要设计两个段落，别离飘浮在界面的左右两侧 p { width: 50%; border: 1px solid black; float: left;}#p1 { background-color: #A52A2A;}#p2 { background-color: #DEB887;}但理论状况却是两个段落并没有像咱们所冀望地浮动在同一行，而是换行了，起因是默认的box-sizing仍是conten-box，当咱们设置p的width是50%,这代表两个content曾经各占一半了，当咱们再增加border:1px，这无疑是压死骆驼的最初一根稻草，因为空间的不够，导致换行，为了把border也算在盒子理论尺寸内，应用box-sizing:border-box最初删去所有的背景色彩 ...

首先在HTML体系结构外面，CSS款式的地位1.写在<style>外面 <style>p{}</style>对于下面这种写法，这种样式表对所有的<p>组件都会失效。 2.除了把款式放在<style>外面之外，还能够抉择把所有的款式都写在一个.css文件外面，应用<link>组件援用<link href="mycss.css"></link>这就相似于微信小程序把css文件与xml文件离开了 3.还能够指定特定标签的款式，即把款式写在标签的style属性外面<p style="width:100px" ></p>上面说说一些CSS的选择器： 1 .classname.classname{} <p class="classname"></p>组件外面的定义class，属性值为classname，那么只有类名为classname的组件才会失效 2.selector.classdiv.main{}<div class="main"></div><p class="main"></p>应用selector.class,只有特定的类名为class的selector才会失效，如上为<div>失效,<p>不失效 3.selector>selector<div> <p>I am feeling blue</p></div><section> <p>I just want to be left alone!</p></section>div > p { color: blue;}从右往左读selector1>selector2,只有当selector2是selector1的间接子元素时，才会失效，如果非间接子元素，然而selector1是selector2的先人，则这样写selector1 selector2两头留空格 <div> <div> <div class="makeMeBlue"> <p>I am feeling blue</p> </div> </div> <section class="makeMeBlue"> <p>I just want to be left alone!</p> </section></div>div p { color: blue;}如上所示，所有的<p>都会变成蓝色 4.伪类selector:pseudo-class罕用伪类： :hover:link:visited:active:nth-child(..)link和visited是针对链接的，前者是链接尚未点击前的款式，后者是点击链接后的款式hover是当用户鼠标悬停在上方时触发的款式active是当用户按下鼠标但还未齐全开释的款式，在本视频中不做辨别。 a:link, a:visited { text-decoration: none; //勾销默认下划线 background-color: green; border: 1px solid blue; color: black; display: block; width: 200px; text-align: center; //在程度方向居中 margin-bottom: 1px;}a:hover, a:active { background-color: red; color: purple;}nth-child()十分弱小，能够指定特定的子元素的款式，具体应用形式如下，能够指定第三个子元素，odd：奇数个，或者第四个子元素，那么你所指定的子元素就会出现你所冀望的款式。 ...

如果想实现色彩变动的动效，能够思考应用色调旋转滤镜：filter:hue-rotate()filter 是个功能强大的办法，能够给元素增加各种各样的滤镜，比方含糊、暗影、变灰等等。hue-rotate 能够扭转元素的色调，展现出更丑陋的色彩。案例1：设置按钮的背景色 <button style="background: #2486ff;filter: hue-rotate(350deg);">按钮</button>然而，单纯设置背景色的话，色调变动多少不好把握，而且个别UI会给出具体的色彩值。所以，hue-rotate更适宜做色彩变动的动效。案例2：高亮文字色彩闪动变动 <span>啦啦啦</span>span {    background: red;    animation: hue 3s;}@keyframes hue {    from {      filter: hue-rotate(0deg);    }    to {      filter: hue-rotate(-360deg);    }}

看来得不中断已有连贯的状况下进行重启才行，不能简略的stop后start，得平滑重启。大抵就是让父过程启动一个子过程去监听新的连贯，本人不再监听新的连贯，遴选公务员而是在解决完已有连贯后终止，之后子过程独挑大梁。随后发现github上的endless挺满足需要，它是一个不停机重启的服务器实现，实现流程为： 监听 SIGHUP 信号收到信号后 fork 子过程（应用雷同的启动命令），将服务监听的 socket 文件描述符传递给子过程子过程启动胜利后开始监听新的连贯，并发送 SIGTERM 信号给父过程父过程收到 SIGTERM 信号后进行接管新的连贯，期待旧连贯解决实现后终止； 最初抛出谬误：RangeError：遴选公务员超出最大调用堆栈大小，因而，具备进行递归的基线条件十分重要。 Tip：es6 有尾调用优化，也就是说这段代码会始终执行上来。查看 兼容表 你会发现绝大多数浏览器都不反对尾调用（proper tail calls (tail call optimisation)），故不在开展。http://lx.gongxuanwang.com/ss...

1.间接上代码<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> body, p { margin: 0; } .parent { display: flex; } .child { flex: 1; height: 100px; } .child { margin-right: 14px; } .child:last-child { margin-right: 0; } </style> </head> <body> <div class="parent" style="background-color: #ffff;"> <div class="child" style="background-color: #1180FD;"></div> <div class="child" style="background-color: #1180FD;"></div> <div class="child" style="background-color: #1180FD;"></div> <div class="child" style="background-color: #1180FD;"></div> </div> </body></html>2.成果展现

实现成果 间接上代码<template> <section class="sensorConfirm index"> <el-row :gutter="5"> <el-col :span="12"> <div class="common-container"> <div class="watchContainer"> <div class="safeScore"> <div class="dun"> <img src="./images/dun.png" alt="" > <span class="mark">{{ score }}</span> <span class="level score_level">{{ totle_text }}</span> <h3>防护能力评分</h3> </div> <div class="swipCircle"> <div /> </div> <div class="baseCircle"> <img class="spin1 innerCircle" src="./images/innerCircle.png" alt="" > <img class="spinreverse outerCircle" src="./images/outerCircle.png" alt="" > </div> </div> </div> </div> </el-col> </el-row> </section></template><script>export default { name: 'SensorConfirm', props: { }, data() { return { score: 60.5, totle_text: '个别', totle_class: '' } }, created() { }, updated() { }, mounted() { }, methods: { }}</script><style lang="scss">.index { .watchContainer { height: 250px; .safeScore { position: absolute; width: 200px; height: 100%; text-align: center; margin-top: 5px; top: 9%; left: 14%; perspective: 1000px; transform-style: preserve-3d; .dun { position: absolute; left: 50%; transform: translateX(-50%) translateZ(-100px); width: 118px; height: 130px; z-index: 20; top: 0px; animation: jump 3s both infinite; img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .mark, .level { position: absolute; top: 37%; left: 50%; transform: translateX(-50%); font-size: 14px; z-index: 3; font-weight: bold; color: #e6a23c; } .level { top: 56%; font-size: 12px; } h3 { font-size: 12px; color: whitesmoke; position: absolute; top: 22%; width: 100px; left: 50%; transform: translateX(-50%); z-index: 3; } .mark { top: 35%; left: 50%; font-size: 25px; } .baseCircle { position: absolute; transform: translate(-50%, -50%) rotateX(68deg); z-index: 0; left: 50%; top: 52%; width: 100px; height: 114px; background: url(./images/bgCircle.png) no-repeat; background-size: 100% 100%; } .innerCircle, .outerCircle { position: absolute; width: 130px; height: 130px; top: 0%; left: 50%; transform: translateX(-50%); } .outerCircle { left: 50%; top: -18%; height: 170px; width: 170px; } .swipCircle { width: 200px; height: 200px; perspective: 250px; transform-style: preserve-3d; div { width: 200px; padding: 20px; top: -20px; height: 200px; border-radius: 60%; border: 3px solid #4cc2ff; position: absolute; animation: move 3s linear infinite; } } } @keyframes move { 0% { top: -80px; transform: translate3d(0px, -30px, -25px) rotateX(68deg) scale(1); } 25% { top: 10px; transform: translate3d(0px, -30px, -25px) rotateX(68deg) scale(0.6); } 75% { top: 10px; transform: translate3d(0px, -30px, -25px) rotateX(68deg) scale(0.8); } 100% { top: -80px; transform: translate3d(0px, -30px, -25px) rotateX(68deg) scale(1); } } .spin1 { animation: spin 4s linear infinite; } .spinreverse { animation: spin 5s linear infinite reverse; } @keyframes spin { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } } @keyframes jump { 0% { top: 0%; } 50% { top: -5%; } 100% { top: 0%; } } }}</style>

背景周末在家习惯性登陆 Apex，筹备玩几盘。在登陆加速器的过程中，发现加速器到期了。 我始终用的腾讯网游加速器，然而点击充值按钮，提醒最近客户端降级革新，暂不反对充值（这个操作把我震惊了~）。只能转头下载网易 UU 加速器。 关上 UU 加速器首页，映入眼帘的是这样一幅画面： 霎时，被它这个背景图吸引。 出于对 CSS 的敏感，盲猜了一波这个用 CSS 实现的，至多也应该是 Canvas。关上控制台，略微有点点悲观，竟然是一个 .mp4文件： 再看看 Network 面板，这个 .mp4 文件竟然须要 3.5M？ emm，霎时不想打游戏了。这么个背景图，CSS 不能搞定么？ 应用 CSS 3D 实现星际 3D 穿梭成果这个技巧，我在 奇思妙想 CSS 3D 动画 | 仅应用 CSS 能制作出多惊艳的动画？ 也有提及过，感兴趣的能够一并看看。 假如咱们有这样一张图形： 这张图先放着备用。在应用这张图之前，咱们会先绘制这样一个图形： <div class="g-container"> <div class="g-group"> <div class="item item-right"></div> <div class="item item-left"></div> <div class="item item-top"></div> <div class="item item-bottom"></div> <div class="item item-middle"></div> </div></div>body { background: #000;}.g-container { position: relative;}.g-group { position: absolute; width: 100px; height: 100px; left: -50px; top: -50px; transform-style: preserve-3d;}.item { position: absolute; width: 100%; height: 100%; background: rgba(255, 255, 255, .5);}.item-right { background: red; transform: rotateY(90deg) translateZ(50px);}.item-left { background: green; transform: rotateY(-90deg) translateZ(50px);}.item-top { background: blue; transform: rotateX(90deg) translateZ(50px);}.item-bottom { background: deeppink; transform: rotateX(-90deg) translateZ(50px);}.item-middle { background: rgba(255, 255, 255, 0.5); transform: rotateX(180deg) translateZ(50px);}一共设置了 5 个子元素，不过认真看 CSS 代码，其中 4 个子元素都设置了 rotateX/Y(90deg/-90deg)，也就是绕 X 轴或者 Y 轴旋转了 90°，在视觉上是垂直屏幕的一张立体，所以直观视觉上咱们是不到的，只能看到一个立体 .item-middle。 ...

一、滚动条相干的属性::-webkit-scrollbar 滚动条整体局部，罕用属性：width,height,background,border；::-webkit-scrollbar-button 滚动条两边的按钮，默认不设置时不显示，可设置高度、背景色、背景图片；::-webkit-scrollbar-track 整个滚动条去除两边按钮剩下的局部；::-webkit-scrollbar-track-piece track去掉拖拽剩下的局部；::-webkit-scrollbar-thumb 滚动条外面能够拖动的那局部；::-webkit-scrollbar-corner 边角；::-webkit-resizer 定义右下角拖动块的款式二、根底改变，上例子<div class="box"> <div>1fnreknenverknrefnrenfengrnengej1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejk1fnreknenverknrefnrenfengrnengejkk</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div> <div>1</div></div>.box { width: 300px; height: 100px; overflow: scroll;}div::-webkit-scrollbar { width: 8px; /* 纵向滚动条的宽 */ height: 8px; /* 横向滚动条的高 */}div::-webkit-scrollbar-thumb { border-radius: 4px; background: #EBEBEB;}三、成果 注：只对 设置了高度和滚动成果的容器 失效

在挪动端web页面中，1px的问题是一个常见的问题，总结一些解决挪动端web的1px办法以及对应API介绍 border-image border-image CSS属性容许在元素的边框上绘制图像 语法 border-image: image-source image-height image-width image-repeat复制代码设置1px .border-top { border-width: 1px; border-image: url('xxx') 2 repeat;}复制代码应用 border-image 时，其将会替换掉border-style 属性所设置的边框款式。尽管标准要求应用 border-image时边框款式必须存在，但一些浏览器可能没有实现这一点。 特地留神，若 border-image-source（此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示，则将利用 border-style 长处：兼容性好 毛病：灵活性差，每次更改都须要更换图片 linear-gradient 利用突变实现1px，50%彩色，50%通明 .border-top { background: linear-gradient(1deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat;}复制代码长处：实现简略，色彩可控 毛病：无奈实现圆角，有兼容性问题（当初兼容性问题根本可疏忽） box-shadow box-shadow 属性用于在元素的框架上增加暗影成果，能够在同一个元素上设置多个暗影成果，并用逗号将他们分隔开。该属性可设置的值包含暗影的X轴偏移量、Y轴偏移量、含糊半径、扩散半径和色彩。 在应用box-shadow时，须要留神不同数量的属性值代表不同的含意 如果只存在两个属性值，会将其作为offerset-x和offerset-y如果存在三个属性值，会将前两位作为offerset-x和offerset-y，第三个值作为blur-radius如果存在四个属性值，第四个将会作为spread-radius.border-top { box-shadow: 0px -1px 1px -1px rgb(0 0 0 / 50%);}复制代码长处：实现简略，色彩可控 毛病：色彩管制较为难拿捏，会有暗影描边呈现 伪元素 + transfrom 如果间接对DOM应用transfrom进行缩放，会连带着外部的所有元素被缩放，影响原有的布局构造和字体大小，应用伪元素遍能够防止这个问题，因为伪元素::after或::before是独立于以后元素，能够独自对其缩放而不影响元素自身的缩放 ...

应用filter:grayscale(1)使网页出现哀悼模式平凡的革命先烈们为咱们祖国的诞生做出了微小的就义，在相应节日里，咱们的站点会出现灰色哀悼模式，以此来留念先烈们。 body{ filter: grayscale(1);}

https://www.starpool.cn/produ...

为了达到让形象局部和实现局部独立变动的目标，桥接模式应用组合关系来代替继承关系，形象局部领有实现局部的接口对象，从而可能通过这个接口对象来调用具体实现局部的性能。也就是说，桥接模式中的桥接是一个单方向的关系，只可能形象局部去应用实现局部的对象，星池starpool而不能反过来。 须要留神的是 RefinedAbstraction 依据理论状况是能够有多个的。 当然下面的 UML 类图和通用代码只是最罕用的实现形式而已，在理论应用中可能会有其余的状况，比方 Implementor 只有一个类的状况，尽管这时候能够不去创立 Implementor 接口，精简类的档次，然而我倡议还是须要形象出实现局部的接口。 Connection 接口与 DriverManager 类的关系只是分割较弱的依赖关系，并不合乎桥接模式的定义和特点。https://www.starpool.cn 因而，在思考桥接模式的状况下，能够再次将类图进行简化：并在程序运行的不同时刻抉择适合的算法。而桥接模式属于对象构造模式（形容如何将对象按某种布局组成更大的构造），它的目标是将形象与实现拆散，使它们能够独立变动

光javascript能够辨认/解决，其余的编程语言java,php…也能够辨认/解决.on数据都是对象中有数组，数组中有对象的嵌套构造。面对下面的简单json数据，星池starpool 咱们往往不能看清他的构造，这时咱们能够借助工具来查看json的构造.这里波及到了补码)，它能示意的范畴是-128～+127。unsigned char 是无符号字符型也是8位，它没有符号位，最高位是数据位，比方1=0b00000001，255=0b11111111，它的范畴是0～255。N采纳齐全独立于语言的文本格式，然而也应用了相似于C语言家族的习惯（包含C, C++, C#, Java, JavaScript, Perl, Python等）。这些个性使JSON成为现实的数据交换语言。易于人浏览和编写，同时也易于机器解析和生成。 函数外部用var申明的变量是局部变量，https://www.starpool.cn 只能在函数外部调用；局部变量在函数执行完就从内存中删除，能用局部变量申明的，就不要用全局变量，提高效率；

残缺高频题库仓库地址：https://github.com/hzfe/aweso... 残缺高频题库浏览地址：https://hzfe.github.io/awesom... 相干问题BFC 有什么用，如何触发谈谈你对 BFC 的了解答复关键点盒模型 视觉格式化模型 蕴含块 失常流 BFC 是什么 BFC 全称为 block formatting context，中文为“块级格式化上下文”。它是一个只有块级盒子参加的独立块级渲染区域，它规定了外部的块级盒子如何布局，且与区域内部无关。 BFC 有什么用 修复浮动元素造成的高度塌陷问题。防止非冀望的外边距折叠。实现灵便强壮的自适应布局。触发 BFC 的常见条件 <html> 根元素。float 的值不为 none。position 的值不为 relative 或 static。overflow 的值不为 visible 或 clip（除了根元素）。display 的值为 table-cell，table-caption，或 inline-block 中的任意一个。display 的值为 flow-root，flow-root，或 list-item。flex items，即 display 的值为 flex 或 inline-flex 的元素的间接子元素（该子元素 display 不为 flex，grid，或 table）。grid items，即 display 的值为 grid 或 inline-grid 的元素的间接子元素（该子元素 display 不为 flex，grid，或 table）。contain 的值为 layout，content，paint，或 strict 中的任意一个。column-span 设置为 all 的元素。提醒：display: flow-root，contain: layout 等是无副作用的，可在不影响已有布局的状况下触发 BFC。 ...

循环变量赋初值）”，示意不对循环变量赋初始值。省略“表达式2(循环条件)”，不做其它解决，循环始终执行（死循环）。以取得，星池starpool 因为 int 是整数型，小数局部会省略。比方 765/100 的后果是7十位数：num%100/10 。比方765%100先失去65，65/10失去。定义变量类型:留神取值范畴，int和long long int。保留小数时，若不申明，则自认为保留六位小数。字符型，单个字符用' '，字符串用。 做题的时候没有循环那么简单，有时候也会wa，然而如果仔细检查，本人也是能够发现错误的。https://www.starpool.cn 感觉这部分的常识尽管简略，然而也是咱们学这门语言的一个根底，更须要咱们认真对待。发现有些题可能暴力解决会更好一些，有些题就是在找法则，并且比方像画矩形，蛋糕裱花一些题有很多解决办法。

只有是jdbc反对的数据库，druid都反对，对数据库的支持性好。并且Druid针对oracle、mysql做了特地优化。提供监控性能。星池starpool能够监控sql语句的执行工夫、ResultSet持有工夫、返回行数、更新行数、谬误次数、谬误堆栈等信息，来理解连接池、sql语句的工作状况，不便统计、剖析SQL的执行性能。 既然微服务提倡业务隔离性，那么这种难道不应该隔离么？让组件工具一次只做一件事不好么？监控的事件在service mesh的未来毕竟是有别的其人造的监控手法的而不是硬编码在一个小小的连接池里。https://www.starpool.cn 综上所述，放在当初或是将来的趋势去拼，大概率比不过拥抱springboot 2.0以及大道至简精简到极致的HikariCP。

中同时存在cmd和entrypoint命令，要分场景，如果entrypoint应用的是shell模式，cmd命令会被疏忽如果entrypoint应用exec模式，cmd命令内容会被追加为entrypoint的命令参数；星池starpool 回声测试依照失常申请流程执行，可能测试整个调用是否通顺，可用于监控。所有服务主动实现EchoService接口，只需将任意服务援用强制转型为EchoService 即可应用，应用形式（demoService是spring治理的bean）当接管到 RPC 申请，或发动 RPC 申请时，RpcContext 的状态都会变动。例如：A 调 B，B 再调 C，则 B 机器上，在 B 调 C 之前，R 比方初始化本地缓存，期待相干资源就位等，https://www.starpool.cn 能够应用delay进行提早裸露。使Dubbo在Spring容器初始化完后提早多少毫秒再裸露服务。

似 Excel 的数据透视表，专为多维数据分析和穿插表报告而设计。许多布局自定义选项让您能够齐全管制其 UI，以用户为核心的性能使其易于部署。ExpressVerticalGrid 套件-ExpressVerticalGrid 提供单记录和多记录数据表示视图，具备残缺的数据编辑和运行时自定义选项。星池starpool ExpressLayoutControl Suite - 从演示控件的主动排列到按比例调整大小，VCL Layout Control 容许您打消与基于像素的表单设计相干的限度和耗时限度。发团队花了一年多的工夫开发了F3艾浮星空网络边缘设施闲置算力分布式平台。据外媒报道，Protoco Lbas，协定实验室，https://www.starpool.cn 胡安·贝内特 Juan Benet外围开发者，打造F3chain/IPFS网络边缘设施闲置算力散布平台，反对多协定包含IPFS在内的多种协定，采纳XDFN制作更加平安稳固。

此时选择器的抉择由CO，即下一级进行，也就是进位项进行，如果进位项是1，刚好加起来进位，如果是0则不进位。下面的状况别离为1234，星池starpool持续剖析.本位的状况由下一级的进位状况决定，下一级为0本位就是0，下一级为1本位就进一位为1. 当S为1时，与下一级异或，下一级为1时进位，本位为0 ，下一级为0时不进位，本位为1（单bit加法，进位由后面的搞定）。最初加法后果是C（1000）正确值，进位状况是CO（0111）。CO[3:0]作为进位级联用的。S[3:0]和DI[3:0]是数据输出。作为运算用的。然而图中看并没有实现Sx和DIx的运算。只是对Sx和CIN做了异或。异或就是加法不进位）。星池starpool数据在进入CARRY4之前曾经进行了加法运算，只是还没有判断进位标记。

能够通过字符管理工具 firewall-config 和 图形化管理工具firewall-config 进行治理。优先应用/etc/firewalld/中的配置，如果不存在配置文件，星池starpool则应用默认配置文件 /usr/lib/firewalld 中的数据。它有两种配置办法:运行时配置（不须要刷新）；永恒配置（须要刷新）。 如果查看web1的日志就会发现，日志里记录的是192.168.4.10在拜访网页。 咱们须要实现的成果是，client能够拜访web服务器，但要假装为192.168.2.5后再拜访web服务器(模仿所有位于公司外部的电脑都应用的是公有IP，心愿拜访外网，就须要假装为公司的外网IP后才能够)。 苦思冥想依然未能失去答案，写程序后查看RTL网表，星池starpool失去了答案。然而又看到了一个新的构造carry4（超前疾速进位逻辑构造），这个构造会用在多位的比拟器和多位的加法器上，要了解比拟器和加法器的工作原理就须要了解这个超前疾速进位逻辑。通过认真钻研，引出了这边文章。

问题形容前两天公司产品提出了一个奇葩需要，就是要把表格左上角的全选/全不选复选框给藏起来，用户想要勾选数据，只能一条条的勾选；想要勾销勾选，只能一条条的勾销勾选。黑人问号？？？好吧，既然产品大佬发话了，那咱就干活呗。 这里因为vue组件中有 scoped 款式作用域限度，所以咱们要应用 /deep/ 深度设置款式，留神html层级关系，否则款式设置的不失效。 固定的勾选框列~代码<template> <div class="wrap"> <div class="myTable"> <el-table :data="tableData" border style="width: 80%"> <!-- 个别都是会把勾选列fixed固定下来 --> <el-table-column type="selection" width="55" fixed></el-table-column> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div> </div></template><style lang="less" scoped>.wrap { padding: 60px 0 0 60px; /* 留神，是在 `el-table` 标签的外层DOM构造上设置 `/deep/` 也就是类名为 `myTable` 的这一层 而后选中表头容器（el-table__fixed-header-wrapper），外面的复选框外部（el-checkbox__inner） 设置暗藏 权重设置为最高即可 */ /deep/ .myTable { .el-table__fixed-header-wrapper { .el-checkbox__inner { display: none !important; } } } }</style>未固定的勾选框列~代码HTML局部未固定，没有加上fixed属性<el-table-column type="selection" width="55"></el-table-column> CSS局部<style lang="less" scoped>.wrap { padding: 60px 0 0 60px; /deep/ .myTable { /* 审查DOM也能够找到这个构造，同上 */ .el-table__header-wrapper { .el-checkbox__inner { display: none !important; } } }}</style>效果图 ...

tatic是Java中的一个关键字，能够用来润饰办法、变量、代码块、外部类,还能够应用动态导stati星池云服务器办法static办法个别称作静态方法，因为静态方法不依赖于任何对象就能够进行拜访，因而对于静态方法来说，是没有this的，因为它不依附于任何对象，既然都没有对象，就谈不上this了。并且因为这个个性，在静态方法中不能拜访类的非动态成员变量和非动态成员办法，因为非动态成员办法/变量都是必须依赖具体的对象才可能被调用。 动态变量被所有的对象所共享，在内存中只有一个正本【寄存在办法区】，它当且仅当在类首次加载时会被初始化【加final和不加final的static变量初始化的地位不一样】。而非动态变量是对象所领有的，在创建对象的时候被初始化，存在多个正本，各个对象领有的正本互不影响。 蕴含外部类的类称为外部类。星池云服务器外部类能够申明public、protected、private等拜访限度，能够申明为abstract的供其余外部类或外部类继承与扩大，或者申明为static、final的，也能够实现特定的接口。外部类有以下特点：外部类个别只为其外部类应用https://www.starpool.cn 【比方：hashmap汇合中，外部类Entry<K,V>】

html+css小常识总结1. 应用CSS暗藏HTML元素的4种罕用办法1) visibility: hidden是许多人在暗藏某个HTML元素时的首选。如页面中图片不见了，然而也没中原来图片的地位留下了一片空白区域。这个属性只是简略的暗藏某个元素，然而元素占用的空间任然存在。设置visibility: visible能够使暗藏的元素变为可见。 2) 设置opacity: 0能够使一个元素变得齐全通明，从而制作出和visibility: hidden一样的成果。opacity和visibility相比，其劣势在于它能够被transition和animate。通常能够应用opacity属性来制作元素的淡入淡出成果。设置opacity:1能够使通明元素变得可见。 3) position: absolute最古老和最规范的做法是设置元素的相对定位来暗藏元素。这种技术使元素脱离文档流，处于一般文档之上，并给它设置一个很大的left负值定位，使元素定位在可见区域之外。float和margin都不能影响到position: absolute的元素，因而它们能够很好的被暗藏起来。在制作一些元素的直线动画时，应用这种技术是最好的办法。要使元素再次变得可见，能够增大left的值，使元素呈现在屏幕上。 4) display: nonedisplay: none也是一个十分老的技术，它是position: absolute和visibility: hidden; 的折中办法，元素会变得不可见，并且不会再占用文档的空间。display: none在制作手风琴成果时非常有用。将元素设置为display: block或其它值能够使元素再次可见。 除了下面形容的4种办法之外，还有其它办法能够暗藏元素，特地是应用CSS3的时候。例如：你能够应用scale属性来缩小元素的尺寸直到它隐没。然而scale属性和opacity: 0和visibility: hidden一样，不可见的元素会占用文档的空间。 2.晓得的网页制作会用到的图片格式有哪些？png-8，png-24，jpeg，gif，svg。 然而下面的那些都不是面试官想要的最初答案。面试官心愿听到是 Webp。（是否有关注新技术，陈腐事物） 科普一下 Webp：WebP 格局，谷歌（google）开发的一种旨在放慢图片加载速度的图片格式。 图片压缩体积大概只有 JPEG 的 2/3，并能节俭大量的服务器带宽资源和数据空间。Facebook Ebay 等出名网站曾经开始测试并应用 WebP 格局。 在品质雷同的状况下，WebP 格局图像的体积要比 JPEG 格局图像小 40%。 3.简述一下 src 与 href 的区别。src 用于替换以后元素，href 用于在以后文档和援用资源之间确立分割。 src 是 source 的缩写，指向内部资源的地位，指向的内容将会嵌入到文档中以后标签所在 地位；在申请 src 资源时会将其指向的资源下载并利用到文档内，例如 js 脚本，img 图片 和 frame 等元素。 <script src =”js.js”></script> 当浏览器解析到该元素时，会暂停其余资源的下载和解决，直到将该资源加载、编译、执行 结束，图片和框架等元素也如此，相似于将所指向资源嵌入以后标签内。这也是为什么将 js 脚本放在底部而不是头部。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建设和以后元素（锚点） 或以后文档（链接）之间的链接，如果咱们在文档中增加 <link href=”common.css” rel=”stylesheet”/> 那么浏览器会辨认该文档为 css 文件，就会并行下载资源并且不会进行对以后文档的解决。 这也是为什么倡议应用 link 形式来加载 css，而不是应用@import 形式。 ...

星巴克网站首页复刻（HTML+CSS）gitee地址：https://gitee.com/jia-shuting...

CSS学习笔记1.嵌入形式1）css嵌入到html的头部的style标签内<div style="background-color:lightcoral; color: #fff; width: 300px;"> hello world </div>2）css嵌入到元素style属性内长处：css规定与HTML拆散；能够复用 <style> #one, #two{ background-color:lightcoral; color: #fff; width: 300px; margin-bottom: 1em; } </style>3）独自写到.css文件，并通过link引入.box { background-color:lightcoral; color: #fff; width: 300px; margin-bottom: 1em;}#one { height: 100px;}2.语法正文：/*正文内容*/语法： 选择器{ 款式规定 }3.选择器1）外围选择器id选择器 惟一 #one{}class选择器 非惟一 .box{}标签选择器 div{}并且选择器（非官方） div.box{} 选中div元素，并且这个div的class是boxtip：子元素个别继承父元素的字体字号属性和选择器（重置款式规定） div,.box{} 选中div元素和class未box的元素广泛选择器（慎用） *{} 选中所有元素 2）档次选择器（两个选择器配合应用）子选择器：通过父元素抉择子元素 大于号后辈选择器： 空格ul.menu > li.menu_item { float: left; line-height: 3em; width: 100px; text-align: center; position: relative; cursor: pointer; } ul.menu > li.menu_item:hover ul.sub_menu { display: block; } /* 二级菜单容器 */ /* 后辈选择器 */ ul.menu ul.sub_menu { display: none; position: absolute; color: #666; } /* 二级菜单元素 */ ul.menu ul.sub_menu > li { }<div class="second_line"> <div class="logo">logo</div> <!-- ul 菜单列表 --> <ul class="menu"> <li class="menu_item"> <span>学校详情</span> <ul class="sub_menu"> <li>学校简介</li> <li>历史沿革</li> </ul> </li> <li class="menu_item"> <span>人才培养</span> <ul class="sub_menu"> <li>本科生教育</li> <li>研究生教育</li> </ul> </li> <li class="menu_item"> <span>科学研究</span> </li> </ul> </div>兄弟选择器： ...

最近很少写款式相干的代码，而后忽然去查看款式相干的BUG，发现自己回顾不起来。整顿了一下学习笔记，不便本人须要的时候疾速回顾。

1. 背景最近开发了一个录取通知书流动，获得了比拟好的成果，所以写篇文章总结一下教训，有趣味的能够点击下方链接，请在挪动端关上。 录取通知书流动 2. 目录动画成果实现计划比照挪动端适配视频预加载学习材料举荐3. 动画成果实现计划比照3.1 程度静止动画纯css实现计划 大略的代码 .animate .p3_d { animation: p3D 1s ease-in 0.1s forwards;}@keyframes p3D { 0% { transform: translate3d(24rem, 0, 0); } 90% { transform: translate3d(7.2rem, 0, 0); } 100% { transform: translate3d(8.2rem, 0, 0); }}实现成果地址 能够看到整体的动画成果其实不够灵便，显得板滞，影响动画成果的两个关键因素一个是关键帧（keyframes），一个是动画的过渡成果（transition-timing-function），这里应用的是ease-in，个别好的过渡成果都会用贝塞尔曲线实现（感觉都能够独自写一篇文章解说贝塞尔曲线对动画的影响了，篇幅起因不做开展）。 集体倡议如果设计师可能在这两个关键因素上提供帮忙，那么就用css实现，如果不能，能够思考其余的计划 应用dynamics.js实现 dynamics.js的官网，借助这个库能够实现一些真切的物理静止动画 const p30 = document.querySelector('.p3_0');dynamics.animate(p30, { translateX: '1.7rem' }, { type: dynamics.spring, frequency: 40, friction: 200, duration: 1000, delay: 0.2});能够看到它的应用形式相当简略，要说毛病，个人感觉就是源码用coffee.js写的，这门语言当初根本曾经被ts代替了，如果感觉它不能满足需要，想改源码可能比拟艰难，上面看一下应用dynamics.js实现的成果 实现成果地址 其实动画成果就是这样，乍一看实现成果都差不多，但认真看，它们之间还是会有很多轻微的差异，往往就是这些渺小的差异，值得咱们深入研究，让动画成果显得更加灵动，真切。 3.2 随机静止动画形式1：纯css实现相似的静止（不是随机） 能够参考这个例子，这个例子尽管不是真正的随机静止，然而实现成果也不错，所以做为一个参考的案例也放进来一起比拟。 察看optionFloatAniP2Key的实现，能够看到，为了静止成果的平滑，设置了十分多的关键帧，这就十分依赖视觉把关键帧导出给前端，光靠前端本人可能很难实现这么丝滑的动画成果。 ...

应用transform属性实现缩放，应用transtion减少动画过渡成果鼠标悬浮前： 鼠标悬浮后： 实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="img_box"> <img src="./images/2.png" alt=""> </div></body><style> .img_box{ width: 500px; height: 250px; overflow: hidden; } img { width: 500px; height: 250px; transform: scale(1); transition: all 1s; } .img_box:hover img { transform: scale(1.2); transition: all 1s; }</style></html>

极速上手 flex-direction整体方向，横着还是竖着。默认横着左上角flex-wrapflex-direction横着太多，须要换行吗？align-items单轴横着一排顶上，顶下还是横排文字改正align-content多轴顶上还是顶下justify-content帮flex-direction决定聚合还是平铺justify-items用了也没用，他是grid网格布局用的flex-flow组合的flex-direction和flex-wrap order-1 0 1 决定了你独自的li谁往前谁往后flex-grow所有.a > li批量用它，自适应一行。只用一个那就一行自适应flex-basis其实就是li最小宽度flex-shrink放大比例flexflex-grow, flex-shrink 和 flex-basis简写align-self相当于独自版的align-items实战与其挨个讲不如间接实战，每个货色怎么玩 1.导航左右各一个 <div class="a"> <div> 新建 </div> <div> <span>查问</span> <span>更多</span> </div> </div> <style> .a { display: flex; // 所有左上角汇合 justify-content: space-between; // div左右各离开 align-items: center; //核心轴对齐，让文字能参差一条线 background: #fff; padding: 10px; } </style>2.输入框默认款式！问题是(1)输入框和按钮靠不近(2)宽度不能100% <div> <input type="text" /> <button type="button">搜寻</button> </div>第一步：所有左靠齐 <div style="display: flex;"> <input type="text" /> <button type="button">搜寻</button> </div>第二步：填充一行 <div style="display: flex;"> <input type="text" style="flex-grow: 1;" /> <button type="button">搜寻</button> </div>第三步：自选上中下还是自适应填充 <div style="display: flex;"> <input type="text" style="flex-grow: 1; align-self: auto;" /> <button type="button">搜寻</button> </div>商城排列其实就是横竖横三个一分。 ...

当用户会话（前台过程）提交（或回滚）时，会话的redo信息须要刷入到重做日志文件中。 用户会话将应用LGWR来将日志缓冲区中所需的所有redo申请写入重做日志文件。当LGWR实现后，它将告诉用户过程。用户会话将呈现该期待事件，同时期待LGWR将其回发以确认所有重做更改都平安地在磁盘上。 换句话说，用户会话/前台过程破费的工夫期待刷新重做以使得commit期待更长时间。因而，咱们能够将这些期待视为来自前台过程（或通常的提交客户端）的提交提早。 该期待事件越多，可能阐明LGWR的写效率低或者零碎提交（回滚）过于频繁。通常产生在OLTP零碎上。 对于本身范畴内产生的期待 查看动静性能视图V$SESSION_WAIT波及到的“log file sync”参数P1 = buffer# P2 = not used / sync scn P3 = not used 注： buffer#：此缓冲区编号（在日志缓冲区中）的所有更改都必须刷新到磁盘并确认写入以确保事务已提交，并且将在实例解体时放弃提交。因而期待LGWR刷新到此buffer#。 sync scn：10.2.0.5.0及更高版本会应用到。示意须要同步到磁盘的SCN值的根底。期待LGWR刷新SCN值。 等待时间期待齐全依赖于 LGWR写出到必要的重做块并确认实现返回用户会话。等待时间包含日志缓冲区的写入和post。在某些版本中，waiter超时并在期待时每隔一段时间减少序列号（旧版本中间隔时间是以1秒为单位，新版本中游戏自适应）。 寻找“Blockers”如果会话持续在雷同的buffer#上期待，则V$SESSIONwww.cungun.comIT的SEQ#列可能会减少，具体取决于所应用的期待计划。如果buffer#值没有扭转，须要查看看看LGWR正在期待什么，因为它可能被卡住了。还要查看期待过程是否还活着。 对于零碎范畴内产生的期待 “log file sync”上期待的零碎范畴的数字显示了期待提交（或回滚）实现所破费的工夫。如果这很重要，那么LGWR可能存在问题。还须要关注： LGWR的另一个期待事件"log file parallel write"“user commit”和”user rollback”的统计信息，查看正在收回的提交和回滚的次数。缩小期待和等待时间的办法 有五个办法能够缩小该期待事件的工夫： 调整 LGWR 取得更好的磁盘吞吐量。如： 不要将重做日志放在RAID 5上，因为RAID 5对于频繁写入的零碎会带来较大的性能损失。如果有很多小事务，看是否能够将事务BATCH放在一起，从而缩小不同的COMMIT操作。 每次提交都必须确认相干的REDO刷到磁盘上。只管Oracle能够“piggybacked”提交，但通过批处理事务来缩小提交的总数会产生十分好的成果。查看是否有任何解决能够应用COMMIT NOWAIT选项（但在应用之前肯定要理解它的语义）。查看是否能够应用NOLOGGING / UNRECOVERABLE选项平安地实现任意操作。查看重做日志是否足够大。增大重做日志，使日志在15到20分钟之间切换。另外，日志文件同步期待的总工夫能够细分为以下几种： 闲暇时唤醒 LGWRLGWR收集要写入的redo操作并收回I/O申请日志写I/O实现工夫LGWR I/O开始工作LGWR告诉写入实现的前台/用户会话前台/用户会话唤醒

1、条纹背景 <style type="text/css">.horizontal-stripes{ width: 200px; height: 200px; margin-bottom: 20px; color: #fff; /* 原理：#f60占50%，从0%~50%都是纯#f60； 渐变色从#f60(起始色) 50%处开始适度到#333(完结色) 50%处，起点也是50%，因而相当于没有适度； 起始色与完结色还剩下50%，这剩下的50%区域按完结色平均分配 */ background-image: linear-gradient(#f60 50%, #333 50%); background-size: 100% 20px;} .veritcal-stripes{ width: 200px; height: 200px; margin-bottom: 20px; color: #fff; background-image: linear-gradient(to right, #f60 50%, #333 50%); background-size: 20px 100%;}</style><body> <div class="horizontal-stripes">横向条纹</div> <div class="veritcal-stripes">垂直条纹</div></body>2、收货地址底部斜边框 其实这个边框并不完满，将高度调高后会变成下图这样，有晓得解决的高手请指导下： <style> .box{ position: relative; width: 50%; height: 150px; margin: 50px auto; background-color: #eee; } .box::after{ position: absolute; bottom: 0; left: 0; content: ' '; width: 100%; height: 4px; background-image: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 20%, transparent 25%, #1989fa 25%, #1989fa 45%, transparent 45%,transparent 50%); background-size: 140px; }</style><body> <div class="box"></div></body>

一个简略的二级导航，HTML构造如下; <ul class="nav"> <li><a href="#">开单业务</a> <ul class="two"> <li><a href="#">销售单据</a></li> <li><a href="#">入库单据</a></li> <li><a href="#">领用单据</a></li> <li><a href="#">报废单据</a></li> </ul> </li> <li><a href="#">查问业务</a> <ul class="two"> <li><a href="#">销售查问</a></li> <li><a href="#">入库查问</a></li> <li><a href="#">领用查问</a></li> <li><a href="#">报废查问</a></li> </ul> </li> <li><a href="#">客户治理</a> <ul class="two"> <li><a href="#">新增客户</a></li> <li><a href="#">批改材料</a></li> <li><a href="#">删除客户</a></li> </ul> </li> <li><a href="#">会员卡治理</a> <ul class="two"> <li><a href="#">新增会员卡</a></li> <li><a href="#">批改材料</a></li> <li><a href="#">删除会员卡</a></li> </ul> </li> <li><a href="#">会员卡品种</a> <ul class="two"> <li><a href="#">新增品种</a></li> <li><a href="#">批改品种</a></li> <li><a href="#">删除品种</a></li> </ul> </li> <li><a href="#">权限治理</a> <ul class="two"> <li><a href="#">新增用户</a></li> <li><a href="#">权限设置</a></li> <li><a href="#">批改明码</a></li> <li><a href="#">删除用户</a></li> </ul> </li> <li><a href="#">退出</a></li> </ul>css款式 ul.nav{ width: 100%; display: flex; justify-content: space-around; list-style: none; margin: 0; background: linear-gradient(45deg, #88ad83, #8c1d7800); font-size: 20px; font-weight: bold; position: relative;}ul.two{ position: absolute; width: max-content; list-style: none; font-size: 15px; font-weight: bold; margin: 0; padding: 10px 0; visibility: hidden; background:white; left:0; width:100%; }ul.nav>li:hover{ background:red; padding:0 10px 0 10px;}ul.two li{ float:left; padding:0 0 0 10px;}a{ text-decoration: none;}

程度垂直居中分居中元素定宽高与不定宽高两种状况。不仅限本文的实现形式，本文只总结绝对罕用的形式。 如果有公共代码： .wp { border: 1px solid red; width: 300px; height: 300px;}.box { background: green; }//size仅定宽须要 .box.size{ width: 100px; height: 100px;}<div class="wp"> <div class="box size">123123</div></div>一、定宽高absolute + 负marginabsolute + margin autoabsolute + calc1.absolute + 负margin.wp { border: 1px solid red; width: 300px; height: 300px;}.box { background: green; }.box.size{ width: 100px; height: 100px;}2.absolute + margin auto.wp { position: relative;}.box { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}3.absolute + calc.wp { position: relative;}.box { position: absolute;; top: calc(50% - 50px); left: calc(50% - 50px);}二、不定宽高absolute + transformlineheightcss-tableflexgrid1.absolute + transform.wp { position: relative;}.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}2.lineheight.wp { line-height: 300px; text-align: center; font-size: 0px;}.box { font-size: 16px; display: inline-block; vertical-align: middle; line-height: initial; text-align: left; /* 修改文字 */}3.css-table.wp { display: table-cell; text-align: center; vertical-align: middle;}.box { display: inline-block;}4.flex.wp { display: flex; justify-content: center; align-items: center;}5.grid.wp { display: grid;}.box { align-self: center; justify-self: center;}总结：PC端有兼容性要求，宽高固定，举荐absolute + 负marginPC端有兼容要求，宽高不固定，举荐css-tablePC端无兼容性要求，举荐flex挪动端举荐应用flex参考：https://segmentfault.com/a/11...

<!-- 如何优雅地实现浏览器兼容与规定回退 --> 读完了《Visual Studio Code权威指南》，前端方面书籍不能停，于是捡起「CSS一姐」 Lea Verou 的《CSS魔法》。 咱们没法管制用户应用新版本还是老版本的浏览器，因而往往须要依据浏览器对于属性的兼容状况书写多套 CSS 代码。本文就是探讨如何优雅地应答浏览器兼容问题，包含四点：层叠机制来反对较早的浏览器，Modernizr设置辅助类来别离编写款式，应用 @supports 规定回退，简短的 JavaScript 代码实现回退。 提供浏览器兼容的网站https://caniuse.com/https://webplatform.github.io/https://developer.mozilla.org...层叠机制来反对较早的浏览器/* 避免 linear-gradient 在老浏览器中挂掉导致没有背景 */background: rgb(255, 128, 0);background: -moz-linear-gradient(0deg, yellow, red);background: -o-linear-gradient(0deg, yellow, red);background: -webkit-linear-gradient(0deg, yellow, red);/* 应该将规范语法放在最初，来确保最终失效的是是规范语法 */background: linear-gradient(90deg, yellow, red);Modernizr设置辅助类来别离编写款式这里参考了一篇14年的老博客 Modernizr 的介绍和应用。 Modernizr 官网：https://modernizr.com/ Modernizr 如何失效？如果页面反对 text-shadow 属性，那么 Modernizr 会增加 textshadow 类。如果不反对，那么它用 no-textshadow 类作为代替进行增加。 因而，前端开发人员就能够设置两套代码，来应答浏览器提供或者不提供 text-shadow 反对的两种状况。 /* 浏览器不反对 text-shaow */h1 { color: gray }/* 浏览器反对 text-shaow */.textshaow h1 { color: transparent; text-shadow: 0 0 .3rem gray;}应用 @supports 规定回退除了应用 Modernizr ，也能够应用浏览器自带的 @supports ： ...

<canvas id="myCanvas" width="400" height="400"></canvas>var canvas = document.getElementById('myCanvas')var gl = canvas.getContext('webgl')var program = gl.createProgram()var VSHADER_SOURCE, FSHADER_SOURCE VSHADER_SOURCE = 'attribute vec4 a_Position;\n' +'uniform mat4 u_ModelMatrix;\n' +'uniform mat4 u_ViewMatrix;\n' +'void main () {\n' + 'gl_Position = u_ProjectionMartix u_ViewMatrix u_ModelMatrix * a_Position; \n' +'}\n'FSHADER_SOURCE ='void main () {\n' + 'gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n' +'}\n'var vertexShader, fragmentShaderfunction createShader (gl, sourceCode, type) { // create shader var shader = gl.createShader(type) gl.shaderSource(shader,sourceCode) gl.compileShader(shader) return shader}// define vertex shadervertexShader = createShader(gl, VSHADER_SOURCE,gl.VERTEX_SHADER)//define frament shaderfragmentShader = createShader(gl, FSHADER_SOURCE, gl.FRAGMENT_SHADER) ...

一)连贯 连贯通常来自Web服务器，上面列出了一些与连贯无关的参数，以及该如何设置它们。 1、max_connections 这是Web服务器容许的最大连接数，记住每个连贯都要应用会话内存(对于会话内存，文章前面有波及)。 2、max_packet_allowed 最大手游数据包大小，通常等于你须要在一个大块中返回的最大数据集的大小，如果你在应用近程mysqldump，那它的值须要更大。 3、aborted_connects 查看零碎状态的计数器，确定其没有增长，如果数量增长阐明客户端连贯时遇到了谬误。 4、thread_cache_size 入站连贯会在MySQL中创立一个新的线程，因为MySQL中关上和敞开连贯都很便宜，速度也快，它就没有象其它数据库，如Oracle那么多继续连贯了，但线程事后创立并不会节约工夫，这就是为什么要MySQL线程缓存的起因了。 如果在增长请密切注意创立的线程，让你的线程缓存更大，对于2550或100的thread_cache_size，内存占用也不多。 (二)查问缓存 (三)长期表 内存速度是相当快的，因而咱们心愿所有的排序操作都在内存中进行，咱们能够通过调整查问让后果集更小以实现内存排序，或将变量设置得更大。 tmp_table_size max_heap_table_size 无论何时在MySQL中创立长期表，它都会应用这两个变量的最小值作为临界值，除了在磁盘上构建长期表外，还会创立许多会话，这些会话会抢占有 限度的资源，因而最好是调整查问而不是将这些参数设置得更高，同时，须要留神的是有BLOB或TEXT字段类型的表将间接写入磁盘。 (四)会话内存 MySQL中每个会话都有其本人的内存，这个内存就是调配给SQL查问的内存，因而你想让它变得尽可能大以满足需要。但你不得不均衡同一时间数 据库内一致性会话的数量。这里显得有点彩色艺术的是MySQL是按需分配缓存的，因而，你不能只增加它们并乘以会话的数量，这样估算下来比MySQL典型 的应用要大得多。 最佳做法是启动MySQL，连贯所有会话，而后持续关注顶级会话的VIRT列，mysqld行的数目通常放弃绝对稳固，这就是理论的内存 总用量，减去所有的动态www.diuxie.comMySQL内存区域，就失去了理论的所有会话内存，而后除以会话的数量就失去平均值。 1、read_buffer_size 缓存间断扫描的块，这个缓存是跨存储引擎的，不只是MyISAM表。 2、sort_buffer_size 执行排序缓存区的大小，最好将其设置为1M-2M，而后在会话中设置，为一个特定的查问设置更高的值。 3、join_buffer_size 执行联结查问调配的缓存区大小，将其设置为1M-2M大小，而后在每个会话中再独自按需设置。 4、read_rnd_buffer_size 用于排序和order by操作，最好将其设置为1M，而后在会话中能够将其作为一个会话变量设置为更大的值。 (五)慢查问日志 慢速查问日志是MySQL很有用的一个个性。 1、log_slow_queries MySQL参数中log_slow_queries参数在my.cnf文件中设置它，将其设置为on，默认状况下，MySQL会将文件放到数据目录，文件以“主机名-slow.log”的模式命名，但你在设置这个选项的时候也能够为其指定一个名字。 2、long_query_time 默认值是10秒，你能够动静设置它，值从1到将其设置为on，如果数据库启动了，默认状况下，日志将敞开。截至5.1.21和装置了 Google补丁的版本，这个选项能够以微秒设置，这是一个了不起的性能，因为一旦你打消了所有查问工夫超过1秒的查问，阐明调整十分胜利，这样能够帮忙 你在问题变大之前打消问题SQL。 3、log_queries_not_using_indexes 开启这个选项是个不错的主见，它实在地记录了返回所有行的查问。

编写一个函数，其中输出的类型与输入的类型相干，或者两个输出的类型以某种形式相干。 让咱们思考一个返回数组第一个元素的函数： function firstElement(arr: any[]) { return arr[0];}这个函数实现了它的工作，但可怜的是返回类型为 any。 如果函数返回数组元素的类型会更好。 在 TypeScript 中，当咱们想要形容两个值之间的对应关系时，会应用泛型。 咱们通过在函数签名中申明一个类型参数来做到这一点： function firstElement<T>(arr: T[]): T { return arr[0];}const arr: string[] = ['1', '2', '3'];const result = firstElement(arr);console.log(result);const result1:number = firstElement(arr); TypeScript 的类型推断 - Type inferencefunction map<Input, Output>(arr: Input[], func: (arg: Input) => Output): Output[] { return arr.map(func);}留神，下面代码的 Inout，Output 能够被 T, V 代替，然而可读性不如前者。 Type constrains - 类型束缚咱们曾经编写了一些能够解决任何类型值的通用函数。 有时咱们想关联两个值，但只能对某个值的子集进行操作。 在这种状况下，咱们能够应用束缚来限度类型参数能够承受的类型品种。 让咱们编写一个函数，返回两个值中较长的一个。 为此，咱们须要一个长度属性，它是一个数字。 咱们通过编写 extends 子句将类型参数限度为该类型： function longest<Type extends { length: number }>(a: Type, b: Type) { if (a.length >= b.length) { ...

该语句能够查问以后数据库所有耗费temp表空间的session信息及所运行的sql语句。 SELECT S.sid,SUM (T.blocks) * TBS.block_size / 1024 / 1024 mb_used, S.serial# sid_serial, s.INST_ID, S.username, S.osuser, P.spid, S.module, P.program, T.tablespace, q.sql_text, nvl(S.sql_id,S.PREV_SQL_ID) sql_id --COUNT (*) statementsFROM gv$sort_usage T, gv$session S, dba_tablespaces TBS, gv$process P, gv$sql q就能够失去页游的相干数据，如下示意： WHERE T.session_addr = S.saddr AND t.INST_ID = S.INST_ID AND S.paddr = P.addr AND S.INST_ID = P.INST_ID AND nvl(S.sql_id,S.PREV_SQL_ID)=q.sql_id AND T.tablespace = www.walajiao.comTBS.tablespace_nameGROUP BY S.sid, S.serial#, s.INST_ID, S.username, S.osuser, P.spid, S.module, P.program, TBS.block_size, T.tablespace, q.sql_text, nvl(S.sql_id,S.PREV_SQL_ID)order by 2 desc ...

用oracle 用户解压：tar –xvf oswbb733.tarcd /osw /oswbb 每个节点上，依据Exampleprivate.net 文件，新增private.net, 各平台有所不同，比方linux 下为： Linux Exampleecho "zzz *"date traceroute -r -F zzbdwdb01-pvt traceroute -r -F zzbdwdb02-pvt DO NOT DELETE THE FOLLOWING LINE!!!!!!!!!!!!!!!!!!!!!rm locks/lock.file 将 private.net 批改为 777 权限： chmod 777 private.net 启动osw:cd /osw/oswbb nohup /osw/oswbb/startOSWbb.sh 5 720 gzip >/osw/oswbb/startOSW.sh.out 2>&1 其中 5 代表 5 秒收集一次， 720 代表保留多少小时。 确认 /osw/oswbb/archive/oswprvtnet 手游目录下有文件生成，否则就是 private.net 没编写正确导致。 生成check_osw.sh ，以及crontab 定时工作cd /osw/oswbb vi check_osw.sh PATH=$PATH:$HOME/bin:$ORACLE_HOME/bin:$GI_HOMEwww.diuxie.com/bin:$ORACLE_HOME/OPatch export PATH export TERM=vt100 ...

全局装置npm install tsc -g全局装置npm install -g gulp-cli创立一个我的项目–>外面创立src和dist文件npm init创立一个package.jsonpackage.json文件{ "name": "demo01", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"}, "author": "", "license": "ISC", "devDependencies": { "browserify": "^14.3.0","gulp": "^3.9.1","gulp-typescript": "^3.1.6","gulp-util": "^3.0.8","tsify": "^3.0.1","typescript": "^2.2.2","vinyl-source-stream": "^1.1.0","watchify": "^3.9.0"src/main.tsimport { sayHello } from "./greet"; function showHello(divName: string, name: string) { const elt = document.getElementById(divName);elt.innerText = sayHello(name);} showHello("greeting", "TypeScript"); src/greet.tsexport function saywww.sangpi.comHello(name: string) { return `Hello from ${name}`;"compilerOptions": { "module": "commonjs","target": "es5","noImplicitAny": true,"sourceMap": true}, "exclude": [ ...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>情人节心跳动动画</title> <style type="text/css"> html, body{ width: 100%; height: 100%; min-width: 500px; min-height: 500px; overflow: hidden; } .heart { position: absolute; width: 100px; height: 90px; top: 50%; left: 50%; margin-top: -45px; margin-left: -50px; } .heart:before, .heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #fc2e5a; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin :100% 100%; } .heart1{ animation: heart-anim 1s linear .4s infinite; } .heart2{ animation: pounding .5s linear infinite alternate; } .heart1:after, .heart1:before{ background-color: #ff7693; } @keyframes pounding{ 0%{ transform: scale(1.5); } 100%{ transform: scale(1); } } @keyframes heart-anim { 46% { transform: scale(1); } 50% { transform: scale(1.3); } 52% { transform: scale(1.5); } 55% { transform: scale(3); } 100% { opacity: 0; transform: scale(50); } } </style></head><body> <!--外圈大心--> <div class="heart heart1"></div> <!--外面小心--> <div class="heart heart2"></div></body><script type="text/javascript"></script></html>

FIT5171 Project Assignment 1Test Planning, System Setup, and CodeUnderstanding & ExtensionYuan-Fang Li and Yan LiuDue: 23:59pm, Sunday 31st March, 2019 (Final)1 Project descriptionIn this assignment, you will work on the first part of a semester-long project.This project, http://www.allaboutrockets.com, is based on Java and it will eventuallydevelop into a simple Web application.The project has been set up to use the build management tool Apache Maven(http://maven.apache.org/), which you have practiced in Tutorial 1. It also usesframeworks including Spark, OrmLite and Freemarker in the later parts.2 Assignment 1This assignment focuses on planning the testing approach and getting the basicstructure up and running.12.1 Test PlanningThe very high-level and potentially incomplete (functional and technical) descriptionhas been given in the “spec.pdf” document, which can be found onMoodle.1 Given the description, your task is to provide a high-level testingstrategy document.There is no specific format for this document. However, your testing strategyshould include at least the following components: Types of testing (functional, non-functional, etc, including their sub-types)and their objectives Testing tools and approach (manual, automatic, etc.) Defect tracking mechanismsNote that there is no single correct answer. As not all details have been laidout in the description document (spec.pdf), each group may conduct someresearch on the above topics and come up with a proposed solution.You can refer to the lecture slides for advice on the level of details in thestrategy document.2.2 Development & Testing Environment SetupYou will need to properly set up the development environment on your laptop.The setup is very similar to the one used in Tutorial 1. Once you have correctlyset up the local development environment, you will need to set up version controland continuous integration.Local. On your laptop, you need to Setup the development environment, including:– JDK 8 2– An IDE of your choice, recommended IntelliJ 3– Maven 4: Skip this step if you are using modern IDEs like IntelliJ(built-in Maven projects).– GitHub education pack private repository 5– Adding your tutor(s) to your private repository Import the code base provided. A compressed Maven project has beenmade available on Moodle. You need to download and unzip this folderand import it into your IDE. Finally, you need to ensure that you cancompile and run the tests using Maven.1https://lms.monash.edu/course...2JDK 8, https://www.oracle.com/techne...jdk8-downloads-2133151.html3IntelliJ, https://www.jetbrains.com/ide...4Maven, https://maven.apache.org/down...5Create a repository, https://guides.github.com/act...2Remote. Make sure you can update and commit your team’s source code toyour GitHub repository.(Not required in assignment 1 since there is not enough time for youto set up Jenkins server). Also you need to set up Jenkins for continousintegration so that it polls for changes in your repository and automatically runsthe tests (using Maven) whenever you commit any code into your repository.Instructions on remote Jenkins environment setup will be posted on Moodlewhen the it is ready. Important: the completion of the remote setup depends on the status ofthe server to be provided by the university. We let you know when it isready for use. If it becomes available too late, this part (remote setup)does not need to be completed.2.3 Code Base Understanding and Extension, using TDDA basic code base will be provided that sets up the project structure with simpleclasses for certain components. The code includes the following Java classes inthe domain model: Rocket, Launch, LaunchServiceProvider, and User.You will need to read the source code and develop reasonable constraints, orconditions for classes User, Rocket, and LaunchServiceProvider. For example,the value of the attribute email in the User class should not be null andshould be a valid email address. Similarly, the parameters for the setter methodsfor setting the username and password attributes should be non-empty too.Please consider the best place to develop such validation code.You will utilise the test-driven development (TDD) process for the extension.Hence, your extension will need to be accompanied by JUnit unit tests.For each class under test, for example src/main/java/bar/Foo.java, itstest methods should be in a file called FooUnitTest.java (or FooTest.java),in the same package, but under the directory src/test/java/bar/. For a moreconcrete example, for class User, its complete path is:src/main/java/rockets/model/User.javaThe path of its (unit) test class should be:src/test/java/rockets/model/UserUnitTest.javaTo help you get started, the class UserUnitTest.java has already been createdwith a few test cases. You can refer to it as an example. You should extendit too. Besides, there is a shortcut for creating corresponding test classes6. UseMaven to run all the unit tests, and make sure they all pass without failures.3 AssessmentThis assignment carries 10 marks. The assessment will be based on the submittedfiles as well as a demo/interview conducted in-class in week 5.6Create test classes, https://www.jetbrains.com/hel...33.1 SubmissionYou will need to submit a report and the extended code base, contained in asingle .zip file, to Moodle. Other file types are not accepted for submission.Only one member from each group needs to submit the file. In your submissionclearly indicate the group members (in a separate readme.txt file, forexample).The report will include four parts: (1) testing strategy, (2) a descriptionof the setup, (3) a brief description of the extension and the testing of theextension, and (4) self assessment (a.k.a., individual contributions). The reportshould not exceed 6 pages in length.Self assessment & peer assessment. Even though the project assignmentsare group-based, assessment is individual-based. Hence, we will incorporate selfand peer assessment in this assignment’s marking.Please include individual contributions in your submitted reportand during demo. We will open CATME evaluation when it is necessary.For self and peer assessment, we will use CATME, an online system7.CATME allows students to assess self and each other’s performance in a teambasedproject in a confidential way. More details on how to submit CATMEpeer evaluation will be provided on Moodle shortly.3.2 DemoA demo will be conducted in week-5 tutorials. Each group will demonstrateto the tutor their setup on a laptop. Each group will also need to give a codewalkthrough to the tutor, showing your understanding of the code base, yourextensions, and your tests. Also demonstrate to the tutor that you can run alltests automatically through Maven.3.3 Assessment Breakdown4 marks — Testing strategy documentation. This part of the report shouldbe concise: it should not exceed 2 pages in length.2 marks — Setup, that you have successfully setup the local working environment.Your report can contain screenshots showing that your setup is successful.If you ran into problems setting up the environment, your report shouldbriefly document the problem and the status of the setup. This part ofthe report should be concise: it should not exceed 2 pages in length.4 marks — Code base understanding and extension.2 marks Reasonable constraints or conditions are added to the code base.7https://www.catme.org/42 marks Tests correctly make use of JUnit test fixtures and assertions to validateconditions in the code and/or specification. Tests can be runby Maven automatically and they pass successfully without failure.Your report should contain a brief description of the extension(s) that youhave developed, and how they are tested in the TDD process. This partof the report should be concise: it should not exceed 2 pages in length.4 Extra Credit: Maximum 3 Marks (Optional)The provided code base can be extended in many ways to enrich its functionality.The following are only some possible extensions. A rocket may belong to a family of similar rockets, each with some variation.For example, Ariane 58is part of the Ariane family, and it in itselfrepresents a a number of variations: Ariane 5 ECA, Ariane 5 ES, and soon. You can extend the model to capture this (complex) information. A Launch may include a number of payloads (satellites, spacecrafts, etc.),which is currently captured as a set of String values. You can extend thecode base to capture Payload as part of the domain model, with associatedinformation.Write your extensions in appropriate places (existing or new classes), andintegrate them with the other classes in the domain model.Of course, adopting the TDD process and developing adequate test cases areessential for earning extra credit marks.8https://en.wikipedia.org/wiki... ...

Time it Took MatthewAbout 40 minutes but I forgot to time myself this time :(What to submitA zip file containing A Makefile that will compile your code into a an executable namedfind_determinant.outAll of your source files for your answer (.c and .h files)Make sure to not accidentally zip the folder that contains your answer but instead the filesthemselves.Zip ThisDon’t Zip ThisProblem DescriptionWrite a program to find the determinant of a matrix. For how to find a determinant of a matrixplease see: https://www.mathsisfun.com/al... Here you can find adeterminant calculator to help you check your work:https://www.symbolab.com/solv...Problem DetailsThe name of the file containing the matrix will be given on the command linea. This name will always be validThe structure of a matrix file isNum_rows num_colsrow1_val1 row1_val2 row1_val3…row2_val1 row2_val2 row2_val3…...The files will always be structured correctlyExamples of these files have been included in the starter codeThe matrices will always be square, ie N X NThe values in the matrix are real numbersAdditional RequirementsYou should always print your answer to 2 decimal placesYou must use a struct to represent your matrix objecta. If you do not use a struct the TAs will manually deduct 50% from your score afterthe due date has passedYour solution should consist of at least 3 source filesa. matrix.cb. matrix.hc. main.cHintsThis problem is recursiveMake sure to only open the file in read (“r”) mode. If you open it in read and write (“r+”)mode or write (“w”) mode you will get an error as you only have read permissions for thematrix filesYou are free to write as many functions as you want, so take advantage of that fact andbreak the problem down into lots of stepsExampleIn the following example, input has been underlined to help you tell it apart from what youshould output. You don’t need to underline anything, it is just a visual aid for you.Assume the file 3X3Matrix.txt had the following contents32 35 68 9./findDeterminant.out 3X3Matrix.txtThe determinant is 0.00.WX：codehelp

当UI给你如下图的设计稿时你会怎么切图呢？是除文字局部全副切下来，还是只切小房子、建筑物局部？ 如果你的抉择是除文字局部全副切下来，那你就有必要往下看了 剖析下面两个图次要由文字、图片、背景组成。第1张图比较简单：文字+图片+突变背景第2张图略微简单：文字+背景图片+突变背景对于css背景的应用很多同学都感觉它只能繁多应用，如：background: #fff、background: url(xxx.jpg)、background: linear-gradient() 其实它是能够组合应用的，如：background: #fff url(xxx.jpg)background: linear-gradient(), url(xxx.jpg)background: linear-gradient(), linear-gradient() 代码实现<style>.box1{ display: flex; padding: 30px 20px; border-radius: 375px 0 0 375px; margin-bottom: 50px; background: radial-gradient(at 101% 77%, #5E11B4, #C11DCF);}.box1 figure{ padding-top: 10%; padding-left: 5%; margin-right: 1rem; color: #fff;}.box1 figurecaption{ margin-bottom: 1rem; font-size: 3rem; font-weight: 600;}.box1 img{ display: block; width: 700px; max-width: 100%; margin-left: auto;} .box2{ height: 520px; border-radius: 0 360px 360px 0; color: #fff; text-align: center; /* 应用多个背景来达到还原设计稿的成果 */ background: linear-gradient(to right, rgba(200,35,180,0.8), rgba(136,42,208,0.8)), url('./property-bg.jpg'); background-size: cover; background-position: 0 0;}.box2 h3{ padding-top: 10%; font-size: 3rem;}</style><div class="box1"> <figure> <figurecaption> Apartment <br> For You </figurecaption> <p>There are many variations of passages of Lorem Ipsum available</p> </figure> <img src="./slider-img.png" alt=""></div><div class="box2"> <h3>Properties</h3> <p>There are many variations of passages of Lorem Ipsum available</p></div>

突变边框能够应用border-image，但带有圆角的突变边框单靠border-image却无奈实现，那有哪些办法能够实现圆角突变边框呢？ 计划一：应用border-image+clip-path实现（举荐） <style>.radius-gradient-border1{ max-width: 300px; padding: 8px; border: 5px solid transparent; border-image: linear-gradient(90deg, #387EE8, #f60) 1; border-radius: 5px; margin-bottom: 20px; color: #f60; background-color: rgba(255,255,255,0.5); clip-path: inset(0 0 round 5px);}</style><div class="radius-gradient-border1"> <p>border-image</p> + <p>clip-path</p> 实现</div>长处：内容背景能够是半透明的 计划二：background-image+background-clip实现 <style>.radius-gradient-border2{ max-width: 300px; padding: 0; border-radius: 5px; border: 5px solid transparent; margin-bottom: 20px; color: #f60; /* 这里须要设置两个背景，第一个背景是内容区域的红色背景，另一个是实现突变边框的背景 */ background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #387EE8, #f60); /* 设置背景图标的坐标原点为border-box区域的左上角，因为咱们心愿背景能够渗透到边框处， 因而须要从边框处开始裁切，因而须要设置为border-box，默认为padding-box的左上*/ background-origin: border-box; /* 背景裁切的时候，第一个背景须要从内容区域开始裁切，因而设置为content-box；第二个背景须要作为突变边框，因而须要从边框处开始裁切 */ background-clip: content-box, border-box;}</style><div class="radius-gradient-border2"> <p> background-image </p> + <p>background-clip</p> 实现</div>毛病： ...

之前写页面的时候有遇到突变的提示框，折腾了很久都没搞定那个小三角，明天某然看到一位大神居然用多种办法把它给实现了，于是我就挑了一种最简略的办法去试了下，并用这篇文章记录起来，不便本人当前应用 这个提示框，最不好实现的是小三角，突变背景都好实现，代码如下： <div class="tips"> 突变提示框</div><style> .tips{ position: relative; padding: 8px 10px; border-radius: 4px; color: #fff; } .tips::before, .tips:after{ position: absolute; width: 100%; height: 100%; content: ' '; left: 0; top: 0; z-index: -1; background: linear-gradient(90deg, #ff8da2, #ec5b60); } .tips::before{ top: 0; /* 实现突变背景，背景裁剪地位从0开始就好了，round示意圆角 */ clip-path: inset(0 0 round 4px); } .tips::after{ top: 7px; /* 实现小三角，只须要3个点的坐标就能够了 */ clip-path: polygon(calc(50% - 7px) calc(100% - 7px), calc(50% + 7px) calc(100% - 7px), 50% 100%); }</style>参考文章：CSS 实现反对突变的提示框（tooltips） ...

作者：David Atanda译者：前端小智起源：CSS-Tricket有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。 除了应用媒体查问和古代CSS布局（例如flexbox和grid）来创立响应式网站之外，咱们应用一些比拟不太被用或者比拟新的个性来制作响应式网站。 在本文中，咱们将探讨许多可用的工具（围绕HTML和CSS），从响应图像到绝对较新的CSS函数，无论咱们是否应用媒体查问，它们都能够失常工作。 实上，当媒体查问与这些性能一起应用时，它更像是一种补充，而不是一种残缺的办法。让咱们看看它是如何工作的。 真正的响应图像对于图片，咱们常常应用 width: 100% 来适配图片，这种办法是挺无效的，然而对于较大的屏幕，如果图片像素不够高则会让图像看起来有些糊涂，同时这种办法也有一些毛病，其中比拟值得注意的是： 图像可能会变形到失去焦点的水平。屏幕较小的设施也要下载在大屏幕展示的大尺寸图片。在网页上应用图像时，咱们必须确保它们在分辨率和大小方面失去了优化。起因是为了确保咱们有适宜正确设施的正确图像分辨率，因而咱们最终不会为较小的屏幕下载尺寸过大的图像，而这最终可能会升高网站的性能 。 简而言之，咱们须要将较大的高分辨率图像发送到较大的屏幕，而将较小的低分辨率版本发送到较小的屏幕，从而改善性能和用户体验 。 HTML提供了<picture>元素，该元素能够依据所增加的媒体查问来指定要渲染的确切图像资源。 如前所述，咱们没有将一个图像（通常是较大的高分辨率版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定了一组图像以在特定状况下应用。 <picture> <source media="(max-width:1000px)" srcset="picture-lg.png"> <source media="(max-width:600px)" srcset="picture-mid.png"> <source media="(max-width:400px)" srcset="picture-sm.png"> <img src="picture.png" alt="picture""></picture>在此示例中，picture.png是最大尺寸图像。除了这个之外，咱们定义图像的第二大版本picture-lg.png，并且大小按降序减小，直到最小的版本picture-sm.png。 留神，咱们仍以这种形式应用媒体查问，然而<picture>元素自身驱动了响应行为，而不是在CSS中定义了断点 。 媒体查问会依据图片的大小适当地增加: 大于等于1000px的视口加载picture.png601px到999px之间的视口加载image-lg.png介于401px和600px之间的视口加载picture-mid.png小于400px的会加载image-sm.png乏味的是，咱们还能够在URL前面通过图像密度1x, 2x, 3x等等来标记每个图像。如果咱们按比例制作不同的图片，这种办法就能见效。这容许浏览器依据屏幕的像素密度和视口大小来决定下载哪个版本。然而请留神咱们最终定义了多少图像: <picture> <source media="(max-width:1000px)" srcset="picture-lg_1x.png 1x, picture-lg_2x.png 2x, picture-lg_3x.png 3x"> <source media="(max-width:600px)" srcset="picture-mid_1x.png 1x, picture-mid_2x.png 2x, picture-mid_3x.png 3x"> <source media="(max-width:400px)" srcset="picture-small_1x.png 1x, picture-small_2x.png 2x, picture-small_1x.png 3x"> <img src="picture.png" alt="picture""></picture>接下来，咱们来专门看一下嵌套在<picture>元素内的两个标签：<source>和<img>。 浏览器查找媒体查问与以后视口宽度匹配的第一个<source>元素，而后它将显示适当的图像(在srcset属性中指定)。<img>元素作为<picture>元素的最初一个子元素是必须的，如果没有一个source标签与之匹配，则作为一个回退选项。 咱们还能够应用srcset属性应用图像密度来解决仅应用<img>元素来解决响应图像： <img srcset=" flower4x.png 4x, flower3x.png 3x, flower2x.png 2x, flower1x.png 1x " src="flower-fallback.jpg">咱们能够做的另一件事是依据设施自身的屏幕分辨率(通常以每英寸的点或dpi来掂量)在CSS中编写媒体查问，而不仅仅是设施视口。这意味着不是上面这种写法 @media only screen and (max-width: 600px) { /* Style stuff */}而是 ...

Survey SamplingStatistics 4234/5234 — Fall 2018Take-home final examThe following problems are due to Room 203 Mathematics between 7:10pm and 8:00pm onTuesday, December 18. You can also submit your paper to the course mailbox in Room 904SSW, any time before 7:00pm on Tuesday, December 18.You are not to discuss these problems with anyone other than the instructor, nor consult anypublished or on-line reference other than Sampling: Design and Analysis; by Sharon L. Lohr.Please refer to the Homework requirements section of the Course Information document postedat the beginning of the course. A portion of your score on the final exam will be based onpresentation; any paper that fails to comply with items 2 through 8 of those requirements willnot earn the presentation points. ...

<!doctype html><html><head><meta charset="utf-8"><title>png 动画</title><style>div {/steps:为图片的总帧数，也就是说背景图外面有多少个多里的图片/animation: 5s steps(23) 0s normal none infinite running ape_amb;background-image: url("http://www.animalmade.com/files/css/../images/sprite/sprite-animal-ape.png");background-position:-1821px center;height: 217px;margin-left: 210px;width: 169px;overflow:hidden;}@keyframes ape_amb {0% {background-position:0px center;}100% {background-position: -5113px center;/**最初一张图片的地位**/}}</style></head><body></body><div></div></html>

1.文字效果空心字 <style>div { background: deeppink; color: white; text-shadow: 1px 1px black, -1px -1px black, -1px 1px black, 1px -1px black}</style><div> css</div>用屡次含糊的text-shadow的成果比下面在放大状况下更好<style>div { background: deeppink; color: white; text-shadow: 0px 0px 1px black,0px 0px 1px black;}</style><div>css</div><style>div { background: deeppink; color: white;}div text { fill: currentColor; stroke: black; stroke-width: 1;}</style><div> <svg> <text y='1em'>css</text> </svg></div>发光字体 留神多重text含糊成果的叠加<style>div { background: black; color: #ffc; text-shadow: 0 0 .1em currentcolor, 0 0 .3em currentcolor}</style><div> css</div>文字含糊 <style>div { background: black; color: #ffc;}div:hover { //filter: blur(.1em) color: transparent text-shadow: 0 0 .1em #ffc, 0 0 .1em #ffc; }</style><div>css</div>2.弹窗暗影 ...

　栈：是一种遵循后进先出(Last In First Out / LIFO) 准则的一种有序汇合。 新增加或者要删除的元素都会保留在栈的同一端，咱们把它叫做栈顶，另外一端叫做栈底。 在栈中所有的新元素都靠近栈顶，而所有的旧元素都靠近栈底。 1 在咱们的生存中也有很多相似于栈这种构造的例子： 咱们将栈视作是一个容器，比方水杯。它只有一个入口和进口就是杯子的顶部(和咱们的栈十分类似)。咱们向杯子中放入5块同杯子直径大小的饼干，全副放入后咱们开始取出饼干。大家会发现 你最先取出的饼干是最初放入的那块,正好也就合乎了咱们栈的特点(LIFO) 在编程世界中栈也被用来保留变量、办法调用等性能，也被用于浏览器的游戏历史记录(比方浏览器的返回按钮)。 那么上面咱们就应用JavaScript的类来创立一个咱们的栈。 class Stack{ constructor(){ this.items = []; } } 咱们须要一种形式来保留咱们栈中的数据，从下面的代码能够看到，我这边抉择的是数组。然而数组容许咱们在任何地位增加或者删除元素，咱们须要给元素增加和删除的地位有一个束缚，让咱们的数组可能遵循 后进先出(LIFO) 的准则。所以接下来须要给咱们的栈再增加一些办法。 // 咱们要实现的第一个性能是向栈中增加新元素 // 并且增加的新元素只能放再栈的顶部(也就是数组的尾部) push(element) { this.items.push(element); } // 应为数组的push办法也是将新元素增加到数组的尾部，所以应用数组push办法来实现 // 当初咱们来为栈增加一个移除元素的办法 // 栈构造是遵循LIFO的准则，素以移除的元素是最初增加进去的元素 pop() { return this.items.pop(); } // 咱们应用数组的push和pop两个函数就能够实现了在www.sangpi.com之后进先出的准则　// 持续为栈增加一些辅助性能// peek办法用于查看栈顶的元素 ...

1.当css间存在某种关系时该当用关系去形容，而非雷同的值 1. currentcolor:取以后元素的color值，没有则取父级的color值2. inherit:继承父级2.实现通明边框 外围问题在于：背景色撑满了整个div也就是background-clip: border-box，如果单纯的应用border: 1px solid rgba(225,225,225,.5)，会透过border看到背景所以应用background-clip: padding-box<style>div { height: 100px; width: 100px; border: 1px solid rgba(225,225,225,.5) background: red; background-clip: padding-box;}</style><div></div>3.实现多边框 留神点：box-shadow实现实线多边框时比拟好用，box-shadow会跟着元素圆角，但box-shadow并不会占用文档地位，当多个box-shadow属性时，越新设置的层级越高，会笼罩前面的设置的<style>body { position: relative; height: 100vh;}div { height: 100px; width: 100px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; box-shadow: 0 0 0 10px red, 0 0 0 20px green}</style><div></div>留神点：outline实现两层边框和虚线边框比拟好用，outline同样不占用地位，并且不能贴合border-radius(被w3c认为时bug??)<style>div { height: 100px; width: 100px; border: 5px solid green; outline: 5px solid blue;}</style><div></div>4.背景图片的定位计划 ...

background 是一种 CSS 简写属性，用于一次性集中定义一个或多个背景属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size 和 background-attachment。对于所有简写属性，任何没有被指定的值都会被设定为它们的初始值。 语法background 能够设置一个或多个背景层，多个背景层应用逗号分隔。 每一层的语法如下： 在每一层中，下列的值能够呈现 0 次或 1 次， 能够按任意程序搁置：background-attachmentbackground-imagebackground-positionbackground-sizebackground-repeatbackground-size 只能紧接着 background-position 呈现，以"/"宰割，如： "center/80%"；background-clip 和 background-origin 可能呈现 0 次、1 次或 2 次。如果呈现 1 次，它同时设定 background-origin 和 background-clip。如果呈现 2 次，第一次的呈现设置 background-origin，第二次的呈现设置 background-clip。background-color 只能在background的最初一个属性上定义，因为整个元素只有一种背景色彩。几个关键字inheritinherit 关键字使元素取得父元素的计算值。它可利用于任何 CSS 属性，包含 CSS 简写 all。 继承始终来自文档树中的父元素，即便父元素不是蕴含块。 对于继承属性，inherit 只是加强了属性的默认行为，只有在重载(overload)其它规定的时候被应用。对于非继承属性，inherit 指定的行为通常没有多大意义，个别应用应用 initial 或 unset 作为代替。initialinitial 关键字将属性的初始或默认值利用于元素，将属性复原到其初始状态。它可利用于任何CSS属性，包含 CSS 简写 all 。不应将初始值与浏览器样式表指定的值混同。 对于继承属性，initial 关键字是不起作用的。应该思考应用 inherit, unset，或revert (en-US) 关键字代替。unsetunset 关键字能够利用于任何 CSS 属性，包含 CSS 简写属性 all 。 对于继承属性，unset 关键字的行为相似于 inherit，将该属性从新设置为继承的值。对于非继承属性，unset 关键字的行为相似于 initial，将该属性从新设置为初始值。transparenttransparent 用来指定全透明色调, 相似于 rgba(0, 0, 0, 0) 这样的值。在CSS1中，transparent 被用来作为 background-color 的一个参数值，示意背景通明。在CSS2中，border-color 和 color 开始反对 transparent 作为参数值。在CSS3中，transparent 被延长到任何一个有 color 值的属性上都能够应用。 ...

最近很多人说，Android越来越不好找工作了，学习NDK开发会不会好点，明天就聊聊这个问题。是否应该抉择学NDK？ 1.哪些场景下要用到NDK开发？ 跨平台的库，如FFmpeg, skip，weex, 加固，防逆向 签名校验 图片压缩 音视频解码 OpenGL ES 高级特效 热修复 andfix 人脸识别 face++ 加密算法 游戏开发 微信apk中的so文件 图片 手机淘宝apk中so文件 图片 2.NDK开发，和JNI开发有什么区别？ JNI是JAVA NATIVE INTERFACE， JNI只是一个中间层。JNI中要用c/c++作具体实现。达到c/c++与Java通信的作用。不肯定要编译成so文件，才叫JNI开发。也不是Android上才有，Java程序员一样能够做JNI，不会写Activity也能够。Java最简略Main函数，能够申明一个Native办法，在VS中，写一段c/c++代码，依照JNI标准。编译成dll文件，放到Java工程中，一样能够执行。而so是只是不同平台动态链接库的产物，因为Android是基于linux平台。 3.有没有必要搞NDK开发？ 如果你的业务和NDK开发利用场景不是很有关联，能够不必搞，也是正当的。毕竟Java及Android中还有很多你不会玩的。如插件化（纯Java能够搞），如性能优化，如高级自定义控件，如源码学习等等。光这些够折腾良久了。把这些玩会了，你也是专家了。 当然，你如果业务有关联。如Camera美颜，滤镜，音视频等，如果要进阶，NDK不必多说，必定要会玩的。NDK实质上玩的是c/c++，所以就须要好好学习c/c++,如虚函数，虚析构，虚基类，智能指针，宏函数，宏定义，构造体，共用体，运算符重载，指针，这些根本的c++相干。面向对象在任何语言中都受用。 4.如果要学，怎么学？ Google官网NDK链接：www.sangpi.com 老外有一本：Android NDK Beginner's Guide 网上的blog最初看零碎的，要么就不看，不然东写一篇，西写一篇，没有零碎的线路，对初学者帮忙意义不大。 JNI Specification.chm 这个手册，很不便查问 The Java™ Native Interface Programmer’s Guide and Specification 把JNI相熟之后，而后写一些小案例，达到相熟水平，能够在看一些与C/C++进阶的书，如，Effective c++，深刻了解c++对象内存模型,STL源码分析,这些书之类。 程序多入手实际，才是最正确的。看会，不代表会。先就说这么多，有问题，欢送探讨。