CSS样式

一、css介绍

层叠样式表(英文全称：Cascading Style Sheets)

​ 是一种用来表现HTML标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

二、使用

2.1使用方式

css不可以单独使用 需要内嵌到HTML中

使用方式：

​ 方式一：行内样式:使用style属性，引入css样式 name id class style

​ 方式二：内联式 ： style标签内部引入css样式

​ 方式三：外部样式

注意：

​ 推荐使用第三种

​ 就近原则：行内样式 > 内部样式和外部样式（谁离标签近 谁的优先级高

<!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><!--方式2： 内联式 ： style标签内部引入css样式--><link rel="stylesheet" href="../css/demo.css"><style>h1{color: aqua;}p{color: blue;}</style><!--方式3：  外部样式--></head>
<body><!--方式一： 行内样式:使用style属性，引入css样式   name id class style--><!--优先级： 行内样式 >  外部样式-内联式(就近原则，谁离文本近谁有优先级最高)--><p style="color: chartreuse;">人间烟火气，最抚凡人心</p><p>窗前明月光，疑是地上霜</p><p>举头望明月，低头思故乡</p><h1 >本是天上逍遥的仙儿</h1>
</body>
</html>

2.2选择器

理解

​ 选择器定位到具体修饰的标签

选择器的种类：

1、标签选择器：根据标签名定位到具体的标签

2、id选择器： 根据id属性名定位到该标签【id有且唯一】

3、class选择器，根据class的值定位标签 *
class的值可以有多个：【多个标签可以有相同的class】【一个标签可以有多个class】

4、组合选择器：可以根据多种选择器类型匹配选择器定位标签【中间用逗号隔开】

5、层级选择器 ： 由外到内一层一层的定位 【空格】

6、 *选择器

7、伪类选择器：通过 选择器：状态 定位标签

优先级： 层级选择器 > 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>选择器</title>
</head>
<style>/* 1、标签选择器： 根据标签的名字定位到该标签 */p{font-size: larger;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color: deeppink;}/* 2、id选择器： 根据id属性名定位到该标签【id有且唯一】 */#p1{color: blue;}/* 3、class选择器，根据class的值定位标签 *//* class的值可以有多个：【多个标签可以有相同的class】【一个标签可以有多个class】 */.d1{font-size: x-large;color: aqua;}/* 4、组合选择器：可以根据多种选择器类型匹配选择器定位标签【中间用逗号隔开】  */#p1,.d1{color: gold;}/* 5、层级选择器 ： 由外到内一层一层的定位 【空格】 */.d2 div span{font-size: small;color: blueviolet;}/* 6、 *选择器 ：  */*{margin: 0px;}/* 7、伪类选择器：通过 选择器：状态 定位标签 *//* 未点击状态 */#a:link{font-size: x-large;color: rgb(236, 18, 164);}/* 点击后状态 */#a:visited{color: rgb(221, 41, 17);font-size: medium;}/* 鼠标悬停状态 */#a:hover{color: dimgrey;font-size: x-large;}/* 鼠标点击不松开状态 */#a:active{font-size: x-small;color: magenta;}/* 优先级： 层级选择器 > id选择器 > 其他选择器【就近原则】 */
</style>
<body><p>我落人中然自在，本是天上逍遥的仙儿~</p><p id="p1">哎呀我说生存呐~</p><div class="d1">哎呀我说命运呐~</div><p class="d1">玫瑰无原则 心动至上</p><div>我如果爱你，绝不像攀援的凌霄花</div><div class="d2"><div><span>内部标签</span></div></div><span>外部标签</span><hr><a id="a" href="https://www.baidu.com">点击跳转百度</a>
</body>
</html>

三、css的语法

格式：key:value; 键值对

样式名与样式值之间用冒号隔开

样式与样式之间用分号隔开

完整格式

​ 选择器{
​ 样式名：样式值；

​ 样式名：样式值；

​ ………………

​ }

四、常见样式

4.1尺寸修饰

<style>.d1{width: 20%;height: 500px;background-color: coral;font-size: 2em;/* em : 倍数 --相对与父窗口中的内容*/}
</style><body>尺寸修饰<div class="d1">div的内容</div>
</body>

4.2字体修饰

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 属性指定字体的粗细：

<style>.sp1{color: darkorange;font-size: 20px;font-weight: bolder;         /* bolder 字体是否加粗*/font-style: italic;          /* italic 字体是否倾斜*/font-family: "宋体";         /* 设置字体样式*/}.sp2{/* 简写 *//* 顺序不能能变：style-weigth-size-family */font:italic bolder  15px 宋体 ; color:rgb(28, 235, 97);}
</style>
<body><span class="sp1">我是个沉默不语的，靠着车窗想念你的乘客</span><br><span class="sp2">当107路再次经过</span><p>当107路再次经过</p>
</body>

