20.嵌套列表
列表之间可以相互嵌套形成多层级列表
例题：
<ul>
<li>
辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ul>
</li>
</ul>
例题：
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>辽宁省</dt>
<dd>沈阳</dd>
<dd>大连</dd>
<dd>丹东</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>济南</dd>
<dd>青岛</dd>
<dd>烟台</dd>
</dl>
</dd>
<dt>美国</dt>
<dd>洛杉矶</dd>
<dd>纽约</dd>
</dl>
练习：
<h1>好美味小吃</h1>
<ul>
<li>
小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
</ul>
<ul>
<li>
卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
</ul>
<ul>
<li>
套餐类
<ul>
<li>卤面筋饭</li>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪舌头饭</li>
</ul>
</li>
</ul>
<ul>
<li>
炖膻类
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心枸杞</li>
<li>羊肉枸杞</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
<p><em>亲，20元以上可送餐哦！！</em></p>
21.表格标签
<table> ：表格的最外层容器
<tr> ：定义表格行
<th> :定义表头
<td> ：定义表格单元
<caption> ：定义表格标题
注：他们之间是有嵌套关系的，要符合嵌套规范
语义化标签：<tHead>、<tBody>、<tFood>
注：在一个table中，tBody是可以出现多次的，但是tHead、tfood只能出现一次
例题：
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022年1月1日</td>
<td>🌤</td>
<td>天气晴朗适合出行</td>
</tr>
<tr>
<td>2022年1月2日</td>
<td>⛅</td>
<td>天气清爽适合出行</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
22.表格属性
<border> :表格边框
<cellpadding> :单元格内的空间
<cellspacing> :单元格之间的空间
<rowspan> :合并行
<colspan> :合并列
<align> :左右对齐方式 left、center、right
<valign> :上下对齐方式 top、middle、bottom
例题：
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<thead>
<tr align="right">
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr valign="top" >
<td rowspan="2">2022年1月1日</td>
<td>白天</td>
<td>🌤</td>
<td>天气晴朗适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td>🌤</td>
<td>天气晴朗适合出行</td>
</tr>
<tr valign="bottom">
<td rowspan="2">2022年1月2日</td>
<td>白天</td>
<td>⛅</td>
<td>天气清爽适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td>⛅</td>
<td>天气清爽适合出行</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
23.表单input标签
<form> :表单的最外层容器
<input> :标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等
input（单标签）标签有一个type属性，决定控件的样式
例题:
<form action="地址">
<h2>输入框:</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框:</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框:</h2>
<input type="checkbox" checked>苹果
<input type="checkbox" checked>香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框:</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
24.表单相关标签
<textarea> ：多行文本框
<select>、<option> ：下拉菜单
<label> ：辅助表单
一些常见的属性：checked、disabled、name、for……
例题：
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select size="1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select multiple>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<input type="file" multiple>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
25.表格表单组合
例题：
<form>
<table>
<table border="1" cellpadding="30">
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名：</td>
<td><input type="text "placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</table>
</table>
</form>
26.< div >与< span >
div（块）：全称为division，“分割、区分”的意思，< div >标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div >标签中，< div >中还可以嵌套多层< div >，用来将网页分割成独立的、不同的部分，来实现网页的划分和布局。
< span >（内联）：用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。
<div>
<h2><a href="#">【千锋教育】<span style="color:red">html5</span>-中国数万程序员的选择-官方首页</a></h2>
<a href="#"><img src="图片地址" alt=""></a>
<p>内容1</p>
<a href="#">链接1</a>
</div>
<div>
<h2><a href="#"><span>html5</span>-零基础如何学<span>html5</span>-从小白到大神进阶</a></h2>
<a href="#"><img src="" alt=""></a>
<p>内容2</p>
<a href="#">链接2</a>
</div>
27.CSS基础用法
格式：选择器{属性1：值1；属性2：}
单位：px→像素（pixel）、%→百分比（外容器1→600px 当前容器50%→300px、外容器2→400px 当前容器50%→200px）
基本样式：width（宽）、height（高）、background-color（背景颜色）
CSS注释：/ * CSS注释的内容 * /
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{width:100px ; height:100px ; background-color:red} */
/* span{background-color:blue} */
</style>
</head>
<body>
<div>这是一个块</div>
<div>又是一个块</div>
<span>这是一个内联</span>
</body>
</html>
28.（CSS样式的引入方式）内联样式与内部样式
内联（行内、行间）样式：在html标签上添加style属性来实现的
例：
<body>
<!--<div style="width:100px;height:100px;background-color:red">这是一个块</div>-->
<div>这是一个块</div>
</body>
内部样式：在< style >标签内添加的样式
注：内部样式的优点→可以复用代码
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width:100px;height:100px;background-color:red}
</style>
</head>
<body>
<div>这是一个块</div>
<div>这是另一个块</div>
</body>
</html>
区别：
- 内部样式的代码可以复用
- 复合w3c的规范标准，进行让结构和样式分开处理
29.外部样式
引入一个单独的CSS文件，name.css
<link>标签
属性：
- rel：指定资源跟页面的关系
- href：引入外部资源的地址
注：还可以通过@import方式引入外部样式（这种方式有很多问题，不建议使用）
link与@import区别：添加链接描述
例题：
方法一：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./30.外部样式.css">
</head>
<body>
<div>这是一个块</div>
</body>
方法二：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>这是一个块</div>
<style>
@import url(./30.外部样式.css);
</style>
</body>
30.CSS中的颜色表示法
- 单词表示法：red、blue、green、yellow……
CSS颜色列表：添加链接描述 - 十六进制表示法：#000000 、#FFFFFF
0 1 2 3 4 5 6 7 8 9 A B C D E F
例：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{background-color:#000000}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
- RGB三原色表示法：rgb（255，255，255）；
取值范围0~255
例：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{background-color:rgb(0, 0, 0)}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
获取颜色：
A.提取颜色的下载地址：添加链接描述
B.Photoshop工具
31.CSS背景样式
- background-color：背景颜色
- background-image：背景图片
url（背景地址）
默认：会水平垂直都铺满背景图 - background-repeat：背景图片的平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat（x，y都进行平铺，默认值）
no-repeat 都不平铺 - background-position：背景图片的位置
x y：number（px、 %）
单词：
x轴：left、center、right
y轴：top、center、bottom - background-attachment：背景图随滚动条的移动方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{height:2000px}
div{width:300px;height:300px;background-color:red;
background-image:url(图片地址);
background-repeat:repeat-x;
background-position:100px 0 ;
background-attachment: scroll;
}
</style>
</head>
<body>
<div></div>
</body>
32.背景实现视觉差效果
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{ width: 1400px;height: 800px;background-image:url(图片地址1);background-attachment: fixed;}
#div2{ width: 1400px;height: 800px;background-image:url(图片地址2);background-attachment: fixed;}
#div3{ width: 1400px;height: 800px;background-image:url(图片地址3);background-attachment: fixed;}
table{background-color:white ;}
</style>
</head>
<body>
<div id="div1">
<h1>好美味小吃</h1>
<ul>
<li>
小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
</ul>
<ul>
<li>
卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
</ul>
<ul>
<li>
套餐类
<ul>
<li>卤面筋饭</li>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪舌头饭</li>
</ul>
</li>
</ul>
<ul>
<li>
炖膻类
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心枸杞</li>
<li>羊肉枸杞</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
<p><em>亲，20元以上可送餐哦！！</em></p>
</div>
<div id="div2">
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tbody>
<tr>
<td>2022年1月1日</td>
<td>🌤</td>
<td>天气晴朗适合出行</td>
</tr>
<tr>
<td>2022年1月2日</td>
<td>⛅</td>
<td>天气清爽适合出行</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<div id="div3">
<h1>好美味小吃</h1>
<ul>
<li>
小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
</ul>
<ul>
<li>
卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
</ul>
<ul>
<li>
套餐类
<ul>
<li>卤面筋饭</li>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪舌头饭</li>
</ul>
</li>
</ul>
<ul>
<li>
炖膻类
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心枸杞</li>
<li>羊肉枸杞</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
<p><em>亲，20元以上可送餐哦！！</em></p>
</div>
</body>
33.CSS边框样式
- border-style：边框的样式
solid：实线
dashed：虚线
dotted：点线 - border-width：边框的大小
px…… - border-color：边框的颜色
red、#f0ff00……
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 300px;height: 300px;border-style: solid;border-color: red;border-width: 1px;}
</style>
</head>
<body>
<div></div>
</body>
注：边框也可以针对一条边进行单独设置：border-方向-style
中间的方向：right、left、top、bottom
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 300px;height: 300px;border-right-style: dotted;border-right-color: green;border-right-width: 10px;
width: 300px;height: 300px;border-top-style: solid;border-top-color: red;border-top-width: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
34.利用边框实现三角形
颜色：透明颜色 transparent
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{background-color: green;}
div{width:0px;height: 0px;
border-top-color: transparent;
border-top-style: solid;
border-top-width: 10px;
border-right-color: red;
border-right-style: solid;
border-right-width: 10px;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 10px;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
35.CSS文字样式
font-family：字型类型
英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑，宋体
中文字体的英文名称
微软雅黑 : ‘Microsoft YaHei’
宋体 : SimSun
衬线体与非衬线体
注意事项
- 设置多字体方式（让字体类型适应多种计算机或设备）
- 引号的问题（出现空格必须用引号）
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{font-family: 'Times New Roman';}
</style>
</head>
<body>
<div>这是一段文字</div>
<p>这是一段文字</p>
<div>this is a text</div>
<p>this is a text</p>
</body>
</html>
36.字体大小粗细样式
font-size（字体大小）：字体大小
默认：16px（字体大小一般为偶数）
单词表示法（不推荐使用）：
font-weight：字体粗细
两种模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）、number（100、200……900/100-500正常，600-900加粗）
font-style：字体样式
模式：正常（ normal ）、斜体（ italic、oblique【用的比较少，一般了解即可】 ）
区别：
- italic 带有倾斜属性的字体的才可以设置倾斜操作
- oblique 没有倾斜2属性的字体也可以设置倾斜操作
写法：单词（normal、italic）
color：字体颜色
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{font-size:30px;font-weight: bold;font-style: italic;color:red}
</style>
</head>
<body>
<div>这是一段文字</div>
<p>这是一段文字</p>
<div>this is a text</div>
<p>this is a text</p>
</body>
37.CSS段落样式
- text-decoration ：文本装饰
下划线：underline
上划线：overline
删除线：line-through
不添加任何装饰：none
注：可添加多个（通过空格隔开） - text-transform ：文本大小写 （针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize - text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同 - text-align：文本对齐方式
对齐方式：right、left、center、justify（两端点对齐）
line-height：定义行高
定义：一行文字的高度，上边距和下边距的等价关系
默认行高不是固定值，而是变化的，根据当前字体大小不断变化
取值：
A .number（px）
B .scale（比例值，跟文字大小） - letter-spacing：定义字间距
- word-spacing：定义词间距（针对英文段落）
- 强制折行：（针对英语）
word-break：break-all；（非常强烈的折行）
word-wrap：break-word；（不是那么强烈的折行，会产生一些空白区域）
38.个人简历练习
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width:800px;}
h1{text-align: center;color:#ff6600}
h2{color:#00a0ff;text-indent: 2em;}
#p1{font-style: italic;font-weight: bold;text-indent: 2em;}
#p2{color: #66ff00;line-height: 30px;text-indent: 2em;}
#p3{color:#00ffff;line-height: 30px;text-indent: 2em;text-decoration: underline;font-style: italic;}
#p4{font-weight: bold;letter-spacing: 10px;line-height: 30px;text-indent: 2em;}
</style>
</head>
<body>
<div>
<h1>朱一龙简介</h1>
<h2>基本信息</h2>
<p id="p1">朱一龙，中国内地男演员、歌手，毕业于北京电影学院2006级表演系本科。</p>
<P id="p2">2009至2012年主演多部《周末王刚讲故事》（又名《儿女传奇》）数字电影。2014年在民国剧《情定三生》中饰演迟瑞。2015年在古装剧《芈月传》中饰演秦昭襄王嬴稷而受到广泛关注。2016年2月，在武侠剧《新萧十一郎》中饰演连城璧；7月，在武侠剧《新边城浪子》中饰演傅红雪。2017年主演都市剧《御姐归来》。2018年6月在奇幻剧《镇魂》中分饰沈巍、夜尊、黑袍使三角；12月，在古装剧《知否知否应是绿肥红瘦》中饰演小公爷齐衡。2020年7月，在冒险剧《重启之极海听雷》中饰演小三爷吴邪；9月，主演都市剧《亲爱的自己》。2021年6月，在谍战剧《叛逆者》中饰演男主角林楠笙；9月，在动作电影《峰爆》中饰演男主角洪翼舟。2022年6月，在电影《人生大事》中饰演男主角莫三妹；8月，凭借电影《穿过寒冬拥抱你》获得第17届中国长春电影节“金鹿奖”最佳男演员。</P>
<h2>早年经历</h2>
<p id="p3">朱一龙1988年出生于湖北武汉，从小学习钢琴，高中就读于武汉市第十四中学，之后转入华中师范大学第一附属中学。2006年考入北京电影学院表演系本科班就读，于2010年6月毕业。</p>
<h2>个人生活</h2>
<p id="p4">朱一龙从小到大都热爱打篮球。他也喜欢潜水，觉得水下的世界宁静又自由。</p>
</div>
</body>
39.CSS复合样式
A .一个CSS属性只控制一种样式，叫做单一样式
B .一种CSS属性控制多种样式，叫做复合样式
复合的写法是通过空格的方式实现的，复合写法有的是不需要关心顺序：例如background、border；有的是需要关心顺序：font
复合样式：
- background：颜色、url（ ）、repeat 0 0；
- border：1px red solid；
- font（有顺序）：最少要有两个值 size family
注：weight style size family √
style weight size family √
weight style size/line-height family √
注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width:300px;height:300px;
background: red url(图片地址) no-repeat center center;
border: 2px black solid;
font：bold italic30px/40px 宋体；
}
</style>
</head>
<body>
<div>这是一段文字</div>
</body>
40.CSS选择器
- ID选择器
CSS：#elem{ }
html：id = “elem”
注：
A.在一个页面中，ID值是唯一的，只能出现一次，出现多次是不规范的
B.命名规范，字母_- 数字（命名的第一位不能是数字）
C.命名方式：
驼峰式写法：searchButton（小驼峰）、SearchButton（大驼峰）
下划线式写法：search_small_button
短线式写法：search-small-button
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{background: red;}
#div2{background: blue;}
</style>
</head>
<body>
<div id="div1">这是一个块</div>
<div id="div2">这是又一个块</div>
</body>
</html>
- CLASS选择器
CSS：elem{ }
HTMl：class = “elem”
注：
A. class选择器是可以复用的
B. 可以添加多个class样式
C. 多个样式的时候，样式的优先级根据css决定，而不是clss属性中的顺序
D. 标签+类的写法
例题：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{background: yellow;}
.content{font-size: 30px;}
p.box{background: green;}
</style>
</head>
<body>
<div class="box content">这是一个块</div>
<div class="box">这是又一个块</div>
<p class="box">这是一个段落</p>
</body>
2113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
