Xy丶Promise

CSS核心功能手册：从熟悉到精通

CSS核心功能代码

文章目录

CSS核心功能代码

@[toc]

参考HTML代码

尺寸操作

设置元素尺寸

内边距

外边距

设置默认布局边距

用途和使用场景：

背景设置

背景颜色 (`background-color`):

背景图像 (`background-image`):

背景重复 (`background-repeat`):

背景位置 (`background-position`):

背景附着 (`background-attachment`):

背景大小 (`background-size`):

背景简写属性 (`background`):

背景图像的多个背景:

背景添加阴影效果：

多重阴影：

文本处理

1. `text-align` - 文本对齐方式

基本语法：

示例：

2. `text-decoration` - 文本装饰

示例：

3. `text-transform` - 文本转换

基本语法：

示例：

4. `letter-spacing` - 字母间距

基本语法：

示例：

5. `word-spacing` - 单词间距

基本语法：

示例：

6. `line-height` - 行高

基本语法：

示例：

7. `text-indent` - 文本缩进

基本语法：

示例：

8. `font` - 字体设置

基本语法：

示例：

9. `text-shadow` - 文本阴影

基本语法：

示例：

10. `writing-mode` - 写作模式

基本语法：

示例：

11. `text-orientation` - 文本方向

基本语法：

示例：

元素定位

1. `position` - 定位属性

基本语法：

示例：

2. `top`, `right`, `bottom`, `left` - 偏移属性

基本语法：

示例：

CSS核心布局技术

布局的引入

Flexbox (弹性布局)

Flex弹性布局

基本语法：

容器属性：

项目属性：

示例：

2. align-items

基本语法：

可选值：

示例：

3. justify-content

基本语法：

可选值：

示例：

4. flex

基本语法：

可选值：

示例：

flex-direction

flex-wrap

align-content

flex-flow

align-self

flex-basis

flex-shrink

flex-grow

order

Grid Layout (网格布局)

Grid网格布局

基本语法：

容器属性：

项目属性：

示例：

1. display

示例:

2. grid-template-columns / grid-template-rows

示例:

3. grid-column / grid-row

示例:

4. grid-gap

示例:

5. justify-items / align-items

示例:

6. grid-auto-columns / grid-auto-rows

示例:

过渡与变化

`translate`, `translateX`, `translateY`

`rotate`

`transform-origin`

`scale`

`skew`

`transform-style: preserve-3d`

`perspective`

3D变换: `translate3d`, `rotate3d`

动画 (Animation)

keyframes

基本语法：

示例：

多个阶段的动画：

`@-webkit-keyframes`

`animation-name`

`animation-duration`

`animation-timing-function`

`animation-delay`

`animation-iteration-count`

`animation-direction`

综合项目: 立体旋转相册

综合项目：2栏布局

综合项目：三栏布局

综合项目：CSS动画版轮播图

参考HTML代码

DOCTYPE html>
<html lang="zh-CN">
    
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>exampletitle>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js">script>
head>
<body>
    <div>
        <h1>1. CSSh1>
        <p class="box">CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
            CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
            CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
        
        p>
        <span>测试spanspan>
    div>
    <div>
        <h1>2. CSSh1>
        <p>CCSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
            CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
            CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
        p>
    div>
    <div>
        <h1>3. CSSh1>
        <p>CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
            CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
            CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
        p>

    div>
    <div>
        <h1>4. CSSh1>
        <p>CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
            CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
            CSS（Cascading Style Sheets，层叠样式表）是用于控制HTML元素在网页上如何显示的一种标记语言。
            它允许开发者为网页创建样式，包括布局、颜色、字体和响应式设计等。通过CSS，可以将设计和内容分离，使得网页更易于维护和访问。
        p>

    div>
body>
html>

尺寸操作

设置元素尺寸

通常用在块级元素内，width和height属性是用来设置元素的宽度和高度的。这些属性定义了元素的尺寸，即宽度（水平方向）和高度（垂直方向）的大小。

默认情况下，浏览器会让元素自动适应浏览器的尺寸和屏幕尺寸，但是你可以使用这两个参数去设置它的具体数值。

width:
- width属性用于设置元素的宽度。在你的代码中，它被设置为500px，意味着该元素的宽度是500像素。
- 示例:
```
.box {
    width: 500px; /* 设置元素的宽度为500像素 */
}
```
height:
- height属性用于设置元素的高度。在你的代码中，它被设置为280px，意味着该元素的高度是280像素。
- 示例:
```
.box {
    height: 280px; /* 设置元素的高度为280像素 */
}
```

这些属性允许你明确地控制元素的大小，以适应你的设计需求。在CSS中，你可以使用不同的单位来指定宽度和高度，例如像素（px）、百分比（%）、em单位、rem单位等。像素是固定的尺寸单位，而百分比、em和rem则是相对的尺寸单位，它们的大小是相对于其他元素或屏幕尺寸而定的。

border：
- 此属性设置元素的边框样式。
- 示例
```
.box {
	border: 3px dotted grey;
}
```
- 3px是边框宽度。
- dotted表示边框是点状的。
- grey是边框颜色。
border-radius:
- 此属性设置元素边框的圆角半径，使得边框拐角处呈现为圆角，而非默认的直角。值会是圆角的半径。
- 示例
```
.box {
	border-radius: 8px;
}
```

内边距

内边距（Padding）: 内边距是**元素边框与元素内容之间的空间**。它是元素内部的空白区域，用于创建元素内容和元素边框之间的缓冲空间。在CSS中，内边距通过padding属性来设置。

属性：
- padding-top: 设置元素的上内边距。
- padding-right: 设置元素的右内边距。
- padding-bottom: 设置元素的下内边距。
- padding-left: 设置元素的左内边距。
- padding: 同时设置元素的上、右、下、左内边距。
示例代码：

