CSS怎么移除焦点_CSS移除输入框焦点样式与轮廓线教程-css教程-PHP中文网

移除输入框焦点样式需谨慎，核心是通过outline: none和box-shadow: none去除默认效果，但应避免完全移除，以免影响键盘导航等可访问性需求。不同浏览器处理方式不同：Chrome/Edge常用box-shadow，Firefox用outline，Safari有独特光晕效果，可通过自定义box-shadow、border或背景色替代默认样式，并添加transition提升体验，同时建议跨浏览器测试确保一致性。

css怎么移除焦点_css移除输入框焦点样式与轮廓线教程

要移除CSS中输入框的焦点样式和轮廓线，核心在于控制

outline

和

box-shadow

这两个CSS属性。浏览器默认的焦点样式通常由

outline

（轮廓线）或某些浏览器（比如Chrome）的

box-shadow

（盒阴影）来呈现。直接将它们设置为

none

是最直接的手段，但这样做务必三思，因为这会影响到键盘用户的可访问性。

解决方案

当我们需要移除或重置输入框（

</pre>, <pre class="brush:php;toolbar:false;"><select></pre>等）在获得焦点时，浏览器自动添加的视觉效果时，通常会用到以下CSS属性。这不是一个简单的“关掉”开关，而是一个需要权衡的决定。</p>
<p><strong>1. 移除默认轮廓线 (Outline)</strong></p>
<p>这是最常见也最直接的方法。浏览器的默认焦点轮廓线主要是为了键盘导航用户提供视觉指示。</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><pre class='brush:css;toolbar:false;'>input:focus,
textarea:focus,
select:focus {
    outline: none; /* 移除默认的焦点轮廓线 */
}</pre><ul><li>
<strong>思考：</strong> <pre class="brush:php;toolbar:false;">outline</pre>和<pre class="brush:php;toolbar:false;">border</pre>不同，它不占用盒模型空间，不会引起元素重排。但完全移除它，对于那些不使用鼠标，只依赖键盘或辅助技术的用户来说，会失去当前操作元素的视觉反馈，这在可访问性上是一个大问题。我个人倾向于不直接移除，而是去美化它。</li></ul>
<p><strong>2. 移除默认盒阴影 (Box-shadow)</strong></p>
<p>一些现代浏览器，特别是基于Chromium的浏览器（如Chrome、Edge），在元素获得焦点时，除了<pre class="brush:php;toolbar:false;">outline</pre>外，还会添加一个蓝色的<pre class="brush:php;toolbar:false;">box-shadow</pre>作为焦点指示。</p><pre class='brush:css;toolbar:false;'>input:focus,
textarea:focus,
select:focus {
    box-shadow: none; /* 移除某些浏览器（如Chrome）的默认焦点阴影 */
}</pre><ul><li>
<strong>思考：</strong> 结合<pre class="brush:php;toolbar:false;">outline: none;</pre>使用时，才能彻底移除这些浏览器的默认焦点样式。单独移除<pre class="brush:php;toolbar:false;">box-shadow</pre>可能还会有<pre class="brush:php;toolbar:false;">outline</pre>存在。</li></ul>
<p><strong>3. 移除或修改边框 (Border)</strong></p>
<p>如果你的焦点样式是表现为边框的变化，那么可能需要修改<pre class="brush:php;toolbar:false;">border</pre>属性。这通常发生在自定义了边框，但又不希望焦点时有额外的边框效果。</p><pre class='brush:css;toolbar:false;'>input:focus,
textarea:focus,
select:focus {
    border-color: transparent; /* 如果默认焦点样式是改变边框颜色 */
    border-width: 1px; /* 保持边框宽度，避免元素跳动 */
    border-style: solid; /* 保持边框样式 */
}</pre><ul><li>
<strong>思考：</strong> 直接设置<pre class="brush:php;toolbar:false;">border: none;</pre>可能会导致元素在获得焦点时“跳动”或大小变化，因为<pre class="brush:php;toolbar:false;">border</pre>是占用盒模型空间的。更稳妥的做法是保持<pre class="brush:php;toolbar:false;">border-width</pre>和<pre class="brush:php;toolbar:false;">border-style</pre>不变，只修改<pre class="brush:php;toolbar:false;">border-color</pre>，或者用<pre class="brush:php;toolbar:false;">transparent</pre>。</li></ul>
<p><strong>4. 针对特定浏览器或元素</strong></p>
<ul>
<li>
<strong>Firefox的<pre class="brush:php;toolbar:false;">::-moz-focus-inner</pre>:</strong> 针对Firefox中按钮等元素的内部焦点轮廓。<pre class='brush:css;toolbar:false;'>button::-moz-focus-inner {
    border: 0; /* 移除Firefox按钮的内部边框 */
}</pre></li>
<li>
<strong>IE的<pre class="brush:php;toolbar:false;">outline</pre>:</strong> IE10+的<pre class="brush:php;toolbar:false;">outline</pre>行为与标准浏览器一致，但旧版本IE可能需要其他hack。不过现在我们基本不需要考虑旧版IE了。</li>
</ul>
<p>总的来说，移除焦点样式是一个双刃剑。我通常建议不要完全移除，而是用自定义的、符合品牌风格的样式来替代，这样既能保持美观，又能兼顾可访问性。</p>
<h3>为什么不建议完全移除所有焦点样式？</h3>
<p>这真是一个老生常谈但又不得不提的问题。作为开发者，我们常常追求像素级的完美和视觉上的统一，默认的蓝色或虚线轮廓线确实有点“碍眼”。但话说回来，这些看似丑陋的默认样式，它们的存在是有着深远的意义的，主要就是为了<strong>可访问性（Accessibility）</strong>和<strong>用户体验（User Experience）</strong>。</p>
<p>想象一下，一个用户因为各种原因无法使用鼠标，他们可能依赖键盘的Tab键来在页面元素之间跳转。当他们按下Tab键时，如何知道当前焦点停留在哪个输入框、按钮或链接上呢？没错，就是那个焦点轮廓线或阴影。如果完全移除了这些视觉指示，那么这个用户基本上就“失明”了，他们不知道自己在哪里，更不知道如何操作。这不仅仅是便利性问题，很多时候是能不能使用网站的问题。</p>
<p>从法律层面看，许多国家和地区都有关于网站可访问性的法规（比如美国的ADA，国际的WCAG标准），其中明确要求交互元素必须有清晰的焦点指示。这不仅仅是为了“做好事”，也是为了避免潜在的法律风险。</p>
<p>所以，我的个人观点是，完全移除焦点样式，就像是把汽车的刹车灯拆掉，虽然车尾看起来更简洁了，但安全隐患巨大。我们追求美观是没错，但不能以牺牲核心功能为代价。</p><div class="aritcle_card flexRow">
							<div class="artcardd flexRow">
								<a class="aritcle_card_img" href="/ai/2490" title="koly.club"><img
										src="https://img.php.cn/upload/ai_manual/001/246/273/176827441360649.png" alt="koly.club"></a>
								<div class="aritcle_card_info flexColumn">
									<a href="/ai/2490" title="koly.club">koly.club</a>
									<p>一站式社群管理工具</p>
								</div>
								<a href="/ai/2490" title="koly.club" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
							</div>
						</div>
