CSS3 教案（2024版）

CSS3 简介

CSS 原名层叠样式表，在前端开发充当画笔的角色，通过它我们可以自由更改HTML样式，创造出优美的前端页面。

CSS 学习建议

CSS 内容较多，本次教学并不能将往CSS 全部内容，我将采用由常用到不常用，由简单到困难的顺序为大家开展教学。希望大家平时写代码的时候遇见忘记的CSS 属性先自行查看 MON 文档（如果是CSDN上的文档注意创作时间，避免教程版本过旧问题），如果看不懂可以上B 站上搜索相应的CSS 属性介绍（B站视频大都讲的详细易懂，但是通过视频学习会比较浪费时间，建议先看文档，如有不懂再搜索相应视频进行学习），如果还是不会大可拷打学长学姐，如果他们也不会就狠狠嘲讽他。最后，学习的时候不能光看，光听，要实打实的去写一下，这样防止一学就会，一写就废。

CSS内联方法

行内CSS

<p style="color:red">CSS</p>

直接写在标签内部，直观简洁

行外CSS

<style>
    #pcss {
      margin-top: 10px;
      margin-bottom: 10px;
    }
</style>

将CSS集中在style标签中，是运用最广泛的写法

外联CSS

<head>
  <link rel="stylesheet" href="index.css" />
</head>

可以在head中通过link标签引入其他人或自己写的CSS文件，极大简化你的代码格式

选择器

选择器的作用是将行外CSS绑定到对应的元素上，有多种选择形式，不同的应用场景适用不同的选择器，合理运用选择器可以极大简化你CSS的长度

类选择器

类选择器又名class选择器，它可以通过HTML中的class属性绑定多个元素。在CSS中类选择器以 . 表示。

<body>
<div class="redBox"></div>
<div class="redBox blackBorder"></div>
</body>

<style>
.redBox{
	height: 100px;
	width: 100px;
	background-color: red;
}
.blackBorder{
	border: 5px solid rgb(0, 0, 0);
	width: 200px
}
</style>

一个class不仅可以多次绑定，一个元素也可以绑定多个class。如果多个class中有冲突的地方，采用最后加载的class，即class属性中靠后的优先级较高。

ID选择器

ID选择器可以为特定id的HTML元素指定特定的样式，与类选择器不同的是id只能有一个，同时它的优先级高于类选择器。在CSS中ID选择器以“#”开头。写CSS时使用较少，多用于之后JS查找元素。

<body>
<div id="redBox"></div>
</body>

<style>
#redBox{
		height: 100px;
		width: 100px;
		background-color: red;
}
</style>

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

元素选择器

元素选择器可以将CSS绑定到HTML中某个标签上，它没有开头，直接用标签名进行绑定

<style>
p {
	  font-weight: 900;
	  text-align: center;
}
</style>

此句表示选中所有标签名为 p 的标签样式

组合选择器

组合选择器可以通过自己随意组合让CSS代码更高效、更精准的绑定。

（1）并列

在样式表中有很多具有相同样式的元素，使用并列可以极大缩减代码长度。

<style>
h1,h2,p
{
    color:green;
}
/*等同于*/
h1 {
    color:green;
}
h2 {
    color:green;
}
p {
    color:green;
}
</style>

（2）嵌套

嵌套可能适用于选择器内部的选择器的样式。

<style>
/*为所有 class="marked" 元素内的 p 元素指定这个样式*/
.marked p
{
    color:white;
}
/*为所有 class="marked" 的 p 元素指定这个样式*/
p.marked{
    text-decoration:underline;
}
/*选择<div>元素中所有直接子元素 <p> */
div>p
{
  background-color:yellow;
}
/*选取了所有位于 <div> 元素后的第一个 <p> 元素*/
div+p
{
  background-color:yellow;
}
/*选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>*/
div~p
{
  background-color:yellow;
}
</style>

通配符选择器

表示选中所有标签的样式，一般用于去除默认样式，在CSS中用 * 表示。

<style>
* {
  margin: 0;
  padding: 0;
}
</style>

CSS样式优先级及覆盖问题

上述CSS选择器遵循一定的优先级原则，顺序是通配符选择器(*)<类型选择器（h1）和伪元素<类选择器（.header）<ID选择器（#box）< 内联样式 (style='')<! important
而同级别下的css样式重复会发生什么呢？如：

