发布时间：2025-12-09 11:50:45 浏览次数：2
标题标签:<h1>~<h6>
标题标签的文字都有加粗特效。
文字从 h6 到 h1 越来越大。
独占一行。
h1 标签对于网页尤其重要,开发中有特定使用场景,如:新闻的标题、网页的logo部分。
段落标签:<p></p>
换行标签:<br>
水平线标签:<hr>
文本格式化标签:
| 标签 | 说明 | 标签 | 说明 |
|---|---|---|---|
<b></b> | 加粗 | <strong></strong> | 加粗,强调语气 |
<u></u> | 下划线 | <ins></ins> | 下划线,强调语气 |
<i></i> | 倾斜 | <em></em> | 倾斜,强调语气 |
<s></s> | 删除线 | <del></del> | 删除线,强调语气 |
媒体标签
<img src="" alt="">D:\day\images\1.png。https://www.baidu.com。./../文件夹名/目标文件名<audion src="" controls></audio><video src="" controls></video>链接标签:<a href=""></a>
_self或_blank 打开方式。无序列表:<ul><li></li></ul>
有序列表:<ol><li></li></ol>
自定义列表:<dl><dt></dt><dd></dd></dl>
<ol> <li>无序</li> <li><无序/li></ol> <ul> <li>有序</li> <li>有序</li></ul> <dl> <dt>自定义</dt> <dt>自定义</dt></dl>表格标签
table>tr>td
caption:大标题
th:表头单元格
td:普通单元格
<table> <caption>标题</caption> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td colspan="2">单元格1</td> <td rowspan="2">单元格3</td> </tr> <tr> <td>单元格</td> <td>单元格</td> </tr></table>表单标签
type="text":文本框。type="password":密码框。type="radio":单选按钮,使用name属性进行分组。type="checkbox":多选框type="file":文件上传,multipe实现多文件选择。type="submit":提交按钮。type="reset"重置按钮。type="button"普通按钮。placeholder:占位符,提示文本。value:值,用户项后台传输数据。name:名称。checked:默认选中。multiple:多文件选择。<button>按钮</button><select><option>选项1</option><option>选项2</option></select><textarea rols="" rows=""></textarea><label>男<input type="radio"></label>语义化标签
<p></p><span></span><header></header>:头部<nav></nav>:导航栏<footer><footer>:底部<aside></aside>:侧边栏<section><section>:区块<article></article>:文章字符实体
空格<header>:头部标签nav:导航标签article:内容标签section:区块标签aside :侧边栏标签footer:尾部标签<audio>:音频
<audio src="文件地址" controls="controls"></audio>或<audio controls="controls" width="300"><source src="audio.ogg" type="video/ogg"> <source src="audio.mp3" type="video/mp3"> 您的浏览器暂不支持<video>标签播放音频</audio>属性
autoplay:自动播放(autoplay)controls:控制台(controls)width:宽度(像素值)height:高度(像素值)loop:是否循环播放(loop)src:地址<video>:视频
<video src="文件地址" controls="controls"></video>或<video controls="controls" width="300"><source src="move.ogg" type="video/ogg"> <source src="move.mp4" type="video/mp4"> 您的浏览器暂不支持<video>标签播放视频</video>autoplay:自动播放(autoplay)controls:控制台(controls)width:宽度(像素值)height:高度(像素值)loop:是否循环播放(loop)preload:是否预加载(auto:预加载,none:不预加载)src:地址poster:加载等待的画面图片(图片地址)muted:静音播放type
email:邮箱url:地址date:日期time:时间month:月份week:周number:数字tel:手机号码search:搜索框color:颜色属性
required:必填(required)
placeholder:提示文本()
通过如下方式修改提示文本
input::placeholder { color:skyblue;}autofocus:自动获焦(autofocus)
autocomplete:是否显示上次输入的值(on:开启,off:关闭)
multiple:多选文件(multiple)
<link style="styesheet" src="">)<p style="color:violet; font-size:24px;">这是一个p标签<p/>color:文字颜色font-size:字体大小background-color:背景颜色width:宽度height:高度font-size:字体大小。(单位:px)font-weight:字体粗细。(400或700,不能带单位)font-style:字体样式。(normal,italic,sans-serif,serif等)font-family:字体类型。(Microsoft YaHei,黑体,宋体,楷体)font:连写。color:文本颜色。text-align:文本水平对齐方式(center,left,right)text-decoration:文本修饰line-height:行高(line-height和height值相等时,文本垂直居中)text-indent:文本缩进。(em,px)文本。
span标签,a标签。
input系列,img标签。
注意:text-align:center;需要在父元素中设置。
background-color:背景颜色。(颜色值)background-image:背景图片。(url("地址"))background-repeat:背景平铺。(repeat,no-repeat,repeat-x,repeat-y)background-position:背景位置。(x,y,left,right,top,bottom,center)background:连写。(color,image,repeat,position)标签名 {css属性名:属性值;}.类名 {css属性名:属性值;}#id名 {css属性名:属性值;}* {css属性名:属性值;}选择器1 选择器2 {css属性名:属性值;}选择器1>选择器2 {css属性名:属性值;}选择器1,选择器2 {css属性名:属性值;}选择器1选择器2 {css属性名:属性值;}选择器:hover {css属性名:属性值;}emmet即通过简写语法,快速生成代码。
| 记忆 | 示例 |
|---|---|
| 标签名 | p |
| 类选择器 | .red |
| id选择器 | #one |
| 交集选择器 | p.red#one |
| 子代选择器 | ul>li |
| 内部文本 | ul>li |
| 创建多个 | ul>li*3 |
| 属性 | 效果 |
|---|---|
| display:block | 转为块级元素 |
| display:inline-block | 转为行内块元素 |
| display:inline | 转为行内元素 |
box-sizing:border-box4、外边距折叠现象 – ② 塌陷现象
5、行内元素的margin和padding无效情况
float:left。(left,right)
特点
注意点:浮动的元素不能通过text-align:center或者margin:0 auto。
清除浮动的方法 — ① 直接设置父元素高度
清除浮动的方法 — ② 额外标签法
//父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 .<p > <p > </p> <p > </p> <p > </p></p><p > </p><style> .left { float:left; width:200px; height:200px; background-color:skybule; } .right { float:right; width:200px; height:200px; background-color:violet; } .clearfix { clear:both }</style>清除浮动的方法 — ③ 单伪元素清除法
基本写法
.clearfix::after { content: ""; display:block; clear:both;}补充写法
.clearfix::after { content: ""; display:block; clear:both; height:0; visibility:hidden;}清除浮动的方法 — ④ 双伪元素清除法
.clearfix::after,.clearfix::before { content: ""; display:table;}.clearfix::after { clear:both}清除浮动的方法 — ⑤ 给父元素设置overflow : hidden
静态定位:position:static;
相对定位:position:relative
绝对定位:position:absolute;
固定定位:position:fixed;
子绝父相水平居中案例-解决方法
子绝父相水平垂直都居中案例-解决方法
元素的层级关系
改变定位元素的层级:z-index:数值;
垂直对齐方式:vertical-align:middle;(baseline,top,middle,bottom)
项目中 vertical-align 可以解决的问题
文本框和表单按钮无法对齐问题。
<input type="text"><button>提交</button><style> input { width: 200px; height: 30px; vertical-align: middle; } button { width: 80px; height: 30px; vertical-align: middle; }</style>input和button高度不一致。(button在高度计算上始终使用了Quirks模式。在Quirks模式下,边框的计算是在元素的宽度内的,而不像标准模式一样计算在外部。button的高度包含边框的高度,而文本框text则不包含边框高度。这就导致input高度会比button高两像素。)
//在input上面加如下代码box-sizing: border-box//或在button上加如下代码box-sizing:content-boxinput和button有空隙原因。(水平缝隙问题其实是因为标签之间的换行,产生了空白符,这些空白符某种意义上也算是字符,所以理所当然的占据了一定的空隙。)
input和img无法对齐问题。
img{vertical-align:middle;}p中的文本框,文本框无法贴顶问题。
<style> p { width: 200px; height: 200px; border: 1px solid #000; } input { vertical-align: top; }</style><p> <input type="text"></p>p不设高度由img标签撑开,此时img标签下面会存在额外间隙问题。
<p><img src="./images/product.png" alt=""></p><style> p { border: 1px solid #ccc; } img { vertical-align: middle; }</style>使用line-height让img标签垂直居中问题。
光标类型:cursor:属性值;
边框圆角:border-radius:数值;
overflow溢出部分显示效果
元素本身隐身
元素整体透明度:opacity:数值(0-1)
边框合并:border-collapse:collapse;
使用
下载字体包:Iconfont:https://www.iconfont.cn/
使用字体包方式
Unicode编码
引入样式表:iconfont.css→复制粘贴图标对应的Unicode编码→设置文字字体
<link rel="stylesheet" href="./iconfont.css"><span></span>span { font-family: "iconfont";}类名
引入字体图标样式表:<link rel="stylesheet" href="./iconfont.css">→调用图标对应的类名,必须调用两个类名(iconfont类和icon-xxx)
<link rel="stylesheet" href="./iconfont.css"><span >span</span>transform
移动:translate(水平位移,垂直位移);
取值
translate()只给一个值,则表示x轴方向移动。
分级
使用translate()实现绝对定位的元素居中
position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);旋转:rotate(角度)
多重转换:transform: translate(x,y) rotate(deg);
缩放:scale(x,y)
渐变:background-image:linear-gradient(颜色1,颜色2);
background-image:linear-gradient(transparent,rgba(0,0,0,.6));空间平移:transform:translate3d(x,y,z);
透视:perspective:数值;(像素单位数值,800~1200;必须添加给父元素)
空间旋转:transform:rolateZ(z)或rolateY(y)或rolateX(x)
左手原则:左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向。
transform:rolate3d(x,y,z,deg):用来设置自定义旋转轴的位置即角度(x,y,z取值为0~1之间的数字。)
立体成像:transform-style:preserve-3d;
animation动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)。
使用animation添加动画效果实现步骤:
定义动画→使用动画
/*定义动画*/@keyframes 动画名称 { from {} to {}}/*或*/@keyframes 动画名称 { 0% {} 10% {} 15% {} ... 100% {}}/*使用动画*/animation: 动画名称 动画花费时长;动画相关属性
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;多个动画用逗号分隔。
分辨率
视口
使用meta标签设置视口宽度,制作适配不同设备宽度的网页。
<meta name="viewport" content="width=device-width,initial-scale=1.0">二倍图
display: flex;,子元素可以自动的挤压或拉伸。justify-content: center;:沿主轴居中对齐。justify-content: space-around;:空白间距均匀分布在弹性盒子两侧。justify-content: space-between;:空白间距均匀分布在弹性盒子之间。justify-content: space-evenly;:弹性盒子与容器之间间距相等。align-item: center;:沿侧轴居中对齐。align-item: stretch;:弹性盒子盐主轴线被拉伸至铺满容器。flex: 1;flex-direction: row;:行,水平。flex-direction: column;:列,垂直。flex-direction: row-reverse;:行,从右到左。flex-direction:column-reverse;:列,从下到上。flex-wrap: wrap;(添加到父元素中)align-content;(添加到父元素中)align-items 的值。(添加到子元素中)align-self:self-start;align-self:self-end;align-self:center;rem单位
vm/vh单位
特点
相对单位。
相对视口的尺寸计算结果。
1vw = 1/100视口宽度。
1vh = 1/100视口高度。
实际开发中vm和vh不会混用。
媒体查询
原理:媒体查询能够检测视口的宽度,然后编写差异化的 CSS 样式,当某个条件成立, 执行对应的CSS样式。
写法
@media (媒体特性) { 选择器 { css属性 }}/*例子*/@media (width: 320px) { html { font-size: 32px; }}使用rem单位设置网页元素的尺寸:目前rem布局方案中,将网页等分成10份, HTML标签的字号为视口宽度的 1/10。
步骤
根据视口宽度,设置不同的HTML标签字号。
/*视口宽度320px,根字号为32px*/@media (width:320px) { html { font-size: 32px; }}/*视口宽度375px,根字号为37.5px*/@media (width:320px) { html { font-size: 37.5px; }}/*视口宽度414px,根字号为41.4px*/@media (width:320px) { html { font-size: 41.4px; }}书写代码,尺寸是rem单位。
使用flexible js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果
flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
<body> <p > </p> <script src="./js/flexible.js"></script></body>Less语法
描述
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意:浏览器不识别Less代码,目前阶段,网页要引入对应的CSS文件。
使用Less语法快速编译生成CSS代码
基本语法
单行注释:// 注释内容(快捷键:ctrl+/)
块注释:/*注释内容*/(快捷键:shift+alt+A)
运算:
加、减、乘直接书写计算表达式。
除法需要添加 小括号 或 .。
表达式存在多个单位以第一个单位为准
后代选择器
.父级选择器 { //父级样式 .子级选择器 { //子级样式 }}//less写法.father { color: red; .son { width: 100px; }}//生成的css.father { color: red;}.father .son { width: 100px}注意:&不生成后代选择器,表示当前选择器,通常配合伪类或伪元素使用
//less.father { color: red; &:hover { color: green; }}//生成的css.father { color: red;}.father:hover { color: green;}使用Less变量设置属性值
定义变量:@变量名:值;
使用变量:CSS属性: @变量名;
//定义@fontColor: pink;//使用.box { color: @fontColor;}a { color:@fontColor;}导入其他Less文件
@import 'base.less';使用Less语法导出CSS文件
方法一:配置EasyLess插件, 实现所有Less有相同的导出路径。
配置插件: 设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码(注意,必须是双引号)
{"out":"../css/"}方法二:控制当前Less文件导出路径
Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
// out: ./css/// out: ./css/common.css禁止导出
// out:false媒体查询
语法
@media (媒体属性){ 选择器 { css样式; }}/*完整写法*/@media 关键词 媒体类型 and (媒体特性){ css代码;}媒体特性
外链引用
<link rel="stylesheel" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">BootStrap框架
使用步骤
下载:https://www.bootcss.com/ 首页 → BootStrap3中文文档 → 下载BootStrap。
使用
引入: BootStrap提供的CSS代码:
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
调用类:使用BootStrap提供的样式。
常用类
container:响应式布局版心类。.container是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
.container-fluid也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%。
分别使用.row类名和 .col类名定义栅格布局的行和列。
- container类自带间距15px;
- row类自带间距-15px
BootStrap栅格系统
它默认将网页分成12等份
以像素的多少衡量大小
E[att]:选择具有att属性的E元素。E[att="val"]:选择具有att属性,并且属性值为val的E元素。E[att^="val"]:选择具有att属性,并且属性值以val开头的E元素。E[att$="val"]:选择具有att属性,并且属性值以val结尾的E元素。E[att*="val"]:选择具有att属性,并且属性值中包含val的E元素。E:first-child:匹配父元素中的第一个E元素。E:last-child:匹配父元素中的最后一个E元素。E:nth-child(n):匹配父元素中的第n个E元素。(-n+5:前五个,n+5:第五个开始,2n或even:偶数个,2n-1或2n+1或odd:奇数)E:first-of-type:指定类型E的第一个。E:last-of-type:指定类型E的最后一个。E:nth-of-type(n):指定类型E的第n个。::before:在元素内部的前面插入内容。::after:在元素内部的后面插入内容。box-sizing:border-box;
计算盒子宽度:width:calc()
width:calc(100%-80px);filter: 函数();该属性将模糊或颜色偏离等
/*模糊5个像素*/filter: blur(5px);transition: 要过渡的属性 花费时间 运动曲线 何时开始;transform:可实现位移、旋转、缩放
translate:移动
transform: translate(x,y);transform: translateX(n);transform: translateY(n);rotate:旋转
transform: rolate(45deg);设置旋转中心:transform-origin: x,y;scale:缩放
transform:scale(x,y);transform:scale(n);使用步骤
先定义动画
再使用动画
定义动画:@keyframe 动画名称 { 0% { width: 100px; } 100% { width: 200px; }}可以使用from和to分别代替0%和100%使用动画:p { width: 200px; height: 200px; background-color: skyblue; margin: 100px 100px; /*调用动画*/ animation-name: 动画名称; /*持续时间*/ animation-duration: 持续时间;}属性
@keyframes :规定动画。
animation :所有动画属性的简写属性,除了animation-play-state属性。
animation-name:规定@keyframes动画的名称。(必须的)
animation-duration:规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的)
animation-timing-function:规定动画的速度曲线,默认是“ease”。
animation-delay :规定动画何时开始,默认是0。
animation-iteration-count:规定动画被播放的次数,默认是1,还有infinite
animation-direction :规定动画是否在下一周期逆向播放,默认是“normal“,alternate逆播放
animation-play-state :规定动画是否正在运行或暂停。默认是"running",还有"paused"。
animation-fill-mode :规定动画结束后状态,保持forwards回到起始backwards
简写:animation:myfirst 5s linear 2s infinite alternate;私有前缀
-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;display:blockdisplay:inlinedisplay:inline-block水平居中
text-align:centermargin:0 auto垂直居中
line-hight:行高;子绝父相水平居中:使用子绝父相,让子盒子在父盒子中水平居中。
position: absolute;/*先让子盒子往右移动父盒子的一半*/left: 50%;/*再让子盒子往左移动自己的一半*/普通做法:margin-left: 负的子盒子宽度的一半;优化做法:transform: translateX(-50%);子绝父相垂直居中:使用子绝父相,让子盒子在父盒子中垂直居中。
position: absolute;/*让子盒子往右移动父盒子的一半*/left: 50%;/*让子盒子往左+往上走自己的一半*/transform: translate(-50%,-50%)* { margin: 0; padding: 0;}blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul { margin: 0; padding: 0;}box-sizing:border-box合并现象:垂直布局的块级元素,上下的margin会合并,最终两者距离为margin的最大值。
解决方法:
只给其中一个盒子设置 margin 即可。
塌陷现象:互相嵌套的块级元素,子元素的margin-top会作用在父元素上,导致父元素一起往下移动。
解决方法:
1.给父元素设置 border-top 或者 padding-top (分隔父子元素的 margin-top)。
2.给父元素设置 overflow:hidden;
3.转换成行内块元素。
4.设置浮动。
E:first-child {}:匹配父元素中第一个子元素,并且是 E 元素。
E:last-child {}:匹配父元素中最后一个子元素,并且是 E 元素。
E:nth-child(n) {}:匹配父元素中第 n 个子元素,并且是 E 元素。()
E:nth-last-child(n) {}:匹配父元素中倒数第 n 个子元素,并且是 E 元素。
偶数:2n,even
奇数:2n+1,2n-1,odd,
找到前5个:-n+5
找到从第5个开始:n+5
E:nth-of-type(n) {}:只在父元素的同类型(E)子元素范围中,匹配第 n 个
a:link {}选中 a 链接未访问过的状态。a:visited {}选中 a 链接访问之后的状态。a:hover {}选中鼠标悬停的状态。a:active {}选中鼠标按下的状态。用于选中元素获取焦点时状态
input:focus { background-color: skyblue;}E[attr]选择具有attr属性的E元素。E[attr="val"]选择具有attr属性并且属性值等于val的E元素。E:hover {}:鼠标悬停时的效果。
E::before {}:在父元素内容的最前添加一个伪元素。
E::after {}:在父元素内容的最后添加一个伪元素。
注意点:
1.后两个必须设置 content 属性才能生效。
2.伪元素默认是行内元素。
设置:float: left;或float: right;
作用:
特点:
浮动元素会脱离标准流,不再占用原来的位置。
浮动元素比标准流高半个级别,可以覆盖标准流中的元素。
浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动。*****
浮动元素一行可以显示多个。
浮动元素可以设置宽高。
注意点:
浮动的元素不能通过 text-align: center 或 margin: 0 auto;设置水平对齐。
清除浮动:
影响:如果子元素浮动了,此时子元素不能撑开标准流的块级父元素。
目的:需要父元素有高度,从而不影响其他网页元素的布局。
方法:
直接设置父元素高度:height: 10px。
额外标签法:
clear: both;。单伪元素清除法:
基本写法:
.clearfix::after { content: ''; display: block; clear: both;}补充写法:
.clearfix::after { content: ''; display: block; clear: both; /*在网页中看不到伪元素*/ height: 0; visibility: hidden;}双伪元素清除法:
.clearfix::before,.clearfix::after { content: ''; display: table;}.clearfix::after { clear: both;}给父元素设置overflow: hidden
去除行内块元素换行写产生的小空隙:相邻行内块元素添加浮动即可。
是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
创建方法:
特点:
position: static;position: relative;position:absolute;position:fixed;z-index: 数字;数字越大,层级越高。属性:vertical-align
vertical-align: baseline;默认,基线对齐。vertical-align: top;顶部对齐。vertical-align: middle;中部对齐。vertical-align: bottom;底部对齐。vertical-align 可以解决的问题
文本框和表单按钮无法对齐问题。
input 和 img 无法对齐问题。
p 中的文本框,文本框无法贴顶问题。
p 不设高度由 img 标签撑开,此时 img 标签下面会存在而外空隙问题。
使用 line-height 让 img标签垂直居中问题。
文字和图片对齐(头像和用户名)
img { vertical-align: middle;}注意点:
不推荐使用行内块元素让p一行中显示。
cursor: default;默认值。cursor: pointer;小手型。cursor: text;工字型。cursor: move;十字架型。border-radius: 数字+px或%;overflow: visible;溢出部分可见。overflow: hidden;溢出部分隐藏。overflow: scroll;无论是否溢出,都显示滚动条。overflow: auto;按需显示滚动条。visibilit: hidden;隐藏元素本身,但占用位置。display: none;隐藏元素本身,但不占用位置。opacity: 0~1之间的数字;border-collapse: collapse;background-position: x y;。text-shadow: x y 模糊度 color;box-shadow: x y 模糊度 阴影扩大 阴影颜色 inset;骨架结构标签
<!DOCTYPE html>文档说明<html lang="en/zh-CN">使用的语言<meta charset="UTF-8">字符编码SEO三大标签
title:网页标题标签
description:网页描述标签
keywords:网页关键词标签
<title>非斌影视-VIP视频、电影、动漫、电视剧</title><meta name="description" content="非斌影视-VIP视频、电影、动漫、电视剧" /><meta name="keywords" content="电视,电影,视频,动漫"/>ico图标设置
<link rel="shortcut icon" href="" type="image/x-icon">
CSS书写顺序
display,position,float,clear,visibility,overflowwidth,height,margin,padding,border,backgroundcolor,font,text-decoration,text-align,line-heightcursor,border-radius,text-shadow,box-shadow项目搭建
步骤
子元素设置如下代码
.son { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}父盒子设置如下代码
.father { flex: 1; width: 0;}代码如下
textarea { resize: none;}代码如下
textarea:focus { outline: none;}input:focus { outline: none;}免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流