目录
1.Emment语法
1.1快速生成HTML结构语法
1.2快速生成CSS样式语法(MAC不行)
1.3快速格式化代码
2.CSS的复合选择器
2.1什么是复合选择器
2.2后代选择器(重要)
2.3子选择器(重要)
2.4并集选择器(重要)
2.5伪类选择器
2.6链接类伪选择器
2.7:focus伪类选择器
2.8复合选择器总结
3.css的元素显示模式
3.1什么是元素显示模式
3.3块元素
3.2行内元素
3.3行内块元素
3.4元素显示模式总结
3.5元素显示模式转换
3.6案例:简洁版小米侧边栏
3.7一个小技巧 单行文字垂直居中的代码
3.8单行文字垂直居中的原理
4.CSS的背景
4.1背景颜色
4.2背景图片
4.3背景平铺
4.4背景位置-方位名词
4.5背景位置案例
4.6背景图像固定(背景附着)
4.7背景复合写法
4.8背景色半透明
4.9背景总结
1.Emment语法
Emment语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。
1.1快速生成HTML结构语法
生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成
如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
如果有父子级关系的标签,可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签,用 + 就可以了 比如 div+p
如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的, 可以用 自增符号 $
如果想要在生成的标签内部写内容可以用 { } 表示
1.2快速生成CSS样式语法(MAC不行)
CSS基本采取简写形式即可
1.比如w200 按tab 可以生成width:200px;
2.比如lh26 按tab 可以生成line-height:26px;
1.3快速格式化代码
Vscode 快速格式化代码: shift+alt+f
也可以设置 当我们 保存页面的时候自动格式化代码:
1)文件 ------.>【首选项】---------->【设置】;
2)搜索emmet.include;
3)在settings.json下的【工作区设置】中添加以下语句:
"editor.formatOnType": true,
"editor.formatOnSave": true,
只需要设置一次即可,以后2都可以自动保存格式化代码。
MAC上操作方式:
1.点击左下角小齿轮
2.选择设置
3.在搜索设置 框搜索format ,选择在sttings.json中编辑
4.将以下代码复杂到sttings.json 中
"editor.formatOnType": true,
"editor.formatOnSave": true,
点击 command+s 保存,设置成功,实现在保存代码按下 command+s 键或者点击文件下的保存时时自动格式化代码。
2.CSS的复合选择器
2.1什么是复合选择器
在CSS中,可以根据选择器的类型把选择器分为基础选择器 和 复合选择器 ,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
复合选择器可以更准确、更高效的选择目标元素(标签)。
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。
常用的复合选择器包括: 后代选择器 、 子选择器 、 并集选择器 、 伪类选择器 等等
2.2后代选择器(重要)
后代选择器 又称为包含选择器 ,可以选择父元素里面的子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
元素1 元素2 { 样式声明 }
上述语法表示选择元素1里面的所有元素2 (后代元素)
例如:
ul li { 样式声明} /* 选择 ul 里面所有的 li 标签元素 */
元素1和元素2中间用空格隔开。
元素1是父级,元素2是子级,最终选择的是元素2。
元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可。
元素1和元素2可以是任意基础选择器。
例子:
Document
我是ol 的孩子
我是ol 的孩子
我是ol 的孩子
我是ol 的孙子
我是ul 的孩子
我是ul 的孩子
我是ul 的孩子
实现效果:
2.3子选择器(重要)
子元素选择器(子选择器) 只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。
语法:
元素1>元素2 { 样式声明 }
上述语法表示选择元素1里面的所有直接后代(子元素) 元素2。
例如:
div>p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
元素1和元素2中间用大于号 隔开 。
元素1是父级,元素2是子级,最终选择的是元素2
元素2必须是亲儿子,其孙子、重孙之类都不归他管。
例子:
Document
实现效果:
2.4并集选择器(重要)
并集选择器可以选择多组标签,同时为他们定义相同的样式 。通常用于集体声明。
并集选择器 是各选择器通过英文逗号(,)连接而成 ,任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素1,元素2 { 样式声明 }
上述语法表示选择元素1 和元素2 .
例如:
ul,div { 样式声明 } /* 选择 ul 和 div 标签元素*/
元素1和元素2中间用逗号隔开 。
逗号可以理解为和 的意思。
并集选择器通常用于集体声明。
例子:
Document
熊大
熊二
光头强
实现效果:
2.5伪类选择器
伪类选择器 用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示 ,比如:hover、:first-child。
因为伪类选择器很多,比如有链接伪类、结构伪类等,这里先讲解常用的链接伪类选择器。
2.6链接类伪选择器
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接(鼠标按下未弹起的链接)*/
链接伪类选择器注意事项:
1.为了确保生效,请按照LVHA的循顺序声明:link-;visited-;hover-;active。
2.记忆法:LV好啊(HA)
3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际工作开发中的写法:
/* a 是标签选择器 所有的链接 */
a {
color: gray;
text-decoration: none;
}
/* :hover 是链接伪类选择器 鼠标经过*/
a:hover {
color: red;/* 鼠标经过的时候,由原来的灰色 变成了红色*/
text-decoration: normal;
}
例子:
Document
小猪佩奇
2.7:focus伪类选择器
:focus 伪类选择器 用于选取获得焦点的表单元素。
焦点就是光标,一般情况 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color: yellow;
}
2.8复合选择器总结
选择器
作用
特征
使用情况
隔开符号及用法
后代选择器
用来选择后代元素
可以是孙子后代
较多
符号是空格.nav a
子选择器
选择最近一级元素
只选亲儿子
较少
符号是大于.nav>p
并集选择器
选择某些相同样式的元素
可以用于集体声明
较多
符号是逗号.nav,.a
链接伪类选择器
选择不同状态的链接
跟链接相关
较多
重点记住a{}和a:hoverhover实际开发的写法
:focus选择器
选择获得光标的表单
跟表单相关
较少
input:focus记住这个写法
3.css的元素显示模式
了解元素的显示模式可以更好的让我们布局页面。
1.什么是元素的显示模式
2.元素显示模式的分类
3.元素显示模式的转换
3.1什么是元素显示模式
作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素(标签)以什么方式进行显示, 比如自己占一行,比如一行可以放多个
。
HTML元素一般分为块元素 和行内元素 两种类型。
3.3块元素
常见的块元素有
~、 、
、
、、等,其中标签是
最典型块元素
块级元素的特点:
比较霸道,自己独占一行。
高度、宽度、外边距以及内边距都可以控制。
宽度默认是容器(父级宽度)的100%。
是一个容器及盒子,里面可以放行内或者块级元素。
注意:
文字类的元素内不能使用块级元素。
标签主要用于存放文字,因此
里面不能放块级元素,特别不能放
。
同理,~等都是文字类块级标签,里面也不能放其他块级元素。
例子:
Document
比较霸道,自己独占一行
你以为我在第一行其实我在第二行
实现效果:
3.2行内元素
常见的行内元素有、、、、、、、、、等,其中标签 是最典型的行内元素 。有的地方也将行内元素称为内联元素 。
行内元素的特点:
相邻行内元素在一行上,一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
注意:
例子:
Document
老师好老师好老师好 浙江图书馆
老师好 浙江图书馆
实现效果:
3.3行内块元素
在行内元素中有几个特殊的标签—— 、 、
,它们同时具有块元素和行内元素的特点 ,有些资料称它们为行内块元素 。
行内块元素的特点:
和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
默认宽度就是它本身内容的宽度(行内元素特点)。
高度,行高、外边距以及内边距都可以控制(块级元素特点)。
例子:
Document
实现效果:
3.4元素显示模式总结
元素模式
元素排列
设置样式
默认宽度
包含
块级元素
一行只能放一个块级元素
可以设置宽度高度
容器的100%
容器级可以包含任何标签
行内元素
一行可以放多个行内元素
不可以直接设置宽度高度
它本身内容的宽度
容纳文本或者其他行内元素
行内块元素
一行放多个行内块元素
可以设置宽度和高度
它本身内容的宽度
3.5元素显示模式转换
特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另外一种模式的特性,比如想要增加链接的触发范围。
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:diaplay:inline-block;
例子:
Document
小狗
小狗
我是块级元素
我是块级元素
行内元素转换为行内块元素
行内元素转换为行内块元素
实现效果:
3.6案例:简洁版小米侧边栏
案例的核心思路分为两步:
把链接a转换为块级元素,这样链接就可以单独占一行,并且有宽度和高度。
鼠标经过a给链接设置背景颜色。
例子:
Document
手机 电话卡
电视 盒子
笔记本 平板
笔记本 平板
出行 穿戴
智能 路由器
健康 儿童
耳机 音响
实现效果:
3.7一个小技巧 单行文字垂直居中的代码
CSS没有给我们提供文字垂直居中的代码。这里我们可以使用一个小技巧来实现。
解决方案:让文字的行高等于盒子的高度 ,就可以让文字在当前盒子内垂直居中。
height:40px;
line-height: 40px;
例子:
Document
我要居中
实现效果:
小米例子居中:
Document
手机 电话卡
电视 盒子
笔记本 平板
笔记本 平板
出行 穿戴
智能 路由器
健康 儿童
耳机 音响
实现效果:
3.8单行文字垂直居中的原理
简单解释:行高的上空隙和下空隙把文字挤到中间了,如果行高<盒子高度 ,文字会偏上,如果行高>盒子高度 ,则 文字偏下。
4.CSS的背景
通过CSS背景属性,可以给页面元素添加背景样式。
背景属性可以设置背景颜色 、背景图片 、背景平铺 、背景图片位置 、背景图像固定 等。
4.1背景颜色
background-color 属性定义了元素的背景颜色。
background-color:颜色值;
transparent 透明色
例子:
Document
实现效果:
4.2背景图片
background-image 属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
background-image:none|url(照片地址)
参数值
作用
none
无背景图(默认的)
url
使用绝对或相对地址指定背景图像
例子:
Document
实现效果:
4.3背景平铺
如果需要在HTML页面上对背景图像进行平铺,可以使用background-repeat 属性。
background-repeat:repeat|no-repeat|repeat-x|repeat-y
参数值
作用
repeat
背景图像在纵向和横向上平铺
no-repeat
背景图像不平铺
repaet-x
背景在横向上平铺
repaet-y
背景在纵向上平铺
例子:
Document
实现效果:
4.4背景位置-方位名词
利用background-position 属性可以改变图片在背景中的位置。
background-position:x y;
参数代表的意思是:x坐标和y坐标。可以使用方位名词 或者精确单位
参数值
说明
length
百分数|由浮点数字和单位标识符组成的长度值
position
top|center|bottom|left|center|right 方位名词
1.参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一致。
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐。
2.参数是精确单位
如果参数值是精确坐标,那么第一个肯定是x坐标,第二个一定是y坐标。
如果只指定一个数值,那该数值一定是x坐标,另一个默认垂直居中。
3.参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是x坐标,第二个值是y坐标。
例子1参数是方位名词:
Document
实现效果:
例子2 参数是精确单位
Document
实现效果:
例子3参数是混合单位:
Document
实现效果:
4.5背景位置案例
Document
成长守护平台
实现效果:
4.6背景图像固定(背景附着)
background- attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background- attachment 后期可以制作视差滚动的效果。
background-attachment:scroll|fixed
参数
作用
scroll
背景图像是随着对象内容滚动
fixed
背景图像固定
例子:
Document
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
实现效果:
4.7背景复合写法
为了简化背景属性的代码,我们可以将这些属性合并简写在同一个属性background 中。从而节约代码量。
当使用简写属性时,没有特定的书写顺序,一般习惯约定顺序为:
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background:transparent url(image.jpg) repaet-y fixed top ;
这是实际开发中,我们更提倡的写法。
例子:
Document
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
天王盖地虎,小鸡炖蘑菇
实现效果:
4.8背景色半透明
CSS3为我们提供了背景颜色半透明的效果。
background:rgba(0,0,0,0.3);
r-红色对应第一个0;g-绿色对应第二个0;b-蓝色对应第三个0。
最后一个参数是alpha透明度,取值范围在0~1之间。
我们习惯把0.3的0省略掉,写为background:rgba(0,0,0,.3) ;
注意:背景半透明1是指盒子背景半透明,盒子里面的内容不受影响。
例子:
Document
英雄联盟
实现效果:
4.9背景总结
属性
作用
值
background-color
背景颜色
预定义的颜色值/十六进制/RGB代码
background-image
背景图片
url(图片路径)
background-repaet
是否平铺
repaet/no-repaet/repaet-x/repaet-y
background-position
背景位置
length/position 分别是x和y坐标
background-attachment
背景附着
scroll(背景滚动)/fixed(背景固定)
背景简写
书写更简单
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明
背景颜色半透明
background:rgba(0,0,0,.3); 后面必须是4个值
背景图片:实际开发常见于logo或着一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
你可能感兴趣的:(笔记,html5,前端,html,css)
android 自定义曲线图,Android自定义View——贝赛尔曲线
weixin_39767513
android 自定义曲线图
个人博客:haichenyi.com。感谢关注本文针对有一定自定义View的童鞋,最好对贝赛尔曲线有辣么一丢丢了解,不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图:最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹,很规则。其次,他这个正弦图左右在移动。然后,就是它这个自定义View,上下也在移动,是慢慢增加的最后,优化
新网师的精神肤色(幕布笔记)
悦读书香
王子老师的《极简100小妙招》收到已经几天了,之前大概的浏览了全书,今天起给自己定了一个计划,必须每天学习极简小妙招里面的一个妙招,并加以运用。一、今天要打卡什么内容因有完成每天学习极简小妙招的计划,所以今天晚饭吃的比较简单,草草吃完以后带着小宝到广场溜达一圈,急忙赶回来学习极简小妙招。再重看的时候不知道自己要学点什么,打卡哪一招,感觉哪个都简单,就看这一环节像王子老师说的“一看就会”,但做这一环
uni-app实现 步骤条
夏夏的码农
uni-app
实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
C++学习笔记(lambda函数)
__TAT__
C&C++ c++ 学习 笔记
C++learningnote1、lambda函数的语法2、lambda函数的几种用法1、lambda函数的语法lambda函数的一般语法如下:[capture_clause](parameters)->return_type{function_body}capture_clause:需要捕获的变量,但要求该变量必须在这个作用域中。通常的捕获方式有以下几种:[]:不捕获任何变量[&]:按引用捕获变
大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具,可以用来自动添加浏览器前缀、代码合并、代码压缩等,提升代码的可读性,并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南:一、安装PostCSS在你的项目目录中,通过npm(NodePackageManager)来安装PostCSS。打开命令行窗口,输入以下命令:bash复制代码npminstallpostcss--save-dev这将把
谷歌浏览器驱动Chromedriver(114-120版本)文件以及驱动下载教程
pigerr杨
Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
虚拟 DOM 的优缺点有哪些
咕噜签名分发
前端 javascript 开发语言
虚拟DOM(VirtualDOM)技术作为现代前端开发中的重要组成部分,已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势,同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点,深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异,最小化实际DOM操作,从而减少页面重渲染时的性能消耗。这种优
读书笔记《穿越寒冬》
如雪般飞舞
各位好,我们今天来讲一本书,名字叫作《穿越寒冬》。看起来特别应景,大家觉得现在创业的状况不景气,大家都在忍受着寒冬的煎熬。但实际上,这本书的英文名字并不是这个意思,它的英文名叫作“如何创立一家新公司,并且能够活下来”。我在整个读完了以后,我发现这本书真正要翻译得好,它的名字应该叫作《创业生存手册》。这个书的作者,来自硅谷的霍夫曼船长。霍夫曼船长写过一本让创业者觉得特别贴心的书,叫作《让大象飞》它和
3、JavaWeb-Ajax/Axios-前端工程化-Element
所谓远行Misnearch
# JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML,异步的JS和XMLJS网页动作,XML一种标记语言,存储数据,作用:数据交换:通过Ajax给服务器发送请求,并获取服务器响应的数据异步交互:在不重新加载整个页面的情况下,与服务器交换数据并实现更新部分网页的技术,例如:搜索联想、用户名是否可用的校验等等。同步与异步:同步:服务器在处理中客户端要处于等待状态,输入域名
2018-11-18成长小组学习笔记
实验中学45
因为嗓子“罢工”,我面对众人只能借“微笑”代言。在开始授课前,绣霞老师先反馈上次作业的情况,提到“接纳”需是真正发自内心的完全接纳,而不是口头上的接纳,内心却是排斥的。提到一个“问题”孩子恰恰对家爱的更加“深沉”,夫妻间的问题不能影响到孩子,对孩子更好的爱不是你为他做的更多,而是给他自由、健康成长的空间。图片发自App一、孩子:家庭的一面镜子夫妻成了彼此的“投射”,婚姻便“吵的不可开交”,婚姻便成
【鸿蒙HarmonyOS开发笔记】ArkUI常用组件介绍汇总(更新中)
温、
鸿蒙HarmonyOS开发笔记 学习记录 harmonyos 笔记 华为
概述此文总结开发中用到的一些常用组件,便于查阅,此文持续更新,闲的没事就更线性布局(Row/Column)不多介绍了,最常用的布局组件,两者除了方向不一样,别的都一样方便起见下面只写Column常用属性排列方向上的间距:spaceColumn({space:20}){Row().width('90%').height(50).backgroundColor(0xF5DEB3)Row().width
python转码
Desamond
python 开发语言
转码在许多场景中都有应用,以下是一些常见的场景:网页开发:当用户在网页上输入文本时,可能需要将特殊字符(如空格、引号、特殊符号等)进行转码,以防止这些字符对URL或HTML代码产生干扰。文件名处理:在处理文件名时,可能需要将特殊字符进行转码,以避免文件名被错误地解析或显示。数据传输:在数据传输过程中,为了确保数据的完整性和正确性,可能需要将数据中的特殊字符进行转码。数据存储:在数据库或数据存储中,
安卓笔记本 - Handler Message MessageQueue Looper
SocialException
不爱写字,一张图解决。Handler,Message,MessageQueue,Looper工作原理
枚举使用笔记
万变不离其宗_8
项目笔记 笔记
1.java枚举怎么放在方法上面的注释里面/***保存*@paramuserId用户id*@paramtype见枚举{@linkcom.common.enums.TypeEnum}*@return*/voidsave(LonguserId,Stringtype);
ruoyi使用笔记
万变不离其宗_8
项目笔记 代码参考笔记 笔记 java 前端
1.限流处理@RateLimiter@PostMapping("/createOrder")@ApiOperation("创建充值订单")@RateLimiter(key=CacheConstants.REPEAT_SUBMIT_KEY,time=10,count=1,limitType=LimitType.IP)publicRcreateOrder(@RequestBodyFormform){/
数据管理知识体系指南(第二版)-第五章——数据建模和设计-学习笔记
键盘上的五花肉
数据治理 数据库 数据仓库 数据治理
目录5.1引言5.1.1业务驱动因素5.1.2目标和原则5.1.3基本概念5.2活动5.2.1规划数据建模5.2.2建立数据模型5.2.3审核数据模型5.2.4维护数据模型5.3工具5.3.1数据建模工具5.3.2数据血缘工具5.3.3数据分析工具5.3.4元数据资料库5.3.5数据模型模式5.3.6行业数据模型5.4方法5.4.1命名约定的最佳实践5.4.2数据库设计中的最佳实践5.5数据建模和
java实体中返回前端的double类型四舍五入(格式化)
婲落ヽ紅顏誶
java
根据业务,需要通过后端给前端返回部分double类型的数值,一般需要保留两位小数,使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
Django forms组件
在飞行-米龙
Django django python 后端
【一】引入【1】实现登陆验证功能(1)需求分析登陆验证需要前后端交互,采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容(2)后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
Java学习笔记01
.wsy.
日常 java 学习 笔记
1.1Java简介Java的前身是Oak,詹姆斯·高斯林是java之父。1.2Java体系Java是一种与平台无关的语言,其源代码可以被编译成一种结构中立的中间文件(.class,字节码文件)于Java虚拟机上运行。1.2.3专有名词JDK提供编译、运行Java程序所需要的种种工具及资源。JRE是运行Java所依赖的环境的集合。JVM是一个虚构出来的计算机,通过在实际的计算机上仿真模拟各种计算机功
UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS
liferecords
LLM 语言模型 人工智能 自然语言处理
UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接:arXiv关键字:大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型(LLMs)在各种自然语言任务上表现出色。然而,它们在HTML理解方面的能力——即解析网页的原始HTML,对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型(经过微调
《老子》笔记19 2018-10-28
海上明月共
第二十二章[原文]曲则全,枉则直,洼则盈,敝则新,少则得,多则惑。是以圣人抱一为天下式。不自见,故明;不自是,故彰,不自伐,故有功;不自矜,故长。夫唯不争,故天下莫能与之争。古之所谓"曲则全"者,岂虚言哉?诚全而归之。[译文]委曲便会保全,屈枉便会直伸;低洼便会充盈,陈旧便会更新;少取便会获得,贪多便会迷惑。所以有道的人坚守这一原则作为天下事理的范式,不自我表扬,反能显明;不自以为是,反能是非彰明
以客户为中心的企业设计(咨询执业笔记)
觉者看世界
以客户为中心的企业设计(咨询执业笔记)——何伏全案咨询知名专家数字经济大行其道,过剩的风险资本自由流动,股权市场日益强势,这些力量综合在一起,产生出诸多不合理的企业设计。这些事实使得企业设计的再创造越来越需要一种约束力,许多公司和投资者未能熟谙这种约束力,或者未能将其基本原理运用于具体的商业行为中,因此付出了沉重的代价。无利润区的确存在,并且已在全球蔓延,有愈演愈烈之势。它席卷了数以千计的公司,涉
Web前端Html的表单
任家伟
前端 html
表单的关键字:form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读,不可修改,但是可以提交disabled=“disabled”禁用组件不可修改,不能提交type=“password”密码框type=“radio”单
Thinkphp - 详细实现网站系统登录功能,附带 Mysql 数据库设置、Web 前端展示界面、信息校验等(详细代码,即设计过程)
王佳斌
+ Thinkphp mysql 前端 数据库
前言登录功能,是我们几乎开发每个系统都必须的模块。登录功能设计思路,主要包括几个方面。用户输入网址展示登录页面用户输入用户名,密码等点击登录进行信息校验校验通过之后,记录用户登录信息,跳转指定页面用户校验失败,提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面,我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
react native 总结
一切顺势而行
react native react.js javascript
reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
【Git安装及使用学习笔记】
可可西里啊
零零散散的学习笔记 git 学习 笔记 c++ qt5
Git学习笔记Git安装Git创建本地版本库以及提交文件使用Git提交代码到码云使用Git从码云拉取代码参考博客Git安装这里参考Git详细安装教程(详解Git安装过程的每一个步骤)Git创建本地版本库以及提交文件1.查看git版本信息:git--version2.设置对应用户名与邮箱地址gitconfig--globaluser.name"your_usernamegitconfig--glob
程序员开发技术整理
laizhixue
学习 前端框架
前端技术:vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术:webservice:soap架构:简单的通信协议,用于服务通信ORM框架:对象关系映射,如EF:对象实体模型,是ado.net中的应用技术soap服务通讯:xml通讯ado.net:OAuth2:登录授权认证:Token认证:JWT:jsonwebtokenJava后端技术:便捷工
读书笔记|《穆斯林的葬礼》
飞舞的微辰
她从来也没有打算对过去的恩怨进行报偿或是惩罚,只是想把该记住的都记住,该忘却的都忘却。事业的追求,并不一定要什么头衔和称号来满足,你爱上了一种东西,愿意用全部心血去研究它,掌握它,从中得到乐趣,并且永远也不舍得丢其它,这是事业心,是比什么都重要的......人生在世,谁也管不了谁;生儿育女,不是为了父母,是为了儿女自己,各人的路,让他们自己去闯吧。七尺之躯,一抔黄土,穆斯林们一个个都离去了,什么都
C#学习笔记
2301_79022588
学习 笔记
一、事件派发器在C#中,事件派发器通常是指事件委托和事件处理程序的组合,用于实现一种观察者设计模式。它允许对象在状态发生变化时通知其他对象,从而实现对象之间的解耦。事件派发器的基本组成部分:事件委托(EventDelegate):事件委托是一种特殊的委托,用于封装可以被调用的方法。它定义了事件的签名,即指定了事件处理程序方法的参数和返回类型。通常,事件委托声明在事件派发器类的外部,并且使用dele
【前端学习——js篇】7.函数缓存
笔下无竹墨下有鱼
前端学习 前端 学习 javascript
具体见:https://github.com/febobo/web-interview7.函数缓存函数缓存,就是将函数运算过的结果进行缓存本质上就是用空间(缓存存储)换时间(计算过程)常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化:①柯里化柯里化(currying)是一种函数式编程的概念,指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
对股票分析时要注意哪些主要因素?
会飞的奇葩猪
股票 分析 云掌股吧
众所周知,对散户投资者来说,股票技术分析是应战股市的核心武器,想学好股票的技术分析一定要知道哪些是重点学习的,其实非常简单,我们只要记住三个要素:成交量、价格趋势、振荡指标。
一、成交量
大盘的成交量状态。成交量大说明市场的获利机会较多,成交量小说明市场的获利机会较少。当沪市的成交量超过150亿时是强市市场状态,运用技术找综合买点较准;
【Scala十八】视图界定与上下文界定
bit1129
scala
Context Bound,上下文界定,是Scala为隐式参数引入的一种语法糖,使得隐式转换的编码更加简洁。
隐式参数
首先引入一个泛型函数max,用于取a和b的最大值
def max[T](a: T, b: T) = {
if (a > b) a else b
}
因为T是未知类型,只有运行时才会代入真正的类型,因此调用a >
C语言的分支——Object-C程序设计阅读有感
darkblue086
apple c 框架 cocoa
自从1972年贝尔实验室Dennis Ritchie开发了C语言,C语言已经有了很多版本和实现,从Borland到microsoft还是GNU、Apple都提供了不同时代的多种选择,我们知道C语言是基于Thompson开发的B语言的,Object-C是以SmallTalk-80为基础的。和C++不同的是,Object C并不是C的超集,因为有很多特性与C是不同的。
Object-C程序设计这本书
去除浏览器对表单值的记忆
周凡杨
html 记忆 autocomplete form 浏览
&n
java的树形通讯录
g21121
java
最近用到企业通讯录,虽然以前也开发过,但是用的是jsf,拼成的树形,及其笨重和难维护。后来就想到直接生成json格式字符串,页面上也好展现。
// 首先取出每个部门的联系人
for (int i = 0; i < depList.size(); i++) {
List<Contacts> list = getContactList(depList.get(i
Nginx安装部署
510888780
nginx linux
Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布,因它的稳定性、丰富的功能集、示例配置文件和低系统资源
java servelet异步处理请求
墙头上一根草
java 异步返回 servlet
servlet3.0以后支持异步处理请求,具体是使用AsyncContext ,包装httpservletRequest以及httpservletResponse具有异步的功能,
final AsyncContext ac = request.startAsync(request, response);
ac.s
我的spring学习笔记8-Spring中Bean的实例化
aijuans
Spring 3
在Spring中要实例化一个Bean有几种方法:
1、最常用的(普通方法)
<bean id="myBean" class="www.6e6.org.MyBean" />
使用这样方法,按Spring就会使用Bean的默认构造方法,也就是把没有参数的构造方法来建立Bean实例。
(有构造方法的下个文细说)
2、还
为Mysql创建最优的索引
annan211
mysql 索引
索引对于良好的性能非常关键,尤其是当数据规模越来越大的时候,索引的对性能的影响越发重要。
索引经常会被误解甚至忽略,而且经常被糟糕的设计。
索引优化应该是对查询性能优化最有效的手段了,索引能够轻易将查询性能提高几个数量级,最优的索引会比
较好的索引性能要好2个数量级。
1 索引的类型
(1) B-Tree
不出意外,这里提到的索引都是指 B-
日期函数
百合不是茶
oracle sql 日期函数 查询
ORACLE日期时间函数大全
TO_DATE格式(以时间:2007-11-02 13:45:25为例)
Year:
yy two digits 两位年 显示值:07
yyy three digits 三位年 显示值:007
线程优先级
bijian1013
java thread 多线程 java多线程
多线程运行时需要定义线程运行的先后顺序。
线程优先级是用数字表示,数字越大线程优先级越高,取值在1到10,默认优先级为5。
实例:
package com.bijian.study;
/**
* 因为在代码段当中把线程B的优先级设置高于线程A,所以运行结果先执行线程B的run()方法后再执行线程A的run()方法
* 但在实际中,JAVA的优先级不准,强烈不建议用此方法来控制执
适配器模式和代理模式的区别
bijian1013
java 设计模式
一.简介 适配器模式:适配器模式(英语:adapter pattern)有时候也称包装样式或者包装。将一个类的接口转接成用户所期待的。一个适配使得因接口不兼容而不能在一起工作的类工作在一起,做法是将类别自己的接口包裹在一个已存在的类中。 &nbs
【持久化框架MyBatis3三】MyBatis3 SQL映射配置文件
bit1129
Mybatis3
SQL映射配置文件一方面类似于Hibernate的映射配置文件,通过定义实体与关系表的列之间的对应关系。另一方面使用<select>,<insert>,<delete>,<update>元素定义增删改查的SQL语句,
这些元素包含三方面内容
1. 要执行的SQL语句
2. SQL语句的入参,比如查询条件
3. SQL语句的返回结果
oracle大数据表复制备份个人经验
bitcarter
oracle 大表备份 大表数据复制
前提:
数据库仓库A(就拿oracle11g为例)中有两个用户user1和user2,现在有user1中有表ldm_table1,且表ldm_table1有数据5千万以上,ldm_table1中的数据是从其他库B(数据源)中抽取过来的,前期业务理解不够或者需求有变,数据有变动需要重新从B中抽取数据到A库表ldm_table1中。
HTTP加速器varnish安装小记
ronin47
http varnish 加速
上午共享的那个varnish安装手册,个人看了下,有点不知所云,好吧~看来还是先安装玩玩!
苦逼公司服务器没法连外网,不能用什么wget或yum命令直接下载安装,每每看到别人博客贴出的在线安装代码时,总有一股羡慕嫉妒“恨”冒了出来。。。好吧,既然没法上外网,那只能麻烦点通过下载源码来编译安装了!
Varnish 3.0.4下载地址: http://repo.varnish-cache.org/
java-73-输入一个字符串,输出该字符串中对称的子字符串的最大长度
bylijinnan
java
public class LongestSymmtricalLength {
/*
* Q75题目:输入一个字符串,输出该字符串中对称的子字符串的最大长度。
* 比如输入字符串“google”,由于该字符串里最长的对称子字符串是“goog”,因此输出4。
*/
public static void main(String[] args) {
Str
学习编程的一点感想
Cb123456
编程 感想 Gis
写点感想,总结一些,也顺便激励一些自己.现在就是复习阶段,也做做项目.
本专业是GIS专业,当初觉得本专业太水,靠这个会活不下去的,所以就报了培训班。学习的时候,进入状态很慢,而且当初进去的时候,已经上到Java高级阶段了,所以.....,呵呵,之后有点感觉了,不过,还是不好好写代码,还眼高手低的,有
[能源与安全]美国与中国
comsci
能源
现在有一个局面:地球上的石油只剩下N桶,这些油只够让中国和美国这两个国家中的一个顺利过渡到宇宙时代,但是如果这两个国家为争夺这些石油而发生战争,其结果是两个国家都无法平稳过渡到宇宙时代。。。。而且在战争中,剩下的石油也会被快速消耗在战争中,结果是两败俱伤。。。
在这个大
SEMI-JOIN执行计划突然变成HASH JOIN了 的原因分析
cwqcwqmax9
oracle
甲说:
A B两个表总数据量都很大,在百万以上。
idx1 idx2字段表示是索引字段
A B 两表上都有
col1字段表示普通字段
select xxx from A
where A.idx1 between mmm and nnn
and exists (select 1 from B where B.idx2 =
SpringMVC-ajax返回值乱码解决方案
dashuaifu
Ajax springMVC response 中文乱码
SpringMVC-ajax返回值乱码解决方案
一:(自己总结,测试过可行)
ajax返回如果含有中文汉字,则使用:(如下例:)
@RequestMapping(value="/xxx.do") public @ResponseBody void getPunishReasonB
Linux系统中查看日志的常用命令
dcj3sjt126com
OS
因为在日常的工作中,出问题的时候查看日志是每个管理员的习惯,作为初学者,为了以后的需要,我今天将下面这些查看命令共享给各位
cat
tail -f
日 志 文 件 说 明
/var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一
/var/log/secure 与安全相关的日志信息
/var/log/maillog 与邮件相关的日志信
[应用结构]应用
dcj3sjt126com
PHP yii2
应用主体
应用主体是管理 Yii 应用系统整体结构和生命周期的对象。 每个Yii应用系统只能包含一个应用主体,应用主体在 入口脚本中创建并能通过表达式 \Yii::$app 全局范围内访问。
补充: 当我们说"一个应用",它可能是一个应用主体对象,也可能是一个应用系统,是根据上下文来决定[译:中文为避免歧义,Application翻译为应
assertThat用法
eksliang
JUnit assertThat
junit4.0 assertThat用法
一般匹配符1、assertThat( testedNumber, allOf( greaterThan(8), lessThan(16) ) );
注释: allOf匹配符表明如果接下来的所有条件必须都成立测试才通过,相当于“与”(&&)
2、assertThat( testedNumber, anyOf( g
android点滴2
gundumw100
应用服务器 android 网络应用 OS HTC
如何让Drawable绕着中心旋转?
Animation a = new RotateAnimation(0.0f, 360.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
a.setRepeatCount(-1);
a.setDuration(1000);
如何控制Andro
超简洁的CSS下拉菜单
ini
html Web 工作 html5 css
效果体验:http://hovertree.com/texiao/css/3.htmHTML文件:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁的HTML+CSS下拉菜单-HoverTree</title>
kafka consumer防止数据丢失
kane_xie
kafka offset commit
kafka最初是被LinkedIn设计用来处理log的分布式消息系统,因此它的着眼点不在数据的安全性(log偶尔丢几条无所谓),换句话说kafka并不能完全保证数据不丢失。
尽管kafka官网声称能够保证at-least-once,但如果consumer进程数小于partition_num,这个结论不一定成立。
考虑这样一个case,partiton_num=2
@Repository、@Service、@Controller 和 @Component
mhtbbx
DAO spring bean prototype
@Repository、@Service、@Controller 和 @Component 将类标识为Bean
Spring 自 2.0 版本开始,陆续引入了一些注解用于简化 Spring 的开发。@Repository注解便属于最先引入的一批,它用于将数据访问层 (DAO 层 ) 的类标识为 Spring Bean。具体只需将该注解标注在 DAO类上即可。同时,为了让 Spring 能够扫描类
java 多线程高并发读写控制 误区
qifeifei
java thread
先看一下下面的错误代码,对写加了synchronized控制,保证了写的安全,但是问题在哪里呢?
public class testTh7 {
private String data;
public String read(){
System.out.println(Thread.currentThread().getName() + "read data "
mongodb replica set(副本集)设置步骤
tcrct
java mongodb
网上已经有一大堆的设置步骤的了,根据我遇到的问题,整理一下,如下:
首先先去下载一个mongodb最新版,目前最新版应该是2.6
cd /usr/local/bin
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.0.tgz
tar -zxvf mongodb-linux-x86_64-2.6.0.t
rust学习笔记
wudixiaotie
学习笔记
1.rust里绑定变量是let,默认绑定了的变量是不可更改的,所以如果想让变量可变就要加上mut。
let x = 1; let mut y = 2;
2.match 相当于erlang中的case,但是case的每一项后都是分号,但是rust的match却是逗号。
3.match 的每一项最后都要加逗号,但是最后一项不加也不会报错,所有结尾加逗号的用法都是类似。
4.每个语句结尾都要加分