<h3>如何自定义输入框的焦点样式，而不是完全移除？</h3>
<p>既然完全移除不可取，那么最好的办法就是<strong>自定义</strong>。这就像给你的汽车刹车灯换个更酷炫的LED灯，既美观又实用。自定义焦点样式，不仅能让你的网站在视觉上更统一，还能提升用户体验，同时兼顾可访问性。</p>
<p>我的做法通常是这样的：</p>
<ol>
<li>
<p><strong>先“清零”再“重塑”：</strong></p><pre class='brush:css;toolbar:false;'>input:focus,
textarea:focus,
select:focus {
    outline: none; /* 移除默认轮廓线 */
    box-shadow: none; /* 移除默认阴影 */
    /* 也可以重置默认的边框变化，确保它不会干扰我们的自定义样式 */
    border-color: initial; /* 或者设置为你的默认边框颜色 */
}</pre><p>这里先移除了浏览器的默认样式，为我们自定义样式铺平道路。</p>
</li>
<li>
<p><strong>添加自定义视觉指示：</strong>
现在，我们可以用更符合网站设计风格的方式来指示焦点。常用的有：</p>
<ul>
<li>
<p><strong>自定义<pre class="brush:php;toolbar:false;">box-shadow</pre>：</strong> 这是我最喜欢的方式，因为它不影响元素布局，而且可以做出非常漂亮的内阴影或外阴影效果。</p><pre class='brush:css;toolbar:false;'>input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6); /* 蓝色光晕效果 */
    border-color: #4299e1; /* 同时改变边框颜色 */
}</pre><p>这里我用了一个半透明的蓝色<pre class="brush:php;toolbar:false;">box-shadow</pre>来模拟一个“光晕”效果，同时把边框颜色也改了，这样视觉反馈非常明显。</p>
</li>
<li>
<p><strong>改变<pre class="brush:php;toolbar:false;">border</pre>颜色或样式：</strong></p><pre class='brush:css;toolbar:false;'>input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #007bff; /* 聚焦时边框变为蓝色 */
    box-shadow: none; /* 如果不想要阴影 */
}</pre><p>这种方式也很直观，但要注意保持<pre class="brush:php;toolbar:false;">border-width</pre>不变，否则会引起元素跳动。</p>
</li>
<li>
<p><strong>改变背景色：</strong> 偶尔也会用，但通常作为辅助手段，因为背景色变化可能不如边框或阴影那么醒目。</p><pre class='brush:css;toolbar:false;'>input:focus {
    outline: none;
    background-color: #f0f8ff; /* 聚焦时背景变为浅蓝色 */
}</pre></li>
</ul>
</li>
<li>
<p><strong>添加过渡效果（<pre class="brush:php;toolbar:false;">transition</pre>）：</strong>
为了让焦点变化更平滑，而不是生硬地跳变，添加一个<pre class="brush:php;toolbar:false;">transition</pre>是个好主意。</p><pre class='brush:css;toolbar:false;'>input,
textarea,
select {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}</pre><p>这样用户体验会好很多，变化看起来更自然。</p>
</li>
</ol>
<p>选择哪种方式取决于你的设计风格和需求，但核心思想是提供一个清晰、可见、且与你的品牌调性一致的焦点指示。</p>
<h3>不同浏览器对焦点样式的处理有何差异？</h3>
<p>这块内容，说实话，是<a style="color:#f60; text-decoration:underline;" title="前端" href="https://www.php.cn/zt/15813.html" target="_blank">前端</a>开发中一个比较头疼但又不得不面对的现实。虽然CSS标准在不断完善，但各个浏览器厂商在实现细节上总会有那么一点点“个性”，尤其是在一些默认样式和用户代理样式表上。对于焦点样式，这种差异尤为明显。</p>
<p><strong>1. Chrome/Edge (基于Chromium内核):</strong>
这些浏览器通常会给焦点元素添加一个蓝色的<pre class="brush:php;toolbar:false;">box-shadow</pre>。这个阴影看起来像是一个发光效果，通常比较醒目。它不占用布局空间，所以不会导致元素跳动。此外，它们也可能有默认的<pre class="brush:php;toolbar:false;">outline</pre>，但<pre class="brush:php;toolbar:false;">box-shadow</pre>往往更显眼。</p>
<p><strong>2. Firefox:</strong>
Firefox的默认焦点样式通常是<pre class="brush:php;toolbar:false;">outline</pre>，可能是一个虚线框，或者一个实线框。它的颜色和粗细可能因<a style="color:#f60; text-decoration:underline;" title="操作系统" href="https://www.php.cn/zt/16016.html" target="_blank">操作系统</a>和Firefox版本而异。有时，对于按钮等元素，它还会有一个内部的虚线边框，这需要通过<pre class="brush:php;toolbar:false;">::-moz-focus-inner</pre>来控制。</p>
<p><strong>3. Safari (WebKit/Apple WebKit):</strong>
Safari在<a style="color:#f60; text-decoration:underline;" title="mac" href="https://www.php.cn/zt/17259.html" target="_blank">mac</a>OS上，默认的焦点样式也比较独特，经常是一个蓝色的光晕效果，类似于Chrome的<pre class="brush:php;toolbar:false;">box-shadow</pre>，但视觉上可能有所不同。在iOS上，焦点样式可能更不明显，或者依赖于系统UI。</p>
<p><strong>4. 总结差异及应对：</strong></p>
<ul>
<li>
<strong><pre class="brush:php;toolbar:false;">outline</pre>与<pre class="brush:php;toolbar:false;">box-shadow</pre>的优先级：</strong> 大多数情况下，如果你同时设置了<pre class="brush:php;toolbar:false;">outline: none;</pre>和<pre class="brush:php;toolbar:false;">box-shadow: none;</pre>，就能覆盖大部分浏览器的默认焦点样式。</li>
<li>
<strong>元素类型差异：</strong> 某些元素，如<pre class="brush:php;toolbar:false;"><button></pre>或<pre class="brush:php;toolbar:false;"><select></pre>，在不同浏览器中可能会有更复杂的默认焦点样式。例如，Firefox的<pre class="brush:php;toolbar:false;">::-moz-focus-inner</pre>就是针对按钮的。</li>
<li>
<strong>操作系统影响：</strong> 浏览器的默认样式有时还会受到操作系统主题的影响。例如，在Windows高对比度模式下，焦点样式可能会被系统强制覆盖，以确保可访问性。</li>
<li>
<strong>跨浏览器测试：</strong> 正因为有这些差异，进行充分的跨浏览器测试是至关重要的。你不能只在Chrome里看一眼就觉得万事大吉了。至少要在Chrome、Firefox和Safari（如果可能的话，还有Edge）中都检查一下焦点样式，确保它们在视觉上和功能上都符合预期。</li>
<li>
<strong>Reset/Normalize：</strong> 很多CSS Reset或Normalize库会包含一些针对焦点样式的重置规则，这有助于提供一个更一致的起点。但我个人更倾向于自己写，因为这样能更精确地控制我想要的效果，而不是一股脑地全部重置。</li>
</ul>
<p>理解这些差异，并采取相应的策略（如先移除默认再自定义，并进行充分测试），是确保你的网站在所有用户和所有环境下都能提供良好体验的关键。</p>					</div>
					<div class="artmoreart ">
													<div class="artdp artptit"><span></span>
								<p>相关文章</p>
							</div>
							<div class="artmores flexColumn">
																	<a class="artmrlis flexRow" href="/faq/2025565.html" title="css grid布局调试困难怎么排查_通过显示网格线思路解释"><b></b>
										<p class="overflowclass">css grid布局调试困难怎么排查_通过显示网格线思路解释</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2025560.html" title="css first-child 不生效是什么原因_结构选择器排查方法"><b></b>
										<p class="overflowclass">css first-child 不生效是什么原因_结构选择器排查方法</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2025545.html" title="css grid布局下图片比例失调怎么办_通过对象适配属性说明"><b></b>
										<p class="overflowclass">css grid布局下图片比例失调怎么办_通过对象适配属性说明</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2025510.html" title="css动画怎么实现缩放效果_css动画缩放实现方式"><b></b>
										<p class="overflowclass">css动画怎么实现缩放效果_css动画缩放实现方式</p>
									</a>
																	<a class="artmrlis flexRow" href="/faq/2025450.html" title="css 想快速统一页面文字颜色怎么办_使用 css tailwind text-color 工具类"><b></b>
										<p class="overflowclass">css 想快速统一页面文字颜色怎么办_使用 css tailwind text-color 工具类</p>
									</a>
															</div>
													<div class="artmoretabs flexRow">
								<p>相关标签:</p>
								<div class="mtbs flexRow">
									<a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15716.html" target="_blank">css</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/27093.html" target="_blank">css教程</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15813.html" target="_blank">前端</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/15970.html" target="_blank">windows</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/16016.html" target="_blank">操作系统</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/16180.html" target="_blank">浏览器</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/16380.html" target="_blank">access</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/17259.html" target="_blank">mac</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/17719.html" target="_blank">ios</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/18451.html" target="_blank">macos</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/19041.html" target="_blank">win</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/zt/42725.html" target="_blank">cos</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=firefox" target="_blank">firefox</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=css" target="_blank">css</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=chrome" target="_blank">chrome</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=safari" target="_blank">safari</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=webkit" target="_blank">webkit</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=edge" target="_blank">edge</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=select" target="_blank">select</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=样式表" target="_blank">样式表</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=border" target="_blank">border</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=transition" target="_blank">transition</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=input" target="_blank">input</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=windows" target="_blank">windows</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=macos" target="_blank">macos</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=ios" target="_blank">ios</a> <a class="mtbsa flexRow" onclick="hits_log(2,'www',this);" href-data="/search?q=ui" target="_blank">ui</a>								</div>
							</div>
						
						<p class="statement">本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</p>
						<div class="lastanext flexRow">
													<a class="lastart flexRow" href="/faq/1479199.html" title="CSS怎么定义颜色_CSS颜色定义方法与调色技巧教程"><span>上一篇：</span>CSS怎么定义颜色_CSS颜色定义方法与调色技巧教程</a>
													<a class="nextart flexRow" href="/faq/1479214.html" title="CSS路径查找为何找不到元素？检查HTML结构和选择器拼写错误"><span>下一篇：</span>CSS路径查找为何找不到元素？检查HTML结构和选择器拼写错误</a>
												</div>
					</div>

					<div class="artlef-down ">
													<div class="authormore ">
								<div class="rightdTitle flexRow">
									<div class="title-left flexRow"> <b></b>
										<p>作者最新文章</p>
									</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020066.html" title="和平精英阳光菠萝皮肤需要多少钱-和平精英阳光菠萝价格介绍"><b></b>
												<p class="overflowclass">和平精英阳光菠萝皮肤需要多少钱-和平精英阳光菠萝价格介绍</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:40</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020067.html" title="智象未来创始人兼首席执行官梅涛博士当选2025ACM Fellow"><b></b>
												<p class="overflowclass">智象未来创始人兼首席执行官梅涛博士当选2025ACM Fellow</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:40</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020070.html" title="天眼查电脑版官网登录_天眼查电脑版官网登录操作方法"><b></b>
												<p class="overflowclass">天眼查电脑版官网登录_天眼查电脑版官网登录操作方法</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:41</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020074.html" title="怎样在交管12123官网app申领免检标志_申领免检标操作【步骤详解】"><b></b>
												<p class="overflowclass">怎样在交管12123官网app申领免检标志_申领免检标操作【步骤详解】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:43</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020076.html" title="2026春运铁路临时列车增开计划怎样_春运加开车次表与候车区域"><b></b>
												<p class="overflowclass">2026春运铁路临时列车增开计划怎样_春运加开车次表与候车区域</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:43</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020077.html" title="3699免费游戏入口 3699小游戏网站入口免登录"><b></b>
												<p class="overflowclass">3699免费游戏入口 3699小游戏网站入口免登录</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:44</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020080.html" title="同程免签国出境游票怎么比价_同程免签国出境游票比价渠道与窍门【攻略】"><b></b>
												<p class="overflowclass">同程免签国出境游票怎么比价_同程免签国出境游票比价渠道与窍门【攻略】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:44</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020081.html" title="高德地图鹰眼预警怎么查看周边预警_高德地图周边预警查看步骤【操作】"><b></b>
												<p class="overflowclass">高德地图鹰眼预警怎么查看周边预警_高德地图周边预警查看步骤【操作】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:45</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020084.html" title="百度APP悬浮窗能调出AI答题入口吗 百度APP悬浮窗调AI答题入口方法【说明】"><b></b>
												<p class="overflowclass">百度APP悬浮窗能调出AI答题入口吗 百度APP悬浮窗调AI答题入口方法【说明】</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:46</p>
											</div>
										</div>
								</div>
																	<div class="authlist flexColumn">
										<div class="autharts flexRow">
											<a class="autharta flexRow " href="/faq/2020094.html" title="电热毯性价比哪个品牌最划算_电热毯高性价比品牌盘点格力与志高选购技巧"><b></b>
												<p class="overflowclass">电热毯性价比哪个品牌最划算_电热毯高性价比品牌盘点格力与志高选购技巧</p>
											</a>
											<div class="authtime flexRow"><b></b>
												<p>2026-01-23 09:48</p>
											</div>
										</div>
								</div>
															</div>
						
						<div class="moreAi ">
							<div class="rightdTitle flexRow">
								<div class="title-left flexRow"> <b></b>
									<p>热门AI工具</p>
								</div>
								<a target="_blank" class="rititle-more flexRow" href="/ai" title="热门AI工具"><span>更多</span><b></b></a>
							</div>

							<div class="moreailist flexRow">
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/723" title="DeepSeek" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679963982777.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="DeepSeek" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">DeepSeek</p>
												<p class="overflowclass abriptwo">幻方量化公司旗下的开源大模型平台</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																													<p href="/ai/tag/code/open-plat" title="开放平台" class="aidcontbp flexRow flexcenter">开放平台</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/726" title="豆包大模型" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680204067325.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="豆包大模型" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">豆包大模型</p>
												<p class="overflowclass abriptwo">字节跳动自主研发的一系列大型语言模型</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/725" title="通义千问" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974228210.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="通义千问" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">通义千问</p>
												<p class="overflowclass abriptwo">阿里巴巴推出的全能AI助手</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/854" title="腾讯元宝" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978251103.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="腾讯元宝" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">腾讯元宝</p>
												<p class="overflowclass abriptwo">腾讯混元平台推出的AI助手</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/office/docs" title="文档处理" class="aidcontbp flexRow flexcenter">文档处理</p>
																													<p href="/ai/tag/office/excel" title="Excel 表格" class="aidcontbp flexRow flexcenter">Excel 表格</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/724" title="文心一言" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679974557049.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="文心一言" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">文心一言</p>
												<p class="overflowclass abriptwo">文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																													<p href="/ai/tag/text/chinese-writing" title="中文写作" class="aidcontbp flexRow flexcenter">中文写作</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/1507" title="讯飞写作" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a4153cd86671.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="讯飞写作" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">讯飞写作</p>
												<p class="overflowclass abriptwo">基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/text/chinese-writing" title="中文写作" class="aidcontbp flexRow flexcenter">中文写作</p>
																													<p href="/ai/tag/text/write" title="写作工具" class="aidcontbp flexRow flexcenter">写作工具</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/1115" title="即梦AI" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d8f7c530c315.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="即梦AI" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">即梦AI</p>
												<p class="overflowclass abriptwo">一站式AI创作平台，免费AI图片和视频生成。</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/image/image-titching" title="图片拼接" class="aidcontbp flexRow flexcenter">图片拼接</p>
																													<p href="/ai/tag/image/image-create" title="图画生成" class="aidcontbp flexRow flexcenter">图画生成</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/808" title="ChatGPT" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679970194596.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="ChatGPT" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">ChatGPT</p>
												<p class="overflowclass abriptwo">最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																													<p href="/ai/tag/text/chinese-writing" title="中文写作" class="aidcontbp flexRow flexcenter">中文写作</p>
																											</div>
																							</div>
										</a>
									</div>
																	<div class="aidcons flexRow  check ">
										<a target="_blank" href="/ai/821" title="智谱清言 - 免费全能的AI助手" class="aibtns flexRow">
											<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679976181507.png?x-oss-process=image/resize,m_mfit,h_70,w_70,limit_0" alt="智谱清言 - 免费全能的AI助手" class="aibtnimg"
												onerror="this.src='/static/lhimages/moren/morentu.png'">
											<div class="aibtn-right flexColumn">
												<p class="overflowclass abripone">智谱清言 - 免费全能的AI助手</p>
												<p class="overflowclass abriptwo">智谱清言 - 免费全能的AI助手</p>
																									<div class="aidconstab flexRow">
																												<p href="/ai/tag/code/large-model" title="AI大模型" class="aidcontbp flexRow flexcenter">AI大模型</p>
																													<p href="/ai/tag/ai-application/software" title="PC软件" class="aidcontbp flexRow flexcenter">PC软件</p>
																											</div>
																							</div>
										</a>
									</div>
															</div>




						</div>

					</div>


				</div>


			</div>
			<div class="conRight artdtilRight ">
				<div class="artrig-adv ">
                    <script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script>
                </div>
				<div class="hotzt artdtzt">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>相关专题</p>
						</div>
						<a target="_blank" class="rititle-more flexRow" href="/faq/zt" title="相关专题"><span>更多</span><b></b></a>
					</div>
					<div class="hotztuls flexColumn">
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/cssys" class="aClass flexRow hotzta" title="css"><img
										src="https://img.php.cn/upload/subject/202306/15/2023061514481695909.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="css" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/cssys" class="aClass flexRow hotztra overflowclass" title="css">css</a>
									<p class="aClass flexRow hotztrp overflowclass">css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">524</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.06.15</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/cssjz" class="aClass flexRow hotzta" title="css居中"><img
										src="https://img.php.cn/upload/subject/202307/27/2023072716432165335.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="css居中" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/cssjz" class="aClass flexRow hotztra overflowclass" title="css居中">css居中</a>
									<p class="aClass flexRow hotztrp overflowclass">css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">268</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.07.27</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/cssrhcrtp" class="aClass flexRow hotzta" title="css如何插入图片"><img
										src="https://img.php.cn/upload/subject/202307/28/2023072811212982863.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="css如何插入图片" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/cssrhcrtp" class="aClass flexRow hotztra overflowclass" title="css如何插入图片">css如何插入图片</a>
									<p class="aClass flexRow hotztrp overflowclass">cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面，使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章，欢迎大家前来阅读学习。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">761</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.07.28</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/cssccxsslh" class="aClass flexRow hotzta" title="css超出显示..."><img
										src="https://img.php.cn/upload/subject/202308/01/2023080110011267516.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="css超出显示..." class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/cssccxsslh" class="aClass flexRow hotztra overflowclass" title="css超出显示...">css超出显示...</a>
									<p class="aClass flexRow hotztrp overflowclass">在CSS中，当文本内容超出容器的宽度或高度时，可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章，相关教程，供大家免费体验。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">539</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.08.01</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/cssztys" class="aClass flexRow hotzta" title="css字体颜色"><img
										src="https://img.php.cn/upload/subject/202308/10/2023081016274359935.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="css字体颜色" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/cssztys" class="aClass flexRow hotztra overflowclass" title="css字体颜色">css字体颜色</a>
									<p class="aClass flexRow hotztrp overflowclass">CSS中，字体颜色可以通过属性color来设置，用于控制文本的前景色，字体颜色在网页设计中起到很重要的作用，具有以下表现作用：1、提升可读性；2、强调重点信息；3、营造氛围和美感；4、用于呈现品牌标识或与品牌形象相符的风格。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">761</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.08.10</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/smscss" class="aClass flexRow hotzta" title="什么是css"><img
										src="https://img.php.cn/upload/subject/202308/10/2023081016342672285.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="什么是css" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/smscss" class="aClass flexRow hotztra overflowclass" title="什么是css">什么是css</a>
									<p class="aClass flexRow hotztrp overflowclass">CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述网页（或其他基于 XML 的文档）样式与布局的标记语言，CSS的作用和意义如下：1、分离样式和内容；2、页面加载速度优化；3、实现响应式设计；4、确保整个网站的风格和样式保持统一。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">606</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.08.10</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/csssjxzmx" class="aClass flexRow hotzta" title="css三角形怎么写"><img
										src="https://img.php.cn/upload/subject/202308/21/2023082111310711253.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="css三角形怎么写" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/csssjxzmx" class="aClass flexRow hotztra overflowclass" title="css三角形怎么写">css三角形怎么写</a>
									<p class="aClass flexRow hotztrp overflowclass">CSS可以通过多种方式实现三角形形状，本专题为大家提供css三角形怎么写的相关教程，大家可以免费体验。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">561</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.08.21</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/cssszwzys" class="aClass flexRow hotzta" title="css设置文字颜色"><img
										src="https://img.php.cn/upload/subject/202308/22/2023082211413730683.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="css设置文字颜色" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/cssszwzys" class="aClass flexRow hotztra overflowclass" title="css设置文字颜色">css设置文字颜色</a>
									<p class="aClass flexRow hotztrp overflowclass">CSS（层叠样式表）可以用于设置文字颜色，这样做有以下好处和优势：1、增加网页的可视化效果；2、突出显示某些重要的信息或关键字；3、增强品牌识别度；4、提高网页的可访问性；5、引起不同的情感共鸣。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">397</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2023.08.22</p>
										</div>
									</div>
								</div>
							</div>
													<div class="hotztlls flexRow">
								<a target="_blank" href="/faq/cjjkgxgjchj" class="aClass flexRow hotzta" title="c++空格相关教程合集"><img
										src="https://img.php.cn/upload/subject/202601/23/2026012320405281523.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="c++空格相关教程合集" class="hotztaimg"
										onerror="this.src='/static/lhimages/moren/morentu.png'"></a>
								<div class="hotztright flexColumn">
									<a target="_blank" href="/faq/cjjkgxgjchj" class="aClass flexRow hotztra overflowclass" title="c++空格相关教程合集">c++空格相关教程合集</a>
									<p class="aClass flexRow hotztrp overflowclass">本专题整合了c++空格相关教程，阅读专题下面的文章了解更多详细内容。</p>
									<div class="hotztrdown flexRow">
										<div class="htztdsee flexRow"> <b></b>
											<p class="">0</p>
										</div>
										<div class="htztdTime flexRow"> <b></b>
											<p>2026.01.23</p>
										</div>
									</div>
								</div>
							</div>
											</div>
				</div>

				<div class="hotdownload ">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>热门下载</p>
						</div>
						<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="热门下载"><span>更多</span><b></b></a>
					</div>
					<div class="hotdownTab">
						<div class="hdTabs flexRow">
							<div class="check" data-id="onef">网站特效 <b></b> </div> /
							<div class="" data-id="twof">网站源码 <b></b></div> /
							<div class="" data-id="threef">网站素材 <b></b></div> /
							<div class="" data-id="fourf">前端模板 <b></b></div>
						</div>
						<ul class="onef">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery 360度全景图插件" href="/xiazai/js/8617"><span>[图片特效]</span><span>jQuery 360度全景图插件</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery QQ登陆框效果" href="/xiazai/js/8616"><span>[表单按钮]</span><span>jQuery QQ登陆框效果</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="电商网店主图展示代码" href="/xiazai/js/8615"><span>[图片特效]</span><span>电商网店主图展示代码</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQ顶部下拉ajax验证表单 jQuery顶部下拉ajax验证表单代码下载" href="/xiazai/js/8614"><span>[表单按钮]</span><span>jQ顶部下拉ajax验证表单 jQuery顶部下拉ajax验证表单代码下载</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery表单步骤流程导航" href="/xiazai/js/8613"><span>[表单按钮]</span><span>jQuery表单步骤流程导航</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="CSS3缩放切换效果焦点图特效" href="/xiazai/js/8612"><span>[图片特效]</span><span>CSS3缩放切换效果焦点图特效</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery+CSS3实现多步注册表单进度条" href="/xiazai/js/8611"><span>[表单按钮]</span><span>jQuery+CSS3实现多步注册表单进度条</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery实现Diy拖拽表单代码" href="/xiazai/js/8610"><span>[表单按钮]</span><span>jQuery实现Diy拖拽表单代码</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="css3鼠标拖拽展示图片特效" href="/xiazai/js/8609"><span>[图片特效]</span><span>css3鼠标拖拽展示图片特效</span></a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" title="jQuery实现汉字转换成拼音代码" href="/xiazai/js/8608"><span>[表单按钮]</span><span>jQuery实现汉字转换成拼音代码</span></a>
									</div>
								</li>
													</ul>
						<ul class="twof" style="display:none;">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11355" title="openaishop"><span>[电商源码]</span><span>openaishop</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11354" title="思翔企(事)业单位文件柜 build 20080313"><span>[其它模板]</span><span>思翔企(事)业单位文件柜 build 20080313</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11353" title="雅龙智能装备工业设备类WordPress主题1.0"><span>[企业站源码]</span><span>雅龙智能装备工业设备类WordPress主题1.0</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11352" title="威发卡自动发卡系统"><span>[电商源码]</span><span>威发卡自动发卡系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11351" title="卡密分发系统"><span>[电商源码]</span><span>卡密分发系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11350" title="中华陶瓷网"><span>[电商源码]</span><span>中华陶瓷网</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11349" title="简洁粉色食品公司网站"><span>[电商源码]</span><span>简洁粉色食品公司网站</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11348" title="极速网店系统"><span>[电商源码]</span><span>极速网店系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11347" title="淘宝妈妈_淘客推广系统"><span>[电商源码]</span><span>淘宝妈妈_淘客推广系统</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/11346" title="积客B2SCMS商城系统"><span>[电商源码]</span><span>积客B2SCMS商城系统</span> </a>
									</div>
								</li>
													</ul>
						<ul class="threef" style="display:none;">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4262" title="萌系卡通唐装小马插画矢量素材"><span>[网站素材]</span><span>萌系卡通唐装小马插画矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4261" title="超市购物宣传方形海报PSD源文件设计下载"><span>[网站素材]</span><span>超市购物宣传方形海报PSD源文件设计下载</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4260" title="粉色极简线条派对海报矢量模板"><span>[网站素材]</span><span>粉色极简线条派对海报矢量模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4259" title="情人节主题香水价目表PS素材下载"><span>[网站素材]</span><span>情人节主题香水价目表PS素材下载</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4258" title="2026马年蓝金梦幻海报矢量模板"><span>[网站素材]</span><span>2026马年蓝金梦幻海报矢量模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4257" title="2026马年可爱卡通插画矢量"><span>[网站素材]</span><span>2026马年可爱卡通插画矢量</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4256" title="2026新年喜庆灯笼矢量模板"><span>[网站素材]</span><span>2026新年喜庆灯笼矢量模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4255" title="中式古典园林凉亭风景矢量素材"><span>[网站素材]</span><span>中式古典园林凉亭风景矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4254" title="2026马年创意数字矢量素材"><span>[网站素材]</span><span>2026马年创意数字矢量素材</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/sucai/4253" title="航空旅行折扣特价海报设计源文件下载"><span>[网站素材]</span><span>航空旅行折扣特价海报设计源文件下载</span> </a>
									</div>
								</li>
													</ul>
						<ul class="fourf" style="display:none;">
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8590"  title="驾照考试驾校HTML5网站模板"><span>[前端模板]</span><span>驾照考试驾校HTML5网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8589"  title="驾照培训服务机构宣传网站模板"><span>[前端模板]</span><span>驾照培训服务机构宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8588"  title="HTML5房地产公司宣传网站模板"><span>[前端模板]</span><span>HTML5房地产公司宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8587"  title="新鲜有机肉类宣传网站模板"><span>[前端模板]</span><span>新鲜有机肉类宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8586"  title="响应式天气预报宣传网站模板"><span>[前端模板]</span><span>响应式天气预报宣传网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8585"  title="房屋建筑维修公司网站CSS模板"><span>[前端模板]</span><span>房屋建筑维修公司网站CSS模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8584"  title="响应式志愿者服务网站模板"><span>[前端模板]</span><span>响应式志愿者服务网站模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8583"  title="创意T恤打印店网站HTML5模板"><span>[前端模板]</span><span>创意T恤打印店网站HTML5模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8582"  title="网页开发岗位简历作品展示网页模板"><span>[前端模板]</span><span>网页开发岗位简历作品展示网页模板</span> </a>
									</div>
								</li>
															<li>
									<div class="wzrfourli flexRow">
										<b></b>
										<a target="_blank" href="/xiazai/code/8581"  title="响应式人力资源机构宣传网站模板"><span>[前端模板]</span><span>响应式人力资源机构宣传网站模板</span> </a>
									</div>
								</li>
													</ul>
					</div>
					<script>
						$('.hdTabs>div').click(function (e) {
							$('.hdTabs>div').removeClass('check')
							$(this).addClass('check')
							$('.hotdownTab>ul').css('display', 'none')
							$('.' + e.currentTarget.dataset.id).show()
						})
					</script>

				</div>

				<div class="artrig-adv ">
					<script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script>
                </div>



				<div class="xgarts ">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>相关下载</p>
						</div>
						<a target="_blank" class="rititle-more flexRow" href="/xiazai" title="相关下载"><span>更多</span><b></b></a>
					</div>
					<div class="xgwzlist ">
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="php商城系统" href="/xiazai/code/11178">php商城系统</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="淘源码商城PHP淘宝查信誉" href="/xiazai/code/11177">淘源码商城PHP淘宝查信誉</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP房产程序[BBWPS]" href="/xiazai/code/11165">PHP房产程序[BBWPS]</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="PHP简约自动发卡平台个人版" href="/xiazai/code/11128">PHP简约自动发卡平台个人版</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="ERMEB域名PHP离线网络授权系统" href="/xiazai/code/11040">ERMEB域名PHP离线网络授权系统</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="Difeye-敏捷的轻量级PHP框架" href="/xiazai/code/11037">Difeye-敏捷的轻量级PHP框架</a></div>
											<div class="xgwzlid flexRow"><b></b><a target="_blank" title="大泉州汽车网PHP整站程序" href="/xiazai/code/10963">大泉州汽车网PHP整站程序</a></div>
										</div>

				</div>

				<div class="jpkc">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>精品课程</p>
						</div>
						<a class="rititle-more flexRow" target="_blank" href="/course/sort_new.html" title="精品课程"><span>更多</span><b></b></a>
					</div>
					<div class=" jpkcTab">
						<div class=" jpkcTabs flexRow">
							<div class="check" data-id="onefd">相关推荐 <b></b> </div> /
							<div class="" data-id="twofd">热门推荐 <b></b></div> /
							<div class="" data-id="threefd">最新课程 <b></b></div>
						</div>
						<div class="onefd jpktabd">
													<div  class="ristyA flexRow " >
								<a target="_blank" href="/course/1683.html" title="Sass 教程">
									<img src="https://img.php.cn/upload/course/000/000/090/689da3d823e1e854.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Sass 教程" class="ristyAimg"
										onerror="this.src='/static/mobimages/moren/morentu.png'">
								</a>
								<div class="ristyaRight flexColumn">
									<a target="_blank" href="/course/1683.html" title="Sass 教程"
										class="rirightp overflowclass">Sass 教程</a>

									<div class="risrdown flexRow">
										<p>共14课时 | 0.8万人学习</p>
									</div>
								</div>
							</div>
													<div  class="ristyA flexRow " >
								<a target="_blank" href="/course/1673.html" title="Bootstrap 5教程">
									<img src="https://img.php.cn/upload/course/000/000/090/6899a24dcdf73781.png?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="Bootstrap 5教程" class="ristyAimg"
										onerror="this.src='/static/mobimages/moren/morentu.png'">
								</a>
								<div class="ristyaRight flexColumn">
									<a target="_blank" href="/course/1673.html" title="Bootstrap 5教程"
										class="rirightp overflowclass">Bootstrap 5教程</a>

									<div class="risrdown flexRow">
										<p>共46课时 | 3万人学习</p>
									</div>
								</div>
							</div>
													<div  class="ristyA flexRow " >
								<a target="_blank" href="/course/1660.html" title="CSS教程">
									<img src="https://img.php.cn/upload/course/000/000/090/68774990cfb6f919.jpg?x-oss-process=image/resize,m_mfit,h_75,w_120,limit_0" alt="CSS教程" class="ristyAimg"
										onerror="this.src='/static/mobimages/moren/morentu.png'">
								</a>
								<div class="ristyaRight flexColumn">
									<a target="_blank" href="/course/1660.html" title="CSS教程"
										class="rirightp overflowclass">CSS教程</a>

									<div class="risrdown flexRow">
										<p>共754课时 | 23.1万人学习</p>
									</div>
								</div>
							</div>
												</div>

						<div class="twofd jpktabd" style="display:none;">
															<div  class="ristyA flexRow " >
									<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学">
										<img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg"
											onerror="this.src='/static/mobimages/moren/morentu.png'">
									</a>
									<div class="ristyaRight flexColumn">
										<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"
											class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a>

										<div class="risrdown flexRow">
											<p>共6课时 | 10.1万人学习</p>
										</div>
									</div>
								</div>
															<div  class="ristyA flexRow " >
									<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)">
										<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="ristyAimg"
											onerror="this.src='/static/mobimages/moren/morentu.png'">
									</a>
									<div class="ristyaRight flexColumn">
										<a target="_blank" href="/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"
											class="rirightp overflowclass">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a>

										<div class="risrdown flexRow">
											<p>共79课时 | 151.5万人学习</p>
										</div>
									</div>
								</div>
															<div  class="ristyA flexRow " >
									<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程">
										<img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="phpStudy极速入门视频教程" class="ristyAimg"
											onerror="this.src='/static/mobimages/moren/morentu.png'">
									</a>
									<div class="ristyaRight flexColumn">
										<a target="_blank" href="/course/639.html" title="phpStudy极速入门视频教程"
											class="rirightp overflowclass">phpStudy极速入门视频教程</a>

										<div class="risrdown flexRow">
											<p>共6课时 | 53.4万人学习</p>
										</div>
									</div>
								</div>
													</div>

						<div class="threefd jpktabd" style="display:none;">
															<div  class="ristyA flexRow " >
										<a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通">
											<img src="https://img.php.cn/upload/course/000/000/081/68c135bb72783194.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="最新Python教程 从入门到精通" class="ristyAimg"
												onerror="this.src='/static/mobimages/moren/morentu.png'">
										</a>
										<div class="ristyaRight flexColumn">
											<a target="_blank" href="/course/1696.html" title="最新Python教程 从入门到精通"
												class="rirightp overflowclass">最新Python教程 从入门到精通</a>

											<div class="risrdown flexRow">
												<p>共4课时 | 15.3万人学习</p>
											</div>
										</div>
									</div>
																<div  class="ristyA flexRow " >
										<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学">
											<img src="https://img.php.cn/upload/course/000/000/081/6862652adafef801.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="JavaScript ES5基础线上课程教学" class="ristyAimg"
												onerror="this.src='/static/mobimages/moren/morentu.png'">
										</a>
										<div class="ristyaRight flexColumn">
											<a target="_blank" href="/course/1656.html" title="JavaScript ES5基础线上课程教学"
												class="rirightp overflowclass">JavaScript ES5基础线上课程教学</a>

											<div class="risrdown flexRow">
												<p>共6课时 | 10.1万人学习</p>
											</div>
										</div>
									</div>
																<div  class="ristyA flexRow " >
										<a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学">
											<img src="https://img.php.cn/upload/course/000/000/081/684a8c23d811b293.png?x-oss-process=image/resize,m_mfit,h_86,w_140,limit_0" alt="PHP新手语法线上课程教学" class="ristyAimg"
												onerror="this.src='/static/mobimages/moren/morentu.png'">
										</a>
										<div class="ristyaRight flexColumn">
											<a target="_blank" href="/course/1655.html" title="PHP新手语法线上课程教学"
												class="rirightp overflowclass">PHP新手语法线上课程教学</a>

											<div class="risrdown flexRow">
												<p>共13课时 | 0.9万人学习</p>
											</div>
										</div>
									</div>
														</div>
						<script>
							$('.jpkcTabs>div').click(function (e) {
								$('.jpkcTabs>div').removeClass('check')
								$(this).addClass('check')
								$('.jpkcTab .jpktabd').css('display', 'none')
								$('.' + e.currentTarget.dataset.id).show()
							})
						</script>

					</div>
				</div>

				<div class="zxarts ">
					<div class="rightdTitle flexRow">
						<div class="title-left flexRow"> <b></b>
							<p>最新文章</p>
						</div>
						<a class="rititle-more flexRow" href="" title="最新文章" target="_blank"><span>更多</span><b></b></a>
					</div>
					<div class="xgwzlist ">
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css框架图表样式如何统一_通过组件类快速布局和调整颜色" href="/faq/2025601.html">css框架图表样式如何统一_通过组件类快速布局和调整颜色</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css 文本阴影与背景颜色冲突怎么办_text-shadow 与背景分层" href="/faq/2025592.html">css 文本阴影与背景颜色冲突怎么办_text-shadow 与背景分层</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css 想让广告条固定在页面底部怎么办_position fixed bottom 0 width 100%" href="/faq/2025589.html">css 想让广告条固定在页面底部怎么办_position fixed bottom 0 width 100%</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css框架如何快速定制颜色变量_通过变量覆盖和自定义类实现主题" href="/faq/2025588.html">css框架如何快速定制颜色变量_通过变量覆盖和自定义类实现主题</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css 伪类与字体图标_通过 :before 在文本前添加字体图标" href="/faq/2025571.html">css 伪类与字体图标_通过 :before 在文本前添加字体图标</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css grid布局调试困难怎么排查_通过显示网格线思路解释" href="/faq/2025565.html">css grid布局调试困难怎么排查_通过显示网格线思路解释</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css first-child 不生效是什么原因_结构选择器排查方法" href="/faq/2025560.html">css first-child 不生效是什么原因_结构选择器排查方法</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css grid布局下图片比例失调怎么办_通过对象适配属性说明" href="/faq/2025545.html">css grid布局下图片比例失调怎么办_通过对象适配属性说明</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css动画怎么实现缩放效果_css动画缩放实现方式" href="/faq/2025510.html">css动画怎么实现缩放效果_css动画缩放实现方式</a></div>
													<div class="xgwzlid flexRow"><b></b><a target="_blank" title="css 想快速统一页面文字颜色怎么办_使用 css tailwind text-color 工具类" href="/faq/2025450.html">css 想快速统一页面文字颜色怎么办_使用 css tailwind text-color 工具类</a></div>
											</div>

				</div>






			</div>



		</div>

	</div>
	<!--底部-->
	<div class="phpFoot">
    <div class="phpFootIn">
        <div class="phpFootCont">
            <div class="phpFootLeft">
                <dl>
                    <dt>
                        <a target="_blank"  href="/about/us.html" rel="nofollow"  title="关于我们" class="cBlack">关于我们</a>
                        <a target="_blank"  href="/about/disclaimer.html" rel="nofollow"  title="免责申明" class="cBlack">免责申明</a>
                        <a target="_blank"  href="/about/jbzx.html" rel="nofollow"  title="举报中心" class="cBlack">举报中心</a>
                        <a   href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')"   title="意见反馈" class="cBlack">意见反馈</a>
                        <a target="_blank"  href="https://www.php.cn/teacher.html" rel="nofollow"   title="讲师合作" class="cBlack">讲师合作</a>
                        <a  target="_blank" href="https://www.php.cn/blog/detail/20304.html" rel="nofollow"  title="广告合作" class="cBlack">广告合作</a>
                        <a  target="_blank" href="/new/"    title="最新文章列表" class="cBlack">最新更新</a>
                                                <div class="clear"></div>
                    </dt>
                    <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd>
                    <dd class="cont2">
                      <span class="ylwTopBox">
                        <a   href="javascript:;"  class="cBlack"><b class="icon1"></b>关注服务号</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>微信扫码<br/>关注PHP中文网服务号</p>
                          <img src="/static/images/examples/text16.png"/>
                        </em>
                      </span>
                        <span class="ylwTopBox">
                        <a   href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes"  class="cBlack"><b class="icon2"></b>技术交流群</a>
                        <em style="display:none;" class="ylwTopSub">
                          <p>QQ扫码<br/>加入技术交流群</p>
                          <img src="/static/images/examples/text18.png"/>
                        </em>
                      </span>
                        <div class="clear"></div>
                    </dd>
                </dl>
                
            </div>
            <div class="phpFootRight">
                <div class="phpFootMsg">
                    <span><img src="/static/images/examples/text17.png"/></span>
                    <dl>
                        <dt>PHP中文网订阅号</dt>
                        <dd>每天精选资源文章推送</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="phpFootCode">
        <div class="phpFootCodeIn"><p>Copyright 2014-2026 <a   href="https://www.php.cn/" >https://www.php.cn/</a> All Rights Reserved | php.cn | <a   href="https://beian.miit.gov.cn/" rel="nofollow" >湘ICP备2023035733号</a></p><a   href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" ><b></b></a></div>
    </div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>