<style>
.yellow {
    background: yellow;
}
 
.red {
    background: red;
}
#blue{
		background: blue;
}
</style>
<body>
<div class="red yellow" id="blue" style="height:200px; width: 200px;"><div>
</body>

这个区域渲染出来是什么颜色呢？红色？黄色？

答案是红色

通俗来讲在css文件中，权重相等时，谁声明在后面，那么最终就应用谁

大小

CSS大小调整最常用的就是height和width，height为高，width为宽

<style>
      .box {
        width: 10rem;
        height: 10rem;
        background-color: orange;
      }
</style>

 <body>
    <div class="box"></div>
 </body>

颜色

CSS广泛应用的color有三种，分别是

常用名red、black之类的。
RGBA，指的是Red，Green，Blue 三原色，按255等分······总之就是表示颜色的，最后再加一个透明度参数，范围为0~1，0为完全透明，1为不透明
HEX，两位十六进制数，即六位十六进制来表示颜色，用#开头

 color: red;
 color: RGBA(150, 50, 50, 0.5);
 color: #000fff;

z-index-层级

div{
  z-index: 1;
}

z-index用于定义元素层级，其值为一个整数，正负零（尽量避免用负数），数字大的元素会覆盖在数字小的元素上。你可以把它想象成图层的概念，数字越大，越在上面。

z-index属性只能在设置了position: relative | absolute | fixed的元素和父元素设置了 display: flex属性的子元素中起作用，在其他元素中是不作用的。

opacity-透明度

div {
  opacity: 0.5;
}

opacity用于更改元素的透明度，值的范围在 0-1 之间，opacity 属性会使整个元素均变得透明，使用时慎重

阴影

div {
  box-shadow: 2px 2px 7px black;
}

box-shadow 为简写属性，第一个值为 x 轴偏移量，影响横向的阴影，第二个值为 y 轴偏移量，影响纵向的阴影，第三个值为虚化程度，影响阴影虚化，第四个值为颜色一般而言，虚化程度要比偏移量值大，实际情况自行调整

常用单位

px是常用的绝对大小单位，表示一个像素，其实际大小难以描述，多尝试几个值便可

%是常用的相对大小单位，在不同的情况的相对的对象不同，多数情况与父级元素属性大小有关 vh和wh是基于视窗长宽的相对单位，wh是宽百分比，vh是长百分比

<style>
.box {
  height: 50vh;
  width: 50wh;
  background-color: red
}
</style>

rem 也是一种相对单位，但它相对的是根元素HTML的大小，做适配的时候较为常用

 <style>
      html {
      /*设置根元素大小，1rem = 12px*/
        font-size: 20px;
      }
      .box {
        width: 10rem;
        height: 10rem;
        background-color: orange;
      }
  </style>
  <body>
    <div class="box"></div>
  </body>

deg 是旋转单位，360 deg = 360° ，这里不再赘述

Url-统一资源定位符

url可分为绝对路径和相对路径，绝对路径便是你们经常看见的网址，这里主要介绍一下相对路径

空白开头

它指向的是当前文件同一级目录下的路径

 src="aes.js"

‘ / ’开头

指的是项目根目录下的路径

 src="/static/aes.js"

‘ ./ ‘开头

指的是当前文件父元素的路径。与第一种方式一样

src="./aes.js"

’ ../ ‘开头

指的是当前文件父元素的路径

src="../static/aes.js"

‘ @/ ’开头

@/ 是webpack设置的路径别名，代表什么路径，要看webpack的build文件夹下webpack.base.conf.js里面对于@是如何配置的。一般来说指的是上一级目录，与4的用法一致

src="../static/aes.js"

Background-背景

1.background-color-背景颜色

<style>
body
{
	background-color:#b0c4de;
}
</style>

2.background

这是一个简写属性，可以将上述的设置按照一定顺序写入这里，写入顺序是

background-color
background-image
background-repeat
background-attachment
background-position

<style>
body 
{
background:#ffffff url('your_image_url') no-repeat fixed right top;
}
</style>

文本

1.text-align-文本对齐

<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>

<body>
<h1>Center</h1>
<h2>Left</h2>
<h3>Right</h3>
</body>

注意，对齐是以父元素为基准

2.text-decoration-文本修饰

常用的underline 下划线、overline标头线、line-through删除线