/* 单独设置内边距 */
.element {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

/* 使用一个值来设置所有的内边距 */
.element {
    padding: 10px;
}

/* 使用两个值来设置内边距：第一个值为上下内边距，第二个值为左右内边距 */
.element {
    padding: 10px 20px;
}

/* 使用四个值来分别设置上、右、下、左内边距 */
.element {
    padding: 10px 20px 30px 40px;
}

外边距

外边距（Margin）: 外边距是元素边框外侧到相邻元素边框的空间。它是元素周围的空白区域，用于在元素之间创建空间，以保持页面的清晰和组织良好的布局。在CSS中，外边距通过margin属性来设置。

属性：
- margin-top: 设置元素的上外边距。
- margin-right: 设置元素的右外边距。值设置为auto的时候可以实现元素垂直居中显示。
- margin-bottom: 设置元素的下外边距。
- margin-left: 设置元素的左外边距。值设置为auto的时候可以实现元素垂直居中显示。
- margin: 同时设置元素的上、右、下、左外边距。设置为0 auto可以实现垂直居中显示

示例代码：

/* 单独设置外边距 */
.element {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

/* 使用一个值来设置所有的外边距 */
.element {
    margin: 10px;
}

/* 使用两个值来设置外边距：第一个值为上下外边距，第二个值为左右外边距 */
.element {
    margin: 10px 20px;
}

/* 使用四个值来分别设置上、右、下、左外边距 */
.element {
    margin: 10px 20px 30px 40px;
}

特殊处理：%百分比布局

width: 100%的意义:
当你设置一个元素的width属性为100%时，你是在告诉浏览器将该元素的宽度设置为其父元素的宽度。这意味着，元素会尽可能地扩展以填充其父元素的水平空间。
```
.element {
    width: 100%;
}
```
与父容器的宽度计算:
在默认情况下，一个元素的宽度是由其内容区的宽度、内边距、边框和外边距组成的。当你设置width: 100%时，你只是设置了元素内容区的宽度等于父元素的宽度，而不是整个元素（包括内边距和边框）的宽度。
可能出现溢出屏幕的情况:
如果元素具有内边距或边框，那么即使设置了width: 100%，元素的总宽度也会超过其父元素的宽度，可能导致元素溢出其父元素或溢出屏幕。
```
.element {
    width: 100%;
    padding: 10px;
    border: 5px solid black;
}
```
解决方法 (box-sizing: border-box;):
box-sizing属性允许你更改浏览器计算元素宽度和高度的方式。通过设置box-sizing: border-box;，你可以告诉浏览器包括内边距和边框在内，但不包括外边距在内，来计算元素的宽度和高度。
```
.element {
    width: 100%;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box;
}
```
这样，即使有内边距和边框，元素的总宽度也会与其父元素的宽度相匹配，防止溢出。
为什么这样能解决:
box-sizing: border-box;是因为它改变了浏览器计算元素宽度的方式。在这种模式下，元素的width和height属性包括了内边距和边框，而不仅仅是内容区域。这意味着，即使元素有内边距和边框，其宽度也会保持为100%，与父元素的宽度相匹配，从而防止了溢出的问题。

设置默认布局边距

*{ padding: 0; margin: 0;} 是一种CSS重置（CSS Reset）的简单形式。让我们逐一解释：

通配符 *:
通配符 * 是一个全局选择器，它匹配页面上的所有元素。
padding: 0; 和 margin: 0;:
这两条样式规则分别将所有元素的内边距（padding）和外边距（margin）设置为0。

* {
    padding: 0;
    margin: 0;
}

用途和使用场景：

消除浏览器默认样式:
不同浏览器有不同的默认样式。例如，某些浏览器可能会为、
、
等元素提供默认的margin和padding值。通过使用* { padding: 0; margin: 0; }，你可以重置所有元素的margin和padding值，确保在不同浏览器中的一致性。
创建清晰的布局:
在开始创建网站布局之前重置margin和padding值是一个好习惯，我们可以放在css布局里的首行。这样做可以确保你的布局不会受到未预期的空间影响，使布局过程更为清晰和可预测。
减少样式冲突:
在大型项目或使用第三方库时，重置margin和padding值可以帮助减少样式冲突，使样式更容易管理和维护。

背景设置

在CSS中，背景属性用于为元素设置背景内容。你可以设置颜色、图像、重复、位置和滚动等属性来配置背景。以下是背景属性及其用法的概述：

背景颜色 (`background-color`):

设置元素的背景颜色。

.element {
    background-color: #ff0000; /* 红色 */
}

背景图像 (`background-image`):

设置元素的背景图像。

.element {
    background-image: url('background.jpg');
}

背景重复 (`background-repeat`):

设置背景图像是否以及如何重复。

.element {
    background-repeat: no-repeat; /* 不重复 */
}

背景位置 (`background-position`):

设置背景图像的位置。

.element {
    background-position: center center; /* 水平垂直居中 */
}

背景附着 (`background-attachment`):

设置背景图像是固定的，还是随着页面的其余部分滚动。

.element {
    background-attachment: fixed;
}

背景大小 (`background-size`):

设置背景图像的大小。

.element {
    background-size: cover; /* 覆盖整个元素 */
}

背景简写属性 (`background`):

你可以使用 background 属性将所有这些值组合到一个声明中。

.element {
    background: #ff0000 url('background.jpg') no-repeat center center fixed;
}

背景图像的多个背景:

你还可以为元素设置多个背景图像，每个背景图像之间用逗号分隔。

.element {
    background-image: url('overlay.png'), url('background.jpg');
}

背景添加阴影效果：

box-shadow 属性是用于向框（即元素的边框外边缘）添加阴影效果。这个属性可以创建出立体效果，或者强调某个元素。box-shadow 属性可以接受多个值，用于控制阴影的水平偏移、垂直偏移、模糊半径、扩展半径和颜色。这里是 box-shadow 属性的基本结构和用法：

基本语法：

box-shadow: h-offset v-offset blur spread color;

h-offset (水平偏移): 水平方向上阴影的偏移量。正值向右偏移，负值向左偏移。
v-offset (垂直偏移): 垂直方向上阴影的偏移量。正值向下偏移，负值向上偏移。
blur (模糊半径): 阴影的模糊度。值越大，阴影越模糊。值为0时，阴影为硬边。
spread (扩展半径): 阴影的扩展大小。正值会使阴影扩大，负值会使阴影缩小。
color (颜色): 阴影的颜色。

示例：

.element {
    box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, 0.5);
}

在这个示例中，元素具有一个向右和向下偏移10px的阴影，模糊半径为5px，没有扩展半径（因为它是0），并且阴影的颜色是半透明的黑色。

多重阴影：

你还可以应用多重阴影，只需用逗号分隔每个阴影值即可：

.element {
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3), 
                -3px -3px 5px 0 rgba(255, 255, 255, 0.3);
}

在这个示例中，元素具有两个阴影：一个向右和向下偏移，另一个向左和向上偏移。

文本处理

在处理文本时，CSS提供了多种属性来控制文本的显示和格式。以下是一些常用的文本处理属性及其用法和示例。

1. `text-align` - 文本对齐方式

此属性用于设置文本的水平对齐方式。

基本语法：

text-align: left | right | center | justify;

left: 文本左对齐（默认值）。
right: 文本右对齐。
center: 文本居中对齐。
justify: 文本两端对齐。

示例：

p {
    text-align: center;
}

2. `text-decoration` - 文本装饰

此属性用于设置文本的装饰，如下划线、横线等。

基本语法：

text-decoration: none | underline | overline | line-through | blink;

none: 无装饰（默认值）。
underline: 下划线。
overline: 上划线。
line-through: 删除线。
blink: 闪烁（不推荐使用，因为它可能导致可用性和可访问性问题）。

示例：

p {
    text-decoration: underline;
}

3. `text-transform` - 文本转换

此属性用于控制文本的大小写。

基本语法：

text-transform: none | uppercase | lowercase | capitalize;

none: 无转换（默认值）。
uppercase: 全部大写。
lowercase: 全部小写。
capitalize: 每个单词的首字母大写。

示例：

p {
    text-transform: uppercase;
}

4. `letter-spacing` - 字母间距

此属性用于设置字符之间的间距。

基本语法：

letter-spacing: normal | length-value;

normal: 正常间距（默认值）。
length-value: 自定义间距值（例如 2px、0.1em等）。