4.3文本修饰

color: 字体颜色
text-align: center; - - 文本对齐方式
text-decoration:none; - - 文本的线
text-shadow: pink 5px 5px 2px; - - 文本的阴影 【阴影颜色-水平方向的偏移量-垂直方向的偏移量-模糊距离】
line-height: - - 行高 （文本在标签内所占的高度）
width:
height:
border: 1px #ffffff solid; - - 盒子边框【边框粗细-颜色-边框线样式】

<style>.p{color: rgb(0, 255, 21);                 /* 字体颜色 */text-align: center;                       /* 文本对齐方式 */text-decoration:none;                     /* 文本的线 */text-shadow: pink 5px 5px 2px;          /* 文本的阴影 【阴影颜色-水平方向的偏移量-垂直方向的偏移量-模糊距离】*/line-height: 400px;                       /* 行高 （文本在标签内所占的高度）*/width: 400px;height: 300px;border: 1px rgb(76, 14, 223) solid;     /* 盒子边框【边框粗细-颜色-边框线样式】 */}</style>
</head><body><p class="p">我不是你的先生宋东野</p><a href="https://www.baidu.com"></a>
</body>

4.4背景修饰

width: 500px;
height: 1200px;
background-color: pink; - - 背景颜色
background-image: url(…/img/background.jpg); - - 背景图片
background-repeat: no-repeat; - - 背景图片是否平铺
background-position: left top; - - 指定背景图片的位置
background-attachment: fixed; - - 背景图片是否随着标签滚动 【fixed-固定 scroll-滚动】

   <style>.d{width: 500px;height: 1200px;background-color: pink;                                   /* 背景颜色  */background-image: url(../img/background.jpg);               /* 背景图片  */background-repeat: no-repeat;                               /* 背景图片是否平铺  */background-position: left top;                              /* 指定背景图片的位置  */background-attachment: fixed;                               /* 背景图片是否随着标签滚动 【fixed-固定  scroll-滚动】 */}</style>
</head>
<body><div class="d"></div>

4.5定位修饰

relative- -相对定位 相对变迁原先的位置为起点 【通过top left right bottom 来调整 】

absolute- -绝对定位 以页面的左上为起点 【通过top left right bottom 来调整 】

fixed- -固定定位 【位置不会变化】

 <style>.d1{width: 100px;height: 100px;background-color: aqua;}.d2{width: 150px;height: 150px;background-color:red;position: relative;             /* 位置【  absolute-绝对定位  fixed-固定定位】*/top: 50px;left: 50px;/* relative-相对定位  相对变迁原先的位置为起点 通过top left right bottom 来调整 *//* absolute-绝对定位  以页面的左上为起点 通过top left right bottom 来调整 *//* fixed-固定定位 位置不会变化*/}</style>
</head>
<body><div class="d1"></div><div class="d2"></div>
</body>

4.6浮动

float ：left | right

特点：

​ 1、一经读懂脱离文档流

​ 2、标签将不再独占一行

​ 3、顶部对齐

注意：

​ 浮动会影响后面的标签布局，因此使用了浮动之后需要清除浮动
清除浮动
div style=“clear: both;”></div

 <style>.d1{width: 100px;height: 100px;background-color: aqua;float: right;}.d2{width: 50px;height: 50px;background-color: rgb(115, 255, 0);float: left;                    /* 浮动 【会影响页面布局，需要清除标签】 */}.d3{width: 150px;height: 150px;background-color: rgb(255, 0, 242);float: left;}</style>
</head>
<body><div class="d1"></div><div class="d2"></div><div class="d3"></div><!-- 清除浮动 --><div style="clear: both;"></div>
> 概述：是一个双列集合，属于map集合的实现类。
* 集合中的key值是唯一的，元素是无序的
* HashMap集合去重原理和无序原理和HashSet集合原理一致
* 通过比较key的哈希值和equals的结果来实现去重
* HashSet集合底层就是使用HashMap来实现的
### LinkedHashMap集合概述：是一个双列集合，是HashMap集合的子类
**特点：** 本类没有特殊的方法，只能使用父类中继承的 集合中元素有序 集合中的key值唯一
### 【笔试题】HashMap集合和HashTable集合的区别相同点：**两个集合都是Map接口的实现类，都属于双列集合
两个集合底层是使用哈希表来存储数据
* 两个集合中的方法大致相同
**不同点：** 版本不同：HashMap是jdk1.2出现的，HashTable是jdk1.0出现
* 线程安全性不同：HashMap是线程不安全的，HashTable线程安全的
* 存储的值不同：HashMap可以存储null键null值，HashTable不可以存储null
</body>

