摘要：任务五一个最常见的移动端页面完成的事情学习张鑫旭世界相关章节张鑫旭系列了解通配符选择器性能优化浏览器渲染原理学习各属性及效果完成任务五学习编码规范编码规范并按照编码规范优化代码完成深度思考计划的事情找时间把前面任务的官方提供链接过一遍，查缺
任务五、 一个最常见的移动端页面
完成的事情
float学习
张鑫旭《CSS世界》相关章节
张鑫旭 float系列
了解CSS通配符 & 选择器性能优化/浏览器渲染原理
background学习(各属性及效果)
完成任务五
学习CSS编码规范CSS编码规范, 并按照编码规范优化代码
完成深度思考
计划的事情
[ ] 找时间把前面任务的官方提供链接过一遍，查缺补漏
[ ] 深度思考：手机分辨率和网页px的区别(TODO:周末补学)
link1
link2
link3
遇到的问题
[ ] IE10下自我介绍一行右侧无法自动自动换行(flex).
[ ] 不清楚图片效果的实现方式，可能需要了解以下图片用了什么处理再找编码对策
收获
一、任务五计划及开发
明确效果：目标是开发一个屏幕自适应的护工个人主页，最终效果如下：
开发步骤
截取效果图 & 通过PSD中获取资源图 & 获取header底色#5fc0cd、价格颜色#e26163
界面组成分析：
header： header用display:fixed，左侧后退+居中title，可用float或absolute解决. 为了实现灰色半透明层效果需加多一层div.transparent
main: 按照上节的学习为了防止移动端fixed出Bug，main也用position:absolute然后再在main中使用一个div.content来承载内容并支持滚动.
info: 定高，图片做背景，左边图片浮动并设置margin,右边用overflow:hidden清除浮动完成定位.
skill: title栏左border，condition栏使用flex左靠，接下来都用flex包含label+span来完成
footer: footer用display:fixed, 两个btn高度不变自适应屏幕宽度可用flex解决,为了保证伸缩3个margin不变故margin用rem写.
效果对比：
对比优化
学习背景图知识并尝试实现背景图效果
完成background学习
学习了fliter属性，不过只是将图像模糊化并调整了亮度， 为此将原本的文字及图片abosulte开来, 然后原本的背景也改成用div.bg来实现模糊&亮度的修改.
顺便修缮了下location，使其支持多行地点文字布局不变形.
技能高度每行都减少
底部button高度提高,并取消纵向margin
footer加入padding
二、CSS及浏览器部分探究
float学习 参考：张鑫旭《CSS世界》
学习总结
float本质: 本质是为了实现文字环绕效果. 因此在界面布局方面只是简单堆叠的话会造成弹性缺失.
float特性
包裹性： "包裹" + "自适应性"
包裹：float元素的子元素如果宽度更小，则float元素宽度将表现为其子元素宽度
自适应性：float元素的子元素旁若有文字，则将自适应为子元素+文字宽度(非连续长串英文情况下，最大宽度为float元素宽度)
块状化并格式化上下文：若float属性值不为none，则其display计算值为block或者table.
破坏文档流（文字环绕图片效果实现原理）:
场景描述：场景代码如下，img可添加float:left属性触发文字环绕效果，p元素为块状盒子，可能被分为多行，每行的文字都处于一个内联盒子中.
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
让父元素高度塌陷：让跟随的内容(文字)可以和浮动元素(图片)在一个水平线上
行框盒子和浮动元素的不可重叠性：
行框盒子(每行内联元素所在的盒子)被float限制故和浮动元素(图片)完全不重叠，且永远无法通过CSS改变大小.
块状盒子(内联元素上级盒子)与浮动元素(图片)完全重叠，
抗浮动
结合任务四的header布局实现实例，有三种方案可以先让两个标签左右float，再对
CSS通配符
观点：
查询次数多&匹配效率低，会影响性能但是影响不大
影响可维护性 & 容易造成样式冲突
所有需要设置的元素放在一起设置
建议使用css reset文件
necolas/normalize.css
jgthms/minireset.css
选择器性能优化 参考：网站CSS选择器性能讨论
样式系统从最右的选择符开始向左进行匹配规则，只要左边还有选择符就会继续向左移动.
CSS选择器效率排序(快到慢)：
id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul < li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel=”external”]）
伪类选择器（a:hover,li:nth-child）
优化方法：
id选择器最快，不要同时使用其他选择器
类选择器尽量不合标签选择器同时用
明确DOM结构情况下优先使用子选择器
使用类选择器替代后代选择器&子选择器
尽量用继承避免编写重复样式
浏览器渲染原理
参考：
前端必读：浏览器内部工作原理
浏览器的渲染：过程与原理
A 网页加载耗时分布：
DNS查询
TCP连接
HTTP请求及响应
服务器响应
客户端渲染(浏览器渲染)
B 渲染引擎
Geoko： Firefox(新版用Quantum)
Webkit: Safari & Chrome
Trident： IE
Edge: Edge
C 渲染流程:
1) 解析html构建DOM树： 将标签转化为内容树的DOM节点
2) 构建render树：解析外部CSS及style标志中的样式信息，用以构建render树. render树由一些包含颜色和大小等属性的矩形(??)组成，他们将被按照正确顺序显示到屏幕上.(CSS->CSSOM树，DOM+CSSOM树->render树)
3) 布局render树：确定每个节点在屏幕上的确切坐标
4) 绘制render树：遍历render树，并使用UI后端层绘制每个节点
Tip：以上过程是逐步完成的，为了更好的用户体验渲染引擎将会尽可能早地呈现内容，也就是边解析边显示.
渲染优化知识点
关键渲染路径：与当前用户操作有关的内容，即用户打开网页时首屏的显示.具体到浏览器就是HTML&CSS&JS等资源的接收及处理后渲染出页面.了解的目的就是为了优化，优化需要针对具体问题，比如保证首屏内容的最快显示,可以推出PWA也就是渐进式页面渲染，由此可以再推到资源拆分、场景策略等.
CSS & JS加载：
Tip
CSS会阻塞渲染直至CSSOM构建完毕
穿插在HTML中的script标签将阻塞HTML解析
JS的defer&async
对inline-script无效
defer用于延迟执行引入并且不阻塞HTML解析.待整个文档解析完毕后执行defer的JS，最后触发DOMContentLoaded事件.
async用于异步引入JS，如果已经加载好就会开始执行,但是执行顺序不确定.
优化方法：
优先引入CSS，JS尽量少影响DOM的构建
实际工程中经常将JS放到文档底部前(非框架文件)
三、background学习
定义：用于定义HTML元素的背景.
属性：
background-color: 背景色
设定方式：
十六进制： #ff0000
RGB: rgb(255, 0, 0)
颜色名称: red
RGBA(???)
透明：transparent
inherit：继承父元素背景色
background-image: 背景图像(默认平铺重复)
设定方式： url("[path]")
background-repeat:
水平平铺：repeat-x
垂直平铺: repeat-y
不平铺：no-repeat
background-attachment：是否随页面滚动
scroll: 跟随页面滚动
fixed：跟随进度条位置
inherit: 继承自父元素
background-position: 设置背景图像的起始位置(Firefox和Opera需要先设置为fixed才能正常工作)
设定方式：
top|center|bottom(垂直) left|center|right(水平)
x%(水平) y%(垂直)
xpos(水平) ypos(垂直)
background-origin: 相对位置
值：padding-box|border-box|content-box
background-size: 背景图片大小
值： length(宽度,高度)|percentage(宽度,高度)|cover(保持纵横比并缩放成完全覆盖背景定位区域的最大大小)|contain(保持纵横比并缩放成合适背景定位区域的最大大小，即只满足短的方向的等比例缩放)
三、深度思考
1.css可以绘制哪些常见的特殊形状？
参考：
奇妙的 CSS shapes(CSS图形)
The Shapes of CSS
梯形、三角形、六边形、圆形、心型、五角星...
SharpsDemo演示
2.如何理解vertical-align与line-height？
参考：
深入理解line-height与vertical-align
CSS深入理解vertical-align和line-height的基友关系
line-height: 行高.只影响inline元素及内容.
可选值：|||normal|inherit
默认值：normal(通常是font-size的1.2倍)
内容区：行内文本，font-size决定了其高度;
行内框：等于行间距(上半)+内容区+行间距(下半)，line-height决定了其高度;当font-size>line-height时行内框小于内容区;
行框：行内的最高行内框顶端到最低行内款底端的距离,且各行框顶端挨着上一行框的底端;
框属性：
padding、border、margin的top&bottom都不影响行高（行框高度）, 其left&right都会应用到元素的开始结尾;
行内元素的边框边界由font-size控制而非line-height;
行内替换元素：根据元素的标签属性来决定其显示的具体内容的元素，如![]()
& . 其位于基线(vertical-align:bashline)上, 替换元素的基线是正常流中最后一个行框的基线，除非元素内容为空或者本身的overflow属性值不是visible，这种情况下基线是marigin底边缘.
vertical-align
可选值：
关键字值： baseline|sub|super|text-top|text-bottom|middle|top|bottom
长度值：??em|??px
百分比值：?% (vertical-align的百分比相对于line-height进行计算)
全局值：inherit|initial|unset
默认值：baseline
关系
对于内联元素各种想得通或者想不通的行为表现，基本上都可以用vertical-align和line-height来解释，以及进行行为矫正
vertical-align的百分比相对于line-height进行计算
学习演示地址
3.请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？
Flex布局用于简洁、完整、响应式地实现各种页面布局，给盒模型提供最大的灵活性. 采用Flex布局的元素称为Flex容器(flex container), 其所有子元素自动成为容器成员即Flex项目(flex item). 容器默认存在两根轴，水平的主轴(main axis)和交叉轴(cross axis),Flex项目默认沿主轴排列.
适用场景：
网格布局：设置flex
百分比布局：先设置flex:1, 再设置flex: 0 0 %
圣杯布局: 该填满的用flex:1
输入框布局：一侧定长，其他flex:1填满
悬挂式布局：一侧定长，其他flex:1填满
固定底栏：方向column，定高
流式布局: 参考任务一
4.title与h1、b与strong、i与em、img的alt与title、src与href有什么区别 参考：Web品质
& <h1>: <title>用于描述网页内容且整个文档中只出现一次，在搜索引擎列表、窗口标题栏、用户书签中可见，应尽量短且具有描述性; <h1>用于描述网页中最顶层的标题,符合语义化;</p>
<p><b> & <strong>: <b>为无意义的加粗，现在的Web标准不建议直接元素设计具体表现形式,故建议少用; <strong>表更强的强调，可以用CSS替换其加粗样式，比较符合Web标准;</p>
<p><i> & <em>: <i>为无意义的斜体，现在的Web标准不建议直接元素设计具体表现形式,故建议少用; <em>表示一般强调，可以用CSS替换其斜体样式，比较符合Web标准;</p>
<p>
<p><img>的alt & title属性、src & href属性：</p>
<p>alt：无法显示图片时起到文本替代的作用, 浏览器在特殊浏览器上有辅助作用;</p>
<p>title: 鼠标划过时的文本提示;</p>
<p>src：资源对应路径，将资源加载到文档中;</p>
<p>href：指向的链接，不加载资源;</p>
</p>
<p>5.如何使用IconFont？ 参考：IconFont使用</p>
<p>
<p>unicode引用：</p>
<p>使用：拷贝字体到项目然后加入font-face, css定义iconfont样式, 选择图标及字体编码应用于页面;</p>
<p>特点：兼容性好(IE6+);支持按字体方式动态调整图标大小颜色;不支持多色;</p>
</p>
<p>
<p>font-class引用：</p>
<p>使用：拷贝fontclass代码，直接选图标并在应用上应用类名;</p>
<p>解决问题：解决unicode书写不直观 & 语意不明确的问题;</p>
<p>特点：兼容性良好(IE8+);语意明确;改图标只需要修改class的unicode引用;不支持多色;</p>
</p>
<p>
<p>symbol引用:</p>
<p>使用：拷贝symbol代码,引入CSS代码,直接选图标并在应用上应用类名;</p>
<p>特点：支持多色图标;可以像字体用font-size & color调整样式;兼容性较差(IE9+);svg渲染性能一般，逊于png.</p>
<p>解决问题：单色限制问题.</p>
</p>
<p>6.HTML中dl、ul、ol用哪个比较好？</p>
<p>dl: 定义列表，包含自定义列表项<dt>和自定义列表项的定义<dd>.适用于展示事务列表并需要对其进行解释说明的场景</p>
<p>ul: 无序列表，默认用小圆点进行标记.适用于无序列表清单.但是由于自带的效果在不同浏览器效果不同，故一般会去掉标记.</p>
<p>ol: 有序列表，默认用数字进行标记.适用于有序列表清单.</p>
<b>效果</b>
<p>Github</p>
<p>线上展示</p>
<b>系列文章</b>
<p>【CSS练习】IT修真院--练习1-九宫格</p>
<p>【CSS练习】IT修真院--练习2-开发工具</p>
<p>【CSS练习】IT修真院--练习3-简单界面</p>
<p>【CSS练习】IT修真院--练习4-移动端界面</p>
<p>【CSS练习】IT修真院--练习5-护工个人界面</p>
<p>【CSS练习】IT修真院--练习6-护工列表界面</p>
</div>
<div class="mt-64 tags-seach" >
<div class="tags-info">
<a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a>
<a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a>
<a style="width:120px;" title="css练习" href="https://www.ucloud.cn/yun/tag/csslianxi/">css练习</a>
<a style="width:120px;" title="html和css练习" href="https://www.ucloud.cn/yun/tag/htmlhecsslianxi/">html和css练习</a>
<a style="width:120px;" title="练习" href="https://www.ucloud.cn/yun/tag/lianxi/">练习</a>
<a style="width:120px;" title="练习代码" href="https://www.ucloud.cn/yun/tag/lianxidaima/">练习代码</a>
</div>
</div>
<div class="entry-copyright mb-30">
<p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p>
<p>转载请注明本文地址：https://www.ucloud.cn/yun/113487.html</p>
</div>
<ul class="pre-next-page">
<li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/113486.html">上一篇：emmet快速缩写展开的基本写法与心得</a></li>
<li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/113488.html">下一篇：我的前端面试日记（一）</a></li>
</ul>
</div>
<div class="about_topicone-mid">
<h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3>
<ul class="com_white-left-mid atricle-list-box">
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/116726.html"><b>【<em>CSS</em><em>练习</em>】<em>IT</em><em>修<em>真院</em></em>--<em>练习</em>6-<em>护工</em>列表<em>界面</em></b></a></h2>
<p class="ellipsis2 good">摘要：任务六护工列表页完成的事情规划任务六完成基本界面编写计划的事情限制最小宽度使用雪碧图替换当前的多张图片引入完成模拟下拉框编写屏幕过窄时，列表项左边文字被截断出现省略号复习之前的代码规范，优化代码查看验收标准查看深度思考遇到的问题收获页面原生
任务六、 护工列表页
完成的事情
1.规划任务六2.完成基本界面编写
计划的事情
[x] 限制最小宽度
[x] 使用雪碧图替换当前的多张图片引入...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-143.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/01/small_000000143.jpg" alt=""><span class="layui-hide64">Sleepy</span></a>
<time datetime="">2019-08-30 15:53</time>
<span><i class="fa fa-commenting"></i>评论0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/113428.html"><b>【<em>CSS</em><em>练习</em>】<em>IT</em><em>修<em>真院</em></em>--<em>练习</em>3-简单<em>界面</em></b></a></h2>
<p class="ellipsis2 good">摘要：任务三一个最简单的移动端页面今天完成的事情运用布局知识跟随设计图进行布局，完成简单并继续学习优化让布局更好适应屏幕变化使用了盒模型及百分比了解区别在中应用图片处理学习明天计划的事情深度思考手机分辨率和网页的区别周末补学任务四计划及简单编写遇
任务三、 一个最简单的移动端页面
今天完成的事情
运用布局知识跟随设计图进行布局，完成简单Demo并继续学习优化.
让布局更好适应屏幕变化(使用...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-326.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000326.jpg" alt=""><span class="layui-hide64">MrZONT</span></a>
<time datetime="">2019-08-29 15:36</time>
<span><i class="fa fa-commenting"></i>评论0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/113399.html"><b>【<em>CSS</em><em>练习</em>】<em>IT</em><em>修<em>真院</em></em>--<em>练习</em>2-开发工具</b></a></h2>
<p class="ellipsis2 good">摘要：任务二认识开发工具今天完成的事情编辑器对比版本管理工具学习基本操作代码托管平台对比服务器使用学习明天计划的事情分析任务三完成规划及部分开发遇到的问题暂无收获编辑器对比参考三者比较，各有哪些优势和弱势一款成熟的，对网站开发者友好，插件齐全功能
任务二. 认识开发工具
今天完成的事情
IDE & 编辑器对比
版本管理工具学习
Git基本操作
代码托管平台对比
服务器使用学习
明天计划的...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-1067.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/10/small_000001067.jpg" alt=""><span class="layui-hide64">_ang</span></a>
<time datetime="">2019-08-29 15:33</time>
<span><i class="fa fa-commenting"></i>评论0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/113412.html"><b>【<em>CSS</em><em>练习</em>】<em>IT</em><em>修<em>真院</em></em>--<em>练习</em>1-九宫格</b></a></h2>
<p class="ellipsis2 good">摘要：用于显示日志信息及输入一些命令请求监听。可获得请求列表，点开某一项将看到数据头部数据。包含本次请求的请求方法状态码请求服务器的地址其他一些设置响应头部包含用户代理，帮服务器识别设备用预览。
九宫格——用html+css制作一个网页
一. 目标效果：
showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644);
二. 效果描述
圆角...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-254.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/02/small_000000254.jpg" alt=""><span class="layui-hide64">Tecode</span></a>
<time datetime="">2019-08-29 15:34</time>
<span><i class="fa fa-commenting"></i>评论0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/113461.html"><b>【<em>CSS</em><em>练习</em>】<em>IT</em><em>修<em>真院</em></em>--<em>练习</em>4-移动端<em>界面</em></b></a></h2>
<p class="ellipsis2 good">摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一
任务四、 一个最常见的移动端页面
完成的事情
完成简单布局，然后填充界面
与效果图对比优化
完成验收要求：header扩展性 & 顶栏固定
进行p...</p>
<div class="com_white-left-info">
<div class="com_white-left-infol">
<a href="https://www.ucloud.cn/yun/u-375.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000375.jpg" alt=""><span class="layui-hide64">kun_jian</span></a>
<time datetime="">2019-08-29 15:39</time>
<span><i class="fa fa-commenting"></i>评论0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="topicone-box-wangeditor">
<h3 class="top-com-title mb-64"><span>发表评论</span></h3>
<div class="xcp-publish-main flex_box_zd">
<div class="unlogin-pinglun-box">
<a href="javascript:login()" class="grad">登陆后可评论</a>
</div> </div>
</div>
<div class="site-box-content">
<div class="site-content-title">
<h3 class="top-com-title mb-64"><span>0条评论</span></h3>
</div>
<div class="pages"></ul></div>
</div>
</div>
<div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
<div class="">
<div class="com_layuiright-box user-msgbox">
<a href="https://www.ucloud.cn/yun/u-921.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000921.jpg" alt=""></a>
<h3><a href="https://www.ucloud.cn/yun/u-921.html" rel="nofollow">Jonathan Shieber</a></h3>
<h6>男<span>|</span>高级讲师</h6>
<div class="flex_box_zd user-msgbox-atten">
<a href="javascript:attentto_user(921)" id="attenttouser_921" class="grad follow-btn notfollow attention">我要关注</a>
<a href="javascript:login()" title="发私信" >我要私信</a>
</div>
<div class="user-msgbox-list flex_box_zd">
<h3 class="hpf">TA的文章</h3>
<a href="https://www.ucloud.cn/yun/ut-921.html" class="box_hxjz">阅读更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/118029.html">LOCVPS：香港云地/美国洛杉矶轻量套餐上线,KVM月付29.6元起</a></h3>
<p>阅读 1604<span>·</span>2021-08-09 13:47</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117344.html">CSS3常见技巧（二）：如何用CSS3来实现三角形？</a></h3>
<p>阅读 2852<span>·</span>2019-08-30 15:55</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/113487.html">【CSS练习】IT修真院--练习5-护工个人界面</a></h3>
<p>阅读 3595<span>·</span>2019-08-29 15:42</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112686.html">我不知道你知不知道我知道的伪元素小技巧</a></h3>
<p>阅读 1179<span>·</span>2019-08-29 13:45</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111977.html">CSS技巧 - 收藏集 - 掘金</a></h3>
<p>阅读 3103<span>·</span>2019-08-29 12:33</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/107939.html">讲清楚之 javascript 对象继承</a></h3>
<p>阅读 1821<span>·</span>2019-08-26 11:58</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/105971.html">来，告诉你Node.js究竟是什么？</a></h3>
<p>阅读 1068<span>·</span>2019-08-26 10:19</p></li>
<li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/104503.html">React组件设计模式-组合组件</a></h3>
<p>阅读 2493<span>·</span>2019-08-23 18:00</p></li>
</ul>
</div>
<!-- 文章详情右侧广告-->
<div class="com_layuiright-box">
<h6 class="top-com-title"><span>最新活动</span></h6>
<div class="com_adbox">
<div class="layui-carousel" id="right-item">
<div carousel-item>
<div>
<a href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow">
<img src="https://www.ucloud.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服务器">
</a>
</div>
<div>
<a href="https://www.ucloud.cn/site/product/gpu.html" rel="nofollow">
<img src="https://www.ucloud.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服务器">
</a>
</div>
</div>
</div>
</div> <!-- banner结束 -->
<div class="adhtml">
</div>
<script>
$(function(){
$.ajax({
type: "GET",
url:"https://www.ucloud.cn/yun/ad/getad/1.html",
cache: false,
success: function(text){
$(".adhtml").html(text);
}
});
})
</script> </div> </div>
</div>
</div>
</div>
</section>
<!-- wap拉出按钮 -->
<div class="site-tree-mobile layui-hide">
<i class="layui-icon layui-icon-spread-left"></i>
</div>
<!-- wap遮罩层 -->
<div class="site-mobile-shade"></div>
<!--付费阅读 -->
<div id="payread">
<div class="layui-form-item">阅读需要支付1元查看</div>
<div class="layui-form-item"><button class="btn-right">支付并查看</button></div>
</div>
<script>
var prei=0;
$(".site-seo-depict pre").each(function(){
var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">','');
$(this).attr('data-clipboard-text',html).attr("id","pre"+prei);
$(this).html("").append("<code>"+html+"</code>");
prei++;
})
$(".site-seo-depict img").each(function(){
if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){
$(this).remove();
}
})
$("LINK[href*='style-49037e4d27.css']").remove();
$("LINK[href*='markdown_views-d7a94ec6ab.css']").remove();
layui.use(['jquery', 'layer','code'], function(){
$("pre").attr("class","layui-code");
$("pre").attr("lay-title","");
$("pre").attr("lay-skin","");
layui.code();
$(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)");
});
function copycode(target){
var id=$(target).parent().parent().attr("id");
var clipboard = new ClipboardJS("#"+id);
clipboard.on('success', function(e) {
e.clearSelection();
alert("复制成功")
});
clipboard.on('error', function(e) {
alert("复制失败")
});
}
//$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5));
</script>
<link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
<script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
<script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
function setcode(){
var _html='';
document.querySelectorAll('pre code').forEach((block) => {
var _tmptext=$.trim($(block).text());
if(_tmptext!=''){
_html=_html+_tmptext;
console.log(_html);
}
});
}
</script>
<script>
function payread(){
layer.open({
type: 1,
title:"付费阅读",
shadeClose: true,
content: $('#payread')
});
}
// 举报
function jupao_tip(){
layer.open({
type: 1,
title:false,
shadeClose: true,
content: $('#jubao')
});
}
$(".getcommentlist").click(function(){
var _id=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
$("#articlecommentlist"+_id).toggleClass("hide");
var flag=$("#articlecommentlist"+_id).attr("dataflag");
if(flag==1){
flag=0;
}else{
flag=1;
//加载评论
loadarticlecommentlist(_id,_tid);
}
$("#articlecommentlist"+_id).attr("dataflag",flag);
})
$(".add-comment-btn").click(function(){
var _id=$(this).attr("dataid");
$(".formcomment"+_id).toggleClass("hide");
})
$(".btn-sendartcomment").click(function(){
var _aid=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
var _content=$.trim($(".commenttext"+_aid).val());
if(_content==''){
alert("评论内容不能为空");
return false;
}
var touid=$("#btnsendcomment"+_aid).attr("touid");
if(touid==null){
touid=0;
}
addarticlecomment(_tid,_aid,_content,touid);
})
$(".button_agree").click(function(){
var supportobj = $(this);
var tid = $(this).attr("id");
$.ajax({
type: "GET",
url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid,
cache: false,
success: function(hassupport){
if (hassupport != '1'){
$.ajax({
type: "GET",
cache:false,
url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid,
success: function(comments) {
supportobj.find("span").html(comments+"人赞");
}
});
}else{
alert("您已经赞过");
}
}
});
});
function attenquestion(_tid,_rs){
$.ajax({
//提交数据的类型 POST GET
type:"POST",
//提交的网址
url:"https://www.ucloud.cn/yun/favorite/topicadd.html",
//提交的数据
data:{tid:_tid,rs:_rs},
//返回数据的格式
datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
//在请求之前调用的函数
beforeSend:function(){},
//成功返回之后调用的函数
success:function(data){
var data=eval("("+data+")");
console.log(data)
if(data.code==2000){
layer.msg(data.msg,function(){
if(data.rs==1){
//取消收藏
$(".layui-layer-tips").attr("data-tips","收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>');
}
if(data.rs==0){
//收藏成功
$(".layui-layer-tips").attr("data-tips","已收藏文章");
$(".layui-layer-tips").html('<i class="fa fa-heart"></i>')
}
})
}else{
layer.msg(data.msg)
}
} ,
//调用执行后调用的函数
complete: function(XMLHttpRequest, textStatus){
postadopt=true;
},
//调用出错执行的函数
error: function(){
//请求出错处理
postadopt=false;
}
});
}
</script>
<footer>
<div class="layui-container">
<div class="flex_box_zd">
<div class="left-footer">
<h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6>
<p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p>
</div>
<div class="right-footer layui-hidemd">
<ul class="flex_box_zd">
<li>
<h6>UCloud与云服务</h6>
<p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p>
<p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p>
<p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p>
<p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p>
</li>
<li>
<h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p>
<p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p>
<p><a href="https://wavespeed.ai/">Wavespeed AI</a></p>
</li>
<li>
<h6>社区栏目</h6>
<p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p>
<p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li>
<li>
<h6>常见问题</h6>
<p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p>
<p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p>
<p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p>
<p><a href="https://www.ucloud.cn/site/notice/">公告</a></p>
</li>
<li>
<span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span>
<p>扫扫了解更多</p></div>
</div>
<div class="copyright">Copyright © 2012-2025 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DZSMXQ3P9N');
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></div>
</div>
</footer>
</body>
<script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script>
<<script type="text/javascript">
$(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%");
</script>
</html> 