<span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>

<script src="/static/js/cdn.js?v=1.0.1"></script>



	<!--底部 end-->
	<!-- content -->
	<!--
    <div class="phpFudong">
        <div class="phpFudongIn">
            <div class="phpFudongImg"></div>
            <div class="phpFudongXue">登录PHP中文网，和优秀的人一起学习！</div>
            <div class="phpFudongQuan">全站<span>2000+</span>教程免费学</div>
            <div class="phpFudongCode"><a   href="javascript:;" id="login" title="微信扫码登录">微信扫码登录</a></div>
            <div class="phpGuanbi" onclick="$('.phpFudong').hide();"></div>
            <div class="clear"></div>
        </div>
    </div>
-->	<!--底部浮动层 end-->
	<!--侧导航-->
	<style>
    .layui-fixbar{display: none;}
</style>
<div class="phpSdhBox" style="height:240px !important;">
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="/k24.html"  class="hover" title="PHP学习">
                    <b class="icon1"></b>
                    <p>PHP学习</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="https://www.php.cn/blog/detail/1047189.html" >
                    <b class="icon2"></b>
                    <p>技术支持</p>
                </a>
            </div>
        </div>
    </li>
    <li>
        <div class="phpSdhIn">
            <div class="phpSdhTitle">
                <a   href="#">
                    <b class="icon6"></b>
                    <p>返回顶部</p>
                </a>
            </div>
        </div>
    </li>
