inline-table
此元素会作为内联表格来显示(类似 ),表格前后没有换行符。
table-row-group
此元素会作为一个或多个行的分组来显示(类似 )。
table-header-group
此元素会作为一个或多个行的分组来显示(类似 )。
table-footer-group
此元素会作为一个或多个行的分组来显示(类似 )。
table-row
此元素会作为一个表格行显示(类似 )。
table-column-group
此元素会作为一个或多个列的分组来显示(类似 )。
table-column
此元素会作为一个单元格列显示(类似 )
table-cell
此元素会作为一个表格单元格显示(类似 和 )
table-caption
此元素会作为一个表格标题显示(类似 )
inherit
规定应该从父元素继承 display 属性的值。
visibility: 规定元素是否可见。 例:visibility: hidden;
值
描述
hidden
隐藏
visible
显示隐藏
display与visibility相比:
display
无法使用transition动画显示,
只能用opacity透视代替
visibility
可以使用transition动画显示
opacity: 设置透明度。范围在0-1之间。 例:opacity: 0.5;
word-spacing: 单词之间的间距。 例:word-spacing: 10px;
letter-spacing: 字符之间的距离。 例:letter-spacing: 10px;
direction: 设置文字方向。 例:direction: ltr;
值
描述
ltr
默认。文本方向从左到右。
rtl
文本方向从右到左。
overflow: hidden; 隐藏溢出。
border-radius: 设置边框的弧度。 例:border-radius: 10px;
box-sizing: border-box; 将padding和border的长度也纳入总长度。改为IE盒子类型。
box-shadow: 元素阴影。 例:box-shadow: 0 10px 8px red;
最多填写六个值,分别表示为:
值
描述
h-skewing(必要)
阴影在水平方向的偏移,负数是向左偏移,正数是向右偏移,单位为“px”。
v-skewing(必要)
阴影在垂直方向的偏移,负数是向上偏移,正数是向下偏移,单位为“px”。
blur(可选)
阴影的“模糊距离”或“模糊程度”,单位为“px”。
spread(可选)
阴影的扩展范围,若将“blur”设为“0”,该值则相当于一个可以进行位置偏移但不具备“outline-offset”的“outline”,单位为“px”。
color(可选)
阴影的颜色,支持Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
inset(可选)
将默认向外的阴影方向改为向内 。
clear: both; 清除左右浮动
clip-path: 裁剪图形。 例:clip-path: polygon(50% 0, 25% 50%, 75% 50%);
值
描述
circle
圆
ellipse
椭圆
inset
圆角
polygon
多边形,以左上角为圆点
图像裁剪
圆
clip-path: circle(50% at 50% 50%);
椭圆
clip-path: ellipse(25% 40% at 50% 50%);
矩形
clip-path: inset(5% 20% 15% 10%);
三角形
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
菱形
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
梯形
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
平行四边形
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
五边形
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
六边形
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
七边形
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
八边形
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
斜角
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
槽口
clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
左箭头
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
右箭头
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
星星
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
十字架
clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
叉号
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
对话框
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
calc: 计算公式。 例:calc: (100px-10px); *支持 “+”,“ - ”,“*”,“/” 运算
cursor: 要显示的光标的类型。 例:cursor: pointer; 设置鼠标形状为一只手。
值
描述
url
需使用的自定义光标的 URL。
注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
default
默认光标(通常是一个箭头)
auto
默认。浏览器设置的光标。
crosshair
光标呈现为十字线。
pointer
光标呈现为指示链接的指针(一只手)
move
此光标指示某对象可被移动。
e-resize
此光标指示矩形框的边缘可被向右(东)移动。
ne-resize
此光标指示矩形框的边缘可被向上及向右移动(北/东)。
nw-resize
此光标指示矩形框的边缘可被向上及向左移动(北/西)。
n-resize
此光标指示矩形框的边缘可被向上(北)移动。
se-resize
此光标指示矩形框的边缘可被向下及向右移动(南/东)。
sw-resize
此光标指示矩形框的边缘可被向下及向左移动(南/西)。
s-resize
此光标指示矩形框的边缘可被向下移动(南)。
w-resize
此光标指示矩形框的边缘可被向左移动(西)。
text
此光标指示文本。
wait
此光标指示程序正忙(通常是一只表或沙漏)。
help
此光标指示可用的帮助(通常是一个问号或一个气球)。
perspective: 定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。 * 当元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。 例:
/*目前浏览器都不支持 perspective 属性。
Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
*/
div
{
perspective: 500;
-webkit-perspective: 500; /* Safari 和 Chrome */
}
perspective-origin: 设置 3D 元素的基点位置。* 当元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。 例:
/*目前浏览器都不支持 perspective-origin 属性。
Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
*/
div
{
perspective-origin: 10% 10%;
-webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
}
!important: 提高指定CSS样式的属性值的优先权。 例:width: 100px !important;
@media: 媒介,可以针对不同的屏幕尺寸设置不同的样式。 例:@media screen and (max-width: 768px){}
@media screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
媒体类型
值
描述
all
用于所有设备
print
用于打印机和打印预览
screen
用于电脑屏幕,平板电脑,智能手机等。
speech
应用于屏幕阅读器等发声设备
媒体功能
值
描述
aspect-ratio
定义输出设备中的页面可见区域宽度与高度的比率
color
定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
color-index
定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio
定义输出设备的屏幕可见宽度与高度的比率。
device-height
定义输出设备的屏幕可见高度。
device-width
定义输出设备的屏幕可见宽度。
grid
用来查询输出设备是否使用栅格或点阵。
height
定义输出设备中的页面可见区域高度。
max-aspect-ratio
定义输出设备的屏幕可见宽度与高度的最大比率。
max-color
定义输出设备每一组彩色原件的最大个数。
max-color-index
定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio
定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height
定义输出设备的屏幕可见的最大高度。
max-device-width
定义输出设备的屏幕最大可见宽度。
max-height
定义输出设备中的页面最大可见区域高度。
max-monochrome
定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution
定义设备的最大分辨率。
max-width
定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio
定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color
定义输出设备每一组彩色原件的最小个数。
min-color-index
定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio
定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width
定义输出设备的屏幕最小可见宽度。
min-device-height
定义输出设备的屏幕的最小可见高度。
min-height
定义输出设备中的页面最小可见区域高度。
min-monochrome
定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution
定义设备的最小分辨率。
min-width
定义输出设备中的页面最小可见区域宽度。
monochrome
定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation
定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution
定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scan
定义电视类设备的扫描工序。
width
定义输出设备中的页面可见区域宽度。
vw/vh: 屏幕浏览器视口的宽高,将屏幕均分为100个平均尺寸。 例:width: 100vw; height: 100vh;
filter: 滤镜。 例:filter: blur(40px)
值
描述
none
默认值,没有效果。
blur(px )
给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊; 如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
brightness(% )
给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
contrast(% )
调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
drop-shadow(h-shadow v-shadow blur spread color )
给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。参数如下:
(必须)
这是设置阴影偏移量的两个 值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看 可能的单位.如果两个值都是0 , 则阴影出现在元素正后面 (如果设置了 and/or ,会有模糊效果).
(可选)
这是第三个code>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).
(可选)
这是第四个 值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。
(可选)
查看 该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor 属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
grayscale(% )
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
hue-rotate(deg )
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
invert(% )
反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。
opacity(% )
转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
saturate(% )
转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。
sepia(% )
将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
url()
URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。
例如:
filter: url(svg-url#element-id)
:link:伪类选择器用于选取未被访问的链接。
*:link 选择器不会设置已经访问过的链接的样式。
百度
:visited:伪类选择器用于选取已被访问的链接。
W3Sschool
Google
Wikipedia
注释: :visited 选择器为已被访问的链接设置样式。
:active:伪类选择器用于选择活动链接。点击的瞬间生效
这是一个链接。
注释: 在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!
注释: 在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!
:focus:伪类选择器用于选取获得焦点的元素。
在文本框中点击,您会看到黄色的背景:
注释: 如果 :focus 用于 IE8 ,则必须声明 。
:after:伪类选择器在被选元素的内容之后插入新内容。
:before:伪类选择器在被选元素的内容之前插入新内容。
font属性:可以统一连写
font-size: 字体大小 例:font-size: 16px;
font-family: 字体类型 例:font-family: "微软雅黑", sans-serif;
font-style: 字体样式 例:font-style: normal;
值
描述
normal
默认,普通字体
italic
斜体
oblique
倾斜字体
font-weidth: 字体粗细 例:font-weidth: normal;
值
描述
normal
默认,正常粗细
bold
粗体
bolder
更粗的字体
lighter
更细的字体
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
transistion属性:可以统一连写
transition: all 1s; 在规定的时间从一个大小变换到其他大小,过度时间曲线的延迟时间。all:表示所有属性
transition-property: background; 针对某一个属性进行过度,可以添加多个属性。
transition-duration: 1s; 过渡时间。
transition-timing-function: ease; 过度时间曲线,默认
值
描述
ease
默认值,逐渐变慢。
linear
匀速
ease-in
加速
ease-out
减速
ease-in-out
先加速再减速
cubic-bezier([参数])
贝塞尔曲线
transition-delay: 5s; 过度延迟时间。
text属性:文本样式
text-align: 文本对齐方式。 例:text-align: center;
值
描述
left
默认,左对齐
center
居中对齐
right
右对齐
text-indent: 段落首行缩进。 例:text-indent: 2em; 中文首行缩进2字符常用
text-decoration: 文本装饰线。 例:text-decoration: none;
值
描述
none
默认,不显示任何装饰线
underline
在文本下方显示装饰线
overline
在文本上方显示装饰线
line-through
在文本中间显示装饰线,相当于删除线
text-transform: 英文字母大小写转换。 例:text-transform: none;
值
描述
none
默认,保持文本中英文单词的默认大小写
capitalize
单词首字母大写
uppercase
全大写
lowercase
全小写
text-shadow: 文本阴影。 例:text-shadow: 0 0 10 red;
四个值分别为:
值
描述
水平方向阴影偏移(h-shadow)
“0”表示维持原位,正数为向右偏移,负数为向左偏移。单位为像素“px”。
垂直方向阴影偏移(v-shadow)
“0”表示维持原位,正数为向上偏移,负数为向下偏移。单位为像素“px”。
阴影模糊距离(blur)
用正数表示阴影模糊的单位距离,距离越大模糊程度越高,单位为像素“px”。
阴影的颜色(color)
支持Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
text-overflow: 当文本溢出时的设置。 例:text-overflow: clip;
值
描述
clip
裁剪文本
ellipsis
多出来的文本用省略号代替,
需要文本设置不换行
显示三排再省略:
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
background属性:背景设置
background-color: 设置背景颜色。 例:background-color: red;
background-image: 设置背景图片。 例:background-image: url(图片地址);
background-repeat: 设置背景图片的格式。 例:background-repeat: repeat;
值
描述
repeat
默认,以“平铺”的方式排列图片
repeat-x
只在水平方向(X轴方向)进行重复
repeat-y
只在垂直方向(Y轴方向)进行重复
no-repeat
不平铺
background-position: 背景图定位。 例:background-position: left top;
值
描述
方位英文单词
有“left”、“right”、“top”、“bottom”和“center”。用法如:“left top”(默认),设置背景图在元素内的“左上方”;“right bottom”,设置背景图在元素内的“右下方”;“center center”,设置背景图在元素的“中心”。
百分比单位
用法如:“0% 50%”,设置背景图在元素内“水平方向”的“左方”,垂直方向的“中心”;“50% 50%”,,设置背景图在元素内的“中心”;“100% 100%”,,设置背景图在元素内的“右下方”。
像素单位
背景图的“左上角”相对于元素“左上角”偏移的距离,如“10px 20px”,设置背景图“水平向右”偏移10像素,“垂直向下”偏移20像素。
background-attachment: 固定背景图片。 例:background-attachment: fixed
值
描述
scroll
默认值,当页面滚动的时候,背景图也跟随页面同步滚动
fixed
页面出现滚动条后就算页面滚动,背景图也会固定在原来的位置不会跟随页面滚动。
background-clip: 背景裁切范围。 例:background-clip: border-box;
值
描述
border-box
默认,背景的覆盖范围从“border”开始
padding-box
背景的覆盖范围从“padding”开始
content-box
背景的覆盖范围从“content”开始
background-size: 背景图片的大小。 例:background-size: 100% 100%;
值
描述
像素值
设置两个值,一个为宽、一个为高,单位为“PX”。
亦可以一个值为固定值一个为auto,达到原始图像比例的效果
百分比值
结构与像素值一样,单位为"%"
contain
自动将背景图像填满元素的其中一边,图像的比例保持不变。
cover
在保持图像原始比例的情况下,将元素的背景区域完全覆盖,超出元素宽高的部分会自动被裁剪,是一种比较“智能”的背景图片大小设置方式,通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。
background-origin: 背景图像开始的位置。 例:background-origin: content-box;
值
描述
border-box
默认,背景的覆盖范围从“border”开始
padding-box
背景的覆盖范围从“padding”开始
content-box
背景的覆盖范围从“content”开始
background: 背景渐变色。 例:background: linear-gradient(red, black);
线性渐变: 沿着一条直线进行,必须要具有两种或以上的颜色
/*最基本的渐变*/
background: linear-gradient(#d80000,#2c2cff);
/*一个有方向的渐变*/
background: -webkit-linear-gradient(left,#bce510,#e66055); //谷歌浏览器
background: -moz-linear-gradient(left,#bce510,#e66055); //搜狐浏览器
background: -ms-linear-gradient(left,#bce510,#e66055); //IE浏览器
background: linear-gradient(to right,#bce510,#e66055); //不进行适配
/*边角方向开始的渐变*/
background: -webkit-linear-gradient(left top,#d80000,#2c2cff);
background: -moz-linear-gradient(left top,#d80000,#2c2cff);
background: -ms-linear-gradient(left top,#d80000,#2c2cff);
background: linear-gradient(to bottom right,#d80000,#2c2cff);
/*有角度的渐变*/
background: -webkit-linear-gradient(15deg,#d8b700,#0bcc6c);
background: -moz-linear-gradient(15deg,#d8b700,#0bcc6c);
background: -ms-linear-gradient(15deg,#d8b700,#0bcc6c);
background: linear-gradient(15deg,#d8b700,#0bcc6c);
/*多色渐变*/
background: -webkit-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -moz-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -ms-linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: linear-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
/*多重多色的渐变*/
background: -webkit-linear-gradient(0deg,rgba(126, 3, 191, 0.1),rgba(126, 3, 191, 0.8)),
-webkit-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: -moz-linear-gradient(0deg,rgba(126, 3, 191, 0.1),rgba(126, 3, 191, 0.8)),
-moz-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: -ms-linear-gradient(0deg,rgba(126, 3, 191, 0.3),rgb(126, 3, 191)),
-ms-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
background: linear-gradient(0deg,rgba(126, 3, 191, 0.3),rgb(126, 3, 191)),
-linear-gradient(90deg,black,hsla(0, 100%, 50%, 0.3));
/*重复线性渐变*/
background: -webkit-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: -moz-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: -ms-repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
background: repeating-linear-gradient(#452ff2 5%, #ff00ce 10%, #a700ff 25%);
径向渐变: 颜色的变化过度方式是以一个圆的圆心为参照进行的
background: -webkit-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -moz-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: -ms-radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
background: radial-gradient(#d8b700,#0bcc6c,#0b89cc,#eba45c);
transform属性:变形转换,综合运用:translate、rotate、scale、skew
transform: translate(100px, 100px); XY平移
transform: translateX(100px); 横向平移
transform: translateY(100px); 纵向平移
transform: rotate(100deg); 按照顺时针旋转;
transform: rotateX(100deg); 按照上下旋转
transform: rotateY(100deg); 按照左右旋转
transform: scale(1.5); 放大或缩小倍数
transform: scaleX(1.2); 左右放大或缩小
transform: scaleY(1.2); 上下放大或缩小
transform: skew(15deg); 倾斜
transform: skewX(15deg); X轴倾斜
transform: skewY(15deg); Y轴倾斜
transform-origin: top left; 定义一个原点
transform-style: flat; 2d平面动画
transform-style: preserve-3d; 3d动画
animation属性: 动画
animation-name: 定义动画的名称,使用该属性调用关键帧执行动画。 例:animation-name: resizeWord;
@keyframes: 动画关键帧定义,使用animation调用。 例:
/*英文单词模式*/
@keyframes resizeWord{
from{ width: 100px }
to{ width: 800px; }
}
/*百分数模式*/
@keyframes resizeWord{
0%{ width: 100px }
20%{ width: 200px; }
40%{ width: 400px; }
60%{ width: 600px; }
80%{ width: 800px; }
100%{ width: 1000px; }
}
animation-duration: 动画执行时间。 例:animation-duration: 2s;
animation-timing-function: 动画事件曲线。 例:animation-timing-function: ease;
值
描述
ease
默认值,逐渐变慢。
linear
匀速
ease-in
加速
ease-out
减速
ease-in-out
先加速再减速
cubic-bezier([参数])
贝塞尔曲线
animation-delay: 动画延迟时间。 例:animation-delay: 2s;
animation-iteration-count: 动画播放的次数。 例:animation-iteration-count: 1;
值
描述
1
表示在执行某事件后只执行1次动画。
[number]
任意正整数,表示在执行某事件后只执行[numver]次动画。
infinite
表示在执行某事件后“无限次”执行动画。
animation-direction: 动画逆时针播放。 例:animation-direction: alternate;
值
描述
normal
默认值。动画应该正常播放。
alternate
动画应该轮流反向播放。
animation-play-state: 动画的播放与暂停。 animation-play-state: running;
值
描述
running
播放动画
paused
暂停动画
animation-fill-mode: 设定元素动画形态,它可以预设值动画播放前的“第一帧”和保留动画播放完成后的“最后一帧”。 例:animation-fill-mode: backwards
值
描述
backwards
让元素保持动画第一帧定义里所设置的CSS属性,直到动画开始执行。
forwards
让元素保持动画播放结束后最后一帧定义里所设置的CSS属性。
both
让元素保持动画第一帧里定义的CSS属性,直到动画开始,动画播放完成后又保持动画最后一帧的属性。
animation:组合写法:动画名称、执行时间、速度曲线、延迟时间、播放次数、周期逆向播放、播放状态(开始/暂停)、首帧预设/末帧保留
弹性盒子布局:需要将属性值添加到需要布局的父元素上面才能实现
display: flex; 弹性盒子开始代码,一切开端
行列布局:
flex-direction: row; 默认行,从左往右排列
flex-direction: row-reverse; 从右往左排列,内容也一起调换排列
flex-direction: column; 列,从上往下排列
flex-direction: column-reverse; 从下往上排列,内容也一起调换排列
水平对齐:
justify-content: flex-start; 默认,水平左对齐
justify-content: flex-end; 水平右对齐
justify-content: center; 水平居中对齐
justify-content: space-between; 水平两端分散对齐
justify-content: space-around; 水平分散对齐
垂直对齐:
align-items: flex-start; 默认,垂直顶端对齐
align-items: flex-end; 垂直底端对齐
align-items: center; 垂直居中对齐
align-items: baseline; 基线对齐
align-items: stretch; 子标签高度为auto或者没有设置时,高度自动与父元素高度同步
换行:需要多行对齐时必添加此项
flex-wrap: none;
值
描述
none
不换行
wrap
换行
wrap-reverse
换行颠倒
多行对齐:
align-content: flex-start; 多行顶端对齐
align-content: flex-end; 多行底端对齐
align-content: center; 多行居中对齐
align-content: space-between; 多行两端分散对齐
align-content: space-around; 多行两端对齐
散装属性值:定义到子元素中
flex-grow: 使子元素瓜分父元素剩下的空间。 例:flex-grow: 1;
flex-basis: 向父元素预约设置好的空间,并且此元素的权限大于width。如果两者有一个为auto,那么非auto的优先级更高。而且此元素受到max-width与min-width的限制。 例:flex-basis: 100px;
flex-shrink: 当子元素的总宽度大于了父元素的宽度时,用此方法按比例缩减子元素的宽度。 例:flex-shrink: 1;
你可能感兴趣的:(知识点回顾)
心赏日记
小甜心_1f96
2018年6月14日星期四天气:多云温故而知新,学习过得知识点回顾:(抄写)听美乐——造境转心读经典——心灵扎根学赏识——改变态度构和谐——水到渠成今天向家人问好了了吗?✔□有□没有今天拥抱爱人和孩子了吗?✔□有□没有今天心赏爱人和孩子了吗?✔□有□没有对自己的心赏,请详细描述。1、朗读《父母规》承诺文176天,与大宝同步诵读国学经典《孟子》,朗读家庭教育心灵成长书,参加千寻读书一百天,坚持阅读打
Flutter第五章(各种Route)
一巴掌拍出两坨脂肪
版权声明:本文为作者原创书籍。转载请注明作者和出处,未经授权,严禁私自转载,侵权必究!!!情感语录:别说什么火克木,水克土;你只有努力,只有成功了才能克天、克地、克人生。欢迎来到本章节,上一章节我们讲了StatelessWidget和StatefulWidget组件还记得吗?知识点回顾戳这里Flutter基础第四章本章节主要讲解路由,Flutter中的路由通俗的讲就是页面跳转。在Android原生
Flutter第十七章(Isolate 并发)
一巴掌拍出两坨脂肪
版权声明:本文为作者原创书籍。转载请注明作者和出处,未经授权,严禁私自转载,侵权必究!!!情感语录:有人帮你,是你的幸运;无人帮你,是公正的命运。没有人该为你做什么,因为生命是你自己的,你得为自己负责。欢迎来到本章节,上一章节介绍了Flutter中的WebView的使用,知识点回顾戳这里Flutter第十六章本章节来了解下Flutter中的多线程(Isolate),我们知道Flutter是采用的D
IA003第一周答疑复盘
旦姐
线上环节1.对于交叉验证的进一步理解(1)信息来源的交叉验证,比如对特斯拉的了解,可以来自wiki或人物传记;(2)信息整理方式的交叉验证,比如按照时间,空间,或者人物;(3)信息加工方法的交叉验证,比如定性或定量,宏观或微观;(4)信息报告(呈现)方式的交叉验证,原始数据或图示法。2.提高对问题的表征能力向上演绎,开上帝视角;向下分解,用变量思维3.核心知识点回顾(1)信息分布数学原理布拉德福定
Flutter第七章(Drawer 侧边栏,UserAccountsDrawerHeader,DrawerHeader以及案例 )
一巴掌拍出两坨脂肪
版权声明:本文为作者原创书籍。转载请注明作者和出处,未经授权,严禁私自转载,侵权必究!!!情感语录:情不自禁念出的那个名字,梦里经常出现的那个她还在你的身边吗?无论在与不在都要学会懂得更加珍惜!欢迎来到本章节,上一章节我们讲了底部导航菜单和顶部导航菜单场景的使用,知识点回顾戳这里Flutter基础第六章本章节将讲解另一个场景:左右侧边栏,侧边栏的使用场景还是非常多的,比如:QQ,京东等。本章知识点
JVM工作原理与实战(三十一):诊断内存泄漏的原因
橘子-青衫
JVM工作原理与实战 jvm java 后端 架构
专栏导航JVM工作原理与实战RabbitMQ入门指南从零开始了解大数据目录专栏导航前言一、诊断原因二、MAT内存泄漏检测的原理总结前言JVM作为Java程序的运行环境,其负责解释和执行字节码,管理内存,确保安全,支持多线程和提供性能监控工具,以及确保程序的跨平台运行。本文主要介绍了诊断内存溢出的原因、MAT内存泄漏检测的原理等内容。知识点回顾:解决内存溢出的步骤:解决内存溢出问题是一个复杂的过程,
JVM工作原理与实战(三十):堆内存状况的对比分析
橘子-青衫
JVM工作原理与实战 jvm java 后端 架构
专栏导航JVM工作原理与实战RabbitMQ入门指南从零开始了解大数据目录专栏导航前言一、堆内存状况的对比分析1.正常情况2.异常情况(内存泄漏)二、产生内存溢出的原因总结前言JVM作为Java程序的运行环境,其负责解释和执行字节码,管理内存,确保安全,支持多线程和提供性能监控工具,以及确保程序的跨平台运行。本文主要介绍了堆内存状况的对比分析、产生内存溢出的原因等内容。知识点回顾:解决内存溢出的步
File类知识点回顾
胡小牧
Java java
File类简介File是文件和目录路径名的抽象表示。用户界面和操作系统使用依赖于系统的路径名字符串来命名文件和目录。此类提供了一个抽象的,与系统无关的分层路径名视图。抽象路径名有两个组成部分:可选系统有关的前缀字符串,如磁盘驱动器符,"/"对于UNIX根目录下,或者"\\\\"的MicrosoftWindowsUNC路径,并一个零个或多个字符串名称的序列。1File(Stringpathname)
IT老王:Python基础之高级变量类型
IT老王Hua_TZ
python python pycharm 开发语言
IT老王:高级变量类型目标列表元组字典字符串公共方法变量高级知识点回顾Python中数据类型可以分为数字型和非数字型数字型整型(int)浮点型(float)布尔型(bool)真True非0数——非零即真假False0复数型(complex)主要用于科学计算,例如:平面场问题、波动问题、电感电容等问题非数字型字符串列表元组字典在Python中,所有非数字型变量都支持以下特点:都是一个序列sequen
卡尔曼滤波、马尔科夫模型、粒子滤波、TSP问题知识点回顾
竹叶青lvye
程序员的数学 卡尔曼滤波 隐马尔可夫模型 动态规划 粒子滤波
前面有小结了概率论、线性代数、现代控制理论的一些知识点,这边再来回顾下之前看过了关于卡尔曼滤波、马尔科夫模型、粒子滤波、动态规划中的TSP问题,这边也只是知其形,便于日后应用到一些实际案例中。一.卡尔曼滤波这边只是记录要点,便于快速回忆起来,可以从如下5个公式来入手。所以在代码初始化的时候要先初始化状态真实值和后验误差协方差矩阵主要可参考博客一文看懂卡尔曼滤波(附全网最详细公式推导)-知乎其它博客
云计算工程师系列 第一章到第三章 知识点回顾(持续更新中....)
MadisonRing
Linux 云计算 笔记 linux 运维开发
云计算基础大课第一章到第三章知识点回顾第一章,走进Linux世界(系统部署)(1)系统部署01.Linux历史(林纳斯Linux,理查德GNU/GPL)02.Linux发行版(RHEL、CentOS、Ubuntu/debian、suse、fedora,鸿蒙、深度)03.服务器硬件(厂商HP/DELL/IBM/华为浪潮曙光、型号、配置、尺寸、04.了解VMware虚拟化(把一台计算机虚拟成多台)05
HTTP与HTTPS的工作流程
JH3073
http https 网络协议
HTTP与HTTPS的工作流程http知识点回顾1、HTTP访问的过程2、HTTP常见状态码3、HTTP协议一共五大特点https的工作流程1、对称加密2、非对称加密3、https工作流程http知识点回顾1、HTTP访问的过程(1)解析url,获取url中包含的域名;(2)通过DNS服务器查询域名对应的IP;(3)浏览器得到域名对应的IP地址之后,向服务器发起三次握手请求建立TCP链接;(4)T
2019-05-07日课程总结
七两三_e13f
Day02网络02一、知识点回顾1、什么是网络?2、网络传输介质2.1导向式双绞线(网线)5类超56超7类超7类正反光纤同轴电缆2.2非导向式蓝牙5.010~15米红外微波卫星量子等3、网络协议ARPDNSFTP等4、网络的分类1.覆盖范围2.拓扑5、计算机之间进行通信5.1通信的最小单位bit5.2相互转化6、两台计算机之间的通讯6.1有连接介质6.2网卡(能工作)7、交换网络(小型的局域网)7
2019-04-08 Day27 静态路由项目
Ffvc
Day27作者:方维超归档:课堂笔记时间:2019/4/8老男孩教育教学核心思想6重:重目标、重思路、重方法、重实践、重习惯、重总结学无止境,老男孩教育成就你人生的起点!《一、知识点回顾》《二、静态路由项目》一、知识点回顾1.什么是网络?(主机和主机之间相互通信)1)传输介质2)硬件2.两台主机之间进行通信3.交换网络(使用交换机)(局域网内多台计算机之间通信)1)交换机的原理(2层网络数据链路层
Unity基础之C#核心篇笔记3:继承
四月的白羊座
Unity基础之C#核心篇笔记
Unity基础之C#核心篇笔记3:继承继承的基本规则1.基本概念2.基本语法3.实例4.访问修饰符的影响5.子类和父类的同名成员6.总结7.练习题里氏替换原则1.基本概念2.基本实现3.is和as4.总结5.练习题继承中的构造函数1.知识回顾2.继承中的构造函数基本概念3.继承中构造函数的执行顺序4.父类的无参构造函重要5.总结万物之父和装箱拆箱1.里氏替换知识点回顾2.万物之父3.万物之父的使用
第三周作业输出(10.10-10.16)
粽仔
一、锦囊知识点回顾1、三个问题+行动加工公式要不要做(不做的删除,暂时不做的推迟)先想象(要达成的结果)再思考(行动的第一步是什么)我+动词+相关人+事情做事情顺序:记录+删除+排程+执行(日历按照时间流,清单情景流)2、4D(1)删除:删除事件占40%(2)搁置:推迟事件占30%(3)委托:委托事件占10%(4)做(执行):要事事件占20%以上原理也是基本二八法则,聚焦高能要事,优先保证20%的
Python - 深夜数据结构与算法之 DP 串讲
BIT_666
夜深人静写算法 Python python 开发语言 DP
目录一.引言二.DP知识点回顾1.递归2.分治3.动态规划三.DP经典题目回顾1.Climb-Stairs[70]2.Unique-Paths[62]3.House-Robber[198]4.Min-Path-Sum[64]5.Best-Time-Sell-Stock[121]6.Min-Cost-Climb[746]7.Edit-Distance[72]8.Longest-Sub-Seq[300
python爬虫基础--多线程--多进程--协程
我还可以熬_
# python爬虫 python 爬虫 开发语言
目录终于考完试了,自由了哈哈哈哈哈知识点回顾详看:python爬虫基础--json数据和jsonpath--多线程原理_我还可以熬_的博客-CSDN博客多线程多线程--方法版多线程--类版多进程multiprocessing模块Manager类,实现数据共享进程池的使用多进程--方法版多进程--进程池版协程安装第三方模块终于考完试了,自由了哈哈哈哈哈本来早该完成的这篇,然后期间考试,耽误了很久!!
1 快速前端开发
笛秋白
前端开发 前端框架 前端 Flask HTML CSS 小米商城
前端开发1前端开发1.快速开发网站2.浏览器能识别的标签2.1编码(head)2.2title(head)2.3标题2.4div和span2.4.5超链接2.4.6图片小结2.4.7列表2.4.8表格2.4.9input系列(7个)2.4.10下拉框2.4.11多行文本知识点回顾和补充案例:用户注册案例:登录()总结3.CSS样式3.1快速了解3.2CSS应用方式1.在标签上2.在head标签中写
4-8课堂笔记
张鑫泽_2109
网络结一、知识点回顾1、网络?1、传输介质2、硬件2、两台主机之间进行通信?3、交换网络(局域网内多台计算机之间通讯)交换机的原理(2层网络数据链路层MAC---->表)|----->主机-----MAC地址广播风暴的问题|--->降低减轻1、路由器的概念2、子网掩码(划分)交换网络中的数据格式源信息(MAC地址)+目地信息(MAC地址)+数据内容=数据格式ARP4、局域网和局域网之间计算机之间的
易效能第2周践行总结
艾敏妈妈
今天回老家,半夜跳闸空调停了,被热醒后就一直没法入睡,风扇的声音实在太吵,隔壁房间的灯也一直亮着,我在床上辗转反侧始终无法继续入睡,后来索性起床喝了一杯水,然后把今天的作业先完成。一、锦囊知识点回顾1.在今天的锦囊会议里,叶老师首先给我们看到一张心静如水的图片,任何时候,如果我们没有首先让自己做到内了心平静,是没有办法做好当下的任何事情。确实是这样,很多时候,当自己心情很烦躁时,工作也好,家庭孩子
【操作系统原理与实践】常见计算题整理:原理+例题
明月出天山_
操作系统原理与实践 网络 嵌入式硬件 硬件架构
调度算法知识点回顾先来先服务算法FCFS:按照作业提交或进程变为就绪状态的先后次序,分派CPU;当前作业或进程占用CPU,直到执行完或阻塞,才主动地出让CPU。短作业优先算法SJF:是指对短作业或短进程优先调度的算法。它们可以分别用于作业调度和进程调度。高响应比优先调度算法HRRN:赋予作业动态优先级,优先级随作业等待时间延长而增加,从而使长作业的优先级在等待期间不断增加。优先权=等待时间+要求服
撤销commit
不知名的蛋挞
知识点回顾图中左侧为工作区,右侧为版本库。在版本库中标记为"index"的区域是暂存区(stage,index),标记为"master"的是master分支所代表的目录树。objects标识的区域为Git的对象库。当对工作区修改(或新增)的文件执行"gitadd"命令时,暂存区的目录树被更新,同时工作区修改(或新增)的文件内容被写入到对象库中的一个新的对象中,而该对象的ID被记录在暂存区的文件索引
DUK整理术#易效能一阶践行第八周作业
春暖花开_6167
【知识点回顾】秒搜系统:1.文件:一定要保存最终版。2.物品:有名,有家有导航3.保持归位,包括住飞机轮船火车酒店。离开前归位,晚一点没关系,赶时间就不强求,尽量让自己从容不迫,适当做一做。【话题】DUK整理术①删除Delete20%,就是做减法,不管是出口还是入口,不管是丢弃已有的物品,还是剁手新的物品,我们都要对自己的“渴望拥有”的欲望要加以控制,要在原来的基础上做减法。✔️整理方式:可以选择
JavaWeb 期末考--复盘
-Z_Nuyoah
javaweb java
Javaweb期末复习题目1单选2多选3问答与分析4程序填空5程序设计(该部分无)需要word版资料详见文章末尾,免费自提0、学期知识点回顾一、注释和注解1、Java的三种注释:单行、多行和文档注释。2、常用的元注解:(1)当@Retention应用到一个注解上的时候,它解释说明了这个注解的存活时间。取值如下:RetentionPolicy.SOURCE注解只在源码阶段保留,在编译器进行编译时它将
第五周:深度学习知识点回顾
女王の专属领地
AI产品经理 深度学习 深度学习 人工智能 神经网络 卷积神经网络 rnn cnn 语言模型
前言:讲真,复习这块我是比较头大的,之前的线代、高数、概率论、西瓜书、樱花书、NG的系列课程、李宏毅李沐等等等等…那可是花了三年学习佳实践下来的,现在一想脑子里就剩下几个名词就觉得废柴一个了,朋友们有没有同感,高中的留给高中老师,大学的给大学老师,研究生的留给谁了呢~但是呢,想想我马上要成为风口上的众多马上飞起的(* ̄(oo) ̄),不说废话,撸起袖子开干!!!tips:不做具体视频课程学习,基本会
Flask系列(三)蓝图、基于DButils实现数据库连接池、上下文管理
weixin_30609287
python 数据库
知识点回顾1、子类继承父类的三种方式classDog(Animal):#子类派生类def__init__(self,name,breed,life_value,aggr):#Animal.__init__(self,name,breed,life_value,aggr)#让子类执行父类的方法就是父类名.方法名(参数),连self都得传super().__init__(name,life_value
第四周:机器学习知识点回顾
女王の专属领地
机器学习 人工智能
前言:讲真,复习这块我是比较头大的,之前的线代、高数、概率论、西瓜书、樱花书、NG的系列课程、李宏毅李沐等等等等…那可是花了三年学习佳实践下来的,现在一想脑子里就剩下几个名词就觉得废柴一个了,朋友们有没有同感,高中的留给高中老师,大学的给大学老师,研究生的留给谁了呢~但是呢,想想我马上要成为风口上的众多马上飞起的(* ̄(oo) ̄),不说废话,撸起袖子开干!!!tips:不做具体视频课程学习,基本会
day26子网掩码和网络地址分类
Linux_淡忘
Day26作者:翟玉龙归档:课堂笔记2019/04/04第1章知识点回顾1.什么是网络2.网络协议了解一下常见的协议ARP协议=====》交换机====》MAC地址DNS协议=====》IP========》域名对应的过程hosts文件FTP协议HTTP协议HTTPS协议3.两台主机之间是如何通信的3.1通信介质导向:1.光纤网络工程师单模双模2.双绞线正双绞线:插交换机,路由反双绞线:(双机互联
07.Python集合与字符串
__元昊__
高级变量类型目标列表元组字典字符串公共方法变量高级知识点回顾Python中数据类型可以分为数字型和非数字型数字型整型(int)浮点型(float)布尔型(bool)真True非0数——非零即真假False0复数型(complex)主要用于科学计算,例如:平面场问题、波动问题、电感电容等问题非数字型字符串列表元组字典在Python中,所有非数字型变量都支持以下特点:都是一个序列sequence,也可
SQL的各种连接查询
xieke90
UNION ALL UNION 外连接 内连接 JOIN
一、内连接
概念:内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。
内连接(join 或者inner join )
SQL语法:
select * fron
java编程思想--复用类
百合不是茶
java 继承 代理 组合 final类
复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书
一:组合语法:就是将对象的引用放到新类中即可
代码:
package com.wj.reuse;
/**
*
* @author Administrator 组
[开源与生态系统]国产CPU的生态系统
comsci
cpu
计算机要从娃娃抓起...而孩子最喜欢玩游戏....
要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....
投入一些资金和资源,人力和政策,让游
JVM内存区域划分Eden Space、Survivor Space、Tenured Gen,Perm Gen解释
商人shang
jvm内存
jvm区域总体分两类,heap区和非heap区。heap区又分:Eden Space(伊甸园)、Survivor Space(幸存者区)、Tenured Gen(老年代-养老区)。 非heap区又分:Code Cache(代码缓存区)、Perm Gen(永久代)、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。
HotSpot虚拟机GC算法采用分代收
页面上调用 QQ
oloz
qq
<A href="tencent://message/?uin=707321921&Site=有事Q我&Menu=yes">
<img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
一些问题
文强chu
问题
1.eclipse 导出 doc 出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 .....
SQL:3.mysql * 必须得放前面 否则 select&nbs
生活没有安全感
小桔子
生活 孤独 安全感
圈子好小,身边朋友没几个,交心的更是少之又少。在深圳,除了男朋友,没几个亲密的人。不知不觉男朋友成了唯一的依靠,毫不夸张的说,业余生活的全部。现在感情好,也很幸福的。但是说不准难免人心会变嘛,不发生什么大家都乐融融,发生什么很难处理。我想说如果不幸被分手(无论原因如何),生活难免变化很大,在深圳,我没交心的朋友。明
php 基础语法
aichenglong
php 基本语法
1 .1 php变量必须以$开头
<?php
$a=” b”;
echo
?>
1 .2 php基本数据库类型 Integer float/double Boolean string
1 .3 复合数据类型 数组array和对象 object
1 .4 特殊数据类型 null 资源类型(resource) $co
mybatis tools 配置详解
AILIKES
mybatis
MyBatis Generator中文文档
MyBatis Generator中文文档地址:
http://generator.sturgeon.mopaas.com/
该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看中文版的文档的也会有一定的障碍,所以本章根据该中文文档以及实际应用,使用通俗的语言来讲解详细的配置。
本文使用Markdown进行编辑,但是博客显示效
继承与多态的探讨
百合不是茶
JAVA面向对象 继承 对象
继承 extends 多态
继承是面向对象最经常使用的特征之一:继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类,这个新类拥有现有类的所有extends是使用继承的关键字:
在A类中定义属性和方法;
class A{
//定义属性
int age;
//定义方法
public void go
JS的undefined与null的实例
bijian1013
JavaScript JavaScript
<form name="theform" id="theform">
</form>
<script language="javascript">
var a
alert(typeof(b)); //这里提示undefined
if(theform.datas
TDD实践(一)
bijian1013
java 敏捷 TDD
一.TDD概述
TDD:测试驱动开发,它的基本思想就是在开发功能代码之前,先编写测试代码。也就是说在明确要开发某个功能后,首先思考如何对这个功能进行测试,并完成测试代码的编写,然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能,直到完全部功能的开发。
[Maven学习笔记十]Maven Profile与资源文件过滤器
bit1129
maven
什么是Maven Profile
Maven Profile的含义是针对编译打包环境和编译打包目的配置定制,可以在不同的环境上选择相应的配置,例如DB信息,可以根据是为开发环境编译打包,还是为生产环境编译打包,动态的选择正确的DB配置信息
Profile的激活机制
1.Profile可以手工激活,比如在Intellij Idea的Maven Project视图中可以选择一个P
【Hive八】Hive用户自定义生成表函数(UDTF)
bit1129
hive
1. 什么是UDTF
UDTF,是User Defined Table-Generating Functions,一眼看上去,貌似是用户自定义生成表函数,这个生成表不应该理解为生成了一个HQL Table, 貌似更应该理解为生成了类似关系表的二维行数据集
2. 如何实现UDTF
继承org.apache.hadoop.hive.ql.udf.generic
tfs restful api 加auth 2.0认计
ronin47
目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点:
一是基于客户端的ip设置。这个比较容易实现。
二是基于OAuth2.0认证,这个需要lua,实现起来相对于一来说,有些难度。
现在重点介绍第二种方法实现思路。
前言:我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算,阅读下面的文档,实现自动化并获得收益。SeatGe
jdk环境变量配置
byalias
java jdk
进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置:
1、下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是:jdk-7u79-windows-x64.exe
2、安装jdk-7u79-windows-x64.exe
3、配置环境变量:右击"计算机"-->&quo
《代码大全》表驱动法-Table Driven Approach-2
bylijinnan
java
package com.ljn.base;
import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.Collections;
import java.uti
SQL 数值四舍五入 小数点后保留2位
chicony
四舍五入
1.round() 函数是四舍五入用,第一个参数是我们要被操作的数据,第二个参数是设置我们四舍五入之后小数点后显示几位。
2.numeric 函数的2个参数,第一个表示数据长度,第二个参数表示小数点后位数。
例如:
select cast(round(12.5,2) as numeric(5,2))  
c++运算符重载
CrazyMizzz
C++
一、加+,减-,乘*,除/ 的运算符重载
Rational operator*(const Rational &x) const{
return Rational(x.a * this->a);
}
在这里只写乘法的,加减除的写法类似
二、<<输出,>>输入的运算符重载
&nb
hive DDL语法汇总
daizj
hive 修改列 DDL 修改表
hive DDL语法汇总
1、对表重命名
hive> ALTER TABLE table_name RENAME TO new_table_name;
2、修改表备注
hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
jbox使用说明
dcj3sjt126com
Web
参考网址:http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [
点击下载]
技术交流QQGroup:172543951 100521167
[2011-11-11] jBox v2.3 正式版
- [调整&修复] IE6下有iframe或页面有active、applet控件
UISegmentedControl 开发笔记
dcj3sjt126com
// typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {
// UISegmentedControlStylePlain, // large plain
&
Slick生成表映射文件
ekian
scala
Scala添加SLICK进行数据库操作,需在sbt文件上添加slick-codegen包
"com.typesafe.slick" %% "slick-codegen" % slickVersion
因为我是连接SQL Server数据库,还需添加slick-extensions,jtds包
"com.typesa
ES-TEST
gengzg
test
package com.MarkNum;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation
为何外键不再推荐使用
hugh.wang
mysql DB
表的关联,是一种逻辑关系,并不需要进行物理上的“硬关联”,而且你所期望的关联,其实只是其数据上存在一定的联系而已,而这种联系实际上是在设计之初就定义好的固有逻辑。
在业务代码中实现的时候,只要按照设计之初的这种固有关联逻辑来处理数据即可,并不需要在数据库层面进行“硬关联”,因为在数据库层面通过使用外键的方式进行“硬关联”,会带来很多额外的资源消耗来进行一致性和完整性校验,即使很多时候我们并不
领域驱动设计
julyflame
VO DAO 设计模式 DTO po
概念:
VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来。
DTO(Data Transfer Object):数据传输对象,这个概念来源于J2EE的设计模式,原来的目的是为了EJB的分布式应用提供粗粒度的数据实体,以减少分布式调用的次数,从而提高分布式调用的性能和降低网络负载,但在这里,我泛指用于展示层与服务层之间的数据传输对
单例设计模式
hm4123660
java Singleton 单例设计模式 懒汉式 饿汉式
单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。
&nb
logback
zhb8015
log logback
一、logback的介绍
Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块:logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
整合Kafka到Spark Streaming——代码示例和挑战
Stark_Summer
spark storm zookeeper PARALLELISM processing
作者Michael G. Noll是瑞士的一位工程师和研究员,效力于Verisign,是Verisign实验室的大规模数据分析基础设施(基础Hadoop)的技术主管。本文,Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间, Michael还提到了将Kafka整合到 Spark Streaming中的一些现状,非常值得阅读,虽然有一些信息在Spark 1.2版
spring-master-slave-commondao
王新春
DAO spring dataSource slave master
互联网的web项目,都有个特点:请求的并发量高,其中请求最耗时的db操作,又是系统优化的重中之重。
为此,往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层,要保证针对主库进行写操作,对多个从库进行读操作。当然在一些请求中,为了避免主从复制的延迟导致的数据不一致性,部分的读操作也要到主库上。(这种需求一般通过业务垂直分开,比如下单业务的代码所部署的机器,读去应该也要从主库读取数