CSS只读与禁用样式设置教程

CSS样式在网页设计中扮演着重要的角色，尤其是在处理表单元素的只读与禁用状态时。本文将深入探讨如何利用CSS来美化HTML表单的`readonly`和`disabled`属性，从而提升用户体验。首先，我们需要理解`readonly`和`disabled`的本质区别：`readonly`允许用户查看和复制内容，但不能编辑，且值可提交；而`disabled`则完全禁用交互，且值不提交。接下来，我们将详细介绍如何通过CSS设置只读状态的背景色、边框、文本颜色和鼠标样式，以及如何设置禁用状态的更深灰色背景、明显边框、浅色字体和“禁止”光标，从而在视觉上清晰地区分这两种状态。此外，本文还将探讨如何通过JavaScript实现动态控制与交互反馈优化，让只读和禁用状态的切换更加平滑自然。

答案：CSS通过样式美化由HTML属性（如readonly或disabled）定义的表单状态，其中readonly允许内容复制但不可编辑且值可提交，disabled则完全禁用交互且值不提交，二者需配合CSS强化视觉区分，并可通过JavaScript实现动态控制与交互反馈优化。

CSS本身不能直接让一个表单元素变成“只读”或“禁用”，它主要负责为那些通过HTML属性（如readonly或disabled）设置了状态的元素提供视觉上的样式。换句话说，CSS是“化妆师”，决定了只读或禁用状态下的表单元素看起来是什么样子，而真正让它们“只读”或“禁用”的是HTML属性和/或JavaScript。

解决方案

要实现表单元素的只读样式与禁用状态，我们主要依赖HTML的readonly和disabled属性，然后用CSS来美化这些状态。这就像给不同的情绪穿上不同的衣服，让它们一眼就能被识别出来。

1. 只读状态 (readonly) 的CSS设置：