4.7display

特点：

​ 1、可以实现底部对齐

​ 2、可以实现块标签、行标签以及行内块的转换

​ 3、隐藏标签

块标签：独占一行 可以设置宽高

行标签：不独占一行 不可以设置宽高

行内块：不独占一行 可以设置宽高

<style>.d1{width: 100px;height: 100px;background-color: aqua;display: inline-block;  /* 转为行内块  ：可以设置宽高、但不独占一行 */}.d2{width: 50px;height: 50px;background-color: rgb(115, 255, 0); display: inline-block;  /* 转为行内块 */                  }.d3{width: 150px;height: 150px;background-color: rgb(255, 0, 242);display: inline-block;  /* 转为行内块 */}.sp1{display: inline-block;width: 50px;height: 50px;background-color: coral;}.sp2{display: block;width: 50px;height: 50px;background-color: rgb(2, 62, 228);}h2{display: none;    /* 隐藏标签 */}</style>
</head>
<body><h2>display的使用</h2><div class="d1"></div><div class="d2"></div><div class="d3"></div><span class="sp1">span1内容</span><span class="sp2">span2内容</span>body
</body>

4.8盒子模型

为页面提供了一种思路

边框： border

内边距：padding—-盒子中的内容与盒子边框的距离

外边距：margin——盒子中的内容与盒子边框的距离

注意：

