js+css+html制作简易留言板

• 1 案例说明
• 2 编写HTML代码
• 3 编写css代码
• 4 编写JavaScript代码
• 5 全部代码

1 案例说明

利用JavaScript、css以及html制作简易留言板，也可以看作是简易评论区。

要求在页面文本框中输入一些文字之后，点击“发布”按钮，就可以让输入的文字显示在下面，重新输入一些文字，再点击发布，就可以让新发布的内容显示在最上面。点击后面的删除，就可以删除已经发布的文字。

【案例分析】利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素，添加到ul里面。

效果图：

点击发布之后：

再输入一行文字：

点击发布：

点击最下面的那一条删除之后：

2 编写HTML代码

在HTML页面中的元素比较简单，需要一个</code>标签，用来输入留言，一个<code><button></code>标签，用来发表留言，以及一个<code></p><ul></code>标签，用来显示留言的内容。</p><pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>发布<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span></code></pre><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/33628b219a154e2ba34a0415b00905b6.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/33628b219a154e2ba34a0415b00905b6.png" /></p><h1>3 编写css代码</h1><p>CSS代码主要对留言板的样式进行一些设置。首先让页面中的外边距和内边距都为0，让留言板靠中心移动一些。</p><pre><code class="prism language-css"><span class="token selector">*</span> <span class="token punctuation">{</span><span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">body</span> <span class="token punctuation">{</span><span class="token property">padding</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><p><noscript><img decoding="async" class="aligncenter" src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/50950be0e86648d38a00443cf8ad858c.png" /></noscript><img decoding="async" class="lazyload aligncenter" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/50950be0e86648d38a00443cf8ad858c.png" /><br /> 接着设置输入框的属性，设置宽高、边框颜色，轮廓样式以及是否可以改变大小。轮廓就是当<code><textarea></code>聚焦时出现的黑色的边框。</p><pre><code class="prism language-css"><span class="token selector">textarea</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><span class="token property">border</span><span class="token punctuation">:</span> 1px pink solid<span class="token punctuation">;</span><span class="token comment">/* 不设置轮廓 */</span><span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token comment">/* 设置其不能改变长宽 */</span><span class="token property">resize</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><p>设置评论li的样式。这部分设置到现在是看不出效果的，因为目前还没有评论，需要在设置完JavaScript之后搭配动态效果才可以。设置评论的宽度，内边距，背景色，字体大小，外边距，为了让评论更加的好看。</p><pre><code class="prism language-css"><span class="token selector">li</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span><span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span><span class="token property">font-size</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span><span class="token property">margin</span><span class="token punctuation">:</span> 15px 0<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><p>设置删除的样式。删除使用a标签来设置，将其向右浮动。</p><pre><code class="prism language-css"><span class="token selector">li a</span> <span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><h1>4 编写JavaScript代码</h1><p>在JavaScript部分中，需要为按钮绑定事件。当点击按钮时，如果文本框内没有文字，则弹出提示；如果有文字，则将该文字添加到下方的ul的li中，因此这个过程中需要添加li，并且添加a标签作删除功能，点击删除时删除该li元素。</p><pre><code class="prism language-javascript"><span class="token comment">//1、获取元素</span><span class="token keyword">var</span> txt <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"textarea"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> ul <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"ul"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2、给button绑定点击事件</span>btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span>txt<span class="token punctuation">.</span>value <span class="token operator">==</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">//当文本框中没有文字时，提示</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"您没有输入内容"</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><span class="token comment">//创建元素li作为留言区</span><span class="token keyword">var</span> li <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行</span>li<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> txt<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token string">"删除"</span>txt<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span><span class="token comment">//添加之后文本框的内容清空</span><span class="token comment">//将留言添加到ul中，而且在最上方</span>ul<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>li<span class="token punctuation">,</span> ul<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//当点击删除时删除ul中的li</span><span class="token keyword">var</span> <span class="token keyword">as</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//循环给每个删除绑定事件</span><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token keyword">as</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">as</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">//删除当前a标签所在位置的父节点li</span>ul<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span></code></pre><h1>5 全部代码</h1><pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><span class="token selector">*</span> <span class="token punctuation">{</span><span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">body</span> <span class="token punctuation">{</span><span class="token property">padding</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">textarea</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><span class="token property">border</span><span class="token punctuation">:</span> 1px pink solid<span class="token punctuation">;</span><span class="token comment">/* 不设置轮廓 */</span><span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token comment">/* 设置其不能改变长宽 */</span><span class="token property">resize</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">li</span> <span class="token punctuation">{</span><span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span><span class="token property">padding</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> #eee<span class="token punctuation">;</span><span class="token property">font-size</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span><span class="token property">margin</span><span class="token punctuation">:</span> 15px 0<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">li a</span> <span class="token punctuation">{</span><span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span><span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>发布<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"><span class="token comment">//1、获取元素</span><span class="token keyword">var</span> txt <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"textarea"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> btn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> ul <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"ul"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//2、给button绑定点击事件</span>btn<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">if</span> <span class="token punctuation">(</span>txt<span class="token punctuation">.</span>value <span class="token operator">==</span> <span class="token string">""</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">//当文本框中没有文字时，提示</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"您没有输入内容"</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span><span class="token comment">//创建元素li作为留言区</span><span class="token keyword">var</span> li <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行</span>li<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> txt<span class="token punctuation">.</span>value <span class="token operator">+</span> <span class="token string">"删除"</span>txt<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span><span class="token comment">//添加之后文本框的内容清空</span><span class="token comment">//将留言添加到ul中，而且在最上方</span>ul<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span>li<span class="token punctuation">,</span> ul<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//当点击删除时删除ul中的li</span><span class="token keyword">var</span> <span class="token keyword">as</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//循环给每个删除绑定事件</span><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token keyword">as</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">as</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">//删除当前a标签所在位置的父节点li</span>ul<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>parentNode<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></article></div><div class="related-posts"><h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/1990/" title="项目框架：登录跳转页面" data-bg="https://blog.csdn.net/Liu_wen_wen/article/details/assets/img/tx.jpeg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/1990/" title="项目框架：登录跳转页面">项目框架：登录跳转页面</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/32043/" title="初识Java－－Java数据类型" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/d6d1e670ab40400ea892aac63d5bccdf.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/32043/" title="初识Java－－Java数据类型">初识Java－－Java数据类型</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/45474/" title="SQL 查询表字段信息" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/d1f954b78efb4ab18b5790afe39f666a.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/45474/" title="SQL 查询表字段信息">SQL 查询表字段信息</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/54133/" title="人工智能之深度学习常见应用方向你都了解吗？（文末包邮送书5本）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/d91889841ee24258a86d8dada7295a2d.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/54133/" title="人工智能之深度学习常见应用方向你都了解吗？（文末包邮送书5本）">人工智能之深度学习常见应用方向你都了解吗？（文末包邮送书5本）</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/41229/" title="【74HC595】51单片机（普中A2开发板）LED点阵屏点亮以及74HC595芯片的使用笔记" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/4b984b04e14a4b838ddab191626234ad.jpeg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/41229/" title="【74HC595】51单片机（普中A2开发板）LED点阵屏点亮以及74HC595芯片的使用笔记">【74HC595】51单片机（普中A2开发板）LED点阵屏点亮以及74HC595芯片的使用笔记</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/29175/" title="“链引擎”（PBC）计划 | 太保集团长安链应用展示" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/c245d7aff81b07741751c916d1a8bb42.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/29175/" title="“链引擎”（PBC）计划 | 太保集团长安链应用展示">“链引擎”（PBC）计划 | 太保集团长安链应用展示</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/10714/" title="K8S架构常用组件核心资源" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/076002ba85dd43e797980cd5e0018646.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/10714/" title="K8S架构常用组件核心资源">K8S架构常用组件核心资源</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/11868/" title="YOLO系列训练时出现loss出现nan值或者测试时P\R\map全部为0值的解决办法（GTX16xx系列显卡大坑）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/e73799ebd72a428aa6bdc7dc57641a13.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/11868/" title="YOLO系列训练时出现loss出现nan值或者测试时P\R\map全部为0值的解决办法（GTX16xx系列显卡大坑）">YOLO系列训练时出现loss出现nan值或者测试时P\R\map全部为0值的解决办法（GTX16xx系列显卡大坑）</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT：强强联合Langchain-Vicuna的应用实战开源项目，彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle：世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库：第三章 关系数据库标准语言SQL（二）数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开，原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通：从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/24371/" title="华为、阿里巴巴、字节跳动 100+ Python 面试问题总结（五）" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/ab4f0fc5858d41dbaa916a879839e424.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/24371/" title="华为、阿里巴巴、字节跳动 100+ Python 面试问题总结（五）">华为、阿里巴巴、字节跳动 100+ Python 面试问题总结（五）</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/41990/" title="深度学习基础知识神经网络" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/88b356d93f5a4df7997ce90b79780216.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/41990/" title="深度学习基础知识神经网络">深度学习基础知识神经网络</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/47252/" title="python实例100第38例：求一个3*3矩阵主对角线元素之和。" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/47252/" title="python实例100第38例：求一个3*3矩阵主对角线元素之和。">python实例100第38例：求一个3*3矩阵主对角线元素之和。</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/35748/" title="大数据和智能数据应用架构系列教程之：大数据与人工智能" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/35748/" title="大数据和智能数据应用架构系列教程之：大数据与人工智能">大数据和智能数据应用架构系列教程之：大数据与人工智能</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/23323/" title="BPM流程引擎适用于哪些类型企业管理系统" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/439555ee627b4213a5375fb9edcbba53.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/23323/" title="BPM流程引擎适用于哪些类型企业管理系统">BPM流程引擎适用于哪些类型企业管理系统</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/13656/" title="阿里通义千问、百度文心一言、ChatGPT与GPT-4大比拼" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/306cbab0e46e27a8dfb7ca0ab662224e.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/13656/" title="阿里通义千问、百度文心一言、ChatGPT与GPT-4大比拼">阿里通义千问、百度文心一言、ChatGPT与GPT-4大比拼</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span></span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span></span></a></li></ul></div><div class="back-top"><i class="fas fa-caret-up"></i></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="fas fa-times"></i></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"20197","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"9f78d49bc8","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>