<body>
<h1 style="text-decoration:overline">标头线</h1>
<h1 style="text-decoration:underline">下划线</h1>
<h1 style="text-decoration:line-through">删除线</h1>
</body>

3.text-indent-首行缩进

设置每段文本第一行的缩进距离

p {text-indent:50px;}

4.font-family-字体

设置字体格式，可以多设置几个值，部分浏览器不支持第一个字体的时候会自动加载第二个字体

p{font-family:"宋体", Times, serif;}

5.font-size-字体大小

设置字体大小

p {font-size:14px;}

6.font-weight-字体粗细

有normal、lighter、bold等值，也支持500、600、700······自定义粗细

p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

7.text-overflow-文本溢出

设置当文本溢出容器所表现的样式，常用的有ellipsis用省略号代替、clip剪切剩余部分

<body>
		<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
		<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>
<style>
.test
{
	white-space:nowrap; 
	width:20px; 
	overflow:hidden; 
	border:1px solid #000000;
}	
</style>

Border-边框

1.border-radius-圆角

设置边框圆角，可接受1~4个参数，1个参数则设置4个圆角半径，4个参数则是分别设置四个圆角半径，顺序是从左上开始顺时针顺序

div.ellipse
{
border-radius: 15px 50px 30px 5px；
}
div.circul
{
border-radius: 5px；
}

2.border-color-边框颜色

设置边框颜色

border-color:red

3.border-width-边框宽度

设置边框宽度，接收thin细、medium中、thick粗和自定义大小，顺序类似于redius，从上边框开始

border-width: thin medium thick 10px;
border-width: 10px;

4.border-style-边框样式

border-style有很多值，这里介绍常用的几个，none无，solid实线，hidden隐藏

border-style:none;
border-style:solid;
border-style:hidden;

5.border-简写属性

border可将上述属性写在一起，顺序是

border-width
border-style
border-color

border: medium solid green;

Box-Model-盒子模型

所有的HTML元素都可以看作一个盒子，而CSS Box-Model本质上也是个盒子，它包括margin外边距，border边框，padding内边距，content内容

<style>
.box{
		padding: 10px;
		background-color: antiquewhite;
		border: 5px solid black;
		margin: 20px;
}
</style>
<body>
    <p class="box">Box-Model</p>
</body>

margin、padding、border都可以接收四个参数，分别代表上、右、下、左的属性

Display-显示

这里介绍display的五种属性：inline内联、block块级、none无、flex弹性盒、grid网格。重点介绍flex布局和grid布局。（不同的HTML标签有不同的display默认值，这里不再赘述，有需求可以自行查阅读）

1.inline-内联

内联元素可以和相邻的内联元素在同一行

<style>
li{display:inline;}
</style>
<body>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>
</body>

2.block-块元素

块元素表现为独占一行

<style>
span
{
	display:block;
}
</style>
<body>
<span>block</span>
<span>元素</span>
</body>

3.none-无

表现为浏览器不加载

4.flex-弹性盒

flex布局能够解决多数列或者行排列需求，弹性元素之间z-index属性被屏蔽。它的”弹性“来自于它可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。而且子元素的水平对齐和垂直对齐都能很方便的进行操控。

（1）flex-direction

flex-direction用以定义主轴方向，即内部子元素的排列方向，包括四个值，row自左往右，row-reverse自右往左，column自上往下，column-reverse自下往上。

<style>
.box{
    height: 100px;
    width: 100px;
    background-color: antiquewhite;
    margin: 20px;
}
</style>

<body>
    <div style="display: flex; flex-direction: column;">
        <h1>这里元素是垂直排列</h1>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div style="display: flex; flex-direction: row;">
        <h1>这里元素是水平排列</h1>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

（2）justify-content

justify-content用以定义弹性元素在主轴上的排列方式，有center居中排列，flex-start从主轴开始处排列，flex-end从主轴结束处排列，space-around均分间隔排列等值。

<style>
.box{
    height: 100px;
    width: 100px;
    background-color: antiquewhite;
    margin: 20px;
}
</style>

<body>
    <h1>center</h1>
    <div style="display: flex; flex-direction: row; justify-content: center;">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>space-around</h1>
    <div style="display: flex; flex-direction: row; justify-content: space-around;">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>flex-end</h1>
    <div style="display: flex; flex-direction: row; justify-content: flex-end;">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>flex-start</h1>
    <div style="display: flex; flex-direction: row; justify-content: flex-start;">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