​ 盒子总大小 ： width / height + 边框×2 + margin×2 + padding×2

 <style>.d1{width:100%;height:30px;background-color: #e3e4e5;}.d2{width: 100%;height: 140px;background-color: #ffffff;}.d3{width: 100%;height: 1000px;background-color: #f4f4f4;}</style>
</head>
<body><div class="d1"></div><div class="d2"></div><div class="d3"></div>
</body>

案例

案例一、京东头部

<!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>
</head>
<style>*{margin: 0px;padding: auto;}.dd{width: 100%;height: 40px;background-color: #e3e4e5;}ul{/* 去除ul列表前的圆点 */list-style-type: none;margin-left: 700px;font-size: 12px;color: #999999;}ul li{float: left;/* li标签间隔 */margin-left: 15px;/* 垂直方向居中 */line-height: 40px;}
</style>
<body><div class="dd"><ul><li>您好，请登录</li><li>|</li><li>我的订单</li><li>|</li><li>我的京东</li><li>|</li><li>京东会员</li><li>|</li><li>企业采购</li><li>|</li><li>客户服务</li><li>|</li></ul></div>
</body>
</html>

案例二、京东登录静态页面

<!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>*{margin: 0px;padding: auto;}.header{/* border: 1px solid black; */width: 100%;height: 80px;}.header img{float: left;margin-left: 465px;margin-top: 8px;}.header font{font-size: 24px;line-height: 80px;color: #484e53;float: left;margin-top: 5px;margin-left: 24px;}.dd img{margin-top: 12px;position: absolute;line-height: 40px;margin-left:490px ;}.dd p{/* float: left; */margin-left:510px ;line-height: 40px;}.dd{position: absolute;width: 100%;height: 40px;background-color: antiquewhite;           }.body{/* border: 1px solid rgb(11, 220, 235); */width: 100%;height: 475px;background-color: #8ABFE9;background-repeat: no-repeat;background-size: 100% 100%;/* background-image: url(img/body.jpg); */margin-top: 40px;}.login{/* border: 1px solid rgb(11, 220, 235); */position: absolute;width: 347px;height: 370px;background-color: #ffffff;margin-left: 1108px;margin-top:-440px;position: absolute;float: left;}.body .login p font {position: absolute;color: #b5b5b6;margin-left: 50px;margin-top: 30px;font-size:large;}.body .login p font1{position: absolute;font-size:large;color: #fa0909;margin-top: 30px;margin-left: 222px;margin-bottom: 5px;}.body .login font2{position: absolute;margin-top: 63px;color: #b5b5b6;font-size: small;}.body .login p .um{width: 40px;height: 40px;border: 1px solid #c3c3c3;background-image: url(img/ren.jpg);background-size: 100% 100%;float: left;margin-top: 19px;margin-left: 20px;}.body .login p input{width: 266px;height: 38px ;float: left;border: none;margin-top: 19px;border: 1px solid #c3c3c3;}.body .login p1 .sm{width: 40px;height: 40px;border: 1px solid #c3c3c3;background-image: url(img/锁.jpg);background-size: 100% 100%;float: left;margin-top: 12px;margin-left: 20px;}.body .login p1 input{width: 266px;height: 38px ;float: left;border: none;margin-top: 12px;border: 1px solid #c3c3c3;}#pp{position: absolute;margin-top: 200px;}#button{position: absolute;float: left;width: 314px;height: 40px;background-color: #df0a17;margin-top: 160px;margin-left: -314px;text-align: center;font-size:x-large;line-height: 40px;color: #ffffff;text-decoration: none;}#forget{position: absolute;color: rgb(63, 62, 62);margin-top: 130px;margin-left: -50px;}#login-footer{width: 347px;height: 50px;background-color: #f3ecec88;margin-left: 1108px;margin-top:-120px;position: absolute;float: left;}#qq{position: absolute;margin-top: 20px;margin-left: 20px;}#wei{position: absolute;margin-top: 20px;margin-left: 90px;}#reg{position: absolute;margin-top: 20px;margin-left: 250px;}.QQ{position: absolute;color: rgb(63, 62, 62);margin-top: 18px;margin-left: 43px; }.weixin{position: absolute;color: rgb(63, 62, 62);margin-top: 18px;margin-left: 113px; }.REG{position: absolute;color: rgb(63, 62, 62);margin-top: 18px;margin-left: 273px; }.footer{width: 100%;height: 40px;background-color: #FFFFFF;}ul{/* 去除ul列表前的圆点 */list-style-type: none;margin-left: 480px;font-size: 12px;color: #999999;}ul li{float: left;/* li标签间隔 */margin-left: 13px;/* 垂直方向居中 */line-height: 40px;}#footword{position: absolute;color: #999999; font-size: 12px;margin-top: 40px;margin-left: 830px;}#tip{position: absolute;margin-top: 50px;margin-left: 1108px;z-index: 99;background-color: antiquewhite;text-align: center;font-size: small;line-height: 40px;color: #858282;width: 347px;height: 40px;}#chat{margin-top: 55px;}#page{position: absolute;color: rgb(109, 107, 107);font-size: small;margin-left: 610px;margin-top: 20px;}#img{z-index: -1;margin-left: 470px;font-size: 100% 100%;}</style>
</head>
<body><div class="header"><img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" ><font id="page">登录页面，调查问卷</font><font>欢迎登录</font><img id="chat" src="https://misc.360buyimg.com/user/passport/1.0.0/css/i/q-icon.png"></div><div id="tip"><img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png"><font>京东不会以任何理由要求您转账汇款，谨防诈骗。</font></div><div class="dd"><img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png" ><p style="color: #858282; font-size:x-small; ">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p></div><div class="body"><img id="img" src="img/body.jpg" alt=""><div class="login"><p><font>扫码登陆</font><font1>账户登录</font1></p><font2>——————————————————————————</font><p><span class="um"></span><input type="text" name="username" placeholder="邮箱/用户名/手机号"></p><p1><span class="sm"></span><input type="password" name="username" placeholder="请输入密码"></p><!-- <span >登&nbsp;&nbsp;录</span> --><a id="button" href="https://www.baidu.com/">登&nbsp;&nbsp;录</a><span id="forget" ">忘记密码</span>         </div><div id="login-footer"><p id="qq"><img src="img/QQ.jpg" ></p><font class="QQ">QQ</font><p1 id="wei"><img src="img/WEchart.jpg"></p1><font class="weixin">微信</font><p2 id="reg"><img src="img/注册.jpg" ></p2><font class="REG">立即注册</font></div>       </div><div class="footer"><ul><li>关系我们</li><li>|</li><li>联系我们</li><li>|</li><li>人才招聘</li><li>|</li><li>商家入驻</li><li>|</li><li>广告服务</li><li>|</li><li>手机京东</li><li>|</li><li>友情链接</li><li>|</li><li>销售联盟</li><li>|</li><li>京东社区</li><li>|</li><li>京东公益</li><li>|</li><li>English Site</li><li>|</li></ul><div id="footword">Copyright © 2004-2022  京东JD.com 版权所有</div></div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uElRu829-1647871288788)(C:\Users\12994\Desktop\笔记整理\JavaWeb\笔记\总结整理\CSS样式.assets\image-20220321215455055.png)]

        </p2><font class="REG">立即注册</font></div>
</div><div class="footer"><ul><li>关系我们</li><li>|</li><li>联系我们</li><li>|</li><li>人才招聘</li><li>|</li><li>商家入驻</li><li>|</li><li>广告服务</li><li>|</li><li>手机京东</li><li>|</li><li>友情链接</li><li>|</li><li>销售联盟</li><li>|</li><li>京东社区</li><li>|</li><li>京东公益</li><li>|</li><li>English Site</li><li>|</li></ul><div id="footword">Copyright © 2004-2022  京东JD.com 版权所有</div>
</div>

```

CSS常见样式的介绍和使用（附加案例）相关推荐

  1. Python全栈（九）Web前端基础之3.CSS常见样式和选择器

    文章目录 一.CSS常见样式 1.常见文本样式 2.列表常见样式 3.背景样式 4.浮动样式 二.CSS常用选择器 1.CSS元素选择器介绍 2.元素选择器 3.id选择器 4.类选择器 5.通配选择 ...

  2. CSS样式的使用（CSS选择器、CSS语法、CSS常见样式）：

    1.CSS样式的理解: Cascading Style Sheets(层叠样式表):修饰html标签样式的 2.使用(需要内嵌html中): 1.行内样式:(通过标签的style属性使用) 格式:样式 ...

  3. Html5中的徽章,CSS 常见样式 特殊用法 贯穿线徽章箭头

    ### 贯穿渐变线,中间插值 - 如图: > ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190427200554843.png) ![在这里插入图片描 ...

  4. html鼠标手状态,css鼠标样式cursor介绍(鼠标手型)

    CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*" 例子:文本或其它页面元素  文本或其它页面元素  注意把 * 换成如下15个效果的一种: 下面是对这15 ...

  5. css鼠标样式cursor介绍(鼠标手型)

    http://www.17jquery.com/div_css/55815/ CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*"   例子:<span ...

  6. 房子装修工程师CSS(一)之盒子模型/选择器的权重计算/常见样式属性/浮动float

    一.盒子模型 (一)CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:margin.border.padding.content(width.height). (二)盒子模型分两种: 1. ...

  7. html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...

    CSS高级技巧目录 1.精灵图 使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...

  8. html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍

    这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...

  9. 千锋和蓝欧html5,蓝鸥零基础学习HTML5第六讲 CSS的常见样式

    CSS的常见样式 1.css文本样式的设置 html> Document div { font-size:160px; font-family: "sans-Serif"; ...

最新文章

  1. node封装mysql模块
  2. tensorflow入门之损失函数
  3. Python简单的抓取静态网页内容
  4. Lemmy仿Reddit社区 v0.8.10源码
  5. php csrf jsonp,读取型CSRF（JSONP劫持、CORS跨域资源读取、Flash跨域劫持）
  6. Selenium常用API的使用java语言之1-环境安装之Java
  7. 如何搞定纸上代码环节？
  8. 【优化算法】Iterative映射和单纯形法的改进灰狼优化算法(SMIGWO)【含Matlab源码 1746期】
  9. 一台计算机英语美式发音,请教美式英语的几个发音问题！
  10. 支付宝SOFA架构：降低业务系统复杂度
  11. 晒晒自己电脑里的常用工具
  12. Linux服务器间传文件SCP命令使用方法
  13. 将条码软件中的标签转化成PDF
  14. 意大利或将立法 禁止中小学校园携带手机
  15. 微信支付 postman_支付宝微信刷脸支付系统搭建服务商平台怎么做
  16. 计算机专业梦想作文,我的理想是电脑工程师作文
  17. 求二阶系统输入单位斜坡响应matlab,二阶系统的斜坡响应教程.docx
  18. android随笔25——搜索框输入内容后界面的隐藏逻辑
  19. 超声波之纵波(按照超声波类型)
  20. 深度学习基础知识_数学基础（学习笔记）

热门文章

  1. 安装旗杆的注意事项有哪些？
  2. 线性代数之——向量空间
  3. CFF刷题202006-1线性分类器
  4. 让知识付费系统视频支持M3U8格式播放的方法
  5. 跨境电商亚马逊 速卖通 阿里国际 shopee 运营策略与实践
  6. python使用RCON,连接游戏服务器求生之路2、我的世界等
  7. 【回答问题】ChatGPT上线了！给我推荐20个比较流行的图神经网络模型
  8. 2019华为销售精英挑战赛线下海选经验--粤港澳赛区
  9. springcloud gateway网关直接给前端返回json数据
  10. Java 发送邮件的学习笔记