示例：

p {
    letter-spacing: 2px;
}

5. `word-spacing` - 单词间距

此属性用于设置单词之间的间距。

基本语法：

word-spacing: normal | length-value;

normal: 正常间距（默认值）。
length-value: 自定义间距值（例如 4px、0.2em等）。

示例：

p {
    word-spacing: 4px;
}

6. `line-height` - 行高

此属性用于设置行之间的间距。

基本语法：

line-height: normal | number | length-value | percentage;

normal: 正常行高（默认值）。
number: 相对于字体大小的倍数（例如 1.5）。
length-value: 固定行高值（例如 20px、1.5em等）。
percentage: 相对于字体大小的百分比（例如 150%）。

示例：

p {
    line-height: 1.5;
}

7. `text-indent` - 文本缩进

text-indent 属性用于设置文本的首行缩进。

基本语法：

text-indent: length-value | percentage;

length-value: 固定缩进值（例如 20px、2em等）。
percentage: 相对于包含块宽度的百分比值。

示例：

p {
    text-indent: 2em;
}

在这个示例中，p 元素的首行将缩进相当于当前字体大小的2倍。

8. `font` - 字体设置

font 属性是一个复合属性，它允许您在一个声明中设置多个字体属性。

基本语法：

font: font-style font-variant font-weight font-size/line-height font-family;

font-style: 字体样式 (normal, italic, oblique)。
font-variant: 字体变体 (normal, small-caps)。
font-weight: 字体粗细 (normal, bold, bolder, lighter, 100 to 900)。
font-size: 字体大小 (medium, xx-small, x-small, small, large, x-large, xx-large, 或者使用长度值例如 12px, 1.5em 等)。
line-height: 行高（同上面的 line-height 属性）。
font-family: 字体系列（例如 "Helvetica, Arial, sans-serif"）。

示例：

p {
    font: italic small-caps bold 1em/1.5 Arial, sans-serif;
}

在这个示例中，p 元素将有斜体、小型大写字母、粗体、1em字体大小、1.5的行高，以及Arial或sans-serif字体。

9. `text-shadow` - 文本阴影

text-shadow 属性用于给文本添加阴影效果。

基本语法：

text-shadow: h-offset v-offset blur-radius color;

h-offset (水平偏移): 水平方向上阴影的偏移量。正值向右偏移，负值向左偏移。
v-offset (垂直偏移): 垂直方向上阴影的偏移量。正值向下偏移，负值向上偏移。
blur-radius (模糊半径): 阴影的模糊度。值越大，阴影越模糊。值为0时，阴影为硬边。
color (颜色): 阴影的颜色。

示例：