</div>
	</body>

</html>

<script type="text/javascript" src="/hitsUp?type=article&id=1479202&time=1769244677">
</script>
<script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1769244677"></script>
<script>
	article_status = "1503042";
</script>
<input type="hidden" id="verifycode" value="/captcha.html">
<script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script>
	

<script>
	function setCookie(name, value, iDay) { //name相当于键，value相当于值，iDay为要设置的过期时间（天）
		var oDate = new Date();
		oDate.setDate(oDate.getDate() + iDay);
		document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate;
	}

	function getCookie(name) {
		var cookieArr = document.cookie.split(";");
		for (var i = 0; i < cookieArr.length; i++) {
			var cookiePair = cookieArr[i].split("=");
			if (name == cookiePair[0].trim()) {
				return decodeURIComponent(cookiePair[1]);
			}
		}
		return null;
	}
</script>


<!-- Matomo -->
<script>
	var _paq = window._paq = window._paq || [];
	/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
	_paq.push(['trackPageView']);
	_paq.push(['enableLinkTracking']);
	(function () {
		var u = "https://tongji.php.cn/";
		_paq.push(['setTrackerUrl', u + 'matomo.php']);
		_paq.push(['setSiteId', '11']);
		var d = document,
			g = d.createElement('script'),
			s = d.getElementsByTagName('script')[0];
		g.async = true;
		g.src = u + 'matomo.js';
		s.parentNode.insertBefore(g, s);
	})();
