登录
Go教程
Go问答
MySQL
Redis
软件教程
人工智能
业界新闻
php教程
java教程
python教程
linux
前端
常见问题
AI提示词
作文
画画
请选择
三天内
一周内
一月内
三月内
最新
最热
文章
·
前端
| 2星期前 |
CSS定位下拉菜单错位解决方法
下拉菜单位置偏移是因为父容器未设置position:relative；该声明使父元素成为absolute子元素的定位参考点，且不脱离文档流、不影响布局，兼容IE9+。
140
收藏
文章
·
前端
| 2星期前 |
媒体查询响应式设计占用GPU吗？多设备预览硬件压力分析
媒体查询本身不调用GPU，但其激活的样式（如transform、will-change）会间接增加GPU负载，导致卡顿、掉帧和发热；需优化图层合成、断点单位、布局切换及媒体元素缩放策略。
109
收藏
文章
·
前端
| 2星期前 |
HTML中，
标签的 form 属性用于将文本框关联到页面中的某个表单。这个属性的值应该是目标表单的 id，这样即使 <textarea> 不在 <form> 标签内部，也可以被提交到该表单。示例：<form id="myForm" action="/submit" method="post"> <input type="text" name="username" plac</a></div> <a href="/article/612297.html" class="img_box"><img src="/uploads/20260526/17797736136a1530ad1a58a.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">textarea的form属性用于将其关联到页面中任意位置的form元素，实现跨DOM结构提交；需同时设置合法form值（匹配目标form的id）和name属性，且目标form必须已存在并具有id。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>456</span> <span class="collectBtn user_collection" data-type="article" data-id="612297"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612293.html" class="aBlack">Word批量调整图片大小技巧｜查找替换法全攻略</a></div> <a href="/article/612293.html" class="img_box"><img src="/uploads/20260526/17797734176a152fe98cc87.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">Word中无法通过查找替换修改<img>宽高属性，因HTML标签已被解析为图片对象；应使用VBA脚本遍历InlineShapes和Shapes批量等比缩放。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>228</span> <span class="collectBtn user_collection" data-type="article" data-id="612293"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612290.html" class="aBlack">new.target 保障异步迭代器安全实例化方法</a></div> <a href="/article/612290.html" class="img_box"><img src="/uploads/20260526/17797732616a152f4d28e34.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">new.target无法确保“异步迭代器流调度中心基类”的绝对安全实例化，因其仅识别构造调用者，不校验Symbol.asyncIterator实现、不验证返回值契约、也不保障调度线程安全与资源可控。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>316</span> <span class="collectBtn user_collection" data-type="article" data-id="612290"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612284.html" class="aBlack">Fetch代理模式解决跨域问题详解</a></div> <a href="/article/612284.html" class="img_box"><img src="/uploads/20260526/17797729956a152e43d975c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">代理模式通过开发服务器中转请求绕过浏览器同源策略，因浏览器仅检查前端脚本发起的跨域请求，而代理是服务端对服务端通信；Vite中需在server.proxy配置路径匹配、target、changeOrigin等选项，并确保fetch使用相对路径如'/api/users'。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>119</span> <span class="collectBtn user_collection" data-type="article" data-id="612284"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | <a href="javascript:;" class="aLightGray" title="HTML5">HTML5</a> </div> <div class="tit lineTwoOverflow"><a href="/article/612282.html" class="aBlack">HTML5文件自定义字体加载与预览方法</a></div> <a href="/article/612282.html" class="img_box"><img src="/uploads/20260526/17797728946a152ddee238d.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">如果您希望在网页中使用特定字体，但该字体未安装在用户设备上，则需要通过HTML5和CSS技术实现字体文件的加载与预览。以下是实现自定义字体加载与应用的具体方法：一、使用CSS@font-face规则加载字体通过CSS的@font-face规则，可以将自定义字体文件嵌入网页，使浏览器下载并渲染指定字体。1、准备字体文件，常见格式包括.woff、.woff2、.ttf、.eot和.svg，推荐优先使用.woff2格式以获得更好的压缩效果。2、在CSS文件中定义@font</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>256</span> <span class="collectBtn user_collection" data-type="article" data-id="612282"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612275.html" class="aBlack">手机浏览器保存网页为HTML的方法</a></div> <a href="/article/612275.html" class="img_box"><img src="/uploads/20260526/17797726426a152ce28ef41.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">Android版Chrome保存网页需点•••→下载→选“网页，完整”或“网页，仅HTML”，但受PWA缓存和离线模式限制；iOSSafari不支持该功能；保存后需用Edge/Firefox等App打开，避免路径解析失败。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>263</span> <span class="collectBtn user_collection" data-type="article" data-id="612275"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612265.html" class="aBlack">Bootstrap 5 变量优势解析：动态样式修改详解</a></div> <a href="/article/612265.html" class="img_box"><img src="/uploads/20260526/17797721716a152b0b56080.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow"><p>直接修改:root变量比覆盖class更可靠，因Bootstrap5所有样式均通过--bs-*变量中转计算，改:root可全局同步生效，避免选择器权重、重复覆盖及Portal组件失效问题，且需同步更新--bs-primary与--bs-primary-rgb等链式变量。</p></div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>499</span> <span class="collectBtn user_collection" data-type="article" data-id="612265"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612264.html" class="aBlack">Less处理长单词换行与断字方法</a></div> <a href="/article/612264.html" class="img_box"><img src="/uploads/20260526/17797721706a152b0a77365.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">绝大多数场景下应优先使用overflow-wrap:break-word；word-break:break-all仅适用于无语义的纯展示字段（如Base64、token），因其无视词边界，会破坏中文阅读和链接可点击性。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>204</span> <span class="collectBtn user_collection" data-type="article" data-id="612264"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612259.html" class="aBlack">HTML灯光调节面板制作教程【完整版】</a></div> <a href="/article/612259.html" class="img_box"><img src="/uploads/20260526/17797718556a1529cf5172b.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">用两个原生range滑块分别控制亮度（0–100）和色温（2700–6500K），通过CSS变量绑定样式，配合input事件实时更新，并用查表法将色温转HSL，同时设置touch-action:none防移动端干扰。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>277</span> <span class="collectBtn user_collection" data-type="article" data-id="612259"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612252.html" class="aBlack">CSS Grid 实现响应式布局教程</a></div> <a href="/article/612252.html" class="img_box"><img src="/uploads/20260526/17797715596a1528a72ca88.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">响应式grid-template-columns应用minmax(300px,1fr)、repeat(auto-fit,minmax(320px,1fr)))，配合媒体查询兜底；慎用justify-content和grid-area替换需同步更新；subgrid因兼容性差暂不宜生产使用。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>187</span> <span class="collectBtn user_collection" data-type="article" data-id="612252"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612247.html" class="aBlack">HTML多语言编码处理指南</a></div> <a href="/article/612247.html" class="img_box"><img src="/uploads/20260526/17797713236a1527bb5b98b.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">关键不是加UTF-8，而是整条链路未被任何环节转码或忽略声明：metacharset必须位于head最前，表单需accept-charset，AJAX要设Content-Type头，服务端须强制UTF-8解码，HTTP响应头charset优先级高于meta标签。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>170</span> <span class="collectBtn user_collection" data-type="article" data-id="612247"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612245.html" class="aBlack">如何用:has()修改父容器样式</a></div> <a href="/article/612245.html" class="img_box"><img src="/uploads/20260526/17797712736a152789b9255.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">Chrome105+、Firefox121+、Safari15.4+已默认支持:has()，但Safari15.4–16.3对+/~兄弟选择器支持不稳定；:has()内禁用:hover/:focus/伪元素，:empty恒不匹配；静默失效常见于浏览器不识别、attribute未正确设置或ShadowDOM跨边界；性能敏感场景需慎用，避免嵌套:has()和宽泛选择器。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>340</span> <span class="collectBtn user_collection" data-type="article" data-id="612245"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> <li class="li2"> <div class="info lineOverflow"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2星期前 | </div> <div class="tit lineTwoOverflow"><a href="/article/612241.html" class="aBlack">Tailwind 固定定位实现方法详解</a></div> <a href="/article/612241.html" class="img_box"><img src="/uploads/20260526/17797711046a1526e06dfe7.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">本文详解position:fixed在Tailwind中的正确用法，澄清display:fixed是无效写法，并系统讲解层级遮挡、z-index失效、移动端错位等高频问题的成因与解决方案。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>144</span> <span class="collectBtn user_collection" data-type="article" data-id="612241"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> </ul> <div class="mngfPage"><a href="/articlelist/88_new_0_110.html" class="prevPage on"></a> <a href="/articlelist/88_new_0_1.html">1</a><a href="/articlelist/88_new_0_110.html">110</a><a class="currentPage">111</a><a href="/articlelist/88_new_0_112.html">112</a><a href="/articlelist/88_new_0_500.html">500</a> <a href="/articlelist/88_new_0_112.html" class="nextPage on"></a></div> </div> </div> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> <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> let flaga = 1; var category_id = 88; let strbiaoqian = ''; let zhankaihtml = ''; // let zhankaihtml = '<div class="zhankaiflag biaoqianone " style="display: inline-block;" onclick="zhankaiflagclick(this);">展开<i></i></div>'; let shouqihtml = ''; // let shouqihtml = '<div class="zhankaiflag biaoqianone zhankai" style="display: inline-block;" onclick="zhankaiflagclick(this);">收起<i></i></div>'; let allhtml = ''; let fumo = ''; $(".userInfo1 .biaoqianone").each(function(){ var href = $(this).attr('href'); var cat_id = $(this).data('id'); let cuc = '<a href="'+href+'" class="biaoqianone" style="display: inline-block;">'; if(category_id!==0&&category_id==cat_id){ cuc ='<a href="javascript:;" class="biaoqianone hover" style="display: inline-block;">'; } fumo = cuc; allhtml+=fumo+$(this).html()+'</a>'; strbiaoqian+=fumo+$(this).html()+'</a>'; // if(flaga<=8){ // } flaga++; }); strbiaoqian+=zhankaihtml; allhtml+=shouqihtml; $(".userInfo1").html(strbiaoqian); // function zhankaiflagclick(obj){ // if($(obj).html()=='展开<i></i>'){ // $(obj).html('收起<i></i>'); // $(obj).addClass('zhankai'); // $(".userInfo1").html(allhtml); // }else{ // $(obj).html("展开<i></i>"); // $(obj).removeClass('zhankai'); // $(".userInfo1").html(strbiaoqian); // } // } $('.timeLimitBox').click(function(){ $(this).toggleClass('hover') }) </script> </body> </html>