p {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

在这个示例中，p 元素的文本将有一个向右和向下偏移2px，模糊半径为2px，颜色为半透明的黑色的阴影。

10. `writing-mode` - 写作模式

writing-mode 属性用于定义文本方向和布局方向。

基本语法：

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

horizontal-tb (水平从上到下): 文字水平显示，并从上到下排列。
vertical-rl (垂直从右到左): 文字垂直显示，并从右到左排列。
vertical-lr (垂直从左到右): 文字垂直显示，并从左到右排列。

示例：

p {
    writing-mode: vertical-rl;
}

在这个示例中，p 元素的文本将垂直显示，并从右向左排列。

11. `text-orientation` - 文本方向

text-orientation 属性用于设置文字在垂直模式下的方向。

基本语法：

text-orientation: mixed | upright | sideways;

mixed: 文字的方向根据单个字符的默认方向来确定。
upright: 所有字符都保持直立，不旋转。
sideways: 所有字符都侧面显示，旋转90度。

示例：

p {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

在这个示例中，p 元素的文本将垂直显示，并且所有字符都保持直立，不旋转。

这两个属性通常一起使用，以实现特定的文本布局和方向效果，特别是对于需要垂直文本布局的语言和设计。

元素定位

1. `position` - 定位属性

position 属性用于设置元素的定位类型，它决定了元素如何在页面上定位。

基本语法：

position: static | relative | absolute | fixed | sticky;

static (静态定位): 默认值，元素按照正常的文档流定位。
relative (相对定位): 元素相对于其正常位置进行定位。可以使得子容器按照父容器的位置进行定位，也就是让子容器的定位始终以父容器的尺寸进行活动。
absolute (绝对定位): 元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块进行定位。
fixed (固定定位): 元素相对于浏览器窗口进行定位，即使页面滚动，它也始终保持在相同的位置。可以做返回顶部的方式快捷方式实现。
sticky (粘性定位): 是相对定位和固定定位的混合类型，元素在跨越特定点时会切换为固定定位。

示例：

.element {
    position: absolute;
    top: 50px;
    left: 100px;
}

2. `top`, `right`, `bottom`, `left` - 偏移属性

这些属性用于设置定位元素的偏移量，它们的效果会受到 position 属性的影响。

基本语法：

top: auto |  | ;
right: auto |  | ;
bottom: auto |  | ;
left: auto |  | ;

auto: 自动计算偏移量。
: 指定偏移量，例如 50px。
: 相对于包含块的百分比偏移。

示例：

.element {
    position: absolute;
    top: 10%;
    left: 20%;
}

在这个示例中，.element 元素被绝对定位，其顶部偏移了包含块高度的 10%，左侧偏移了包含块宽度的 20%。

这些属性允许你精确控制元素的位置，通常与 position 属性一起使用来实现各种布局效果。

CSS核心布局技术

布局的引入

把页面分成一块一块，按左中右、上中下等排列

布局分类

两种

固定宽度布局，一般宽度为960/1000/1024 px
不固定宽度布局，主要靠文档流的原理来布局

文档流本来就是自适应的（响应式的），不需要加额外的样式

第三种布局

响应式布局（旧内容新名字）
意思就是PC上固定宽度，手机上不固定宽度
也就是一种混合布局

布局的两种思路

从大到小
- 先定下大局
- 然后完善每个部分的小布局
从小到大
- 先完成小布局
- 然后组合成大布局

两种均可

新人推荐用第二种，因为小的简单
老手一般用第一种，因为有大局观

布局需要用到什么属性？

DIV+CSS布局（过时说法）
CSS布局 √｛main，header，fotter等等｝
一图流

Flexbox (弹性布局)

Flexbox 是 CSS3 引入的一种新的布局模式，旨在提供一个更加高效的方式来对容器中的项进行对齐、方向和顺序的控制。

Flex弹性布局

基本语法：

display: flex | inline-flex;

容器属性：

flex-direction (方向): 定义主轴的方向（即项目的排列方向）。可选值有 row (水平方向), row-reverse (水平反向), column (垂直方向), column-reverse (垂直反向)。
flex-wrap (换行): 定义如果一条轴线排不下，如何换行。可选值有 nowrap (不换行), wrap (换行), wrap-reverse (反向换行)。
flex-flow: 是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。
justify-content (主轴对齐): 定义项目在主轴上的对齐方式。可选值有 flex-start (头部对齐), flex-end (尾部对齐), center (居中对齐), space-between (两端对齐，项目之间的间隔相等), space-around (每个项目两侧的间隔相等)。
align-items (交叉轴对齐): 定义项目在交叉轴上如何对齐。可选值有 flex-start, flex-end, center, baseline, stretch。
align-content (多行对齐): 定义多轴线的对齐方式。该属性对单行 flex 容器无效。

项目属性：

order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0。
flex-grow: 定义项目的放大比例，默认为0。
flex-shrink: 定义项目的缩小比例，默认为1。
flex-basis: 定义项目的原始大小。
flex: 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

示例：

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.item {
    flex-grow: 1;
}

2. align-items

align-items 属性是用于在 Flexbox（弹性布局）或 Grid（网格布局）容器中对齐交叉轴上的项目。

基本语法：

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end | safe center | unsafe center;

可选值：

stretch (默认值): 项目被拉伸以适应容器。
flex-start / start: 项目位于容器的开头。
flex-end / end: 项目位于容器的末尾。
center: 项目位于容器的中心。
baseline: 项目的基线对齐。
first baseline: 对齐到容器的第一个项目的基线。
last baseline: 对齐到容器的最后一个项目的基线。
self-start: 对齐到项目自己的开始位置。
self-end: 对齐到项目自己的结束位置。
safe center: 当对齐项目可能溢出容器时，将它们安全地对齐在容器的中心。
unsafe center: 忽略溢出，强制将项目对齐在容器的中心。

示例：

.container {
    display: flex;
    align-items: center;
}

3. justify-content

justify-content 属性用于在 Flexbox（弹性布局）或 Grid（网格布局）容器中对齐主轴上的项目。

基本语法：

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right | safe center | unsafe center;

可选值：

flex-start / start / left: 项目位于容器的开头。
flex-end / end / right: 项目位于容器的末尾。
center: 项目位于容器的中心。
space-between: 项目均匀分布在容器里，第一个项目位于容器的开始位置，最后一个项目位于容器的结束位置。
space-around: 项目均匀分布在容器里，项目之间的间隔是相同的。
space-evenly: 项目均匀分布在容器里，项目之间和容器边缘的间隔是相同的。

示例：

.container {
    display: flex;
    justify-content: space-between;
}

4. flex

flex 属性是 flex-grow, flex-shrink, 和 flex-basis 的简写属性。它是用于在 Flexbox（弹性布局）中设置弹性项目的放大、缩小和基础大小。

基本语法：

flex: flex-grow flex-shrink flex-basis | auto | initial | none;

可选值：

flex-grow: 定义项目的放大比例。
flex-shrink: 定义项目的缩小比例。
flex-basis: 定义项目的原始大小。
auto: 根据容器和项目的大小自动计算 flex-grow, flex-shrink, 和 flex-basis。
initial: 设置 flex 的初始值为 0 1 auto。
none: 设置 flex 的值为 0 0 auto。

示例：

.item {
    flex: 1 0 auto;
}

flex-direction

该属性用于定义主轴的方向，即项目的排列方向。

row (default): 从左到右排列。
row-reverse: 从右到左排列。
column: 从上到下排列。
column-reverse: 从下到上排列。

<div style="display: flex; flex-direction: row;">
    <div>Item 1div>
    <div>Item 2div>
    <div>Item 3div>
div>

flex-wrap

该属性定义了项目在主轴上如何换行。

nowrap (default): 不换行。
wrap: 换行，第一行在上方。
wrap-reverse: 换行，第一行在下方。

<div style="display: flex; flex-wrap: wrap;">
    <div>Item 1div>
    <div>Item 2div>
    <div>Item 3div>
div>

align-content

该属性定义了多轴线的对齐方式。

flex-start: 各行向起点对齐。
flex-end: 各行向终点对齐。
center: 各行居中对齐。
space-between: 与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around: 轴线之间的间隔平均分布。

<div style="display: flex; flex-wrap: wrap; align-content: flex-start;">
    <div>Item 1div>
    <div>Item 2div>
    <div>Item 3div>
div>

flex-flow

flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap。

<div style="display: flex; flex-flow: row wrap;">
    <div>Item 1div>
    <div>Item 2div>
    <div>Item 3div>
div>

align-self

该属性允许默认对齐方式被覆盖，用于单个项目。

auto: 继承容器的align-items属性，如果没有父容器则为stretch。
flex-start: 交叉轴的起点对齐。
flex-end: 交叉轴的终点对齐。
center: 交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch: 如果项目未设置高度或设为auto，将占满整个容器的高度。

<div style="display: flex;">
    <div style="align-self: flex-start;">Item 1div>
    <div>Item 2div>
    <div>Item 3div>
div>

flex-basis

该属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。它的默认值为auto，即项目的本来大小。

<div style="display: flex;">
    <div style="flex-basis: 200px;">Item 1div>
    <div>Item 2div>
    <div>Item 3div>
div>

flex-shrink

该属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

<div style="display: flex;">
    <div style="flex-shrink: 2;">Item 1div>
    <div>Item 2div>
    <div>Item 3div>
div>

flex-grow

该属性定义了项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

<div style="display: flex;">
    <div style="flex-grow: 1;">Item 1div>
    <div>Item 2div>
    <div>Item 3div>
div>

order

该属性定义了项目的排列顺序。数值越小，排列越靠前，默认为0。

<div style="display: flex;">
    <div style="order: 2;">Item 1div>
    <div style="order: 1;">Item 2div>
    <div style="order: 3;">Item 3div>
div>

Grid Layout (网格布局)

CSS Grid Layout 是一个基于网格的布局系统，它可以处理两维布局，行和列。

Grid网格布局

基本语法：

display: grid | inline-grid;

容器属性：

grid-template-columns / grid-template-rows: 定义列 / 行的大小。
grid-template-areas: 定义区域。
grid-template: 是 grid-template-rows, grid-template-columns 和 grid-template-areas 的简写。
grid-column-gap / grid-row-gap: 定义列 / 行的间隔。
grid-gap: 是 grid-row-gap 和 grid-column-gap 的简写。
justify-items / align-items: 定义项目在单元格中的位置。
justify-content / align-content: 定义整个网格在容器中的位置。

项目属性：

grid-column-start / grid-column-end / grid-row-start / grid-row-end: 定义项目的位置和区域。
grid-column / grid-row: 是 grid-column-start / grid-column-end, grid-row-start / grid-row-end 的简写形式。
grid-area: 定义项目所在的区域或位置。

示例：

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.item {
    grid-column: span 2;
}p

1. display

display 属性用于设置元素的显示模式。在 Grid 布局中，它可以设置为 grid 或 inline-grid。

grid: 此值将元素设置为块级网格容器。
inline-grid: 此值将元素设置为内联网格容器。

示例:

.container {
    display: grid;
}

在此示例中，.container 元素被设置为块级网格容器。

2. grid-template-columns / grid-template-rows

这两个属性用于定义网格的列和行的大小。

: 可以是长度值、百分比、分数值或者 auto。
: 自定义线名，可以用于更好地定位网格项。

示例:

.container {
    display: grid;  /* 设置容器为网格布局 */
    grid-template-columns: repeat(3, 1fr);  /* 设置三列，每列宽度为容器宽度的三分之一 */
    grid-template-rows: 100px 200px;  /* 设置两行，第一行高度为100px，第二行高度为200px */
    /* grid-template-columns: 200px 300px 200px; */  /* 设置三列，宽度分别为200px, 300px, 200px */
    /* grid-template-columns: 1fr 1fr 1fr*/  /* 设置三列，每列宽度为容器宽度的三分之一 */
    /* grid-template-columns: repeat(3, 1fr); */  /* 设置三列，每列宽度为容器宽度的三分之一，与上面的代码相同 */
    /* grid-template-columns: repeat(auto-fill, 200px);*/  /* 自动填充尽可能多的200px宽的列 */
    grid-template-columns: 300px auto 200px;  /* 设置三列，宽度分别为300px, 自动, 200px，中间的列宽度自适应 */
    height: 600px;  /* 设置容器高度为600px */
    grid-template-rows: 1fr 2fr;  /* 设置两行，第二行的高度是第一行的两倍 */
}

.container_item {
    padding: 10px;  /* 设置内边距为10px */
    border: 1px solid #ccc;  /* 设置1px宽的实线边框，颜色为#ccc */
    border-radius: 5px;  /* 设置边框圆角为5px */
    background-color: #f9f9f9;  /* 设置背景颜色为#f9f9f9 */
    overflow: hidden;  /* 设置溢出内容为隐藏 */
}

在此示例中:

在.container选择器下的代码是用于设置网格容器的布局和尺寸。
在.container_item选择器下的代码是用于设置网格项的样式，包括内边距、边框、边框圆角、背景颜色和溢出处理。

3. grid-column / grid-row

这两个属性用于指定网格项的位置。

/ : 指定网格项的起始和结束位置。

示例:

.item {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
}

在此示例中，.item 元素的列位置从第1列线开始到第3列线结束，行位置从第2行线开始到第4行线结束。

4. grid-gap

grid-gap 属性是 row-gap 和 column-gap 的简写，它用于设置行和列之间的间隙。

: 行间隙的大小。
: 列间隙的大小。

示例:

.container {
    grid-gap: 10px 15px;
}

在此示例中，设置了10px的行间隙和15px的列间隙。

5. justify-items / align-items

这两个属性用于控制网格容器中的项如何对齐。

start: 项对齐到网格的起始边。
end: 项对齐到网格的结束边。
center: 项在网格中居中对齐。
stretch: 项拉伸以填充网格区域。

示例:

.container {
    justify-items: center;
    align-items: stretch;
}

在此示例中，所有项在其网格区域中水平居中，垂直方向上拉伸以填充网格区域。

6. grid-auto-columns / grid-auto-rows

当你有超出你明确定义的网格的项时，这些属性为自动创建的网格轨道设置大小。

: 轨道的大小，可以是长度值、百分比、分数值或者 auto。

示例:

.container {
    grid-auto-columns: 100px;
    grid-auto-rows: 100px;
}

在此示例中，任何超出明确定义网格的项都会在一个100px宽的列和100px高的行中放置。

Grid 布局是非常强大的，它可以用于创建复杂的布局，而不需要额外的 HTML 元素或复杂的 CSS。它特别适用于构建具有复杂结构的应用程序界面或网页。

过渡与变化

过渡是指元素从一个状态逐渐改变为另一个状态的效果。在CSS中，我们通过transition属性来实现过渡效果。

变换是指通过CSS改变元素的形状和位置。transform属性提供了多种方法来控制元素的变换，包括移动、旋转、缩放和倾斜等。

`translate`, `translateX`, `translateY`

translate(x, y): 沿x和y轴移动元素。
translateX(x): 沿x轴移动元素。
translateY(y): 沿y轴移动元素。

<div style="transform: translate(50px, 50px);">
    Translate me
div>

`rotate`

rotate(angle): 旋转元素。参数是旋转的角度，可以是deg, rad, grad 或turn。

<div style="transform: rotate(45deg);">
    Rotate me
div>

`transform-origin`

transform-origin: 改变元素的变换原点。

<div style="transform: rotate(45deg); transform-origin: 20% 40%;">
    Change my origin
div>

`scale`

scale(x, y): 缩放元素的大小。

<div style="transform: scale(1.5, 1.5);">
    Scale me
div>

`skew`

skew(x-angle, y-angle): 倾斜元素。

<div style="transform: skew(30deg, 20deg);">
    Skew me
div>

`transform-style: preserve-3d`

transform-style: 设置嵌套元素是位于3D空间还是平面。
preserve-3d: 表示嵌套元素位于3D空间。

<div style="transform-style: preserve-3d;">
    3D space
div>

`perspective`

perspective: 定义3D元素距视点的距离。

<div style="perspective: 500px;">
    3D perspective
div>

3D变换: `translate3d`, `rotate3d`

translate3d(x, y, z): 沿x, y和z轴移动元素。
rotate3d(x, y, z, angle): 围绕一个3D向量旋转元素。

<div style="transform: translate3d(50px, 50px, 50px);">
    Translate me in 3D
div>

<div style="transform: rotate3d(1, 1, 1, 45deg);">
    Rotate me in 3D
div>

这些属性和方法可以单独使用，也可以组合使用，创建丰富多彩的动画和效果。在3D变换中，preserve-3d和perspective属性是非常重要的，它们控制了3D空间的表现和视觉效果。

动画 (Animation)

CSS动画是使元素从一种样式逐渐变为另一种样式的效果。

keyframes

@keyframes 是 CSS 动画的基础，允许你创建动画序列，定义动画过程中的每个阶段。通过 @keyframes, 你可以在不同的时间点指定元素的样式。这些时间点以百分比表示，0% 代表动画开始，100% 代表动画结束，而中间的百分比表示动画过程中的各个阶段。

基本语法：

@keyframes animationName {
    0% {
        /* 动画开始时的样式 */
    }

    50% {
        /* 动画中间时的样式 */
    }

    100% {
        /* 动画结束时的样式 */
    }
}

animationName: 是你为此动画定义的名称，它在 animation 属性中使用。
百分比（0%, 50%, 100% 等）：代表动画的各个阶段，你可以在每个阶段定义元素的不同样式。

示例：

假设你想创建一个简单的动画，使元素在 2 秒内从左移动到右。你可以如下定义一个 @keyframes 动画：

@keyframes moveRight {
    0% {
        left: 0;
    }
    100% {
        left: 200px;
    }
}

/* 应用动画到元素 */
.element {
    position: relative;
    animation: moveRight 2s forwards;
}

HTML代码：

<div class="element">我是一个会移动的元素div>

在这个示例中：

首先，定义了一个名为 moveRight 的 @keyframes 动画，该动画在 0%（开始）时具有 left 值为 0，在 100%（结束）时具有 left 值为 200px。
然后，在 .element 类中使用 animation 属性应用了 moveRight 动画，设置动画持续时间为 2s，并使用 forwards 保留动画结束时的样式。

多个阶段的动画：

你可以在 @keyframes 中定义多个阶段，以创建更复杂的动画。例如，如果你想让元素在动画过程中先变大，然后变小，你可以如下定义动画：

@keyframes growShrink {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/* 应用动画到元素 */
.element {
    animation: growShrink 2s infinite;
}

HTML代码：

<div class="element">我是一个会变大变小的元素div>

在这个示例中：

@keyframes growShrink 动画在 0% 和 100% 时保持原始大小（scale(1)），在 50% 时变大到 1.5 倍（scale(1.5)）。
.element 类中的 animation 属性应用了 growShrink 动画，设置动画持续时间为 2s，并使用 infinite 使动画无限次循环。

`@-webkit-keyframes`

@-webkit-keyframes 是一个专为WebKit浏览器引擎（如Safari和旧版的Chrome）准备的前缀版本的 @keyframes 规则。它的语法和用法与 @keyframes 完全相同，但是加了 -webkit- 前缀以确保兼容性。

在早期，当 CSS 动画刚刚推出时，不同的浏览器需要不同的前缀来支持 CSS 动画。为了确保动画能在所有浏览器上运行，你需要为 @keyframes 规则提供多个版本。

下面是一个使用 @-webkit-keyframes 的示例：

@-webkit-keyframes myAnimation {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}

@keyframes myAnimation {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebKit Animation Exampletitle>
<style>
    @-webkit-keyframes myAnimation {
        0% { transform: translateX(0); }
        50% { transform: translateX(100px); }
        100% { transform: translateX(0); }
    }

    @keyframes myAnimation {
        0% { transform: translateX(0); }
        50% { transform: translateX(100px); }
        100% { transform: translateX(0); }
    }

    .animate {
        width: 100px;
        height: 100px;
        background-color: blue;
        animation-name: myAnimation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }
style>
head>
<body>

<div class="animate">
    Animate me
div>

body>
html>

在上述示例中，我们为 @keyframes 规则提供了两个版本 - 一个普通的版本和一个带有 -webkit- 前缀的版本。这样，无论用户是使用WebKit浏览器还是其他浏览器，动画都能正常运行。但请注意，现代浏览器通常不再需要使用这种前缀版本。

`animation-name`

指定@keyframes动画的名称。

<div style="animation-name: mymove;">
    Animate me
div>

`animation-duration`

指定动画完成一个周期所花费的时间。

<div style="animation-duration: 5s;">
    Animate me
div>

`animation-timing-function`

指定动画的速度曲线。

<div style="animation-timing-function: ease-in;">
    Animate me
div>

`animation-delay`

指定动画何时开始。

<div style="animation-delay: 2s;">
    Animate me
div>

`animation-iteration-count`

指定动画应该播放多少次。

<div style="animation-iteration-count: infinite;">
    Animate me
div>

`animation-direction`

指定动画是否在下一周期逆向播放。

<div style="animation-direction: alternate;">
    Animate me
div>

示例

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Exampletitle>
<style>
    @keyframes myAnimation {
        0% { transform: translateX(0); }
        50% { transform: translateX(100px); }
        100% { transform: translateX(0); }
    }

    .animate {
        width: 100px;
        height: 100px;
        background-color: blue;
        animation-name: myAnimation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }
style>
head>
<body>

<div class="animate">
    Animate me
div>

body>
html>

在这个示例中，我们创建了一个简单的来回移动的动画。动画的名字是myAnimation，总时长是3秒，会无限次重复播放。

综合项目: 立体旋转相册

立体旋转方块

HTML代码

DOCTYPE html>
<html lang="zh-CN">
    
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>exampletitle>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js">script>
head>
<body>
    
    <div class="wrap">

    <div class="cube">
        
        <div class="out_front">
            <div class="pic" id="out_front"> div> 
        div>
        
        <div class="out_back">
            <div class="pic" id="out_back"> div> 
        div>
        
        <div class="out_left">
            <div class="pic" id="out_left"> div> 
        div>
        <div class="out_right">
            <div class="pic" id="out_right"> div> 
        div>
        <div class="out_top">
            <div class="pic" id="out_top"> div> 
        div>
        <div class="out_bottom">
            <div class="pic" id="out_bottom"> div> 
        div>

         
        <span class="in_front">
            <div class="in_pic" id="in_front"> div> 
        span>
        <span class="in_back">
            <div class="in_pic" id="in_back"> div> 
        span>
        <span class="in_left">
            <div class="in_pic" id="in_left"> div> 
        span>
        <span class="in_right">
            <div class="in_pic" id="in_right"> div> 
        span>
        <span class="in_top">
            <div class="in_pic" id="in_top"> div> 
        span>
        <span class="in_bottom">
            <div class="in_pic" id="in_bottom"> div> 
        span>
    div>
    div>
body>
html>

CSS代码

html {
	background: #000;
    height: 100%;	
}
/*最外层容器样式*/
.wrap{
	position: relative;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: auto;
	/*改变左右上下,图片方块移动*/
	
}
/*包裹所有容器样式*/
.cube{
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	-webkit-animation: rotate 20s infinite;
    animation: rotate 20s infinite;
	/*匀速*/
	animation-timing-function: linear;
}
@-webkit-keyframes rotate{
	from{transform: rotateX(0deg) rotateY(0deg);}
	to{transform: rotateX(360deg) rotateY(360deg);}
}
@keyframes rotate{
	from{transform: rotateX(0deg) rotateY(0deg);}
	to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: all .4s;
}
/*定义所有图片样式*/
.pic{
	width: 200px;
	height: 200px;
}
.cube .pic#out_front {
    background-color: blueviolet;
}
.cube .pic#out_back {
    background-color: rgb(47, 49, 180);
}
.cube .pic#out_left {
    background-color: rgb(255, 230, 1);
}
.cube .pic#out_right {
    background-color: rgb(255, 94, 0);
}
.cube .pic#out_top {
    background-color: rgba(43, 226, 58, 0.651);
}
.cube .pic#out_bottom {
    background-color: rgb(5, 255, 213);
}

