【一起来学CSS】
什么是css呢?就是一个层叠样式表,对一个元素层叠的套用.对同一个元素对象进行多方面的套用
基本格式：
内部样式表
使用style选择器,放在html的内部
<style>
元素{
属性:值 ;
属性:值
}
</style>
css的语法结构非常的简单,使用style标签包裹着元素的值.这个元素是一个对象.可以是一个标题,可以是一个表格,一个文本框
然后大括号里面是属性的相关的值,对对象的样式进行修改
另外,style标签放到哪里都是可以的,也可以有多个,我们习惯于放于head中
键值对之间使用分号来进行连接
键和值之间使用冒号进行连接
行内样式表
就是将修饰的属性放到具体的标签的内部.
内部样式表像全局变量,行内样式表像局部变量
所以,行内样式表的优先级是比内部样式表的优先级高的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BTkB3riw-1656758618912)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220326163850517.png)]
上面是同时使用行内样式表和内部样式表的效果.可以看到一个对象是多个样式共同作用的结果
外部样式表
就是新建一个css文件,里面是对对象的描述.然后将这个css文件引入到html中,就可以对html中的对象进行修饰了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zvgWzKV-1656758618914)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220326170026110.png)]
需要注意的是,再主html页面中一定要加上link标签.
然后再href属性中填上地址,rel属性就代表样式表
这个link标签一般是放在head标签中的，这种link标签可以存在多个，不冲突
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
但是要注意有可能外部样式表可能加载不出来.这是因为浏览器再加载html文件的时候,也会从服务器端下载css文件.
但是它只是在第一次下载的时候从内存中下载,之后为了方便以后的访问,浏览器就会将css文件放在缓存中,这样以后访问的时候提取文件就会非常的快.
所以,有时候我们修改外部的css文件的时候可能不会有更新
但是,我们只要按上ctrl f5 就会强制的从内存中读取信息了
还有一种好的方法就是每次更改css表的时候都修改名字,这样浏览器看到是陌生的文件就会从内存中去读取了
代码风格
样式格式
紧凑格式
就是所有的空格和换行全部都省略的情况.
这一点对于开发的时候是不会用的,但是对于部署阶段我们一般就得这样用,
因为,网页在运行的时候是需要下载css代码的,代码越长,占用的网络带宽就越大,时间就越长.
所以,这种格式还是有很大的作用的
展开格式
这个方式就是我们现在正常写代码的方式了,将代码展开,方便去阅读
命名格式
是采用脊柱命名法就是font-size这样,中间使用一个-来进行连接
选择器
基础选择器
标签选择器
就是我们之前写的根据元素是什么样子的
这样会对所有的p标签全部设置
类选择器
在css中的类和以往的类都是不一样的,这个类不是面向对象的类,只是一个分类而已
类的表示方法:
用.开头+类的名字{
属性=值
}
下面是一个类的具体例子:
.class1{
color: red;
}
然后将想要是标记为class1类的对象加入加入到相应的属性中
红色的就是被标记的
一个类可以标记多个对象,一个对象也可以被多个类所标记
类名和类名之间使用空格分开
如果这两个选择器中有相同的属性值，则该属性值先被改为.user中的值，再被改为.login中的值，即重复的属性以最后一个选择器中的属性值为准。
另外,每一个类选择器必须是和基础选择器在同一个style中的.这个类选择器只可以去修饰基础选择器中的标签,不可以去选择别的
id选择器#
由于每一个对象都是有唯一一个独一无二的id,所以使用id选择器就可以只对一个对象进行选中.
这就和类选择器有了区分,毕竟类选择 器可以一对多,多对多呢
id选择器的格式
创建id选择器的时候都是#+id名
#createid{
color: rgb(79, 238, 16);;
}
<div id="createid">ss</div>
通配符选择器*
将所有的对象都选中,不需要指定,通常是为了消除浏览器的默认配置
复合选择器
将所有的选择器全部都结合起来
后代选择器
选中后代,可以是子类,也可以是孙子,等等
这样就可以对选中一些子类中的某些元素了
<!DOCTYPE html>
<html lang="en">
<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>
ul {
color: green;
}
/* 对子类进行选择*/
ul li{
font-size: 35px;
}
/* 对孙子进行选择 */
ul div{
font-size: 56px;
}
</style>
</head>
<body>
<ul>
<li>css1</li>
<li>css2</li>
<li>
<div>hhhhh</div>
</li>
</ul>
</body>
</html>
这样选择的就更加的准确了
另外后代选择器可以是任意选择器的组合.前面我们是一标签为实例演示的,选了一个标签下面的子标签.同样的,我们也可以根据类选择器,id选择器,来选择相应的类和id下面的子标签
<!DOCTYPE html>
<html lang="en">
<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>
ul {
color: green;
}
/* 对子类进行选择
ul li{
font-size: 35px;
}
ul div{
font-size: 56px;
} */
/* 和类选择器一起使用 */
.classUL li div{
color: red;
}
</style>
</head>
<body>
<ul class="classUL">
<li>css1</li>
<li>css2</li>
<li>
<div>hhhhh</div>
</li>
</ul>
</body>
</html>
子选择器>
和后代选择器是一样的,但是只可以选用子类,不可以选用孙子类
格式:
元素1>元素2{
属性:值;
}
.classUL>div {
color: red;
}
只有子类可以被选中,孙子类不可以被选中
<body>
<ul class="classUL">
<li>css1</li>
<li>css2</li>
<div>hhhhh</div>
<li>
<div>hhhhh</div>
</li>
</ul>
</body>
并集选择器，
并集选择器可以对多个标签进行选择,使用逗号进行连接
并且其他的选择器也可以被选择
<body>
<ul class="classUL">
<li>css1</li>
<li>css2</li>
<div>hhhhh</div>
<li>
<div>hhhhh</div>
</li>
<li> <p>ppppp</p></li>
</ul>
<div>dshjkad</div>
<div>dshjkad</div>
<div>dshjkad</div>
<div>dshjkad</div>
<style>
ul>div,
ul>li>p{
color: aquamarine;
}
</style>
</body>
就是可以同时选中多个标签
最好每一个对象独自占一行
好处就是实现了代码的复用,更加的方便了
伪类选择器:
链接伪类选择器
主要是针对a标签使用的
主要是一些状态的改变,使用:来表示状态
:link 表示还没有访问过
:visited 表示已经访问过
:hover 表示鼠标没有点上去,只是悬停
:active 表示鼠标点中了,但是没有收手
下面就用一个链接来演示一下:
<style>
a{
font-size: 56px;
}
a:link {
color: rgb(202, 54, 103);
}
a:visited{
color: rgb(240, 189, 189);
}
a:hover{
color: rgb(121, 106, 204);
}
a:active{
color: rgb(22, 11, 11);
}
</style>
同时,不仅仅是a标签有上面的状态,对于其他的标签来说:hover和active也是可以用的
下面就以button来演示一下吧
<input type="button" value="确定按钮">
input:hover{
color: rgb(121, 106, 204);
}
input:active{
color: rgb(22, 11, 11);
}
这样也是可以的
焦点伪类选择器
这个就是我们当前选中的元素就是焦点。当我们对焦点进行操作的时候，焦点和别的元素有区别。
尤其是针对输入框，当我们对焦点输入框输入的时候，可以有明显的区别
<input type="text">
<input type="text">
<input type="text">
<input type="text">
当我们加入了焦点以后
input:focus{
color: rgb(233, 96, 96);
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1hMGzpcg-1656758618914)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220327170447630.png)]
CSS的属性
字体的属性
字体的样式font-family
<!-- 设置字体 -->
<div>
<span>请填写姓名</span>
<input type="text">
</div>
<style>
body{
font-family: '楷体';
}
</style>
font-famly属性可以被子类从父类继承的,所以虽然style中写的是body标签,但是span标签也是可以继承这个标签的.
但是像这种input标签好像还不太可以
input标签必须手动在对input进行标记
`<!-- 设置字体 -->
<div>
<span>请填写姓名</span>
<input type="text">
</div>
<style>
body{
font-family: '楷体';
}
input{
font-family: '楷体';
}
</style>
字体的大小font-size
<style>
body{
font-family: '楷体';
font-size: 50px;
}
input{
font-family: '楷体';
font-size: 50px;
}
</style>
字体的粗细font-weight
粗细可以写单词也可以写数字
normal正常---------------400
bold粗的-------------------700
bolder更粗的
lighter细的
数字在100~900之间
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5PUivBIX-1656758618915)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220327181411971.png)]
字体的倾斜font-style
不倾斜:normal
倾斜:italic
<div>
<span>请填写姓名</span>
<input type="text">
</div>
<style>
body{
font-family: '楷体';
font-size: 50px;
font-weight: bolder;
font-style: italic;
}
input{
font-family: '楷体';
font-size: 50px;
font-weight: lighter;
}
</style>
文本属性
文本颜色color
现在我们有必要去介绍一下计算机中的三原色
和我们现实生活中的红黄蓝不同
计算机中的三原色是光三原色:红,绿,蓝,也统称为RGB
计算机中为了描述RGB就给每一个颜色开辟了1个字节,8个bit
所以红绿蓝的范围都是0~255
其中:
255,0,0是红色,
0,2550是绿色
0,0,255是蓝色
0,0,0是黑色
255,255,255是白色
表示方式:
color:red;
color:rgb(255,0,0);
color:#ff0000;
<!-- 设置字体 -->
<div>
<span>请填写姓名</span>
<input type="text">
</div>
<style>
body{
font-family: '楷体';
font-size: 50px;
font-weight: bolder;
font-style: italic;
color: rgb(245,87,117);
}
input{
font-family: '楷体';
font-size: 50px;
font-weight: lighter;
color: aqua;
}
</style>
另外除了rgb以外,还有一个rgba
这里的a是透明度
a也是分配了一个字节0255,但是我们一般都是在01之间使用
1是不透明
0是全透明(也就是没了)
color: rgba(245,87,117,0.5);
下面是0.5的效果
表示透明度还有一种方法就是使用opacity，这个和rgba的区别就是opacity是被可以被子元素继承的，但是rgba是不可以被子元素继承，只可以作用于当前的元素
文本对齐text-align
center中间
left左边
right右边
<a href="huj" class="left">一个链接</a>
<br>
<input type="button" value="确定按钮" >
<div class="center"> hhh</div>
<br>
<!-- 设置字体 -->
<div class="right">
<span>请填写姓名</span>
<input type="text">
</div>
.center{
text-align: center;
}
.left{
text-align: left;
}
.right{
text-align: right;
}
文本装饰text-decoration
none消除下划线
underline下划线
overline上划线
over-through穿过
但是,这个none主要是为例消除a链接的下划线来使用的
<a href="dsfsfsd">一个链接</a>
<style>
a{
text-decoration: none;
font-size: large;
color: rgb(143, 29, 29);
}
</style>
文本缩进text-indent
对文本进行首行缩进，缩进也可以是负数
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt earum, quaerat delectus quia mollitia neque, a ullam exercitationem cum eligendi nostrum consequatur dicta dolores perspiciatis tempora, odit blanditiis fugit dolorem.</p>
<style>
p{
font-size: 50px;
/* text-indent: 2em; */
text-indent: 100px;
}
</style>
字体大小是50px
indent就是100px的意思是空出两个字的位置，这个em在不同的单位下是不一样的
2em也是空出两个50px的意思.
em也是一个单位,和px的大小有关
行高line-height
行高就是：上边距+字体大小+下边据
如果行高是100px，字体大小是50px，那么上下边据都是25px
写的方式：
- 直接写行间距100px
- 写字母:normal
- 写小数:1.5 表示行间距是字体大小的1.5倍
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt earum, quaerat delectus quia mollitia neque, a ullam exercitationem cum eligendi nostrum consequatur dicta dolores perspiciatis tempora, odit blanditiis fugit dolorem.</p>
<style>
p{
font-size: 50px;
text-indent: 2em;
line-height: 100px;
}
</style>
对于单行来说:行高和父元素的高读相同就可以实现垂直方向上居中对齐的效果
这很容易去理解,如果行高和父元素的高度相同,上下间距是相同的,所以元素就在中间
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt earum, quaerat delectus quia mollitia neque, a ullam exercitationem cum eligendi nostrum consequatur dicta dolores perspiciatis tempora, odit blanditiis fugit dolorem.</p>
<style>
p{
font-size: 50px;
text-indent: 2em;
line-height: 100px;
background-color: antiquewhite;
height:100px;
}
</style>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B2m9z2XY-1656758618916)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220329085059760.png)]
背景颜色background-color
background-color的属性和color是一模一样的.
只是多加了一个叫做transparent的颜色,意思是和parent的颜色是相同的
<div class="parent">
<div class="one">color red</div>
<div class="two">color blue</div>
<div class="three">color transparent</div>
</div>
<style>
.parent{
font-size: 70px;
background-color: antiquewhite;
}
.one{
background-color: red;
}
.two{
background-color: blue;
}
.three{
/* 和父类的方法一样 */
background-color: transparent;
}
</style>
背景图片background-image
我们不光可以设置背景颜色,还可以设置背景图片
格式:
background-image: url(../image/Moon.jpg);
注意:
url不要忘记写
url里面可以没有网页
路径可以写相对路径
<div>
欢迎来到我的个人博客
</div>
<style>
div{
background-image: url(../image/Moon.jpg);
height: 500px;
font-size: 60px;
color: rgb(241, 239, 239);
text-align: center;
line-height: 500px;
background-repeat: repeat;
}
</style>
平铺background-repeat
平铺:repeat
不平铺:no-repeat
水平平铺:repeat-x
垂直平铺:repeat-y
平铺就是像上面那样的,不平铺就是只有一张图片
图片和颜色是可以同时存在的,但是图片在颜色的上面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Z7WBptM-1656758618916)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220329102343173.png)]
上面就是不平铺然后再加上背景颜色的情况
<div>
欢迎来到我的个人博客
</div>
<style>
div{
background-image: url(../image/Moon.jpg);
height: 500px;
font-size: 60px;
color: rgb(241, 239, 239);
text-align: center;
line-height: 500px;
background-repeat: no-repeat;
background-color: antiquewhite;
}
</style>
位置background-position
也是对背景图片来说的,背景图片有一下几个位置
background-position:x y;
对位置有以下的改变:
名词方位:center,left,right,top,bottom
精确方位:坐标或百分比
混合方位:同时含有名词方位和精确方位
如果只是写了一个数字或者是方位,那么就默认就是x的坐标,另外的y坐标默认是center
两个都是方位名称的时候,俩个并不需要顺序
大小background-size
属性的值可以是下面的几种：
数字 x y 代表长和宽的大小
background-size: 2000px 600px;
使用百分比
代表是原图像的百分之多少
background-size: 50% 50%;
使用cover:使图片完全的铺满整个图片的大小,不会有留白
使用contain:使图片的尺寸最大,可能会没有留白
下面的这个就是使用contain
下面的这个就是使用cover,布满全局
半角矩形border-radius
格式:
可以是数字100px
border-radius: 100px;
可以是百分比
相当于半径是长度的百分比
圆型
如果长和宽是相同的,那么border-radius=50%,就可以达到圆形了
<div class="circle">
</div>
.circle{
height: 400px;
width: 400px;
background-color: bisque;
background-position: left;
background-size: cover;
border-radius: 50%;//长和宽的长度相同的时候就可以呈圆形了
}
椭圆
如果长度和宽度不相同的话,boder-radius是50%的话,就是一个椭圆:
.circle{
height: 400px;
width: 800px;
background-color: bisque;
background-position: left;
background-size: cover;
border-radius: 50%;
}
按钮
另外,如果半径的长度是一个矩形的宽度的一般,就是一个按钮
自定义
还可以分别对四个角进行不同的圆弧设定
是按照顺时针的方向进行的,上左,上右,下右,下左
border-radius:100px 0px 100px 0px;
元素的显示模式
块级元素
就是一个元素占一行的就是块级元素.
常见的
p
h1~h6
div
ul
ol
li
行内元素
span
a
img既不是行内元素,也不是块级元素
块级元素的子元素可以继承父级元素的高度和宽度,如果自己不修改的话
块级元素可以修改高度和宽度,但是行内元素不可以修改宽度和高度,只能和文字的大小有关
块级元素里面可以包含块级元素和行内元素;
但是行内元素不可以包含别的其他的元素了.这也很好理解,毕竟都是文字还能包含什么呢
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-di6kVj0n-1656758618917)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220404222300324.png)]
上面的就是块内元素里面可以有块内元素,块内元素的性质可以更改
<div class="parent">
<div class="child1">
child1
</div>
<div class="child">
child2
</div>
</div>
<style>
.parent{
height: 500px;
width: 600px;
background-color: rgb(233, 91, 91);
}
.child1{
height: 400px;
background-color: rgb(151, 111, 111);
}
</style>
行内元素可以转为行内元素
使用display的block块
<a href="链接1">链接1</a>
<a href="链接2">链接2</a>
<a href="链接3">链接3</a>
<a href="链接4">链接4</a>
<style>
a{
color: blanchedalmond;
/* 可以将行内元素转为块内元素 */
display: block;
height: 80px;
background-color: blue;
}
</style>
将行内元素转为行内块元素
<a href="链接1">链接1</a>
<a href="链接2">链接2</a>
<a href="链接3">链接3</a>
<a href="链接4">链接4</a>
<style>
a{
color: blanchedalmond;
/* 可以将行内元素转为块内块元素 */
display: inline-block;
height: 80px;
width: 90px;
background-color: blue;
}
</style>
行内元素可以设为none
<style>
a{
color: blanchedalmond;
/* 可以将行内元素转为块内块元素 */
display: none;
height: 80px;
width: 90px;
background-color: blue;
}
</style>
将display中的属性设为none,就可以使行内元素隐藏，在屏幕上是不显示的
盒模型
边框border
border-width
border-color
border-style
border-style: outset;
border-color: rgb(98, 190, 155);
border-width: 20px;
当然,这三行可以写在一行里面:
border: outset 20px greenyellow;
有时候会自带边框，所以要消除边框就可以让边框变为none
border:none
四个边框可以不一样
border-top: outset 20px rgb(110, 172, 17);
border-bottom: outset 20px rgb(175, 202, 135);
border-left: outset 20px rgba(27, 233, 171, 0.315);
border-right: outset 20px rgb(161, 211, 226);
另外使用边框会撑大盒子,所以就会让盒子由300*300的变为340 340的,所以盒子就会变大
box-sizing: border-box;
所以就可以加上这个关键字box-sizing来不让盒子变大
内边距padding
内边距是内容和边框之间的距离
一般来说,顶着内边框都是比较丑的,我们一般都是留有一点距离
padding-left padding-right padding-top padding-bottom
padding-left: 40px;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9l4qNsaU-1656758618918)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220405134030036.png)]
这样就会在左边留下一些距离
外边距margin
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z7bXGo8A-1656758618918)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220405133450624.png)]
就是盒子和盒子之间的距离就是外边距
margin: 40px 40px 40px 0px;
这个之间就是外边距margin
块级元素水平居中
那我们的块级元素就可以使用margin来使得呈现水平居中的效果
让margin-left和margin-right的值是auto即可
margin:0 auto
去除浏览器和元素之间的空隙
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
浏览器默认是带有一些空隙的,使用上面的代码就可以去除之间的空隙
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sASbWClt-1656758618919)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220405213042184.png)]
另外,之后再对对象进行叠加样式的话,可以进行覆盖
弹性布局
布局一般都是一个元素独立一行,所以我们要是想要将元素都放到一行,就不太好操作
而弹性布局就是为了解决这个的
使用display:flex
这条语句就得加到flex-container上面(父元素上面),然后父元素包含的子元素就是flex-item
flex-direction:水平方向是主轴,竖着是侧轴,可以决定flex-item的排布方向,一般都是横着排列的
另外父元素只是决定子元素是flex式分布的,
子元素的子子元素也要想flex分布,那么子元素也要实现这个属性,可以嵌套使用
就可以让元素从单独占据一行,变成都在一行
<div class="total">
<div class="parent">
<div class="circle">
<a href="3333">我的简历</a>
</div>
<div class="circle">
<a href="3333">我的网页</a>
</div>
<div class="circle">
<a href="3333">我的网页</a>
</div>
</div>
<div class="picture">逆光之影</div>
</div>
<style>
.total {
display: flex;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JTIrP2JN-1656758618919)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220405215348206.png)]
就可以让上面的两个元素的父亲,加上display:flex的操作
加上justify-content实现水平居中
justify-content：center;是实现了水平居中，前提是display：flex
元素之间的空格问题
space-around :使元素的上下左右都是有空格的
就可以使浏览器自动的加上一些空格,不会像上面那样紧紧的挨在一起了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UiSZBoQG-1656758618920)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220405215600910.png)]
space-between:只有元素之间有空格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ztOmziDO-1656758618921)(C:/Users/19625/AppData/Roaming/Typora/typora-user-images/image-20220405221338996.png)]
space-start 使元素靠最左边
space-end使元素靠最右边
align-items实现垂直居中
上面我们的都是横轴上面的，我们还可以实现纵轴。使用align-item就可以实现纵轴上面的中央居中
使用center属性就可以：
<div>
<span>1 </span>
<span>1 </span>
<span>1 </span>
</div>
<style>
div{
width: 300px;
height: 400px;
border-width: 20px;
border-color: burlywood;
background-color: yellow;
border-style: groove;
display: flex;
align-items: center;
}
div span {
width:90px;
background-color: aqua;
}
</style>
使用stretch
<div>
<span>1 </span>
<span>1 </span>
<span>1 </span>
</div>
<style>
div{
width: 300px;
height: 400px;
border-width: 20px;
border-color: burlywood;
background-color: yellow;
border-style: groove;
display: flex;
align-items: stretch;
}
div span {
width:90px;
background-color: aqua;
}
</style>
就会铺满整个父亲节点的长度
还有flex-end是在最下面,flex-start是在最上面
常用的就是上面的那几种属性的值了
overflow
在一个元素的css属性中加入这个就可以使浏览器滑动的时候，移动的是当前的元素内容
overflow：auto；
129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
