结构
<!DOCTYPE html> document type doctype(文档)
<html> 开始
<head> 开头
<!--网站配置-->
<meta charset="utf8"> 编码设置（utf8 支持中文）
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 为搜索引擎定义关键词:
<meta name="description" content="免费 Web & 编程 教程"> 为网页定义描述内容:
<meta name="author" content="Runoob"> 定义网页作者:
<meta http-equiv="refresh" content="30">每30秒钟刷新当前页面:
<!-- title 设置网页标签 -->
<!-- <title>标签</title> -->
<link rel="shortcut icon" href="图片url">
<title>这是一个带图片的标签</title>
<!-- link 引用CSS -->
<link rel="stylesheet" href="引用的地址">
<!-- script 引用JS -->
<script type="text/javascript" src="引用的地址.js"></script>
<script>
/* js样式 */
</script>
<style>
/* css样式 */
</style>
</head>
<body>
<!-- 页面 -->
</body>
</html>
标签和属性
<h1>1</h1>
······
<h6>6</h6> <!-- h1到h6是6级标题 -->
<br /> <!-- br 换行-->
梁  慧
<!-- 英文空格-->
<!--   中文空格-->
<hr /> <!-- hr 分割线 -->
<p>段落</p>
<!-- p标签不能包含容器标签
可以装的标签： strong em i u del a span img
不可以装的标签：h1~h6 div p -->
<u>下划线</u>
<del>删除线</del>
<strong>字体加粗</strong>
<b>字体加粗</b>
<em>斜体</em>
<i>斜体</i>
<sup>上标</sup>
<sub>下标</sub>
<div>盒子、容器，可以是多行内容</div>
<span>容器、块、区域只能是一行内容</span>
<a href="www.baidu.com" >超链接</a>
<!--href (跳转的网页链接地址)
title (给用户一个提示)
target (打开链接方式){
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
}
#号是一个占位符
hash值 锚点 默认有点击行为 javascript:void(0);阻止a标签的默认点击行为
javascript (执行一段脚本)
alert() (脚本内容) -->
<img src="./fd039245.jpg" alt="波姐出来了！！" height="100">
<!--img 图片标签
src (图片存放地址)
./ (当前目录寻找)
../ (父元素查找)
alt (找不到图片的时候给你文字提示)
height (高度)
width (宽度)
只设置一个值保持原比例 -->
<ul>列表
<li>列表的某一项</li>
</ul>
<ul type="square"></ul>
<ul type="circle"></ul>
<ol type="1" start="1">
<!--ul (无序列表)
ol (有序列表)
type 类型{
square (方框)
circle (空心圆)
}
start (序列从第几项开始)
type (表示序列表示方式) -->
</ol>
<table border="1" cellpadding="10" cellspacing="0" width='100%' height='200px'>
<caption>人物介绍</caption> <!-- caption 表头 -->
<thead> <!-- thead 标题行 -->
<th></th> <!-- 标题单元格 -->
</thead>
<tbody> <!-- 表格的具体数据 -->
<tr> <!-- 行 -->
<td></td> <!-- 单元格 -->
</tr>
</tbody>
</table>
<!-- table 表格
border 边框
colspan="2" 合并行 合并几个单元格
rowspan 合并列
cellpadding="10" 单元格边距
cellspacing="0" 单元格间距 -->
<form action="https://www.baidu.com/s" method="post" name="表单名称" enctype="multipart/form-data">
<!-- form 表单
action 提交的地址
method 提交方式 post或get -->
<label for="username">用户名: <!-- labei 表单前说明 for 绑定id -->
<input type="text" class="name" name="name" pattern="\d{12}" placeholder="请输入" maxLength="10" required oninvalid="setCustom('必须填写');" oninput="setCustom('');"/>
<!-- placeholder 提示
maxLength 最大长度
readonly 只读
required 必填
pattern 输入值的格式。例如 pattern="[0-9]" 输入值必须是 0 与 9 之间的数字
size 字段中的可见字符数 -->
</label>
<!-- type{
text 可以输入所有的文本
number 只能输入数字
password 输入密码
checkbox 多选
radio 单选
reset 重置按钮
submit 提交按钮
button 普通按钮
color 颜色
date 日期
file 选择文件
time 时间
hidden 隐藏域
image 图片
url
month 月
week 周
search 搜索
range 进度条
tel 电话
email 邮箱
} -->
<button type="button">普通按钮</button>
<input type="radio" name="sex" value="man"> 男
<input type="radio" name="sex" value="woman" checked> 女
<!-- checked=true 选择对象
type{
radio 单选
checkbox 多选
} -->
<textarea name="" id="" cols="60" rows="10"></textarea>
<!-- textarea(多行文本输入框)
cols (文本框宽)
rows (文本框高) -->
<select name="school">
<option disabled selected>-- 请选择 --</option>
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
<option value="4">大学</option>
<!-- select 下拉框
option 下拉框选项
selected 默认选择
disabled 禁止选择 -->
</select>
</form>
<!--
按钮中用的value 指的是 按钮上要显示的文本 比如'确定,删除 等等字样'
复选框用的value 指的是 这个复选框的值
单选框用的value 和复选框的作用一样
下拉菜单用的value 是列表中每个子项的值
隐藏域用的value 是框里面显示的内容
-->
CSS样式
默认样式
* {
padding: 0; /* 取消浏览器默认样式 */
margin: 0;
}
a {
text-decoration: none; /* 清除a标签的下划线 */
text-decoration: underline; /* 显示下划线 */
}
ul {
list-style: none; /*取消列表的圆点效果*/
}
input {
outline: none; /* 取消输入框默认边框 */
}
img{
vertical-align: middle; /* 清除图片下边距3px */
}
table{
border-collapse:collapse; /* 合并边框 */
}
盒子模型
.box {
/* top：上 right：右
bottom：下 left： 左 */
width: 200px; /* width: 内容的宽度 */
height: 200px; /* height: 内容的高度 */
border-width: 5px 1px; /* 边框宽度 */
border-color: red yellow; /* 边框颜色 */
border: 10px solid green; /* border: 边框
solid： 实线
dotted：圆点虚线
dashed：方形虚线 */
border-radius: 0px; /* radius 圆角 */
margin: 0px; /* margin外边距 */
margin: 0 auto; /* 左右自动居中 */
margin-left: 50px;
padding: 0px; /* padding内边距 */
box-sizing: border-box; /* 定义盒子不会随着padding和border的而增大 */
transform: translateY(-50%);/* 移动自身Y轴50%距离 */
}
.b {
min-width: 600px; /* 最小宽 */
width: calc(100% - 10px); /* calc()函数 */
}
</style>
鼠标样式
.mouse {
cursor: pointer; /* 鼠标样式：手掌 */
cursor: move; /* 鼠标样式：移动 */
cursor: not-allowed; /* 鼠标样式：禁止 */
pointer-events: none; /* 取消鼠标监听 点透 */
}
布局类
<style>
.a {
float: left; /* float 浮动 */
clear: both; /* 清除浮动 */
}
.b {
visibility：hidden; /* (消失元素)保留空间 */
overflow-x: hidden; /* X轴溢出隐藏 */
overflow: hidden/auto;
/* 可用于清除浮动
overflow溢出效果
hidden溢出部分隐藏
auto溢出部分出现滑轮 */
}
.c {
position: relative;
/* relative 相对布局 (相对父元素)
absolute 绝对布局 (相对于整个页面)
fixed 固定布局 (在你可视范围里)
static 静态布局 (默认布局样式) 没效果
top: 20px;
left: 50px; */
z-index: 1; /* 堆叠层次 */
}
.d {
display: block; /* 块元素 独占一行 */
display: inline; /* 行元素 共享一行 */
display: inline-block; /* 行内块元素 */
/* display: table;
display: table-cell;
vertical-align: middle; */
}
.flex {
display: flex; /* 弹性布局 */
flex-direction: row; /* 布局方向 */
/* row横向 column纵向 */
flex-wrap: wrap/nowrap; /* wrap换行 nowrap不换行 */
justify-content: space-between;
/* justify-content: 设置每一个子元素的排布方式
space-around 没挤满左右有间隙均匀排布
space-between 挤满左右没间隙均匀排布
space-evenly 平均间距
flex-start 最开始
flex-end 最右边
center 最中间 */
align-items: center; /* 垂直居中 */
align-items: baseline; /* 基线对齐 */
/* 项目属性 */
item{
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-grow: 0;
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-shrink: 1;
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex-basis: <length> | auto; /* default auto */
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex: auto; // 分配剩余空间或缩小
flex: none; // 固定空间
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
}
.f {
text-align: center; /* 文字或图片水平排布方式 center 居中 */
line-height: 36px; /* 高度=行高 让文本垂直居中 */
}
</style>
字体类
<style>
.header {
font-size: 13px !important; /* 字体大小 */
/* !important 使用权限最大 */
font-family: "Times New Roman"; /* 字体 */
letter-spacing: 0.5em; /* 字体间距 0.5em (0.5个中文大小) */
text-indent: 2em; /* 文本缩进 */
font-weight: 100;
/* 字体粗细
bold 粗体
bolder 更粗
lighter 更细 */
color: white; /*颜色*/
white-space: nowrap; /* 文本不换行 */
text-overflow: ellipsis; /* 隐藏文字部分变成 ··· */
font-variant: normal; /* 小型大写字母 */
}
</style>
动画
<style>
.animation {
/* animation: 绑定名称 动画时间 速度曲线 延迟时间 循环次数 是否反向
绑定到 @keyframes 名称
速度曲线 linear (线性过渡) (0.0,0.0,1.0,1.0)
ease (平滑过渡) (0.25,0.1,0.25,1.0)
ease-in (由慢到快) (0.42,0,1.0,1.0)
ease-out (由快到慢) (0,0,0.58,1.0)
ease-in-out (加速在减速) (0.42,0,0.58,1.0)
cubic-bezIEr( , , ,) (4个数值需在[0,1]区间) */
infinite 无限循环
normal 正常方向
alternate 正常与反向交替
animation: a 1s infinite(次数);
animation-delay: 0s (延迟播放);
}
@keyframes a {
0% {}
50% {}
100% {}
}
/* (过渡动画)
transition: 改变的属性 时间 速度曲线 延迟时间
all 所有属性
transition: all 2s linear 3s; */
perspective: 1000px; /* 视距 */
</style>
音视频
<style>
/* video 视频标签
autoplay 自动播放
loop 循环播放
controls 控制器
muted 静音
poster 指定第一张图
<video width="320" height="240"
poster="图" controls autoplay/loop/muted>
<source src="movie-mp4" type="video/mp4" */
/* audio 音频标签
controls资源
<audio controls>
<source src="horse.mp3"> */
</style>
svg画图
<svg>
<!-- rect (矩形)
circle (圆)
ellipse (椭圆)
line (直线)
polygon (多变形)
fill (填充色)
stroke:red (颜色)
stroke-width: (边框线粗) -->
</svg>
选择器
.a { /* class选择 */
color: red;
}
#p1 { /* id选择 */
font-size: 30px;
color: green;
}
.a .b { /* 后代选择 a元素内的所有b元素 */
color: blue;
}
.a>.b { /* 子代选择 >包含子对象，不包含孙子辈 */
color: pink;
}
div.b { /* 交集选择 */
color: yellow;
}
p, /* 组合选择 所有选择元素 */
div,
span {
color: red;
}
.a div:nth-child(n) { /* 选择第n个 */
color: green;
}
p:nth-child(odd){ 选择奇数 }
p:nth-child(even){ 选择偶数 }
使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。
p:nth-child(3n+0){ 选中3的倍数 }
.li + .li{} /* 相邻兄弟选择器 */
.li ~ .li{} /* 后续兄弟选择器 */
form input[type='text'] { /* 属性选择 */
background-color: red;
}
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式。
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素
:only-child p:only-child 选择每个p元素是其父级的唯一子元素
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素
:last-child p:last-child 选择每个p元素是其父级的最后一个子级
// child强调某个父元素的第一个子元素，而:of-type强调的是特定类型的第一个，不必是第一个子元素
*:not(p) 选择每个并非p元素的元素
/* 标签选择器 选中的是 ‘共性’
.id选择器 # id是唯一的 选中的是‘特性’
.类选择器 . 类名 选中的也是共性 可以有多个
通配符选择器 * 在以后工作中不要用这个
加 # 号用id 加 . 用class 类名自己取 */
a:link { /*没有被访问的a标签的颜色*/
color: green;
}
a:visited { /*访问过后的a标签的颜色*/
color: yellow;
}
a:hover { /*鼠标悬停的时候a标签的颜色*/
color: red;
}
a:active { /* 点击瞬间的颜色 */
color: blue;
}
.a:after .a:before { /* 添加伪元素 */
content: " ";
}
背景
background-color: red; /* background-color: 背景颜色 */
background-image: url(./); /* 背景图片 (图片地址) */
background-size: cover; /* 背景图大小(cover铺满 50%设置大小) */
background-repeat: no-repeat;/* 图片不重复 */
background-position: center;/* 背景居中 */
/* 背景参数分别是 颜色(color) 图片url(image) 是否重复(repeat) 是否跟随页面滚动(attachment) 图像的位置(position)
/ 大小(size) 图像定位区域(origin) 图像绘制区域(clip) */
background: #000000 url(/static/icon.png) no-repeat scroll center center
/ cover content-box content-box;
渐变背景
线性渐变
linear-gradient(to right || deg, start-color, ..., last-color)
.linear{
background: linear-gradient(to top, red, blue);
background: linear-gradient(135deg, #ea5c54 0%, #bb6dec 100%);
background: gradient(linear, left top, right bottom, color-stop(30%, #ea5c54), color-stop(100%, #bb6dec));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ea5c54', endColorstr='#bb6dec', GradientType=1);
}
径向渐变
radial-gradient(shape size at position, start-color, ..., last-color)
- shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。
- size 定义渐变的大小，可能值：
- farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
- closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
- closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
- farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
- position 位置 可设置百分比、单词
.radial {
width: 100px;
height: 100px;
background: -moz-radial-gradient(bottom left, #fff 0%, #fff 60%, green 60%, green 100%);
}
div {
width: 300px;
height: 300px;
background:
radial-gradient(red 10px,transparent)
top left,
linear-gradient(-135deg, transparent 0px, deeppink 0)
top right,
linear-gradient(-45deg, transparent 50px, deeppink 0)
bottom right,
linear-gradient(45deg, transparent 15px, deeppink 0)
bottom left;
background-size: 40% 40%;
background-repeat: no-repeat;
}
渐变文字
.渐变文字{
background: -webkit-linear-gradient(color...); //为文本元素提供渐变背景。
webkit-text-fill-color: transparent; //使用透明颜色填充文本。
webkit-background-clip: text; //用文本剪辑背景，用渐变背景作颜色填充文本。
}
滑动条
/* 浏览器内核 -webkit- */
.contanter::-webkit-scrollbar {
width: 5px;
height: 1px;
}
.contanter::-webkit-scrollbar-thumb {
background-color: white;
border-radius: 5px;
}
.contanter::-webkit-scrollbar-track {
background-color: black;
}
<!--
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 020px; -->
/* decoration (装饰) */
/* transform:rotate(45deg);
transform (转换) rotate (旋转) deg (角度)
scale (缩放)
skew (拉伸)
translate (移动) */
/* display：none(隐藏元素) 不占空间
display: block;(显示隐藏的元素) */
/* transparent (透明色)
opacity: 0.5; (透明度)
rgba (101,101,101,0.5)
三原色 (R红色 G绿色 B蓝色 A透明度)
文字阴影
text-shadow: 1px 1px 3px rgba (0, 0, 0, 0.3)
盒子阴影
box-shadow:水平阴影0px 垂直阴影0px 模糊度2px 颜色
drop-shadow 语法几乎相同，但它产生的阴影不同。这是因为filter属性实际上是SVG过滤器的 CSS 挂钩。drop-shadow使用 SVG 高斯模糊，这是一种与box-shadow`不同的模糊算法。
两者之间还有一些其区别，drop-shadow有一个超能力：它能勾勒出元素的形状。
例如，如果我们在具有透明和不透明像素的图像上使用它，阴影将只对不透明像素起作用，也就是能勾勒出物体的轮廓：
*/
<!-- 单位:
vw 1vw = 视口宽度的1%
vh 1vh = 视口高度的1%
vmin 选取vw和vh中最小的那个
vmax 选取vw和vh中最大的那个
px 像素
em 相对长度 -->
<!-- calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，
例如：width: calc(100% - 10px); -->
所有浏览器都支持 vertical-align 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法
<!-- vertical-align 属性设置元素的垂直对齐方式。
描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。 -->
</style>
新学样式
/* 缩放 变焦 */
zoom{
zoom: 1;
}
/* 禁止复制 */
{
user-select: none;
}
{
object-fit: fill | contain | cover | none | scale-down;
object-position: ;
}
{
/* 更改浏览器的默认配色
normal：示意元素未指定任何配色计划，因而应应用浏览器的默认配色计划出现。
light：示意能够应用操作系统亮色配色计划渲染元素。
dark：示意能够应用操作系统深色配色计划渲染元素。 */
color-scheme: dark;
/* 浏览器大多不支持。 */
appearance: none;
/* 浏览器大多不支持。 */
accent-color: #D68100;
/* 设置宽高比 */
aspect-ratio: 16 / 4;
/* clip-path 裁剪，可以裁剪各种形状 */
clip-path: ellipse(45% 30% at 50% 50%); /* 椭圆X轴半径 Y轴半径 at 圆心位置 */
clip-path: circle(30% at 150px 120px); /* 圆半径 at 圆心位置 */
clip-path: inset(0 10px 20px 0 round 5px); /* 矩形 round 圆角*/
clip-path: polygon(50% 0, 0 100%, 100% 100%); /* 多边形 */
}
{
/* 边框图片 */
border: 10px solid transparent;
border-image: url(border.png) 30 round | stretch | repeat;
stretch 拉伸图像来填充区域
repeat 平铺（重复）图像来填充区域。
round
}
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
blur(px)
对图像应用模糊效果。较大的值将产生更多的模糊。
brightness(%)
调整图像的亮度。
0％ 将使图像完全变黑。
默认值是 100％，代表原始图像。
值超过 100％ 将提供更明亮的结果。
contrast(%)
调整图像的对比度。
0％ 将使图像完全变黑。
默认值是 100％，代表原始图像。
超过 100％ 的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)
对图像应用阴影效果。
可能的值：
h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。
v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。
blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。
spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。
注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。
color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。
这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果：
filter: drop-shadow(8px 8px 10px red);
提示：这个滤镜类似 box-shadow 属性。
grayscale(%)
将图像转换为灰阶。
0% (0) 是默认值，代表原始图像。
100％ 将使图像完全变灰（用于黑白图像）。
注释：不允许负值。
hue-rotate(deg)
在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。
注释：最大值是 360deg。
invert(%)
反转图像中的样本。
0% (0) 是默认值，代表原始图像。
100％将使图像完全反转。
注释：不允许负值。
opacity(%)
设置图像的不透明度级别。opacity-level 描述了透明度级别，其中：
0% 为完全透明。
100% (1) 是默认值，代表原始图像（不透明）。
注释：不允许负值。
提示：这个滤镜类似 opacity 属性。
saturate(%)
设置图像的饱和度。
0% (0) will make the image completely un-saturated.
100% is default and represents the original image.
Values over 100% provides super-saturated results.
注释：不允许负值。
sepia(%)
将图像转换为棕褐色。
0% (0) 是默认值，代表原始图像。
100％ 将使图像完全变为棕褐色。
注释：不允许负值。
在手机显示比例
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
viewport ： 表示的是显示窗口；
width=device-width： 表示的是显示窗口的宽度等于设备的屏幕宽度；
initial-scale=1.0 ： 即初始的缩放比例为1.0；
minimum-scale ： 表示的是允许缩放的最小比例
maximum ： 表示的是允许缩放的最大比例
user-scalable ： 表示是否允许用户进行页面的缩放，值可以为yes或者no
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