.cube .in_pic#in_front {
    background-color: blueviolet;
}
.cube .in_pic#in_back {
    background-color: rgb(47, 49, 180);
}
.cube .in_pic#in_left {
    background-color: rgb(255, 230, 1);
}
.cube .in_pic#in_right {
    background-color: rgb(94, 65, 49);
}
.cube .in_pic#in_bottom {
    background-color: steelblue;
}

.cube .out_front{
	transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
	transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
	transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
	transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
	transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
	transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50px;
	left: 50px;
}
.cube .in_pic{
	width: 100px;
	height: 100px;
    /* background-color: aqua; */
}
.cube .in_front{
	transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
	transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
	transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
	transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
	transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
	transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
	transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
	transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
	transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
	transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
	transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
	transform: rotateX(-90deg) translateZ(200px);
}

综合项目：2栏布局

常见的两栏布局方式是一侧定宽，另一侧自适应宽度，例如左侧栏定宽，右侧自适应宽度，或者右侧栏定宽，左侧自适应宽度。

HTML代码

DOCTYPE html>
<html lang="zh-CN">
    
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>exampletitle>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js">script>
head>
<body>
    <div class="container">
        <div class="sidebar">
            <p class="title">Sidebar contentp>
            <div class="footer" id="sidebar">Sidebar Footerdiv>
        div>
        <div class="main">
            <p class="title" id="f_title">Main contentp>

            <div class="footer" id="footer">Main Footerdiv>
        div>
    div>
