串行并jjjjj
串行并jjjjj

CSS3新特性整理

CSS3新特性

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

声明：本文参考 W3C CSS3 教程、菜鸟教程等，详细移步 W3C 或菜鸟教程

用 CSS3 做过一些小动画，很好用，特别是里面一些新特性，都是 CSS2 不可比拟的，这里整理一些出来，当做笔记，也当做教程，共勉！

CSS3 相比 CSS 2 对边框、背景、渐变、文本效果、字体、转换效果、过渡、动画、图片、用户界面、盒模型、媒体查询等都有了很大的改进，新增了不少功能和属性

CSS3边框

用 CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

属性

  • border-radius
  • box-shadow
  • border-image

兼容性

  • IE9 支持 border-radius 和 box-shadow 属性
  • IE 浏览器不支持 border-image 属性
  • Firefox、Chrome 以及 Safari 支持所有新的边框属性
  • 对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-
  • Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-

CSS3 圆角边框

CSS3中border-radius属性是用于创建圆角的

语法

1
2
 
border-radius：n1, n2, n3, n4 
/* n1 - n4 分别代表左上角、右上角、右下角、左下角 ，值可为百分比或像素值*/

####例子

1
2
3
4
5
6
 
div {
    width: 100px;
    height: 100px;
    /* border-radius: 25px; */
    border-radius: 25%;
}

CSS3盒阴影

CSS3中的box-shadow属性被用来添加阴影

语法

1
 
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）

例子

1
2
3
4
5
6
7
 
div 
{ 
    width: 100px;
    height: 100px;
    background-color: yellow;
	box-shadow: 10px 10px 5px #888888 inset; 
}

CSS3边界图片

border-image 属性允许你指定一个图片作为边框！用于创建上文边框的原始图像

语法

1
 
border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））

例子

1
2
3
4
5
 
div { 
    border-image:url(border.png) 30 30 round; 
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ 
    -o-border-image:url(border.png) 30 30 round; /* Opera */ 
}

Border

CSS3背景

CSS3更新了几个新的背景属性，提供更大背景元素控制，通过这几个背景属性，您能够做出更加精美的样式

属性

  • background-image
  • background-size
  • background-origin
  • background-clip

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性 chrome IE Firefox Safari Opera
background-image (with multiple backgrounds) 4.0 9.0 3.6 3.1 11.5
background-size 4.0 1.0 -webkit- 9.0 4.0 3.6 -moz- 4.1 3.0 -webkit- 10.5 10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5

CSS3 背景图片

CSS3中可以通过background-image属性添加背景图片

语法

1
 
background-image: url, 定位, 平铺

例子

不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张

1
2
3
4
5
 
#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

可以给不同的图片设置多个不同的属性，每张图片之间依然用逗号隔开

1
2
3
 
#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS3 背景图像大小

background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定

语法

1
 
background-size: 宽 高; // 宽高可以是像素值，也可以是百分比

例子

像素值

1
2
3
4
5
6
 
div
{
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

相对于父元素的宽度和高度的百分比的大小

1
2
3
4
5
6
 
div
{
    background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

CSS3 背景起始位置

background-Origin属性指定了背景图像的位置区域

语法

content-box, padding-box,和 border-box区域内可以放置背景图像。

1
2
 
background-Origin: content-box, padding-box,和 border-box;
// 三个属性三选一，区域内可以放置背景图像

CSS3新特性整理_第1张图片

例子

在 content-box 中定位背景图片

1
2
3
4
5
6
7
 
div 
{ 
    background: url(img_flwr.gif); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    background-origin: content-box; 
}

CSS3 背景图像裁剪

CSS3中background-clip背景剪裁属性是从指定位置开始绘制

语法

从content-box, padding-box,或 border-box位置进行背景图像裁剪

1
2
 
background-clip: content-box, padding-box,和 border-box;
// 三个属性三选一，区域内可以放置背景图像

例子

从 content-box 开始裁剪

1
2
3
4
5
6
 
#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

CSS3渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡

属性

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  • 径向渐变（Radial Gradients）- 由它们的中心定义

兼容性

表中的数字指定了完全支持该属性的第一个浏览器版本。

后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本

属性 Chrome IE Firefox Safari Opera
linear-gradient 26.0 10.0 -webkit- 10.0 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.1 -o-
radial-gradient 26.0 10.0 -webkit- 10.0 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.6 -o-
repeating-linear-gradient 26.0 10.0 -webkit- 10.0 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.1 -o-
repeating-radial-gradient 26.0 10.0 -webkit- 10.0 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.6 -o-

CSS3线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

CSS3新特性整理_第2张图片

语法

linear-gradient

1
 
background: linear-gradient(direction, color-stop1, color-stop2, ...);

例子

从上到下：从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色

1
2
3
4
5
6
 
#grad { 
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(red, blue); /* 标准的语法 */ 
}

从左到右：从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色

1
2
3
4
5
6
 
#grad { 
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(to right, red , blue); /* 标准的语法 */ 
}

对角：从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色

1
2
3
4
5
6
 
#grad { 
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */ 
}

使用多个颜色节点从上到下的线性渐变

1
2
3
4
5
6
 
#grad { 
  background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(red, green, blue); /* 标准的语法 */ 
}

带有彩虹颜色和文本从左到右的线性渐变

1
2
3
4
5
6
7
8
9
10
 
#grad { 
  /* Safari 5.1 - 6.0 */ 
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 /* Opera 11.1 - 12.0 */ 
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
  /* Firefox 3.6 - 15 */ 
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
 /* 标准的语法 */ 
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
}

使用透明度（Transparency）

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明

从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色

1
2
3
4
5
6
 
#grad { 
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */ 
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/ 
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/ 
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */ 
}

repeating-linear-gradient() 函数用于重复线性渐变

1
2
3
4
5
6
7
8
9
10
 
#grad { 
  /* Safari 5.1 - 6.0 */ 
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); 
  /* Opera 11.1 - 12.0 */ 
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); 
  /* Firefox 3.6 - 15 */ 
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); 
  /* 标准的语法 */ 
  background: repeating-linear-gradient(red, yellow 10%, green 20%); 
}

角度渐变

角度渐变：属于线性渐变，如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）

#####语法

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变

1
 
background: linear-gradient(angle, color-stop1, color-stop2);

注意：很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度

例子

带有指定的角度的线性渐变

1
2
3
4
5
6
 
#grad { 
  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */ 
  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */ 
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */ 
}

CSS3径向渐变