（3）align-items

align-items用以定义弹性元素在交叉轴上的排列方式，有center居中排列，start在交叉轴开始处排列，end在交叉轴结束处排列等值

<style>
.box{
    height: 100px;
    width: 100px;
    background-color: antiquewhite;
    margin: 20px;
}
.background{
    display: flex;
    height: 500px;
    flex-direction: row;
    background-color: aqua;
    justify-content: space-around;
}
</style>
<body>
    <h1>center</h1>
    <div class="background" style="align-items: center;">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>start</h1>
    <div class="background" style="align-items: start;">
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <h1>end</h1>
    <div class="background" style="align-items: end;">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>

4.grid-网格

grid是二维布局，可以用来划分页面，网格元素有z-index属性。

当一个元素的display值为grid时，该元素被称为网格容器，其子元素被称为网格元素。

（1）grid-template-columns

grid-template-columns代表的是列宽度，需要几列就输入几个值，如果宽度相同可以考虑用auto

（2）grid-template-rows

grid-template-rows 代表行高度，大体同grid-template-columns

（3）gap

gap代表每个网格间的间距

<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 200px;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>

**<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>
</body>**

4.justify-content align-content

二者用法大体和flex中相同

Position-定位

1.fixed

相对于浏览器窗口是固定位置，不会随窗口滚动而滚动

<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
<body>
<p class="pos_fixed">固定位置</p>
<div style="height:1000px;width:200px"></div>
</body>

2.relative

使用relative定位时相对的是元素的正常位置，但移动过后它原本占的位置不变，使用top、left等元素移动位置

h2
{
    position:relative;
    top:50px;
}

3.absolute

absolute相对的是最近的position属性非默认值（static）的父级元素，如果没有已知定位的父级元素则它的定位是相对于<html>

<style>
h2
{
	position:absolute;
	left:100px;
	top:150px;
}
</style>

<body>
<h2>这是一个绝对定位了的标题</h2>
</body>

Overflow-溢出

在多数情况下我们写的子元素会超出父元素容器产生溢出情况，这时候就可以使用overflow来设置相应的显示模式。visible内容会超出父容器（默认值），hidden超出父容器的部分会被裁剪至不可见，scroll显示滚动条，可查看被裁剪部分，auto如果内容被裁剪则显示滚动条

<style>
div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: auto;
}
</style>

<body>
<div class="overflowTest">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>
</body>

常见对齐

1.水平居中

（1）margin:auto

使用margin:auto元素会自动调整左右外边距，达到水平居中效果

<style>
.center {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

<body>
<div class="center">
  <p>水平居中</p>
</div>
</body>

（2）text-align:center

用于文本居中对齐

<style>
.center {
    margin: auto;
    text-align: center;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>

<body>
<div class="center">
  <p>水平居中</p>
</div>
</body>

2.垂直居中

（1）padding

用padding代替height使上下内边距相同，达到垂直居中

<style>
.center {
    padding: 70px 0px;
    border: 3px solid green;
}
</style>

<body>
<div class="center">
  <p>我是垂直居中的。</p>
</div>
</body>

（2）position

<style>
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
}
</style>

<body>
<div class="center">
  <p>我是垂直居中的。</p>
</div>
</body>

3.子元素居中

（1）flex

<body>
<div class="parent">
  <div class="child">Centered Content</div>
</div>
</body>

<style>
.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 仅为示例设置父容器高度 */
}
</style>

（2）grid

<body>
<div class="parent">
  <div class="child">Centered Content</div>
</div>
</body>

<style>
.parent {
  display: grid;
  place-items: center;
  height: 200px; /* 仅为示例设置父容器高度 */
}
</style>

伪类

伪类常用于添加一些选择器的通用效果，CSS中在选择器后加一个:再加伪类名称可用于表伪类，伪类是在特殊情况下才会触发的样式

1.:hover

当鼠标移至元素上时所添加的类

<style>
.box{
		background-color: antiquewhite;
		width: 100px;
		height: 100px;
}
.box:hover{
		width: 200px;
}
</style>

<body>
    <div class="box"></div>
</body>

2.:active

当鼠标点击元素的时候所添加的类

<style>
.box{
		background-color: antiquewhite;
		width: 100px;
		height: 100px;
}
.box:active{
		width: 200px;
}
</style>