body>
html>

CSS代码

/* 
全局重置:
margin: 0; 将所有元素的外边距设置为0，以消除浏览器默认的外边距。
padding: 0; 将所有元素的内边距设置为0，以消除浏览器默认的内边距。
*/
* {
    margin: 0;
    padding: 0;
}

/* 
.container样式:
display: flex; 将.container元素设置为弹性布局容器，使其子元素可以使用弹性布局属性。
height: 100vh; 将.container元素的高度设置为视口高度的100%，使其填充整个视口。
*/
.container {
    display: flex;
    height: 100vh;
}

/* 
.sidebar和.main样式:
display: flex; 将.sidebar和.main元素设置为弹性布局容器，使其子元素可以使用弹性布局属性。
flex-direction: column; 将.flex容器的主轴方向设置为从上到下，使其子元素垂直排列。
*/
.sidebar, .main {
    display: flex;
    flex-direction: column;
}

/* 
.sidebar样式:
justify-content: center; 在.sidebar元素的主轴方向上居中对齐其子元素。
width: 200px; 设置.sidebar元素的宽度为200像素。
background-color: #554646; 设置.sidebar元素的背景颜色为#554646。
*/
.sidebar {
    justify-content: center;
    width: 200px;  
    background-color: #554646;  
}

/* 
.main样式:
flex-grow: 1; 允许.main元素在主轴方向上占用剩余空间。
background-color: #b37777; 设置.main元素的背景颜色为#b37777。
*/
.main {
    flex-grow: 1;  
    background-color: #b37777;  
}