说明：我这里是参照 W3C 总结的，发现了几篇更为详细的文档，这里推荐一下：

  • CSS3 Gradient
  • 再说CSS3渐变——线性渐变
  • 再说CSS3渐变——径向渐变
  • 神奇的 conic-gradient 圆锥渐变

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色

语法

radial-gradient

可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）

1
2
 
background: radial-gradient(center, shape size, start-color, ..., last-color)
// 渐变的中心、形状（圆形或椭圆形）、大小

CSS3新特性整理_第3张图片

例子

颜色结点均匀分布的径向渐变

1
2
3
4
5
6
 
#grad { 
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */ 
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */ 
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */ 
  background: radial-gradient(red, green, blue); /* 标准的语法 */ 
}

颜色结点不均匀分布的径向渐变

1
2
3
4
5
6
 
#grad { 
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */ 
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */ 
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */ 
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */ 
}

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse

形状为圆形的径向渐变

1
2
3
4
5
6
 
#grad { 
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */ 
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */ 
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */ 
  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */ 
}

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner

不同尺寸大小关键字的径向渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
#grad1 { 
  /* Safari 5.1 - 6.0 */ 
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* Opera 11.6 - 12.0 */ 
 background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
 /* Firefox 3.6 - 15 */ 
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  /* 标准的语法 */ 
 background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
} 

#grad2 { 
 /* Safari 5.1 - 6.0 */ 
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); 
 /* Opera 11.6 - 12.0 */ 
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); 
  /* Firefox 3.6 - 15 */ 
 background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); 
 /* 标准的语法 */ 
  background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); 
}

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变

1
2
3
4
5
6
7
8
9
10
 
#grad { 
  /* Safari 5.1 - 6.0 */ 
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); 
  /* Opera 11.6 - 12.0 */ 
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); 
  /* Firefox 3.6 - 15 */ 
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); 
  /* 标准的语法 */ 
  background: repeating-radial-gradient(red, yellow 10%, green 15%); 
}

CSS3文本效果

CSS3中包含几个新的文本特征

属性

  • text-shadow
  • box-shadow
  • text-overflow
  • word-wrap
  • word-break

兼容性

浏览器支持

属性 Chrome IE Firefox Safari Opera
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0 4.0 -webkit- 9.0 4.0 3.5 -moz- 5.1 3.1 -webkit- 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0 9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

CSS3文本阴影

CSS3中，text-shadow 属性适用于文本阴影

Text shadow effect!

语法

1
 
text-shadow: 水平阴影，垂直阴影，模糊的距离，阴影的颜色

例子

给标题添加阴影

1
2
3
 
h1{
    text-shadow: 5px 5px 5px #FF0000;
}

CSS3盒子阴影

CSS3 中 box-shadow 属性适用于盒子阴影

语法

1
 
box-shadow: x轴偏移 y轴偏移 模糊距离 阴影颜色

例子

1
 
div { box-shadow: 10px 10px 5px yellow;}

也可以在 ::before 和 ::after 两个伪元素中添加阴影效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
#boxshadow { 
    position: relative; 
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); 
    padding: 10px; bac kground: white;
} 
#boxshadow img { 
    width: 100%; 
    border: 1px solid #8a4419; 
    border-style: inset;
} 
#boxshadow::after { 
    content: ''; 
    position: absolute; 
    z-index: -1; /* hide shadow behind image */ 
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
    width: 70%; 
    left: 15%; /* one half of the remaining 30% */ 
    height: 100px; 
    bottom: 0;
}

文字卡片效果

1
2
3
4
5
 
div.card { 
    width: 250px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
    text-align: center;
}

CSS3溢出内容效果

CSS3文本溢出属性Text Overflow指定应向用户如何显示溢出内容

语法

clip： 修剪文本

ellipsis：显示省略符号来代表被修剪的文本

string：使用给定的字符串来代表被修剪的文本

1
 
text-overflow: clip|ellipsis|string;

例子

带有 hover 效果的 Text-overflow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 

<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
}
style>

head>

<body>

<p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。p>

<p>这个 div 使用 "text-overflow:ellipsis" ：p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the boxdiv>

<p>这个 div 使用 "text-overflow:clip"：p>

<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the boxdiv>

body>
html>

CSS3换行

word-wrap自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字

语法

normal：只在允许的断字点换行（浏览器保持默认处理）

break-word：在长单词或 URL 地址内部进行换行

1
 
word-wrap: normal|break-word;

例子

允许长文本换行

1
 
p {word-wrap: break-word;}

CSS3单词拆分行

CSS3 单词拆分换行属性word-break指定换行规则

语法

normal：使用浏览器默认的换行规则

break-all：允许在单词内换行

keep-all：只能在半角空格或连字符处换行

1
 
word-break: normal|break-all|keep-all;

例子

1
2
3
4
5
6
 
p.test1 { 
    word-break: keep-all;
} 
p.test2 { 
    word-break: break-all;
}

CSS其他文本属性

内容来自菜鸟教程

属性 描述 CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3

CSS3字体

通过CSS3，web设计师可以使用他们喜欢的任意字体

With CSS3, web designers are no longer forced to use only web-safe fonts

属性

当您找到或购买到希望使用的字体时，可将该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计算机上

  • @font-face

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号。

属性 Chrome IE Firefox Safari Opera
@font-face 4.0 9.0 3.5 3.2 10.0

  • Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

  • Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。

  • Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

  • Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

  • 需要注意的是： Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

CSS3设置字体

CSS3中用@font-face属性来设置自己喜欢的字体

语法

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件

例子

1
2
3
4
5
6
7
8
9
10
 
