css 案例
1
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
P{
color:red;
}
h2{
color:blue;
}
</style>
</head>
<body>
<p>css从入门到精通</p>
<h2>主讲</h2>
</body>
</html>
2
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/*内部样式（并没有实现样式与内部的分离）*/
p{
color:red;
}
</style>
<!-- 外部样式 link标签链接样式文件-->
<link rel="stylesheet" type="text/css" href="style/hello.css">
<!-- 外部样式 @import导入样式文件-->
<style>
/* @import "style/hello.css"*/
</style>
</head>
<body>
<p>welcome to css</p>在这里插入代码片
<p>欢迎来到css课堂</p>
<h2 style="color:blue">web前段工程师</h2>
<h2>Java开发工程师</h2>
<div>哈哈</div>
<div>嘿嘿</div>
</body>
</html>
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/*标签选择器*/
p{
color:red;
font-size:20px;
}
h2{
color:yellow;
}
.hello{
background: #cccccc;
}
.world{
font-weight:bold;
}
#heihei{
color:blue;
}
</style>
</head>
<body>
<!-- 给p标签中的内容设置样式-->
<p>welcome to css</p>
<p>hello world</p>
<h2>web前端开发</h2>
<h3>java开发</h3>
<hr>
<!-- 只改第一个p标签-->
<p class="hello">welcome to css</p>
<p>hello world</p>
<h2>web前端开发</h2>
<h3>java开发</h3>
<!-- 只要应用了hello这个类选择器就生效 与标签无关-->
<div class="hello">主讲</div>
<div class="hello world">主讲</div>
<span class="world">css入门到精通</span>
<hr>
<h1 id="heihei">嘿嘿</h1>
</body>
</html>
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
/* 标签选择器与类选择器结合起来*/
h1.aaa{
color:red;
}
/* 标签选择器与id选择器结合起来*/
p#bbb{
color:blue;
}
/* 组合选择器*/
h1,p,div,span,.ccc{
font-size:30px;
}
div{
background:#cccccc;
}
.ccc{
font-size:30px;
font-weight:bold;
}
/*嵌套选择器*/
div>p{
color: green;
text-decoration: underline;
}
/* 对div内部类选择器修饰*/
div h3{
}
</style>
</head>
<body>
<!-- 需求 修改class为aaa的h1-->
<h1 class="aaa">welcome</h1>
<h4 class="aaa">csss</h4>
<h1>hello</h1>
<hr>
<!-- 修改id为bbb的p标签-->
<p id="bbb">world</p>
<p>html</p>
<h2 id="bbb">web开发</h2>
<hr>
<h1>hello</h1>
<p>html</p>
<div>web</div>
<span class="ccc">java</span>
<div>
<p>内部的p</p>
<h3>内部的h3</h3>
</div>
<hr>
<div>
<h2>
<p> 内部的p</p>
</h2>
</div>
<hr>
<div>
<p>内部的p标签</p>
<h3 class="ddd">内部h3标签</h3>
<p class="ddd">pppp</p>
</div>
</body>
</html>
5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
/* a:link{
font-size:12px;
color:black;
text-decoration:none;
}
a:visited{
font-size:15px;
color:red;
}
a:hover{
font-size:20px;
color:blue;
}
a:active{
font-size:40px;
color:green;
}
a:link,a:visited{
font-size:13px;
color:#666666;
text-decoration:none;
}*/
a:hover,a:active{
color:#ff7300;
text-decoration:underline;
}
p:hover{
color:red;
}
P:active{
color:;
}
</style>
</head>
<body>
<a href="1.html" title="">IT教育,高职培训</a>
<p>css从入门到精通</p>
</body>
</html>
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
p:first-letter{
color:red;
font-size:30px;
}
p:first-letter{
background:yellow;
}
p:before{
content:"嘿嘿";
}
p:after{
content:"哈哈";
}
</style>
</head>
<body>
<p>hello world</p>
<hr>
<p>
hello world<br>
welcome to
</p>
</body>
</html>
7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
/*<link rel="stylesheet" type="text/css" href="style/world">*/
<style>
div{
font-size:20px;
color:red;
}
.hello{
font-weight:bold;
color:blue;
}
#world{
text-decoration:underline;
color:green;
}
</style>
<link rel="stylesheet" href="style/world.css">
</head>
<body>
<div class="hello" id="world" style="color">css</div>
<p>主讲</p>
</body>
</html>
8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
font-size:30px;
}
p{
/*font-size:20px;*/
/*font-size:80%;*/
font-size:2em;
}
span.hello{
/*font-size:80%;*/
font-size:2em;
}
body{
font-size:62.5%;
}r
#ddd{
font-size:3em;
}
ul li{
/* font-size:30px;
font-weight:700;
font-family:华文行楷,黑体,宋体;
font-style:normal; */
font:italic bold 20px 黑体,楷体,宋体;
}
</style>
</head>
<body>
<p>
css入门到精通
<span>主讲：高职培训</span>
</p>
主讲:hecter
<hr>
<div>
我的div
<p>
css入门到精通
<span>主讲：高职培训</span>
</p>
</div>
<hr>
<span class="hello">主讲：高职培训</span>
<hr>
<ul>
<li>嘿嘿</li>
</ul>
</body>
</html>
9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color:red;
/* background-color:#0F0*/
/* background-color:rgb(0,0,255)/
/* background-color:rgba(0,255,0,0.5)*/
background-color:#54d2c9;
line-height:50px;
text-align:center;
}
img{
vertical-align:middle;
}
div{
text-indent: 25px;
}
span{
text-decoration:line-through;
text-transform:capitalize;
letter-spacing:3px;
word-spacing:8px;
}
h3{
width:300px;
height:200px;
background-color:#cccccc;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<p>welcome to css</p>
<p>welcome to css</p>
<p>welcome to css</p>
<p>welcome to css</p>
<hr>
<img src="../image/qq.jpg">
html
<hr>
<div> welcome to csswelcome to csswelcome to csswelcome to css</div>
<div>welcome to csswelcome to csswelcome to csswelcome to css</div>
<hr>
<span>hello world</span>
<h3>welcome to csswelcome to csswelcome to csswelcome to csswelcome to css</h3>
</body>
</html>
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* li{
list-style-type:decimal;
}*/
.first{
list-style-type:decimal;
}
.second{
/* list-style-type:square;*/
list-style-image:url(../images/male.gif);
}
.third{
list-style-type:circle;
list-style-position:inside;
}
.fourth{
/* list-style:squareurl url(../images/female.gif) inside;*/
list-style:none;
}
.nav{
list-style:none;
}
.nav li{
list-style:none;
float:left;
width:50px;
}
</style>
</head>
<body>
<ul>
<li class="first">hello</li>
<li class="second">hello</li>
<li class="third">hello</li>
<li class="fourth">hello</li>
</ul>
<hr>
<nav>
<ul class="nav">
<li>新闻</li>
<li>地图</li>
<li>视频</li>
<li>贴吧</li>
</ul>
</nav>
</body>
</html>
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* div{
color: red;
background-color:#cccccc;
background-color:transparent;
background-image:url(../images/heihei.gif);
}*/
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<p>welcome to css welcome to css welcome to css </p>
<p>welcome to css welcome to css welcome to css </p>
<p>welcome to css welcome to css welcome to css </p>
</div>
<hr>
<p class="cart"></p>
购物车
</body>
</html>
div{
color: red;
/* background-color:#cccccc;
background-color:transparent;
background-image:url(../image/heihei.gif);
background-repeat:no-repeat;
background-position:right top;
height: 100px;
background-attachment:fixed;*/
background:red url(../../images/qq.jpg) repeat-x 30px 100px;
}
.cart{
width:30px;
height: 30px;
background-color:#ccc;
background-image:url(../image/icon.gif);
background-color:transparent;
background-position:-160px -30px;
}
12
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
width: 500px;
border:1px solid red;
border-collapse:collapse;
}
td{
border:1px solid red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" >
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>1
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
</table>
</body>
</html>
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
width:250px;
background:#ccc;
}
.first{
/*border-top-color:red;
border-top-width:1px;
border-top-style:solid;
border-right-color:blue;
border-right-width:2px;
border-right-style:dashed;
border-bottom-color:green;
border-bottom-width: 4px;
border-bottom-style: dotted;
border-left-color:gray;
border-left-width:6px;
border-left-style:double; */
/*
border-top:1px;
border-bottom: 2px dashed blue;*/
/*
border-color:red green pink;
border-width: 1px 2px 4px 6px;
border-style:solid dashed dotted double;
*/
border:1px dotted red;
}
.second{
/* padding-top:15px;
padding-left:10px;
padding-bottom:20px;
padding-right:30px;
padding: 1px 2px 4px 6px;*/
padding:5px 20px 20px 4px;
}
</style>
</head>
<body>
<p class="first">welcome to html</p>
<p class="second">welcome to css</p>
<p class="third">welcome to java</p>
</body>
</html>
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* body默认margin不为0 */
body{
margin:0;
padding:0;
}
/* p默认margin也不为0 */
p{
margin:0;
}
ul{
list-style:none;
margin:0;
padding:0;
}
body,ul,ol,dl,li,p,form,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
</style>
</head>
<body>
welcome to css
<p>hello world</p>
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* body默认margin不为0 */
body{
margin:0;
padding:0;
}
/* p默认margin也不为0 */
p{
margin:0;
}
ul{
list-style:none;
margin:0;
padding:0;
}
body,ul,ol,dl,li,p,form,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
</style>
</head>
<body>
welcome to css
<p>hello world</p>
<ul>
<li>hello1</li>
<li>hello2</li>
<li>hello3</li>
</ul>
</body>
</html>
15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:50px;
height:50px;
background:#ccc;
}
.div1{
margin-bottom:20px;
}
.div2{
margin-top:30px;
}
.div3{
width:100px;
height:100px;
background: blue;
margin-top:20px;
/* border:1px soild red; */
}
.div4{
margin-top:10px;
}
p{
margin:20px 0;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<hr>
<div class="div3">
<div class="div4"></div>
</div>
<hr>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
</body>
</html>
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width:800px;
border:1px solid #000;
position:relative;
}
.div1,.div2,.div3,.div4{
width:100px;
height:50px;
}
.div1{
background:red;
/* 默认为station */
/* position:static; */
position:relative;
top:20px;
left:50px;
z-index:-5;
}
.div2{
background:blue;
position:absolute;
left:100px;
bottom:50px;
z-index:-8;
}
.div3{
background:green;
position:fixed;
bottom:50px;
left:100px;
}
.div4{
background:cyan;
}
</style>
</head>
<body>
<div id="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
</body>
</html>
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
/* width:800px; */
border:1px solid #000;
}
.div1,.div2,.div3,.div4{
width:300px;
height:50px;
}
.div1{
background:red;
float:left;
}
.div2{
background:blue;
float:left;
clear:left;
}
.div3{
background:green;
float:left;
}
.div4{
background:cyan;
float:left;
}
.clr{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="clr"></div>
</div>
wellcme to CSS
</body>
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0;
padding:0;
}
#container{
width:960px;
margin:0 auto;
border:2px solid #0f0;
}
.div1,.div2,.div3,.div4{
width:200px;
height:180px;
float:left;
margin:5px;
border:5px outset #ff7300;
padding:10px;
}
#container img{
width:100%;
height:100%;
}
#container .clr{
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div class="div1"><img src="../../images/adv1.jpg" alt=""> </div>
<div class="div2"><img src="../../images/adv2.jpg" alt=""> </div>
<div class="div3"><img src="../../images/adv3.jpg" alt=""> </div>
<div class="div4"><img src="../../images/adv4.jpg" alt=""> </div>
<div class="clr"></div>
</div>
<p>welcome to CSS</p>javascript
</body>
</html>
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1{
width:100px;
height:100px;
background:blue;
/* display:none; */
display:inline;
}
span{
width:100px;
height:100px;
background:yellow;
/* display:block; */
/* 将行级元素转换为块级元素进行显示，独占一行进行显示 */
/* 我想对行级元素设置宽和高，但我还想让行级不要独占一行 */
/* 方法1：设置浮动； */
/* float:left; */
/* 方法2：display:inline-block */
display:inline-block;
}
i{
display:inline-block;
width:100px;
height:100px;
background:red;
}
p{
width:50px;
height:50px;
background:red;
}
.p1{
/* display:none; */
visibility:hidden;
}
#login{
display:inline-block;
width:100px;
text-decoration: none;
background:rgb(255, 0, 0.7);
color:#fff;
text-align:center;
border-radius:8px;
}
#login:hover{
background:rgb(255, 0, 0.5);
}
</style>
</head>
<body>
<div class="div1">div1</div>
<span>span1</span>
<i>哈哈</i>
<hr>
<p class="p1">p1</p>
<p class="p2">p2</p>
<hr>
<a href="javascript:alert('哈哈哈')" id="login">登 陆</a>
</body>
</html>
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
border:2px solid red;
/* outline-width:4px;
outline-color:blue;
outline-style:dashed; */
outline:4px green dashed;
}
.usrname{
border:1px solid red;
outline:none;/* 用户名文本框框不设置轮廓 */
padding-left:3px;
width:80px;
}
.email{
border:0;
outline:0;
border-bottom:1px solid #000;
}
.submit{
border:0;
padding:5px;
width:100px;
}
.mydiy{
width: 100px;
height: 50px;
}
.mydiv{
width: 100px;
height: 50px;
background-color:#ccc;
border:2px solid red;
}
</style>
</head>
<body>
<span>welcome to css</span>
<hr>
用户名：<input type="text" class="usrname">
<hr>
<a href="#">CSS</a>
<hr>
邮箱：<input type="text" class="email">
<input type="submit" value="提交" class="btnsubmit">
<hr>
<div class="mydiv">div</div>
</body>
</html>
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
border:1px solid red;
min-width:500px;
}
div{
border:1px solid blue;
width: 300px;
height: 80px;
overflow:auto;
}
span{
cursor:pointer;
}heeloworld
</style>
</head>
<body>
<p>
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
</p>
<hr>
<div>
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
welcome to css welcome to css welcome to css welcome to css
</div>
<hr>
<span>光标的形状</span>
</body>
</html>
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hello{
width:80%;
border:1px solid #ccc;
border-spacing:0;
border-collapse:separate;
}
.hello th,.hello td{
border:1px solid #ccc;
padding:5px;
}
</style>
</head>
<body>
<table class="hello" cellspacing="0">
<thead>
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
<th>th4</th>
</tr>
</thead>
<tbody>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
<td>td4</td>
</tr>
</tbody>
</table>
</body>
</html>
23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="main">
main
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
@charset "utf-8";
body{
padding:0;
margin:0;
}
#container{
width: 980px;
border:1px solid #ccc;
margin:0 auto;
}
#container .header{
width: 100%;
height: 80px;
background:red;
}
#container .main{
width: 100%;
height: 600px;
background:blue;
/* margin-top:10px; */
margin:10px 0;
}
#container .footer{
width: 100%;
height: 120px;
background:green;
/* margin-top:10px; */
}
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<!-- <aside>
left side
</aside> -->
<section class="main">
main
</section>
<aside>
right aside
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
@charset "utf-8";
body{
padding:0;
margin:0;
}
#container{
width: 980px;
border:1px solid red;
margin:0 auto;
}
#container .header{
width: 100%;
height:80px;
background:red;
}
#container .wrapper{
width:100%;
height:600px;
background:blue;
margin:10px 0;
}
#container .wrapper aside{
background:pink;
width: 200px;
height: 400px;
float:left;
}
#container .wrapper .main{
background:cyan;
width:770px;
height:600px;
float:left;
/* margin:0 10px; */
margin-right:10px;
}
#container .footer{
width:100%;
height:120px;
background:green;
}
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<article id="wrapper">
<section class="main">
main
</section>
<aside class="left">
left aside
</aside>
<aside class="right">
right aside
</aside>
</article>
</body>
</html>
@charset "utf-8";
/*
父容器
1.溢出隐藏
2.设置容器的内边距padding，用来空出位置放置左右两个侧边栏
*/
#wrapper{
overflow:hidden; /* 超出部分隐藏 */
/* 实现左侧边栏和右侧边栏 */
padding:0 200px; /* 左右分别空出200px用于放置左、右侧边栏 */
min-width:300px;
border:1px solid #CCC;
}
/*
主体：
1.宽度自适应
2.设置浮动布局
*/
#wrapper .main{
width: 100%;
height: 300px;
background:green;
float:left;
}
#wrapper aside{
width: 190px;
height: 300px;
background:blue;
float:left;
position:relative;
}
#wrapper .left{
margin-left:-100%;
left:-200px;
}
#wrapper .right{
margin-left:-190px;
left:200px; /* 相对于左边 */
/* right:-200px; */ /* 相对于右边 */
}
26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
main
</section>
<aside class="left">
left
</aside>
<aside class="right">
right
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
@charset "utf-8";
body{
margin:0;
padding:0;
}
#container{
margin:0 auto;
}
#container .header{
width:100%;
height: 80px;
background:red;
}
#container .wrapper{
overflow:hidden;
padding:0 200px;
min-width:300px;
margin:10px 0;
}
#container .main{
width:100%;
height: 400px;
background:blue;
float:left;
}
#container aside{
float:left;
width: 190px;
height: 300px;
background:cyan;
position:relative;
}
#container .left{
margin-left:-100%;
left:-200px;
}
#container .right{
margin-left:-190px;
left:200px;
}
#container .footer{
width:100%;
height: 150px;
background:green;
}
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div id="container">
<header class="header">
header
</header>
<article class="wrapper">
<section class="main">
<div class="main-wrapper">
main
</div>
</section>
<aside class="left">
left
</aside>
<aside class="right">
right
</aside>
</article>
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
@charset "utf-8";
body{
margin:0;
padding:0;
}
#container{
margin:0 auto;
}
#container .header{
width:100%;
height: 80px;
background:red;
}
#container .wrapper{
overflow:hidden;
min-width:300px;
margin:10px 0;
}
#container .main{
width:100%;
float:left;
}
#container .main-wrapper{
background:pink;
height: 400px;
margin:0 200px;
}
#container aside{
float:left;
width:190px;
height: 300px;
background:cyan;
}
#container .left{
margin-left:-100%;
}
#container .right{
margin-left:-190px;
}
#container .footer{
width:100%;
height: 150px;
background:green;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