/* 
.footer样式:
margin-top: auto; 将.footer元素的顶部外边距设置为自动，使其始终保持在其容器的底部。
padding: 10px; 设置.footer元素的内边距为10像素。
text-align: center; 将.footer元素中的文本居中对齐。
*/
.footer {
    margin-top: auto;  
    padding: 10px;
    text-align: center;
}

/* 
.footer#sidebar样式:
background-color: #b0b0b0; 设置ID为sidebar的.footer元素的背景颜色为#b0b0b0。
*/
.footer#sidebar {
    background-color: #b0b0b0; 
}

/* 
.footer#footer样式:
background-color: #5b9db8; 设置ID为footer的.footer元素的背景颜色为#5b9db8。
*/
.footer#footer {
    background-color: #5b9db8;  
}

/* 
.title样式:
background-color: #bb4e4e; 设置.title元素的背景颜色为#bb4e4e。
padding: 20px; 设置.title元素的内边距为20像素。
border: 1px solid #ccc; 设置.title元素的边框宽度为1像素，样式为实线，颜色为#ccc。
*/
.title {
    background-color: #bb4e4e;
    padding: 20px;
    border: 1px solid #ccc;
}

/* 
.title#f_title样式:
margin: auto 0; 使ID为f_title的.title元素在其容器中垂直居中。
*/
.title#f_title {
    margin: auto 0;  
}

综合项目：三栏布局

三栏布局类似于两栏布局，它的具体表现形式为，左侧和右侧两栏定宽，中间区域自适应宽度。

实现效果：

HTML代码



    

    
    
    
    example
    
    




    
    
        Left Sidebar Content
    
    
    
        Main Content

CSS代码

/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
}
/* 容器样式 */
.container {
    display: grid;
    grid-template-columns: 200px auto 200px;
    height: 100vh;
}
/* 左侧栏、右侧栏和主内容公共样式 */
.left-sidebar, .main-content, .right-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* 垂直居中对齐 */
    align-items: center;  /* 水平居中对齐 */
}
/* 主内容特定样式，重置垂直对齐 */
.main-content {
    justify-content: flex-start;  /* 垂直顶部对齐 */
}
/* 左侧栏、右侧栏和主内容公共样式 */
.left-sidebar, .main-content, .right-sidebar {
    padding: 20px;
}
/* 左侧栏和右侧栏背景颜色 */
.left-sidebar, .right-sidebar {
    background-color: #554646;
}
/* 主内容背景颜色 */
.main-content {
    background-color: #b37777;
}

综合项目：CSS动画版轮播图

使用CSS动画来实现轮播图。这通常需要使用@keyframes规则来定义动画，并使用animation属性来应用这些动画。

HTML代码



    

    
    
    
    example

CSS代码

.slider {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
}
.slides {
    display: flex;
    animation: slide-animation 15s infinite;  /* 5s的持续时间 * 3个幻灯片 = 15s */
}
.slide {
    width: 300px;
    height: 200px;
    flex-shrink: 0;
    transition: transform 1s;
    margin: 0 auto;
    display: flex;
}

@keyframes slide-animation {
    0% { 
        transform: translateX(0); 
    }
    20% { 
        transform: translateX(0); 
    }
    33.33% { 
        transform: translateX(-300px); 
    }
    53.33% {
         transform: translateX(-300px); 
        }
    66.66% { 
        transform: translateX(-600px); 
    }
    86.66% { 
        transform: translateX(-600px); 
    }
    100% { 
        transform: translateX(0); 
    }
}

我们首先创建了一个外部容器（.slider），它的overflow属性设置为hidden，以确保只显示一个幻灯片。
我们然后创建了一个内部容器（.slides），它包含所有的幻灯片。我们为这个容器应用了一个无限的动画（slide-animation），其持续时间为15秒（每个幻灯片的显示时间为5秒，总共有3个幻灯片，所以总持续时间为15秒）。
我们使用@keyframes规则定义了一个动画（slide-animation），它在不同的时间点将.slides容器向左平移，以显示不同的幻灯片。
最后，我们为每个幻灯片（.slide）设置了宽度、高度和背景色，以便您可以看到动画效果。

这只是一个
bar {
background-color: #554646;
}
/* 主内容背景颜色 */
.main-content {
background-color: #b37777;
}






# 综合项目：CSS动画版轮播图

使用CSS动画来实现轮播图。这通常需要使用`@keyframes`规则来定义动画，并使用`animation`属性来应用这些动画。

**HTML代码**