<body>
    <div class="box"></div>
</body>

3.:focus

当元素获得焦点（鼠标点击）后所添加的类（多用于表单）

<style>
.box{
		background-color: antiquewhite;
		width: 100px;
		height: 100px;
}
.box:active{
		width: 200px;
}
</style>

<body>
    <div class="box"></div>
</body>

注意：hover，focus，active则必须按照focus–hover–active这个顺序书写，一旦出现排列错误就很有可能形成覆盖，导致其中某个样式无法显示

<style>
a:focus{
	background-color:red;
}
a:hover {
	background-color:yellow;
}   
a:active{
	background-color:black;
}
</style>
<body>
<a href="#">CSS伪类顺序</a>
</body>

伪元素

这里介绍两个常用的伪元素，:before和:after，:before可以在选择的元素前添加内容，:after可以在选中的元素后添加内容

<style>
h1:before {
content:'这是添加的before内容';
}
h1:after {
content:'这是添加的after内容';
}
</style>

<body>
<h1>这是原内容</h1>
</body>

动画效果

Transform-转换

transform是一个简写属性，通过它我们可以实现元素的translate-位移、rotate-旋转、scale-缩放、skew-x、-y倾斜

<style>
.box{
		background-color: antiquewhite;
		width: 100px;
		height: 100px;
}
.box:hover{
		transform: translate(30px,20px) rotate(30deg) scale(2);
}
</style>

<body>
    <div class="box"></div>
</body>

Transition-过渡

transition其实是一个简写属性，它的简写顺序是 transition-property、transition-duration、transition-timing-function 和 transition-delay（附赠链接，感兴趣可以自己深入了解一下）。大部分是搭配伪类使用。常用写法为需要变化的CSS属性名 + 变化时间 + 延迟时间（延时时间前需加一个.），多个转换用,隔开

<style>
.box{
		background-color: antiquewhite;
		width: 100px;
		height: 100px;
		transition: width 2s .2s, transform 2s;
}
.box:hover{
		width: 200px;
		transform: translate(30px,20px) rotate(30deg);
}
</style>

<body>
    <div class="box"></div>
</body>

@keyframes animation-关键帧动画

@keyframes可以创建关键帧动画，通过百分数去打下一个关键帧，创建完动画后通过animation调用

<style>
.box{
		background-color: antiquewhite;
		width: 100px;
		height: 100px;
		animation: myfirst 5s;
}
@keyframes myfirst{
from {
    background-color: brown;
}
50% {
    background-color: yellow;
}
to {
    background-color: antiquewhite;
}
}
</style>

<body>
    <div class="box"></div>
</body>

@media-多媒体查询

多媒体查询（Media queries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序时。媒体查询的功能很多，这里主要介绍根据视窗大小做一些响应式网页，感兴趣的可以自行了解。

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指定样式效果。

常用的媒体查询的语法大致是@media + 查询事务 + and + （条件）

/*这里查询的是屏幕大小，条件是宽度小于等于480px，若匹配，则执行后面的CSS*/
@media screen and (max-width: 480px) {}

简单示例

<style>
body {
    background-color: pink;
}

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
</style>

<body>

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

</body>

不常用

background-image-背景图片

<style>
body 
{
	background-image:url('image_url');
}
</style>

background-image相关设置

（1）background-repeat

设置背景图片是否重复，默认值是no-repeat不重复，常用值有repeat重复，repeat-xx方向重复，repeat-yy方向重复。

<style>
.no-repeat
{
background-image:url('image_url');
}
.repeat
{
background-image:url('image_url');
background-repeat:repeat;
}
.repeat-x
{
background-image:url('image_url');
background-repeat:repeat-x;
}
.repeat-y
{
background-image:url('image_url');
background-repeat:repeat-y;
}
</style>

（2）background-position

设置背景位置第一个值为x方向有left、right、center三值，第二个值为y方向有top、center、bottom三值。

<style>
.no-repeat
{
background-image:url('gradient2.png');
background-position:center center;
}
</style>

（3）background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动，有scroll随页面滚动滚动（默认值），fixed不随页面滚动而滚动，local随元素滚动而滚动，这里介绍一下fixed

<style>
body 
{
background-image:url('./smiley.gif');
background-attachment:fixed;
}
</style>
<body>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
<p>背景图片是固定的。尝试向下滚动页面。</p>
</body>