@font-face
{
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div
{
   font-family:myFirstFont;
}

CSS3 字体描述

下表列出了所有的字体描述和里面的@font-face规则定义

说明：表格来源于 W3C

描述符 值 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch normal/condensed/ultra-condensed/extra-condensed/semi-condensed/expanded/semi-expanded/extra-expanded/ultra-expanded 可选。定义如何拉伸字体。默认是 “normal”。
font-style normalitalicoblique 可选。定义字体的样式。默认是 “normal”。
font-weight normal/bold/100-900 可选。定义字体的粗细。默认是 “normal”。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

CSS3 2D 转换

可以移动，比例化，反过来，旋转，和拉伸元素

CSS3新特性整理_第4张图片

属性

  • transform
  • transform-origin

方法

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
transform 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5 -moz- 3.2 -webkit- 23.0 15.0 -webkit- 12.1 10.5 -o-
transform-origin (two-value syntax) 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5 -moz- 3.2 -webkit- 23.0 15.0 -webkit- 12.1 10.5 -o-

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意： Internet Explorer 9 要求前缀 -ms- 版本.

translate()

移动

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

CSS3新特性整理_第5张图片

语法

1
 
transform: translate(x轴移动距离, y轴移动距离) // 原点在左上角

案例

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素

1
2
3
4
5
 
div { 
    transform: translate(50px,100px); 
    -ms-transform: translate(50px,100px); /* IE 9 */ 
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */ 
}

rotate()

旋转，旋转过后，原点会跟着变化

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

CSS3新特性整理_第6张图片

语法

1
 
transform: rotate(angle) // 括号内填写旋转角度

例子

rotate值（30deg）元素顺时针旋转30度

1
2
3
4
5
 
div { 
    transform: rotate(30deg); 
    -ms-transform: rotate(30deg); /* IE 9 */ 
    -webkit-transform: rotate(30deg); /* Safari and Chrome */ 
}

scale()

缩放

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

CSS3新特性整理_第7张图片

语法

1
 
transform: scale(宽度的倍数, 高度的倍数)

####例子

scale（2,4）转变宽度为原来的大小的2倍，和其原始大小4倍的高度

1
2
3
4
5
6
 
div 
{ 
    transform: scale(2,4); 
    -ms-transform: scale(2,4); /* IE 9 */ 
    -webkit-transform: scale(2,4); /* Safari and Chrome */ 
}

skew()

CSS3 倾斜

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

语法

  • skewX( );表示只在X轴(水平方向)倾斜。
  • skewY( );表示只在Y轴(垂直方向)倾斜。 
1
 
transform: skew(相对于x轴角度, 相对于y轴角度)

例子

skew(30deg,20deg) 是元素在X轴和Y轴上倾斜30度20度

此处 W3C 上教程有误，他写的是 skew(30deg,20deg) 是元素在X轴和Y轴上倾斜20度30度

1
2
3
4
5
 
div { 
	transform: skew(30deg,20deg); 
	-ms-transform: skew(30deg,20deg); /* IE 9 */ 
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ 
}

###matrix()

CSS3 矩阵，反正我用得少

matrix()方法将2D变换方法合并成一个

CSS3新特性整理_第8张图片

语法

1
 
transform: matrix(旋转角度, 缩放比例, 移动, 倾斜)

例子

利用matrix()方法旋转div元素30°

1
2
3
4
5
6
 
div 
{ 
	transform:matrix(0.866,0.5,-0.5,0.866,0,0); 
	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ 
	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ 
}

CSS3 3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
transform 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
transform-origin (three-value syntax) 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
transform-style 36.0 12.0 -webkit- 11.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
perspective 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
perspective-origin 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-
backface-visibility 36.0 12.0 -webkit- 10.0 16.0 10.0 -moz- 4.0 -webkit- 23.0 15.0 -webkit-

###rotateX()

Rotate X

例子

rotateX()方法，围绕其在一个给定度数X轴旋转的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 

<html>
<head>
<meta charset="utf-8"> 
<title>W3C(w3cschool.cn)title> 
<style> 
div
{
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
}
div#div2
{
    transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
style>
head>
<body>
<p><b>注意:b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.p>
<div>Hello. This is a DIV element.div>
<div id="div2">Hello. This is a DIV element.div>
body>
html>

rotateY()

Rotate Y

例子

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 

<html>
<head>
<meta charset="utf-8"> 
<title>W3C(w3cschool.cn)title> 
<style> 
div
{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}
div#div2
{
	transform:rotateY(130deg);
	-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
style>
head>
<body>
<p><b>注意:b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.p>
<div>Hello. This is a DIV element.div>
<div id="div2">Hello. This is a DIV element.div>
body>
html>

CSS3 转换属性

下表列出了CSS3所有的转换属性

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

CSS3 3D 转换方法

类似于 CSS3 2D 转换方法的使用

函数 描述
matrix3d(n**,n, n,n,n,n ,n,n,n ,n,n,n, n,n,n,**n ) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x**,y,**z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x**,y,**z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x**,y,z,**angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript

属性

属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
transition 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-delay 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-duration 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-property 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-
transition-timing-function 26.0 4.0 -webkit- 10.0 16.0 4.0 -moz- 6.1 3.1 -webkit- 12.1 10.5 -o-

transition

语法

transition需要配合一个变化的属性进行

1
2
3
4
5
6
 
div:hover {
    width: 300px;
}
div {
    transition: 指定需要变化的属性（例如width）,完成时间, 转速曲线, 延迟执行的时间 
}

例子

指定当鼠标经过 div 的 1s 之后 , div 的 width 在 1 秒时间内，匀速变化为 300 px

1
2
3
4
5
6
 
div:hover {
    width: 300px;
}
div {
    transition: width 1s linear 1s;
}

拆分写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
div:hover {
    width: 300px;
}

div { 
    transition-property: width; 
    transition-duration: 1s; 
    transition-timing-function: linear; 
    transition-delay: 1s; 
    /* Safari */ 
    -webkit-transition-property: width; 
    -webkit-transition-duration: 1s; 
    -webkit-transition-timing-function: linear; 
	-webkit-transition-delay: 1s; 
}

注：这里看到了一篇很棒的文档，推荐一下CSS3过渡和动画

CSS3 动画

CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts

属性

  • @keyframes
  • animation

兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
@keyframes 43.0 4.0 -webkit- 10.0 16.0 5.0 -moz- 9.0 4.0 -webkit- 30.0 15.0 -webkit- 12.0 -o-
animation 43.0 4.0 -webkit- 10.0 16.0 5.0 -moz- 9.0 4.0 -webkit- 30.0 15.0 -webkit- 12.0 -o-

语法

@keyframes 和 animation 一般配合使用，使用 @keyframes 定义一个动画，使用 animation 去执行这个动画

例子

必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
@keyframes myfirst
{
	from {background: red;}
	to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background: red;}
	to {background: yellow;}
}

div {
	animation: myfirst 5s;
 	-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

可以以百分比指定动画发生时间

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
@keyframes myfirst
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

div {
	animation: myfirst 5s;
 	-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

改变背景色和位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
@keyframes myfirst
{
	0%   {background: red; left:0px; top:0px;}
	25%  {background: yellow; left:200px; top:0px;}
	50%  {background: blue; left:200px; top:200px;}
	75%  {background: green; left:0px; top:200px;}
	100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background: red; left:0px; top:0px;}
	25%  {background: yellow; left:200px; top:0px;}
	50%  {background: blue; left:200px; top:200px;}
	75%  {background: green; left:0px; top:200px;}
	100% {background: red; left:0px; top:0px;}
}

div {
	animation: myfirst 5s;
 	-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3

运行myfirst动画，设置所有的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
div {
	animation-name: myfirst;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 2s;
    animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
/* Safari and Chrome: */
	-webkit-animation-name: myfirst;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
}

与上面的动画相同，但是使用了简写的动画 animation 属性

1
2
3
4
5
 
div {
	animation: myfirst 5s linear 2s infinite alternate;
	/* Safari and Chrome: */
	-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

CSS3 弹性盒子(Flex Box)

详见Flex布局

CSS3用户界面

在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框

属性

  • resize
  • box-sizing
  • outline-offset

兼容性

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome IE Firefox Safari Opera
resize 4.0 不兼容 5.0 4.0 -moz- 4.0 15.0
box-sizing 10.0 4.0 -webkit- 8.0 29.0 2.0 -moz- 5.1 3.1 -webkit- 9.5
outline-offset 4.0 不兼容 5.0 4.0 -moz- 4.0 9.5

CSS3 调整尺寸

CSS3中，resize属性指定一个元素是否应该由用户去调整大小

语法

resize属性指定一个元素是否是由用户调整大小的

1
 
resize: none|both|horizontal|vertical
值 描述
none 用户无法调整元素的尺寸。
both 用户可调整元素的高度和宽度。
horizontal 用户可调整元素的宽度。
vertical 用户可调整元素的高度。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 

<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)title>
<style> 
div
{
	border:2px solid;
	padding:10px 40px; 
	width:300px;
	resize:both;
	overflow:auto;
}
style>
head>
<body>

<p><b>注意:b> Firefox, Safari,和 Chrome 兼容 resize 属性.p>

<div>The resize property specifies whether or not an element is resizable by the user.div>

body>
html>

CSS3 方框大小调整

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

简单来说就是当需要考虑 width 或者 height 包不包括 padding 和 border 的时候可以考虑使用 box-sizing

例如：box-sizing:border-box的时候，边框和padding包含在元素的宽高之内

语法

1
 
box-sizing: content-box|border-box|inherit
值 说明
content-box 这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box 指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的”宽度”和”高度”属性计算
inherit 指定box-sizing属性的值，应该从父元素继承

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 

<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)title>
<style> 
div.container
{
	width:30em;
	border:1em solid;
}
div.box
{
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	width:50%;
	border:1em solid red;
	float:left;
}
style>
head>
<body>

<div class="container">
<div class="box">This div occupies the left half.div>
<div class="box">This div occupies the right half.div>
div>

body>
html>

CSS3 外形修饰

简单来说就是在边框 border 外面又加了一层 outline-offset

轮廓与边框有两点不同：

  • 轮廓不占用空间
  • 轮廓可能是非矩形

语法

1
 
outline-offset: length|inherit
值 描述
length 轮廓与边框边缘的距离。
inherit 规定应从父元素继承 outline-offset 属性的值。

####例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 

<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)title>
<style> 
div
{
	margin:20px;
	width:150px; 
	padding:10px;
	height:70px;
	border:2px solid black;
	outline:2px solid red;
	outline-offset:15px;
} 
style>
head>
<body>

<p><b>注意:b> Internet Explorer 不兼容 outline-offset属性.p>

<div>这个 div有一个轮廓边界15 px边境外的边缘。div>

body>
html>

CSS3 媒体查询

媒体查询很多就是用来进行响应式开发了

兼容性

属性 Chrome IE Firefox Safari Opera
@media 21.0 9.0 3.5 4.0 9.0

@media

语法

1
2
3
 
@media 媒体类型 and (条件) {
    
}

例子

利用媒体查询做响应式布局开发：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 

<html>
<head>
<meta charset="utf-8"> 
<title>title> 
<style>
body {
    background-color: pink;
}
@media screen and (max-width: 960px) {
    body {
        background-color: darkgoldenrod;
    }
}
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
style>
head>
<body>

<h1>重置浏览器窗口查看效果！h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 960 px ，背景颜色将改变。p>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。p>

body>
html>

你可能感兴趣的:(CSS3新特性整理)

  • 《极简思维》第三部分 小洋苏兮
    整理你的人际关系如何改善人际关系？摘录：因为人际关系问题是人们生活中不快乐的主要原因。感想：感觉这个说的挺对，之前我总是埋头学习，不管舍友不管自己的合作伙伴的一些事情，但实际上，这学期关注了之后好多了摘录：“亲密关系与社交会让你健康而快乐。这是基础。太过于关注成就或不太关心人际关系的人都不怎么快乐。基本上来说，人类就是建立在人脉关系上的。”感想：但是如果有时想的太多就不太好，要以一个开放的心态跟别
  • selenium特殊场景处理 Monica_ll Seleniumseleniumchromepython
    文章目录前言一、多窗口处理二、浏览器弹窗处理包含alert、confirm、prompt三、鼠标和键盘事件处理前言在使用selenium操作浏览器的过程中可能需要借助键盘和鼠标功能完成一些操作，或者操作弹窗处理，本文主要是整理自己工作过程中使用过的一些方法一、多窗口处理在实际测试过程中经常会有通过点击或者连接打开新的窗口，这种情况下就需要切换webDriver到对应浏览器对象才能操作新窗口的元素。
  • GDP经济社会人文民生栅格数据下载网站汇总 疯狂学习GIS
      本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文
  • 搭建云手机教程 云博客-资源宝 智能手机
    搭建云手机教程本教程由分享：ziyouhua资源宝整理分享：www.httple.net首先检查自己vps是否支持这个项目sudoaptinstallcpu-checkerkvm-ok如果显示INFO:/dev/kvmexistsKVMaccelerationcanbeused表示支持，可以继续往下看ac13首先安装dockercurl-fsSLhttps://get.docker.com|sud
  • 推荐1个适合女生做的小副业,靠谱又逆天!(建议收藏) 氧惠全网优惠
    生活中，女性经常会面临更多方面的需求，比如工作需要、家庭需要和孩子的陪伴教育需要，所以往往会有更大的职业压力，所以这里就整理了部分比较适合女生做的副业，一起来看。适合女生做的副业【1】剧本杀主持人剧本杀是年轻人当下热门的桌游，一般在周六日、节假日或者是晚上的顾客会比较多，所以和我们正常的工作时间错开，比较适合我们平时做兼职。【2】PPT制作我们可以在网上发布信息，也可以直接去某宝接单，和客服说来接
  • 收评：两市震荡沪指涨0.57%创业板指涨1.42% 光伏风能板块大涨 甚念_3264
    金融界网站9月14日讯早盘三大股指高开，盘初市场震荡上行，创业板指一度涨超2％，随后指数呈现震荡整理态势，临近午盘小幅回落；午后A股延续低迷表现，深成指两度翻绿，尾盘两市小幅上扬。截至收盘，沪指涨0.57％，报3278.81点，深成指涨0.61％，报13021.99点，创业板指涨1.42％，报2572.6点。两市成交额约7700亿元；北向资金净流入近20亿元。行业板块方面，环保工程、材料行业、仪器
  • 【经典面试题】【JVM与性能调优】垃圾回收算法（标记-清除算法/复制算法/标记-整理算法/CMS/G1/ZGC） 本本本添哥 归档-Inbox1001-基础开发能力面试题目汇总jvm算法
    JVM自动管理内存，当对象不再被引用时，垃圾回收器（GarbageCollector）会自动释放这些对象占用的内存。标记-清除算法（Mark-Sweep）：标记垃圾再清除，会产生碎片。复制算法（Copying）：将存活对象复制到新区域，适合新生代，无碎片但浪费空间。标记-整理算法（Mark-Compact）：标记后将存活对象移到一端，清除另一端，适合老年代。分代收集算法（GenerationalC
  • 10月|11月时间日志复盘 90000Tank
    转眼已经进入了今年的最后一个月，今天回顾整理了一下10月和11月的时间记录，发现这2个月的问题着实不少，也有些感慨自己真是有些“计划一套但另做一套”……不过，自黑伤感之余，每月总结还是要做，下面就来分析下这两个月的问题所在。问题暴露10、11月时间饼状图对比，这两月都有点不妙…月份按天聚合事件时长柱状图对比从上面的月份事件时长占比饼状图，以及月份按天聚合事件时长柱状图，可以看出如下问题：刻意学习时
  • 2019.11.3 崔菲菲日志 崔菲菲
    今天周末，早上到校，先打扫卫生，然后和老师们在外面接学1.电脑赶紧发图片，把图片做了发了2.把庞老师要的PPT找出来发给庞老师3.周天有几个学生来交教材费，因为许老师和庞老师去分校了，所以我收的教材费4.上午到时间去各个班级里给学生们签到5孙老师的签到表满了，重新打了签到表6.下午上班把王静老师99元试学的学生名单整理出来，打印好签到表7.下午和庞老师去崇文校区，看了看新校区的装修风格8.庞老师咱
  • 2020公考申论备考指导：把握思辨型文章写作脉络 不负时光_3d63
    公务员考试一般分为笔试和面试，笔试较重要的是申论、行测和时事热点。不论是哪一部分都需要进行备考，抽时间复习相关内容。下面格燃教育小编整理了"2020公考申论备考指导：把握思辨型文章写作脉络"文章，希望对大家有所帮助一、确定立意首先要了解思辨型文章的提问方式，一般会以"围绕A与B书写文章"这样的方式进行提问，例如城市建设中的"有"与"无"，都是典型的思辨型文章。想要确定思辨型文章写作的立意，首先要先
  • 自从爱上你天下人都成了情敌 东方短视频
    这世界上最好的感情，就是对方的优点你正好欣赏。对方的缺点你正好不在意，1，爱情储蓄罐男人失业啦，他没有告诉女人仍然按时出门和回家。他不忘编造一些故事欺骗女人。他说新来的主人挺和蔼的，新来的女大学生挺清纯的。女人掐他的耳朵，笑着说，你小心点儿那时他正往外走，女人拉住他帮他整理衬衣的领口，男人夹了公文包，挤上公交车，三站后下来，他在公园的长椅上坐定愁容满面的看广场上成群的鸽子，到了傍晚男人换一副笑脸回
  • Java注解笔记 m0_65470938 java开发语言
    一、什么是注解Java注解又称Java标注，是在JDK5时引入的新特性，注解(也被称为元数据)Javaa注解它提供了一种安全的类似注释的机制，用来将任何的信息或元数据(metadata)与程元素类、方法、成员变量等)进行关联二、注解的应用1.生成文档这是最常见的，也是iava最早提供的注解2.在编译时进行格式检查，如@Overide放在方法前，如果你这个方法并不是看盖了超类Q方法，则编译时就能检查
  • 2020.03.01-02-03 SuperComputer
    三月份了，开启上班模式，但是好像也没做什么，就是有点烦恼。老张把电脑搬到楼下了，我怀疑他就是下来打游戏来了，为了快乐。我真想给他一个死亡微笑。来上班又开始吃起来了，但是希望体重不要涨了，辛辛苦苦减肥，勤勤恳恳工作，还是想问一句什么时候发工资，wtf.可能真是能力越大责任越大，心累的一批。钱重要还是小命比较重要，整理了一下工作思路，忽然觉得认认真真讲课可以讲很多天，做方案，整理规范尺寸，还有像保洁大
  • 论文阅读：《针对多目标优化和应用的 NSGA-II 综述》一些关于优化算法的简介 行然梦实 优化算法论文阅读算法数学建模
    前言提醒：文章内容为方便作者自己后日复习与查阅而进行的书写与发布，其中引用内容都会使用链接表明出处（如有侵权问题，请及时联系）。其中内容多为一次书写，缺少检查与订正，如有问题或其他拓展及意见建议，欢迎评论区讨论交流。内容由AI辅助生成，仅经笔者审核整理，请甄别食用。文章目录前言一些关于优化算法的缩写优化算法Ma,Haiping&Zhang,Yajing&Sun,Shengyi&Liu,Ting&S
  • 致九年的宿舍小窝 惜惜皮皮
    09年9月17日遇见你温暖如春12年9月12日领取结婚证14年3月4日宝宝来到家里一家三口的生活模式开启17年9月17日我们开始在聚龙与你两地的来回奔波18年8月28日将你里外整理好还给了最初的主人走进社会的9年在你的温暖中见证了一个工厂的成长繁荣衰落换届你依然如故从一个女孩成长为一个母亲的9年酸甜苦辣咸人生百味第一关已过春花夏雷秋雨冬风每一个都是印记每一个都有回忆你是过往更是历史的见证有你的日子
  • 中秋节快乐 Delia时之沙
    今天是中国传统节日中秋节，朋友圈有一股浓浓的团聚思乡气氛。而我的中秋节是围绕着乐高开始的。暑假时给娃报了网上的积木体验课程，体验结束之后报了正式的乐高工程机械课。积木到了之后一致忙着没顾着开箱子，昨天晚上到家之后趁着放假把积木拿出来开始整理一番。乐高经典款买的是乐高最经典的10698款，里面共有790颗积木。昨天晚上光是整理就花了2个小时，将每一刻积木按照形状、大小和功能分类，幸亏当时商家送了积木
  • 阿里云服务器怎么选？2023年哪款最好最具性价比 阿里云最新优惠和活动汇总
    在选购阿里云服务器的时候，云服务器能稳定运行我们的程序或应用，费用也不贵，对我们来说就是最好最具性价比的云服务器，结合阿里云官方的最新活动，小编为个人用户和企业用户整理了几款2023年值得重点考虑的活动云服务器，活动价格很低，实用性也很强。一、个人和企业用户一般会买什么配置的阿里云服务器很多个人站长的小型网站一般选用的是1核2G内存和2核4G内存的服务器为多，基本上抗住访问无压力。而企业用户则需要
  • 2021-6-1晨间日记 倏尔挥锋至
    今天是什么日子起床：六点就寝：七点天气：晴心情：大好纪念日：六一国际儿童节任务清单昨日完成的任务，最重要的三件事：成本估算，备案资料，和心仪女孩表白改进：更高效，更全面，更真诚习惯养成：每天写文章，整理自己的思维，每天跑步，锻炼意志周目标·完成进度完成备案资料编写，完成百分之二十学习·信息·阅读学习文章写作方法，精析健康·饮食·锻炼每日坚持快走工作·思考人生是一场旅行，沿途的风景很美，终点必然到来
  • 【蒲公英二上】在规则中成长——致蒲公英家人第十一封信 于向雨
    亲爱的家人和孩子们：昼短夜长的时间到了，冬天真的来了！不得不感叹时间的飞逝。本学期共二十周时间，我们已经走过十四周了。捍卫游戏规则是我们小伞兵们必经的成长阶段。一间教室正是因为有了规则才显得有秩序。图片发自App最近两周我和数学张老师一直在聚焦忘带作业本和找不到作业本的事情。甚至联系到整理桌子斗的问题。在一年级时就引导孩子学会整理桌子斗，如何摆放书本每周都会利用班会时间让孩子们实践。聚焦一段时间后
  • “奇迹提问”-见证奇迹时刻的第0.1步 青青生涯原小青
    自从8月8日加入一个《自我发展心理学》（得到app:陈海贤老师“大师课”）的学习讨论群，每天在群里学习、讨论、交流心得。陈老师的课很接地气，给大家讲透道理，并给了实践的抓手。群友们思想碰撞，每每互相激励。今天特意申请了号，方便保存学习心得。这六篇先把前六天的心得整理出来。［2018.8.15］06小步子原理：如何走出改变的第一步？今天是讲走出改变的一小步，针对我昨天的早下班的目标，没有做到（还是加
  • 整理了40部经典影视作品，哪一部你最难忘？ 胖橘财经
    关注公众号：胖橘财经▲今儿是胖橘陪伴您的第128天这段时间天天在家闲着没事干，给大家整理了40部经典的影视作品。1979：小花世上有朵美丽的花那是青春吐芳华翠姑跪在陡峭的石阶上抬着担架向上爬的镜头让无数观众泣不成声1980：庐山恋张瑜在郭凯敏脸颊上的轻轻一吻将爱情的春风吹进了无数年轻人的心里1981：敌营十八年当时追剧的方式很热闹一个村的人围着一台电视跟着地下工作者一次次化险为夷1982：少林寺少
  • 计算机考研408真题解析（2023-09 深入解析散列表线性探测与惰性删除） 良师408 考研散列表数据结构408真题计算机考研
    【良师408】计算机考研408真题解析（2023-09深入解析散列表线性探测与惰性删除）传播知识，做懂学生的好老师1.【哔哩哔哩】（良师408）2.【抖音】（良师408）goodteacher4083.【小红书】（良师408）4.【CSDN】（良师408）goodteacher4085.【微信】（良师408）goodteacher408特别提醒：【良师408】所收录真题根据考生回忆整理，命题版权归
  • 絮絮叨叨16 Zzou
    今天把恬恬和侄儿的婴儿衣服都给整理了一下，光月子里的就有二十几套，所以二宝的婴儿服是不用买了。弟媳三月份生娃时候的刀纸，护理垫，防溢乳垫都还有一堆，这个也不用买了，又省了一笔。大嫂准备了宝宝的备用奶粉，小明把宝宝的棉柔巾，湿巾，尿片都买好了。翻出以前的待产清单，增增减减，比以前完善了很多。现在就只要把还需买的东西买齐，所有证件收纳好就可以了。接下来，就是耐心等待小宝宝了呀！
  • 2022-10-04 虫虫新生111
    听其他老师的课，备课准备的比较充分，所给的资料都是根据学生的情况来提前做好资料的整理，上课期间根据学生的情况适当的删减，删减完以后存入学生的名字，然后发给班主任打印交给学生，然后开始抽查学生的背诵情况。这样的好处是不容易出错，他学生很多，大多都是高中的学生，这样在资料整理的时候，如果是文本方面的整理，一份可以给好几个学生，只需要把学生的名字修改一下即可。这样上课挺省心不少的，而且主要是用电脑上课，
  • SQL注入：原理、类型与防范策略 数据冰山
    本文还有配套的精品资源，点击获取简介：SQL注入是一种网络攻击手段，通过不当构建的SQL查询允许攻击者插入恶意代码，从而控制数据库。这种攻击可能导致数据泄露、篡改或系统控制。介绍了SQL注入的类型，包括错误信息注入、时间基注入、盲注和堆叠查询。提供了防范SQL注入的方法，包括使用参数化查询、输入验证、转义特殊字符等策略，并建议限制数据库权限和错误处理。教程资源可能包含在"SQL注入整理"压缩包中，
  • 方方每日复盘day 105｜早晨起床后一个小时的行为和心理决定一整天的状态。 水蓝儿的能量站
    没有反思的人生不值得过！方方复盘转化为微能力！今天我做了哪些工作？今天是生理期第2天，所以决定早晨快走5公里，然后回来吃了早饭，身体有点犯懒不想动。但是还是用意志力让自己洗了碗，整理了一下房间，25分钟后就躺在床上休息了一下，中午11点左右和李琦朋友聚聚餐，吃了饭放松一下聊聊。下午我们栖咖啡，喝了点咖啡放松。下午回来午休了一个小时，冥想了20分钟。然后接下来准备回复处理滴答清单里的重要事情。生理期
  • 见证‖我在写作返现营4天的蜕变 LA姐
    在开始修改前四天的标题之前，我必须谈谈参加写作返现营这四天带给我的收获和改变。首先，我真的有感觉在这四天中，我对文字的敏感度变高了。相信大多数朋友都一样，白天的工作很忙，每天一早看到作业，然后放在脑子里，让灵感开始自动组织。一般都要到晚上，才能开始整理思路，记录下来，运气好的，也许在上班的空闲时间就可以开始记录。曾经，我是一个写2000字需要琢磨一天的人，并且是一天坐在电脑前，写几行，然后喝口水，
  • 2022-11-06 Sunny06e
    其实啊，月亮依然还是这个月亮，日升日落，月缺月圆，悠悠多少岁月，她没有什么改变。一皙淡淡的月光，在暗夜给予我们几许光亮。照亮过古人案上的书卷。如今同样也给了现在的人多少浪漫的情怀。……今天发文又有些延迟了，这都到了中午了。本应该在昨天晚上把文字写好的，以便在今天早晨稍微整理一下，发出来。可是最近这几天，太过于放飞自我了，在每天晚上有些太放松了，懒得去动脑筋写文字了。看来还是不能太放任自己，还是要给
  • 广东中山17家可以做亲子鉴定的机构（附2024年鉴定手续） 国权基因
    中山哪里可以做亲子鉴定？中山有许多可以做亲子鉴定中心的机构，本文整理了中山17家正规亲子鉴定中心在此分享给大家，排名不分先后，希望能对大家有所帮助，亲子鉴定中心名录如下：中山亲子鉴定机构1、中山亲鉴生物亲子鉴定咨询中心中山亲子鉴定中心地址：中山市东区兴中道新兴花园翠园街中山亲子鉴定工作时间：8：00-18：00中山亲子鉴定中心业务范围：中山市上户口亲子鉴定，个人隐私亲子鉴定，中山新生儿亲子鉴定，旁
  • 20190916没对比没伤害，有对比没伤害 冯妇两年
    收拾整理抽屉桌面，座位要轮动了，上周四放假前忘了。纸巾，空瓶子，废弃簿册和文具，丢丢丢，个个瞄准垃圾桶，投投投。垃圾桶上大下小，四方形，约，高度五十厘米，口子三十乘四十，深蓝色。嗯嗯嗯？垃圾袋垃圾袋！前排一女生随即上来，拉开图书橱柜的门，拿出一个巨大的黑色塑料袋。蒙头蒙脸套在桶上，端住桶身，将桶倒立过来，轻轻摇两摇，把桶取出放回地上。所有桶里垃圾都回归袋子里，都是干垃圾，没异味没毒害没危害。前排女
  • sql统计相同项个数并按名次显示 朱辉辉33 javaoracle
    现在有如下这样一个表： A表 ID Name time ------------------------------ 0001 aaa 2006-11-18 0002 ccc 2006-11-18 0003 eee 2006-11-18 0004 aaa 2006-11-18 0005 eee 2006-11-18 0004 aaa 2006-11-18 0002 ccc 20
  • Android+Jquery Mobile学习系列-目录 白糖_ JQuery Mobile
    最近在研究学习基于Android的移动应用开发，准备给家里人做一个应用程序用用。向公司手机移动团队咨询了下，觉得使用Android的WebView上手最快，因为WebView等于是一个内置浏览器，可以基于html页面开发，不用去学习Android自带的七七八八的控件。然后加上Jquery mobile的样式渲染和事件等，就能非常方便的做动态应用了。   从现在起，往后一段时间，我打算
  • 如何给线程池命名 daysinsun 线程池
            在系统运行后，在线程快照里总是看到线程池的名字为pool-xx，这样导致很不好定位，怎么给线程池一个有意义的名字呢。参照ThreadPoolExecutor类的ThreadFactory，自己实现ThreadFactory接口，重写newThread方法即可。参考代码如下：     public class Named
  • IE 中"HTML Parsing Error:Unable to modify the parent container element before the 周凡杨 html解析errorreadyState
      错误： IE 中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed"     现象： 同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。
  • java上传 g21121 java
    我们在做web项目中通常会遇到上传文件的情况，用struts等框架的会直接用的自带的标签和组件，今天说的是利用servlet来完成上传。 我们这里利用到commons-fileupload组件，相关jar包可以取apache官网下载：http://commons.apache.org/ 下面是servlet的代码： //定义一个磁盘文件工厂 DiskFileItemFactory fact
  • SpringMVC配置学习 510888780 springmvc
    spring MVC配置详解 现在主流的Web MVC框架除了Struts这个主力 外，其次就是Spring MVC了，因此这也是作为一名程序员需要掌握的主流框架，框架选择多了，应对多变的需求和业务时，可实行的方案自然就多了。不过要想灵活运用Spring MVC来应对大多数的Web开发，就必须要掌握它的配置及原理。 　　一、Spring MVC环境搭建：（Spring 2.5.6 + Hi
  • spring mvc-jfreeChart 柱图(1) 布衣凌宇 jfreechart
    第一步：下载jfreeChart包，注意是jfreeChart文件lib目录下的，jcommon-1.0.23.jar和jfreechart-1.0.19.jar两个包即可； 第二步：配置web.xml; web.xml代码如下 <servlet>     <servlet-name>jfreechart</servlet-nam
  • 我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
    PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java P
  • java 线程池使用 Runnable&Callable&Future antlove javathreadRunnablecallablefuture
    1. 创建线程池 ExecutorService executorService = Executors.newCachedThreadPool();   2. 执行一次线程，调用Runnable接口实现 Future<?> future = executorService.submit(new DefaultRunnable()); System.out.prin
  • XML语法元素结构的总结 百合不是茶 xml树结构
    1.XML介绍1969年   gml (主要目的是要在不同的机器进行通信的数据规范)1985年   sgml  standard generralized markup language1993年   html(www网)1998年  xml   extensible markup language
  • 改变eclipse编码格式 bijian1013 eclipse编码格式
    1.改变整个工作空间的编码格式         改变整个工作空间的编码格式，这样以后新建的文件也是新设置的编码格式。         Eclipse->window->preferences->General->workspace-
  • javascript中return的设计缺陷 bijian1013 JavaScriptAngularJS
    代码1： <script> var gisService = (function(window) { return { name:function () { alert(1); } }; })(this); gisService.name(); &l
  • 【持久化框架MyBatis3八】Spring集成MyBatis3 bit1129 Mybatis3
    pom.xml配置 Maven的pom中主要包括： MyBatis MyBatis-Spring Spring MySQL-Connector-Java Druid applicationContext.xml配置   <?xml version="1.0" encoding="UTF-8"?> &
  • java web项目启动时自动加载自定义properties文件 bitray javaWeb监听器相对路径
    创建一个类 public class ContextInitListener implements ServletContextListener 使得该类成为一个监听器。用于监听整个容器生命周期的，主要是初始化和销毁的。 类创建后要在web.xml配置文件中增加一个简单的监听器配置，即刚才我们定义的类。 <listener> <des
  • 用nginx区分文件大小做出不同响应 ronin47
    昨晚和前21v的同事聊天，说到我离职后一些技术上的更新。其中有个给某大客户(游戏下载类)的特殊需求设计，因为文件大小差距很大——估计是大版本和补丁的区别——又走的是同一个域名，而squid在响应比较大的文件时，尤其是初次下载的时候，性能比较差，所以拆成两组服务器，squid服务于较小的文件，通过pull方式从peer层获取，nginx服务于较大的文件，通过push方式由peer层分发同步。外部发布
  • java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大 bylijinnan java
    package com.ljn.base; import java.util.Arrays; import java.util.Random; public class ContinuousPoker { /** * Q67 扑克牌的顺子 从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的。 * 2-10为数字本身，A为1，J为1
  • 翟鸿燊老师语录 ccii 翟鸿燊
    一、国学应用智慧TAT之亮剑精神A 1. 角色就是人格     就像你一回家的时候，你一进屋里面，你已经是儿子，是姑娘啦，给老爸老妈倒怀水吧，你还觉得你是老总呢？还拿派呢？就像今天一样，你们往这儿一坐，你们之间是什么，同学，是朋友。     还有下属最忌讳的就是领导向他询问情况的时候，什么我不知道，我不清楚，该你知道的你凭什么不知道
  • [光速与宇宙]进行光速飞行的一些问题 comsci 问题
         在人类整体进入宇宙时代，即将开展深空宇宙探索之前，我有几个猜想想告诉大家     仅仅是猜想。。。未经官方证实      1：要在宇宙中进行光速飞行，必须首先获得宇宙中的航行通行证，而这个航行通行证并不是我们平常认为的那种带钢印的证书，是什么呢？ 下面我来告诉
  • oracle undo解析 cwqcwqmax9 oracle
    oracle undo解析2012-09-24 09:02:01     我来说两句       作者：虫师收藏    我要投稿 Undo是干嘛用的？         &nb
  • java中各种集合的详细介绍 dashuaifu java集合
    一，java中各种集合的关系图 Collection       接口的接口     对象的集合  ├ List           子接口   &n
  • 卸载windows服务的方法 dcj3sjt126com windowsservice
    卸载Windows服务的方法 在Windows中，有一类程序称为服务，在操作系统内核加载完成后就开始加载。这里程序往往运行在操作系统的底层，因此资源占用比较大、执行效率比较高，比较有代表性的就是杀毒软件。但是一旦因为特殊原因不能正确卸载这些程序了，其加载在Windows内的服务就不容易删除了。即便是删除注册表中的相 应项目，虽然不启动了，但是系统中仍然存在此项服务，只是没有加载而已。如果安装其他
  • Warning: The Copy Bundle Resources build phase contains this target's Info.plist dcj3sjt126com iosxcode
        http://developer.apple.com/iphone/library/qa/qa2009/qa1649.html Excerpt: You are getting this warning because you probably added your Info.plist file to your Copy Bundle
  • 2014之C++学习笔记（一） Etwo C++EtwoEtwoiterator迭代器
            已经有很长一段时间没有写博客了，可能大家已经淡忘了Etwo这个人的存在，这一年多以来，本人从事了AS的相关开发工作，但最近一段时间，AS在天朝的没落，相信有很多码农也都清楚，现在的页游基本上达到饱和，手机上的游戏基本被unity3D与cocos占据，AS基本没有容身之处。so。。。最近我并不打算直接转型
  • js跨越获取数据问题记录 haifengwuch jsonpjsonAjax
    js的跨越问题，普通的ajax无法获取服务器返回的值。   第一种解决方案，通过getson，后台配合方式，实现。 Java后台代码： protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String ca
  • 蓝色jQuery导航条 ini JavaScripthtmljqueryWebhtml5
    效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义<
  • linux部署jdk,tomcat,mysql kerryg jdktomcatlinuxmysql
    1、安装java环境jdk:     一般系统都会默认自带的JDK,但是不太好用，都会卸载了，然后重新安装。    1.1）、卸载：      （rpm -qa :查询已经安装哪些软件包；        rmp -q 软件包：查询指定包是否已
  • DOMContentLoaded VS onload VS onreadystatechange mutongwu jqueryjs
    1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 2. onload是最早支持的事件，要求所有资源加载完毕触发。 3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra
  • sql批量插入数据 qifeifei 批量插入
    hi，   自己在做工程的时候，遇到批量插入数据的数据修复场景。我的思路是在插入前准备一个临时表，临时表的整理就看当时的选择条件了，临时表就是要插入的数据集，最后再批量插入到数据库中。    WITH tempT AS ( SELECT item_id AS combo_id, item_id, now() AS create_date FROM a
  • log4j打印日志文件 如何实现相对路径到 项目工程下 thinkfreer Weblog4j应用服务器日志
    最近为了实现统计一个网站的访问量，记录用户的登录信息，以方便站长实时了解自己网站的访问情况，选择了Apache 的log4j,但是在选择相对路径那块 卡主了，X度了好多方法(其实大多都是一样的内用，还一个字都不差的)，都没有能解决问题，无奈搞了2天终于解决了，与大家分享一下 需求： 用户登录该网站时，把用户的登录名,ip,时间。统计到一个txt文档里，以方便其他系统调用此txt。项目名
  • linux下mysql-5.6.23.tar.gz安装与配置 笑我痴狂 mysqllinuxunix
    1.卸载系统默认的mysql [root@localhost ~]# rpm -qa | grep mysql mysql-libs-5.1.66-2.el6_3.x86_64 mysql-devel-5.1.66-2.el6_3.x86_64 mysql-5.1.66-2.el6_3.x86_64 [root@localhost ~]# rpm -e mysql-libs-5.1
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他