```HTML


    

    
    
    
    example

CSS代码

.slider {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
}
.slides {
    display: flex;
    animation: slide-animation 15s infinite;  /* 5s的持续时间 * 3个幻灯片 = 15s */
}
.slide {
    width: 300px;
    height: 200px;
    flex-shrink: 0;
    transition: transform 1s;
    margin: 0 auto;
    display: flex;
}

@keyframes slide-animation {
    0% { 
        transform: translateX(0); 
    }
    20% { 
        transform: translateX(0); 
    }
    33.33% { 
        transform: translateX(-300px); 
    }
    53.33% {
         transform: translateX(-300px); 
        }
    66.66% { 
        transform: translateX(-600px); 
    }
    86.66% { 
        transform: translateX(-600px); 
    }
    100% { 
        transform: translateX(0); 
    }
}

我们首先创建了一个外部容器（.slider），它的overflow属性设置为hidden，以确保只显示一个幻灯片。
我们然后创建了一个内部容器（.slides），它包含所有的幻灯片。我们为这个容器应用了一个无限的动画（slide-animation），其持续时间为15秒（每个幻灯片的显示时间为5秒，总共有3个幻灯片，所以总持续时间为15秒）。
我们使用@keyframes规则定义了一个动画（slide-animation），它在不同的时间点将.slides容器向左平移，以显示不同的幻灯片。
最后，我们为每个幻灯片（.slide）设置了宽度、高度和背景色，以便您可以看到动画效果。

这只是一个

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
css设置当字数超过限制后以省略号（...）显示周bro css 前端 vue css3 html 经验分享
1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
css2中的透明琪33
.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
Nginx从入门到实践(三) 听你讲故事啊
动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
Nginx的使用场景：构建高效、可扩展的Web架构张某布响丸辣 nginx 前端架构
Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
Python精选200Tips：121-125 AnFany Python200+Tips python 开发语言
Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation 元注解自定义注解
一、基本概述　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或
mysql优化特定类型的查询 annan211 java 工作 mysql
本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。在统
MAC下安装多版本JDK和切换几种方式棋子chessman jdk
环境： MAC AIR,OS X 10.10,64位历史：过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。在终端中输入jav
javaScript （1） Array_06 JavaScript java 浏览器
JavaScript 1、运算符　　运算符就是完成操作的一系列符号，它有七类：　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
国内顶级代码分享网站袁潇含 java jdk oracle .net PHP
现在国内很多开源网站感觉都是为了利益而做的当然利益是肯定的,否则谁也不会免费的去做网站 &
Elasticsearch、MongoDB和Hadoop比较随意而生 mongodb hadoop 搜索引擎
IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
mac os 系统科研软件总结张亚雄 mac os
1.1 Microsoft Office for Mac 2011 大客户版，自行搜索。 1.2 Latex （MacTex）: 系统环境：https://tug.org/mactex/ &nb
Maven实战（四）生命周期 AdyZhang maven
1. 三套生命周期 Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post
Linux下Jenkins迁移 aijuans Jenkins
1. 将Jenkins程序目录copy过去源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面 tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
request.getInputStream()只能获取一次的问题 ayaoxinchao request Inputstream
问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重
数据库SQL优化大总结之百万级数据库优化方案 BigBird2012 SQL优化
网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
jsonObject的使用 bijian1013 java json
在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap;
[Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper
Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher， /** * Register a watcher for a particular p
【Scala十三】Scala核心七：部分应用函数 bit1129 scala
何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
Tomcat Error listenerStart 终极大法 ronin47 tomcat
Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码 handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
不用加减符号实现加减法 BrokenDreams 实现
今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。
读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化如果在
CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA
调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！所以验证结果的正确性很重要！！！在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。以下程序在K5000GPU上跑的。
诡异的超长时间GC问题定位 chenchao051 jvm cms GC hbase swap
HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
maven环境快速搭建 daizj 安装 mavne 环境配置
一下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多
PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP
对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView
public function searchWithRelated() { $criteria = new CDbCriteria; $criteria->together = true; //without th
Java集合对象和数组对象的转换 dyy_gusi java集合
在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过
nginx同一主机部署多个应用 geeksun nginx
近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1. 在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts 2. 修改nginx.conf的配置，在http节点增加下面内容设置，用来包含vhosts里的配置文件 #
ubuntu添加admin权限的用户账号 hongtoushizi ubuntu useradd
ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd 使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。顾应该如下操作：
第五章常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginx lua
JSON库在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成
Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timer quartz 定时器
原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时首先继承jav
Linux下df与du两个命令的差别？ pda158 linux
　一、df显示文件系统的使用情况，与du比較，就是更全盘化。　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。　　举比例如以下：　　[root@localhost ~]# df -T 　　Filesystem Type &n
[转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VO android sqlite 反射 Cursor
在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。使用时需要注意：考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中
该学习笔记用到的Employee表 vipbooks oracle sql 工作
这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓

CSS核心功能手册：从熟悉到精通

CSS核心功能代码

文章目录

参考HTML代码

尺寸操作

设置元素尺寸

内边距

外边距

设置默认布局边距

用途和使用场景：

、等元素提供默认的margin和padding值。通过使用* { padding: 0; margin: 0; }，你可以重置所有元素的margin和padding值，确保在不同浏览器中的一致性。

背景设置

背景颜色 (background-color):

背景图像 (background-image):

背景重复 (background-repeat):

背景位置 (background-position):

背景附着 (background-attachment):

背景大小 (background-size):

背景简写属性 (background):

背景图像的多个背景:

背景添加阴影效果：

多重阴影：

文本处理

1. text-align - 文本对齐方式

基本语法：

示例：

2. text-decoration - 文本装饰

示例：

3. text-transform - 文本转换

基本语法：

示例：

4. letter-spacing - 字母间距

基本语法：

示例：

5. word-spacing - 单词间距

基本语法：

示例：

6. line-height - 行高

基本语法：

示例：

7. text-indent - 文本缩进

基本语法：

示例：

8. font - 字体设置

基本语法：

示例：

9. text-shadow - 文本阴影

基本语法：

示例：

10. writing-mode - 写作模式

基本语法：

示例：

11. text-orientation - 文本方向

基本语法：

示例：

元素定位

1. position - 定位属性

基本语法：

示例：

2. top, right, bottom, left - 偏移属性

基本语法：

示例：

CSS核心布局技术

布局的引入

Flexbox (弹性布局)

Flex弹性布局

基本语法：

容器属性：

项目属性：

示例：

2. align-items

基本语法：

可选值：

示例：

3. justify-content

基本语法：

可选值：

示例：

4. flex

基本语法：

、
等元素提供默认的`margin`和`padding`值。通过使用`* { padding: 0; margin: 0; }`，你可以重置所有元素的`margin`和`padding`值，确保在不同浏览器中的一致性。

背景颜色 (`background-color`):

背景图像 (`background-image`):

背景重复 (`background-repeat`):

背景位置 (`background-position`):

背景附着 (`background-attachment`):

背景大小 (`background-size`):

背景简写属性 (`background`):

1. `text-align` - 文本对齐方式

2. `text-decoration` - 文本装饰

3. `text-transform` - 文本转换

4. `letter-spacing` - 字母间距

5. `word-spacing` - 单词间距

6. `line-height` - 行高

7. `text-indent` - 文本缩进

8. `font` - 字体设置

9. `text-shadow` - 文本阴影

10. `writing-mode` - 写作模式

11. `text-orientation` - 文本方向

1. `position` - 定位属性

2. `top`, `right`, `bottom`, `left` - 偏移属性

`translate`, `translateX`, `translateY`

`rotate`

`transform-origin`

`scale`

`skew`

`transform-style: preserve-3d`

`perspective`

3D变换: `translate3d`, `rotate3d`

`@-webkit-keyframes`

`animation-name`

`animation-duration`

`animation-timing-function`

`animation-delay`

`animation-iteration-count`

`animation-direction`