readonly属性主要用于, , </code>等文本输入元素。它允许用户看到内容，甚至可以选中和复制，但不能修改。</p><pre class="brush:language-css;toolbar:false;">/* 针对所有具有readonly属性的输入框和文本域 */ input[readonly], textarea[readonly] { background-color: #f0f0f0; /* 浅灰色背景，视觉上表示不可编辑 */ border: 1px solid #ccc; /* 稍微柔和的边框 */ color: #555; /* 字体颜色可以稍深，保持可读性 */ cursor: default; /* 鼠标指针变为默认箭头，表示不可交互修改 */ /* 移除焦点时的外边框，避免与只读状态冲突 */ outline: none; /* 某些浏览器可能会有默认的阴影或高亮，这里可以重置 */ -webkit-box-shadow: none; box-shadow: none; } /* 更好的实践是，在获得焦点时，也保持只读的视觉效果 */ input[readonly]:focus, textarea[readonly]:focus { background-color: #e9e9e9; /* 焦点时略微变深，但仍是只读样式 */ border-color: #bbb; }</pre><p><strong>2. 禁用状态 (<code>disabled</code>) 的CSS设置：</strong></p><p><code>disabled</code>属性适用于更广泛的表单元素，包括<code><input></code>, <code><textarea></code>, <code><select></code>, <code><button></code>等。被禁用的元素不仅不可编辑，也不可交互（不能点击、不能获取焦点），并且其值不会随表单一起提交。</p><pre class="brush:language-css;toolbar:false;">/* 针对所有具有disabled属性的表单元素 */ input[disabled], textarea[disabled], select[disabled], button[disabled] { background-color: #e0e0e0; /* 更深的灰色背景，强调不可用 */ border: 1px solid #bbb; /* 更明显的边框 */ color: #999; /* 字体颜色更浅，表示内容不可用 */ cursor: not-allowed; /* 鼠标指针变为“禁止”符号，强烈提示不可操作 */ opacity: 0.7; /* 整体透明度降低，增强禁用感 */ /* 确保禁用状态下无法获得焦点，虽然浏览器通常会处理，但显式声明更保险 */ pointer-events: none; /* 阻止所有鼠标事件，包括点击和悬停 */ /* 移除焦点时的外边框 */ outline: none; -webkit-box-shadow: none; box-shadow: none; } /* 对于按钮，可能需要特别处理点击反馈 */ button[disabled]:active { pointer-events: none; /* 再次强调不可点击 */ }</pre><p>通过这些CSS规则，我们就能让带有<code>readonly</code>或<code>disabled</code>属性的表单元素在视觉上与普通可编辑/可用元素区分开来，提升用户体验。我个人觉得，视觉上的区分度越明显，用户操作起来就越不容易出错。</p><h3>为什么我的只读输入框看起来和普通输入框一样？解决只读样式不明显的问题</h3><p>这确实是个常见的问题，尤其是在没有明确设置CSS样式时。浏览器对<code>readonly</code>和<code>disabled</code>属性的默认样式支持，说实话，往往比较“佛系”，不够突出。有时候，一个只读的输入框，除了光标可能变了一下，其他地方跟普通输入框几乎没区别，这会让用户感到困惑：“我到底能不能改这里？”</p><p>要解决这个问题，核心思想就是“强化视觉对比”。我们需要主动介入，用CSS覆盖掉那些不够鲜明的默认样式，给只读和禁用状态一个“专属的身份标识”。</p><p><strong>强化只读状态的视觉对比：</strong></p><ul><li><strong>背景色：</strong> 这是最直观的区分方式。给只读输入框一个浅灰色（<code>#f0f0f0</code>或更浅的颜色），而可编辑的输入框保持白色。这样，用户一眼就能看出哪些是“信息展示区”，哪些是“数据输入区”。</li><li><strong>边框：</strong> 默认边框可能不够明显。可以把只读输入框的边框颜色调浅一点，或者用虚线边框，甚至完全去掉边框，只保留背景色，这取决于你想要的效果。比如，<code>border: 1px solid #ddd;</code> 甚至 <code>border: none;</code>。</li><li><strong>文本颜色：</strong> 保持可读性的前提下，可以稍微调暗文本颜色，比如<code>color: #666;</code>，与可编辑状态的<code>#333</code>形成对比。</li><li><strong>光标样式：</strong> <code>cursor: default;</code> 是必须的，它明确告诉用户这里不能输入。</li><li><strong>焦点处理：</strong> 很多时候，只读元素也能获得焦点。但既然是只读，焦点时的外边框（<code>outline</code>）就显得多余，甚至会误导用户。所以，<code>outline: none;</code> 是个好习惯。</li></ul><p><strong>代码示例（强化版）：</strong></p><pre class="brush:language-css;toolbar:false;">/* 强化只读状态的视觉效果 */ input[readonly], textarea[readonly] { background-color: #f8f8f8; /* 极浅灰色背景 */ border: 1px dashed #e0e0e0; /* 虚线边框，暗示不可编辑 */ color: #777; /* 稍浅的文字颜色 */ cursor: default; padding: 8px 12px; /* 保持与普通输入框一致的内边距，避免跳动 */ border-radius: 4px; /* 统一圆角 */ /* 移除所有可能影响只读状态的阴影或过渡效果 */ box-shadow: none; transition: background-color 0.2s ease-in-out; /* 增加一点平滑过渡 */ } input[readonly]:hover, textarea[readonly]:hover { background-color: #f5f5f5; /* 鼠标悬停时略微变色，但仍是只读 */ } input[readonly]:focus, textarea[readonly]:focus { background-color: #f8f8f8; /* 焦点时保持只读样式 */ border-color: #e0e0e0; outline: none; /* 移除浏览器默认的焦点轮廓 */ }</pre><p>通过这些更细致的样式调整，只读输入框的“不可编辑”属性就能一目了然了。我发现，这种视觉上的清晰度，对于提升用户体验来说，简直是事半功倍。</p><h3>只读与禁用：功能上有何本质区别？避免混淆，选择正确状态</h3><p>在表单设计中，<code>readonly</code>和<code>disabled</code>这两个HTML属性常常让人纠结，它们在视觉上都能让元素看起来“不可编辑”，但骨子里，它们的行为逻辑和适用场景却大相径庭。理解这些本质区别，是正确使用它们的关键，否则可能会导致数据丢失或用户体验受损。</p><p><strong><code>readonly</code> (只读) 属性：</strong></p><ul><li><strong>核心功能：</strong> 阻止用户修改输入框或文本域的值。用户可以查看、选中、复制其中的内容。</li><li><strong>数据提交：</strong> <strong>重要！</strong> 带有<code>readonly</code>属性的元素，其值会随着表单一起提交到服务器。</li><li><strong>交互性：</strong> 用户可以聚焦（tab键可以选中），可以复制内容，但不能输入或修改。</li><li><strong>适用场景：</strong><ul><li>显示预设的、用户不可修改但又需要提交的数据，比如一个系统生成的订单号、一个不可更改的用户ID。</li><li>展示计算结果，这些结果需要随表单提交，但不需要用户手动输入。</li><li>在某些编辑流程中，某个字段在特定条件下暂时不允许修改，但其当前值仍是有效数据。</li></ul></li></ul><p><strong><code>disabled</code> (禁用) 属性：</strong></p><ul><li><strong>核心功能：</strong> 使表单元素完全不可用。用户不能与它进行任何交互（不能点击、不能输入、不能选中、不能聚焦）。</li><li><strong>数据提交：</strong> <strong>极其重要！</strong> 带有<code>disabled</code>属性的元素，其值<strong>不会</strong>随着表单一起提交到服务器。</li><li><strong>交互性：</strong> 元素变灰，不可聚焦，鼠标指针通常变为“禁止”符号。对辅助技术（如屏幕阅读器）而言，它也是不可操作的。</li><li><strong>适用场景：</strong><ul><li>当某个功能或选项在当前状态下完全不可用时（例如，未选择前置选项时，后续选项被禁用）。</li><li>在表单提交后，为防止用户重复提交或修改，将所有输入元素禁用。</li><li>某些表单元素需要根据用户权限或业务逻辑动态启用/禁用。</li></ul></li></ul><p><strong>我的看法和经验：</strong></p><p>在我多年的前端实践中，我发现很多人会混淆这两者，尤其是在处理表单提交逻辑时。如果一个字段的值对后端至关重要，但又不想让用户修改，那么<code>readonly</code>是你的朋友。而如果一个字段在当前语境下完全不相关，或者其存在本身就是一种“错误”状态，且不希望其值被提交，那<code>disabled</code>就是正确的选择。</p><p>举个例子，用户注册时，如果邮箱已经存在，你可以让邮箱输入框变成<code>readonly</code>并显示已注册的邮箱，同时旁边提示“此邮箱已注册”，引导用户找回密码。但如果你希望用户重新输入一个邮箱，那么旧的邮箱输入框就应该<code>disabled</code>掉，或者直接清空，因为它不再是有效数据。</p><p>所以，在选择时，先问自己两个问题：</p><ol><li>这个元素的值，我需要它随表单提交吗？</li><li>我希望用户能与这个元素进行任何形式的交互吗（哪怕只是选中或聚焦）？</li></ol><p>这两个问题的答案，基本就能帮你做出正确的判断。</p><h3>如何优雅地处理只读/禁用状态下的交互反馈？用户体验优化技巧</h3><p>光是让只读和禁用元素看起来不一样还不够，真正好的用户体验，体现在细节和交互反馈上。一个“优雅”的只读/禁用状态，不仅仅是视觉上的区分，更应该在用户尝试交互时，给出恰当的反馈，避免困惑和挫败感。</p><p><strong>1. 鼠标指针的精细化控制：</strong></p><ul><li><strong>只读 (<code>readonly</code>)：</strong> 理想情况下，光标应该保持<code>default</code>（默认箭头），表明这里是文本，可以选中，但不能输入。如果设置成<code>text</code>（文本输入光标），可能会误导用户尝试输入。</li><li><strong>禁用 (<code>disabled</code>)：</strong> 毫无疑问，<code>not-allowed</code>（禁止符号）是最佳选择。它明确地告诉用户“这里不能点，不能操作”。</li></ul><p><strong>2. 焦点管理与辅助功能：</strong></p><ul><li><strong>只读 (<code>readonly</code>)：</strong><ul><li>只读元素仍然可以获得焦点（通过Tab键），这对于需要复制其中内容的场景是很有用的。</li><li>在焦点时，避免出现默认的蓝色或黑色边框，因为它通常暗示“可编辑”。使用<code>outline: none;</code>，或者自定义一个不那么突兀的焦点样式，比如一个非常细的灰色边框。</li><li>对于屏幕阅读器用户，<code>readonly</code>元素仍然会被朗读，并且会被标识为只读。</li></ul></li><li><strong>禁用 (<code>disabled</code>)：</strong><ul><li>禁用元素不应获得焦点。浏览器通常会自动处理这一点，但如果遇到自定义组件，可能需要确保<code>tabindex="-1"</code>并结合<code>pointer-events: none;</code>。</li><li>对于屏幕阅读器，<code>disabled</code>元素会被标识为禁用，并且通常会被跳过，或者告知用户其不可用。</li></ul></li></ul><p><strong>3. 悬停（Hover）提示：</strong></p><p>这是一个非常重要的用户体验增强点。当用户将鼠标悬停在一个被禁用或只读的元素上时，可以提供一个简短的提示，解释为什么它处于这种状态。这通常需要结合JavaScript来实现，但CSS可以负责提示框的样式。</p><ul><li><strong>示例（结合JS和CSS）：</strong><pre class="brush:language-html;toolbar:false;"><input type="text" value="订单已完成，不可修改" readonly data-tooltip="订单状态已锁定"> <button disabled data-tooltip="请先选择商品">提交订单</button></pre><pre class="brush:language-css;toolbar:false;">/* 假设你有一个通用的tooltip样式 */ [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; /* ... 其他tooltip样式，如背景、颜色、定位等 ... */ white-space: nowrap; padding: 5px 10px; background-color: #333; color: #fff; border-radius: 3px; z-index: 100; /* 可能需要JS来精确计算位置，但CSS可以定义基本行为 */ }</pre><p>这种方式能有效减少用户的疑惑，提升界面的“亲和力”。</p></li></ul><p><strong>4. 状态切换的平滑过渡：</strong></p><p>如果表单元素的状态会动态地在可编辑/只读/禁用之间切换（比如通过JavaScript），那么添加CSS过渡效果会让用户体验更流畅。</p><pre class="brush:language-css;toolbar:false;">input, textarea, select, button { transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out; }</pre><p>当JavaScript添加或移除<code>readonly</code>/<code>disabled</code>属性时，背景色、边框、文字颜色等会平滑地变化，而不是突然跳变，这让界面看起来更精致。</p><p><strong>我的思考：</strong></p><p>我个人觉得，很多时候我们只关注了功能实现，却忽略了这些微小的交互细节。一个看似简单的只读或禁用状态，背后蕴含着用户对界面“反馈”的期待。如果一个按钮是禁用的，用户点击它却没有丝毫反应，也没有任何提示，他们可能会觉得是网站出了问题，而不是自己操作不当。所以，花点心思在这些交互反馈上，绝对是值得的投入。</p><h3>当CSS无法满足需求时：JavaScript的介入（动态控制与复杂场景）</h3><p>虽然CSS在美化只读和禁用状态上表现出色，但它毕竟是“静态”的。一旦涉及到根据用户行为、数据状态或业务逻辑来动态改变表单元素的只读或禁用状态，纯CSS就显得力不从心了。这时候，JavaScript就必须登场了，它扮演着“指挥家”的角色，根据不同的条件来切换元素的“情绪”。</p><p><strong>1. 动态添加/移除属性：</strong></p><p>这是JavaScript最基本的用途，用于根据程序逻辑来控制元素的<code>readonly</code>或<code>disabled</code>属性。</p><pre class="brush:language-javascript;toolbar:false;">// 获取表单元素 const myInput = document.getElementById('myInputField'); const myButton = document.getElementById('mySubmitButton'); const myCheckbox = document.getElementById('myCheckbox'); // 示例1：根据某个条件，让输入框变为只读 function makeInputReadonly(isReadonly) { if (isReadonly) { myInput.setAttribute('readonly', 'readonly'); // 添加readonly属性 // 也可以直接设置 myInput.readOnly = true; } else { myInput.removeAttribute('readonly'); // 移除readonly属性 // 也可以设置 myInput.readOnly = false; } } // 示例2：根据复选框的状态，启用或禁用按钮 myCheckbox.addEventListener('change', function() { if (this.checked) { myButton.removeAttribute('disabled'); // 勾选时启用按钮 // 也可以设置 myButton.disabled = false; } else { myButton.setAttribute('disabled', 'disabled'); // 未勾选时禁用按钮 // 也可以设置 myButton.disabled = true; } }); // 初始调用 makeInputReadonly(true); // 页面加载时先设置为只读</pre><p><strong>2. 处理复杂的业务逻辑：</strong></p><p>在实际项目中，表单字段之间的联动关系往往很复杂。比如，只有当用户选择了某个下拉菜单项后，另一个文本输入框才变得可编辑。</p><pre class="brush:language-javascript;toolbar:false;">const selectField = document.getElementById('mySelect'); const dependentInput = document.getElementById('dependentInput'); selectField.addEventListener('change', function() { if (this.value === 'customOption') { // 假设选择“自定义”时才可编辑 dependentInput.removeAttribute('readonly'); dependentInput.focus(); // 自动聚焦，提升体验 } else { dependentInput.setAttribute('readonly', 'readonly'); dependentInput.value = ''; // 清空内容，避免提交错误数据 } }); // 页面加载时，根据默认选择项设置初始状态 if (selectField.value !== 'customOption') { dependentInput.setAttribute('readonly', 'readonly'); }</pre><p><strong>3. 结合API进行数据加载与状态管理：</strong></p><p>当从后端API加载数据填充表单时，我们可能需要根据返回的数据状态来决定哪些字段是只读的。</p><pre class="brush:language-javascript;toolbar:false;"> async function loadUserData(userId) { try { const response =</pre><p>到这里，我们也就讲完了《CSS只读与禁用样式设置教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS,JavaScript,表单,disabled,readonly的知识点！</p> </div> <div class="labsList"> <a href="javascript:;" title="CSS">CSS</a> <a href="javascript:;" title="JavaScript">JavaScript</a> <a href="javascript:;" title="表单">表单</a> <a href="javascript:;" title="disabled">disabled</a> <a href="javascript:;" title="readonly">readonly</a> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/300882.html" title="Java栈逆序输出方法详解" class="img_box"> <img src="/uploads/20250829/175645317068b159329cceb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Java栈逆序输出方法详解">Java栈逆序输出方法详解 </a> <dl> <dt class="lineOverflow"><a href="/article/300882.html" title="Java栈逆序输出方法详解" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">Java栈逆序输出方法详解</dd> </dl> </div> <div class="cateItem"> <a href="/article/300884.html" title="Steam家庭共享设置详解：轻松完成共享教程" class="img_box"> <img src="/uploads/20250829/175645337568b159ffc6ffa.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Steam家庭共享设置详解：轻松完成共享教程"> </a> <dl> <dt class="lineOverflow"><a href="/article/300884.html" class="aBlack" title="Steam家庭共享设置详解：轻松完成共享教程">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">Steam家庭共享设置详解：轻松完成共享教程</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/619691.html" class="img_box" title="CSS数字显示统一技巧，OpenType特性应用方法"> <img src="/uploads/20260601/17802914206a1d175ca6b74.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS数字显示统一技巧，OpenType特性应用方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619691.html" class="aBlack" target="_blank" title="CSS数字显示统一技巧，OpenType特性应用方法">CSS数字显示统一技巧，OpenType特性应用方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>209浏览</span> <span class="collectBtn user_collection" data-id="619691" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619689.html" class="img_box" title="PerformanceAPI全生命周期预警指南"> <img src="/uploads/20260601/17802913226a1d16faa9805.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="PerformanceAPI全生命周期预警指南"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619689.html" class="aBlack" target="_blank" title="PerformanceAPI全生命周期预警指南">PerformanceAPI全生命周期预警指南</a> </dt> <dd class="cont2"> <span><i class="view"></i>147浏览</span> <span class="collectBtn user_collection" data-id="619689" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619683.html" class="img_box" title="一个按钮控制多个状态的实现方式"> <img src="/uploads/20260601/17802911266a1d16367332e.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="一个按钮控制多个状态的实现方式"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619683.html" class="aBlack" target="_blank" title="一个按钮控制多个状态的实现方式">一个按钮控制多个状态的实现方式</a> </dt> <dd class="cont2"> <span><i class="view"></i>360浏览</span> <span class="collectBtn user_collection" data-id="619683" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619679.html" class="img_box" title="CSSGrid子元素排序技巧分享"> <img src="/uploads/20260601/17802910156a1d15c7e530b.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSSGrid子元素排序技巧分享"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619679.html" class="aBlack" target="_blank" title="CSSGrid子元素排序技巧分享">CSSGrid子元素排序技巧分享</a> </dt> <dd class="cont2"> <span><i class="view"></i>155浏览</span> <span class="collectBtn user_collection" data-id="619679" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619677.html" class="img_box" title="FIMO支持透明度设置吗？"> <img src="/uploads/20260601/17802909496a1d158569b8e.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="FIMO支持透明度设置吗？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619677.html" class="aBlack" target="_blank" title="FIMO支持透明度设置吗？">FIMO支持透明度设置吗？</a> </dt> <dd class="cont2"> <span><i class="view"></i>393浏览</span> <span class="collectBtn user_collection" data-id="619677" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619653.html" class="img_box" title="Web组件开发：CustomElements实战教程"> <img src="/uploads/20260601/17802898596a1d11436d93f.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Web组件开发：CustomElements实战教程"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619653.html" class="aBlack" target="_blank" title="Web组件开发：CustomElements实战教程">Web组件开发：CustomElements实战教程</a> </dt> <dd class="cont2"> <span><i class="view"></i>243浏览</span> <span class="collectBtn user_collection" data-id="619653" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619650.html" class="img_box" title="CSS无限循环背景动画技巧"> <img src="/uploads/20260601/17802897036a1d10a7bcfb8.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS无限循环背景动画技巧"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619650.html" class="aBlack" target="_blank" title="CSS无限循环背景动画技巧">CSS无限循环背景动画技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>116浏览</span> <span class="collectBtn user_collection" data-id="619650" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619644.html" class="img_box" title="CSS文字大小动画不自然怎么优化？"> <img src="/uploads/20260601/17802894386a1d0f9e5c88c.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS文字大小动画不自然怎么优化？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="动画">动画</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619644.html" class="aBlack" target="_blank" title="CSS文字大小动画不自然怎么优化？">CSS文字大小动画不自然怎么优化？</a> </dt> <dd class="cont2"> <span><i class="view"></i>126浏览</span> <span class="collectBtn user_collection" data-id="619644" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619634.html" class="img_box" title="清除浮动空白间距的实用技巧"> <img src="/uploads/20260601/17802890356a1d0e0bc8117.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="清除浮动空白间距的实用技巧"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619634.html" class="aBlack" target="_blank" title="清除浮动空白间距的实用技巧">清除浮动空白间距的实用技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>430浏览</span> <span class="collectBtn user_collection" data-id="619634" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619632.html" class="img_box" title="JavaScript前端安全核心问题有哪些？"> <img src="/uploads/20260601/17802889596a1d0dbf97f68.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript前端安全核心问题有哪些？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619632.html" class="aBlack" target="_blank" title="JavaScript前端安全核心问题有哪些？">JavaScript前端安全核心问题有哪些？</a> </dt> <dd class="cont2"> <span><i class="view"></i>109浏览</span> <span class="collectBtn user_collection" data-id="619632" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619631.html" class="img_box" title="自定义图片提交按钮，INPUTTYPE设为IMAGE"> <img src="/uploads/20260601/17802888896a1d0d793af4e.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="自定义图片提交按钮，INPUTTYPE设为IMAGE"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   <a href="javascript:;" class="aLightGray" title="html">html</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619631.html" class="aBlack" target="_blank" title="自定义图片提交按钮，INPUTTYPE设为IMAGE">自定义图片提交按钮，INPUTTYPE设为IMAGE</a> </dt> <dd class="cont2"> <span><i class="view"></i>179浏览</span> <span class="collectBtn user_collection" data-id="619631" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619622.html" class="img_box" title="CSS文字压到图片上怎么解决？z-index调整方法"> <img src="/uploads/20260601/17802885336a1d0c151a9a2.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS文字压到图片上怎么解决？z-index调整方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>   |  1星期前  |   </span> </dd> <dt class="lineOverflow"> <a href="/article/619622.html" class="aBlack" target="_blank" title="CSS文字压到图片上怎么解决？z-index调整方法">CSS文字压到图片上怎么解决？z-index调整方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>126浏览</span> <span class="collectBtn user_collection" data-id="619622" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight"> <!-- 右侧广告位banner --> <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13100.html" target="_blank" title="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" class="img_box"> <img src="/uploads/20251027/176155320368ff2b3345c06.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13100.html" class="aBlack" target="_blank" title="ChatExcel酷表">ChatExcel酷表</a></dt> <dd class="cont1 lineTwoOverflow"> ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。 </dd> <dd class="cont2">7635次使用</dd> </dl> </li> <li> <a href="/ai/13099.html" target="_blank" title="Any绘本：开源免费AI绘本创作工具深度解析" class="img_box"> <img src="/uploads/20251023/176120760368f9e5333da5f.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Any绘本：开源免费AI绘本创作工具深度解析" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13099.html" class="aBlack" target="_blank" title="Any绘本">Any绘本</a></dt> <dd class="cont1 lineTwoOverflow"> 探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。 </dd> <dd class="cont2">8065次使用</dd> </dl> </li> <li> <a href="/ai/13098.html" target="_blank" title="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" class="img_box"> <img src="/uploads/20251021/176103600268f746e238bb8.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13098.html" class="aBlack" target="_blank" title="可赞AI">可赞AI</a></dt> <dd class="cont1 lineTwoOverflow"> 可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。 </dd> <dd class="cont2">7869次使用</dd> </dl> </li> <li> <a href="/ai/13097.html" target="_blank" title="星月写作：AI网文创作神器，助力爆款小说速成" class="img_box"> <img src="/uploads/20251014/176043000368ee07b3159d6.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="星月写作：AI网文创作神器，助力爆款小说速成" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13097.html" class="aBlack" target="_blank" title="星月写作">星月写作</a></dt> <dd class="cont1 lineTwoOverflow"> 星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。 </dd> <dd class="cont2">9807次使用</dd> </dl> </li> <li> <a href="/ai/13096.html" target="_blank" title="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" class="img_box"> <img src="/uploads/20251014/176040000268ed9282edf80.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13096.html" class="aBlack" target="_blank" title="MagicLight">MagicLight</a></dt> <dd class="cont1 lineTwoOverflow"> MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。 </dd> <dd class="cont2">8632次使用</dd> </dl> </li> </ul> </div> <!-- 相关文章 --> <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/72840.html" class="aBlack" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></dt> <dd> <span class="left">2023-11-03</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/76259.html" class="aBlack" title="使用微信小程序实现图片轮播特效">使用微信小程序实现图片轮播特效</a></dt> <dd> <span class="left">2023-11-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/83771.html" class="aBlack" title="解析sessionStorage的存储能力与限制">解析sessionStorage的存储能力与限制</a></dt> <dd> <span class="left">2024-01-11</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/85057.html" class="aBlack" title="探索冒泡活动对于团队合作的推动力">探索冒泡活动对于团队合作的推动力</a></dt> <dd> <span class="left">2024-01-13</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> <a href="/manual/go/" target="_blank" class="aBlack" title="手册">手册</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div> <!-- 微信登录弹窗 --> <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div> <!-- 微信登录 --> <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span> <!-- <div class="refreshBox"> <p>二维码失效</p> <button type="button" class="create_wxqrcode">刷新1111</button> </div> --> </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div> <!-- 密码登录 --> <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//17golang.com/article/300883.html"/> <input type="hidden" name="__token__" value="156b67c3516f7904c11de443888b8e72" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//17golang.com/article/300883.html"/> <input type="hidden" name="__token__" value="156b67c3516f7904c11de443888b8e72" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div> <!-- 重置密码 --> <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> </body> </html>