做理财网站,产品网站免费模板下载地址,计算机毕业设计代做网站,wordpress蜘蛛CSS核心功能代码 文章目录 CSS核心功能代码[toc]参考HTML代码尺寸操作设置元素尺寸内边距外边距设置默认布局边距用途和使用场景#xff1a; 背景设置**背景颜色 (background-color)**:**背景图像 (background-image)**:**背景重复 (background-repeat)**:**背景位置 (backgro…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-directionflex-wrapalign-contentflex-flowalign-selfflex-basisflex-shrinkflex-groworder 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, translateYrotatetransform-originscaleskewtransform-style: preserve-3dperspective3D变换: translate3d, rotate3d 动画 (Animation)keyframes基本语法示例多个阶段的动画 -webkit-keyframesanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction 综合项目: 立体旋转相册综合项目2栏布局综合项目三栏布局综合项目CSS动画版轮播图
参考HTML代码
!DOCTYPE html
html langzh-CNheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleexample/titlelink relstylesheet href./index.cssscript src./index.js/script
/head
bodydivh11. CSS/h1p classboxCSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。CSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。CSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。/pspan测试span/span/divdivh12. CSS/h1pCCSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。CSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。CSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。/p/divdivh13. CSS/h1pCSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。CSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。CSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。/p/divdivh14. CSS/h1pCSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。CSSCascading Style Sheets层叠样式表是用于控制HTML元素在网页上如何显示的一种标记语言。它允许开发者为网页创建样式包括布局、颜色、字体和响应式设计等。通过CSS可以将设计和内容分离使得网页更易于维护和访问。CSSCascading 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;
}用途和使用场景 消除浏览器默认样式: 不同浏览器有不同的默认样式。例如某些浏览器可能会为body、h1、p等元素提供默认的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 | length | percentage;
right: auto | length | percentage;
bottom: auto | length | percentage;
left: auto | length | percentage;auto: 自动计算偏移量。length: 指定偏移量例如 50px。percentage: 相对于包含块的百分比偏移。
示例
.element {position: absolute;top: 10%;left: 20%;
}在这个示例中.element 元素被绝对定位其顶部偏移了包含块高度的 10%左侧偏移了包含块宽度的 20%。
这些属性允许你精确控制元素的位置通常与 position 属性一起使用来实现各种布局效果。
CSS核心布局技术
布局的引入
把页面分成一块一块按左中右、上中下等排列
布局分类
两种
固定宽度布局一般宽度为960/1000/1024 px不固定宽度布局主要靠文档流的原理来布局
文档流本来就是自适应的响应式的不需要加额外的样式
第三种布局
响应式布局旧内容新名字意思就是PC上固定宽度手机上不固定宽度也就是一种混合布局
布局的两种思路 从大到小 先定下大局然后完善每个部分的小布局 从小到大 先完成小布局然后组合成大布局
两种均可
新人推荐用第二种因为小的简单老手一般用第一种因为有大局观
布局需要用到什么属性
DIVCSS布局过时说法CSS布局 √mainheaderfotter等等一图流 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 styledisplay: flex; flex-direction: row;divItem 1/divdivItem 2/divdivItem 3/div
/divflex-wrap
该属性定义了项目在主轴上如何换行。
nowrap (default): 不换行。wrap: 换行第一行在上方。wrap-reverse: 换行第一行在下方。
div styledisplay: flex; flex-wrap: wrap;divItem 1/divdivItem 2/divdivItem 3/div
/divalign-content
该属性定义了多轴线的对齐方式。
flex-start: 各行向起点对齐。flex-end: 各行向终点对齐。center: 各行居中对齐。space-between: 与交叉轴两端对齐轴线之间的间隔平均分布。space-around: 轴线之间的间隔平均分布。
div styledisplay: flex; flex-wrap: wrap; align-content: flex-start;divItem 1/divdivItem 2/divdivItem 3/div
/divflex-flow
flex-flow是flex-direction和flex-wrap的简写形式默认值为row nowrap。
div styledisplay: flex; flex-flow: row wrap;divItem 1/divdivItem 2/divdivItem 3/div
/divalign-self
该属性允许默认对齐方式被覆盖用于单个项目。
auto: 继承容器的align-items属性如果没有父容器则为stretch。flex-start: 交叉轴的起点对齐。flex-end: 交叉轴的终点对齐。center: 交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch: 如果项目未设置高度或设为auto将占满整个容器的高度。
div styledisplay: flex;div stylealign-self: flex-start;Item 1/divdivItem 2/divdivItem 3/div
/divflex-basis
该属性定义了在分配多余空间之前项目占据的主轴空间(main size)。它的默认值为auto即项目的本来大小。
div styledisplay: flex;div styleflex-basis: 200px;Item 1/divdivItem 2/divdivItem 3/div
/divflex-shrink
该属性定义了项目的缩小比例默认为1即如果空间不足该项目将缩小。
div styledisplay: flex;div styleflex-shrink: 2;Item 1/divdivItem 2/divdivItem 3/div
/divflex-grow
该属性定义了项目的放大比例默认为0即如果存在剩余空间也不放大。
div styledisplay: flex;div styleflex-grow: 1;Item 1/divdivItem 2/divdivItem 3/div
/divorder
该属性定义了项目的排列顺序。数值越小排列越靠前默认为0。
div styledisplay: flex;div styleorder: 2;Item 1/divdiv styleorder: 1;Item 2/divdiv styleorder: 3;Item 3/div
/divGrid 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;
}p1. display
display 属性用于设置元素的显示模式。在 Grid 布局中它可以设置为 grid 或 inline-grid。
grid: 此值将元素设置为块级网格容器。inline-grid: 此值将元素设置为内联网格容器。
示例:
.container {display: grid;
}在此示例中.container 元素被设置为块级网格容器。
2. grid-template-columns / grid-template-rows
这两个属性用于定义网格的列和行的大小。
track-size: 可以是长度值、百分比、分数值或者 auto。line-name: 自定义线名可以用于更好地定位网格项。
示例:
.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
这两个属性用于指定网格项的位置。
start-line / end-line: 指定网格项的起始和结束位置。
示例:
.item {grid-column: 1 / 3;grid-row: 2 / 4;
}在此示例中.item 元素的列位置从第1列线开始到第3列线结束行位置从第2行线开始到第4行线结束。
4. grid-gap
grid-gap 属性是 row-gap 和 column-gap 的简写它用于设置行和列之间的间隙。
grid-row-gap: 行间隙的大小。grid-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
当你有超出你明确定义的网格的项时这些属性为自动创建的网格轨道设置大小。
track-size: 轨道的大小可以是长度值、百分比、分数值或者 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 styletransform: translate(50px, 50px);Translate me
/divrotate
rotate(angle): 旋转元素。参数是旋转的角度可以是deg, rad, grad 或turn。
div styletransform: rotate(45deg);Rotate me
/divtransform-origin
transform-origin: 改变元素的变换原点。
div styletransform: rotate(45deg); transform-origin: 20% 40%;Change my origin
/divscale
scale(x, y): 缩放元素的大小。
div styletransform: scale(1.5, 1.5);Scale me
/divskew
skew(x-angle, y-angle): 倾斜元素。
div styletransform: skew(30deg, 20deg);Skew me
/divtransform-style: preserve-3d
transform-style: 设置嵌套元素是位于3D空间还是平面。preserve-3d: 表示嵌套元素位于3D空间。
div styletransform-style: preserve-3d;3D space
/divperspective
perspective: 定义3D元素距视点的距离。
div styleperspective: 500px;3D perspective
/div3D变换: translate3d, rotate3d
translate3d(x, y, z): 沿x, y和z轴移动元素。rotate3d(x, y, z, angle): 围绕一个3D向量旋转元素。
div styletransform: translate3d(50px, 50px, 50px);Translate me in 3D
/divdiv styletransform: 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 classelement我是一个会移动的元素/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 classelement我是一个会变大变小的元素/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 langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleWebKit Animation Example/title
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
bodydiv classanimateAnimate me
/div/body
/html在上述示例中我们为 keyframes 规则提供了两个版本 - 一个普通的版本和一个带有 -webkit- 前缀的版本。这样无论用户是使用WebKit浏览器还是其他浏览器动画都能正常运行。但请注意现代浏览器通常不再需要使用这种前缀版本。
animation-name
指定keyframes动画的名称。
div styleanimation-name: mymove;Animate me
/divanimation-duration
指定动画完成一个周期所花费的时间。
div styleanimation-duration: 5s;Animate me
/divanimation-timing-function
指定动画的速度曲线。
div styleanimation-timing-function: ease-in;Animate me
/divanimation-delay
指定动画何时开始。
div styleanimation-delay: 2s;Animate me
/divanimation-iteration-count
指定动画应该播放多少次。
div styleanimation-iteration-count: infinite;Animate me
/divanimation-direction
指定动画是否在下一周期逆向播放。
div styleanimation-direction: alternate;Animate me
/div示例
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleAnimation Example/title
stylekeyframes 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
bodydiv classanimateAnimate me
/div/body
/html在这个示例中我们创建了一个简单的来回移动的动画。动画的名字是myAnimation总时长是3秒会无限次重复播放。
综合项目: 立体旋转相册
立体旋转方块
HTML代码
!DOCTYPE html
html langzh-CNheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleexample/titlelink relstylesheet href./index.cssscript src./index.js/script
/head
body!--/*外层最大容器*/--div classwrap
!-- /*包裹所有元素的容器*/--div classcube!--前面图片 --div classout_frontdiv classpic idout_front /div /div!--后面图片 --div classout_backdiv classpic idout_back /div /div!--左图片 --div classout_leftdiv classpic idout_left /div /divdiv classout_rightdiv classpic idout_right /div /divdiv classout_topdiv classpic idout_top /div /divdiv classout_bottomdiv classpic idout_bottom /div /div!--小正方体 -- span classin_frontdiv classin_pic idin_front /div /spanspan classin_backdiv classin_pic idin_back /div /spanspan classin_leftdiv classin_pic idin_left /div /spanspan classin_rightdiv classin_pic idin_right /div /spanspan classin_topdiv classin_pic idin_top /div /spanspan classin_bottomdiv classin_pic idin_bottom /div /span/div/div
/body
/htmlCSS代码
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 langzh-CNheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleexample/titlelink relstylesheet href./index.cssscript src./index.js/script
/head
bodydiv classcontainerdiv classsidebarp classtitleSidebar content/pdiv classfooter idsidebarSidebar Footer/div/divdiv classmainp classtitle idf_titleMain content/pdiv classfooter idfooterMain Footer/div/div/div
/body
/htmlCSS代码
/*
全局重置:
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代码
!DOCTYPE html
html langzh-CNheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleexample/titlelink relstylesheet href./index.cssscript src./index.js/script
/head
body
!-- 容器元素 --
div classcontainer!-- 左侧栏 --div classleft-sidebarpLeft Sidebar Content/p/div!-- 中间栏 --div classmain-contentpMain Content/p/div!-- 右侧栏 --div classright-sidebarp/p/div
/div
/body
/htmlCSS代码
/* 全局样式重置 */
* {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代码
!DOCTYPE html
html langzh-CNheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleexample/titlelink relstylesheet href./index.cssscript src./index.js/script
/head
bodydiv classsliderdiv classslidesdiv classslide stylebackground-color: red;/divdiv classslide stylebackground-color: green;/divdiv classslide stylebackground-color: blue;/div/div/div/body
/htmlCSS代码
.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
!DOCTYPE html
html langzh-CNheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1titleexample/titlelink relstylesheet href./index.cssscript src./index.js/script
/head
bodydiv classsliderdiv classslidesdiv classslide stylebackground-color: red;/divdiv classslide stylebackground-color: green;/divdiv classslide stylebackground-color: blue;/div/div/div/body
/htmlCSS代码
.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设置了宽度、高度和背景色以便您可以看到动画效果。
这只是一个