</script>
<!-- End Matomo Code -->

<script>
	setCookie('is_article', 1, 1);
</script>

<script>
	var is_login = "0";
        var show = 0;
        var ceng = getCookie('ceng');
        //未登录复制显示登录按钮
        if(is_login == 0 && false){
            $(".code").hover(function(){
                $(this).find('.contentsignin').show();
            },function(){
                $(this).find('.contentsignin').hide();
            });
            //不给复制
            $('.code').bind("cut copy paste",function(e) {
                e.preventDefault();
            });
            $('.code .contentsignin').click(function(){
                $(document).trigger("api.loginpopbox");
            })
        }else{
            // 获取所有的 <pre> 元素
            var preElements = document.querySelectorAll('pre');
            preElements.forEach(function(preElement) {
                // 创建复制按钮
                var copyButton = document.createElement('button');
                copyButton.className = 'copy-button';
                copyButton.textContent = '复制';
                // 添加点击事件处理程序
                copyButton.addEventListener('click', function() {
                    // 获取当前按钮所属的 <pre> 元素中的文本内容
                    var textContent = preElement.textContent.trim();
                    // 创建一个临时 textarea 元素并设置其值为 <pre> 中的文本内容
                    var tempTextarea = document.createElement('textarea');
                    tempTextarea.value = textContent;
                    // 将临时 textarea 添加到文档中
                    document.body.appendChild(tempTextarea);
                    // 选中临时 textarea 中的文本内容并执行复制操作
                    tempTextarea.select();
                    document.execCommand('copy');
                    // 移除临时 textarea 元素
                    document.body.removeChild(tempTextarea);
                    // 更新按钮文本为 "已复制"
                    this.textContent = '已复制';
                });

                // 创建AI写代码按钮
                var aiButton = document.createElement('button');
                aiButton.className = 'copy-button';
                aiButton.textContent = 'AI写代码';
                aiButton.style.marginLeft = '5px';
                aiButton.style.marginRight = '5px';
                // 添加点击事件处理程序
                aiButton.addEventListener('click', function() {
                // Generate a random number between 0 and 1
                        var randomChance = Math.random();

                    // If the random number is less than 0.5, open the first URL, else open the second
                    if (randomChance < 0.5) {
                        window.open('https://www.doubao.com/chat/coding?channel=php&source=hw_db_php', '_blank');
                    } else {
                        window.open('https://click.aliyun.com/m/1000402709/', '_blank');
                    }
                });

                // 将按钮添加到 <pre> 元素前面
                preElement.parentNode.insertBefore(copyButton, preElement);
                preElement.parentNode.insertBefore(aiButton, preElement);
        });
        }
</script>