其他

阅读1000695

更新时间2025-08-27

媒体查询

渐变(Gradients)

在本教程中，我们将学习更多有趣的CSS3功能。

使用CSS3扩展用户界面

在本章中，我们将讨论的一些有趣的用户界面相关的CSS3属性一样resize，outline-offset等等，你可以用它来提高你的网页。

调整元素大小

您可以使用CSS3 resize属性将元素水平，垂直或双向调整大小。但是，此属性通常用于从窗体控件中删除默认的可调整大小的行为。</p><label class="example_title">示例</label><pre>p, div, textarea { width: 300px; min-height: 100px; overflow: auto; border: 1px solid black; } p { resize: horizontal; } div { resize: both; } textarea { resize: none; }</pre><h2>设置轮廓偏移</h2><p>在上一节中，您学习了如何为轮廓设置不同的属性，例如宽度，颜色和样式。但是，CSS3提供了另一种属性，outline-offset用于设置轮廓和元素边框之间的空间。该属性可以接受负值，这意味着您也可以在元素内放置轮廓。</p><label class="example_title">示例</label><pre>p, div { margin: 50px; height: 100px; background: #000; outline: 2px solid red; } p { outline-offset: 10px; } div { outline-offset: -15px; }</pre> </div> <div class="desadown flexRow"> <a href="/css3/css3-css3-media-queries.html" title="媒体查询" class="dsdleft flexRow dsda"> <img src="/static/lhimages/icon226.png" class="nocheck"> <img src="/static/lhimages/icon226_check.png" class="check"> <p>媒体查询</p> </a> <a href="/css3/css3-css3-gradients1.html" title="渐变(Gradients)" class="dsdright flexRow dsda"><p>渐变(Gradients)</p> <img src="/static/lhimages/icon227.png" class="nocheck"> <img src="/static/lhimages/icon227_check.png" class="check"> </a> </div> </div> <div class="left-video"> <div class="ltzt-title lttitle flexRow"> <div class="title-left flexRow"> <p><span>相关</span><b></b></p> <p>视频</p> <p class="eng">RELATED VIDEOS</p> </div> <a class="title-more flexRow" href="/course/sort_new.html" title="视频教程"><b></b>更多 </a> </div> <div class="video-list flexRow codevideo"> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/901.html" title="Web前端开发极速入门"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="Web前端开发极速入门" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/901.html" title="Web前端开发极速入门" class="aBlack aClass">Web前端开发极速入门</a> </dt> <dd class="flexRow studyandcoll"> <p>219920次学习</p><em><a class="courseICollection " data-id="901" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/880.html" title="前端入门_HTML5"> <img src="https://img.php.cn/upload/course/000/000/068/6255589398c2c999.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="前端入门_HTML5" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/880.html" title="前端入门_HTML5" class="aBlack aClass">前端入门_HTML5</a> </dt> <dd class="flexRow studyandcoll"> <p>616946次学习</p><em><a class="courseICollection " data-id="880" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/874.html" title="30分钟学会网站布局"> <img src="https://img.php.cn/upload/course/000/000/041/61b8365849424887.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="30分钟学会网站布局" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/874.html" title="30分钟学会网站布局" class="aBlack aClass">30分钟学会网站布局</a> </dt> <dd class="flexRow studyandcoll"> <p>238440次学习</p><em><a class="courseICollection " data-id="874" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/893.html" title="CSS视频教程-玉女心经版"> <img src="https://img.php.cn/upload/course/000/000/068/625558b87e512730.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="CSS视频教程-玉女心经版" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/893.html" title="CSS视频教程-玉女心经版" class="aBlack aClass">CSS视频教程-玉女心经版</a> </dt> <dd class="flexRow studyandcoll"> <p>393054次学习</p><em><a class="courseICollection " data-id="893" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/894.html" title="JavaScript极速入门_玉女心经系列"> <img src="https://img.php.cn/upload/course/000/000/068/625558e4f11c8518.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="JavaScript极速入门_玉女心经系列" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/894.html" title="JavaScript极速入门_玉女心经系列" class="aBlack aClass">JavaScript极速入门_玉女心经系列</a> </dt> <dd class="flexRow studyandcoll"> <p>709168次学习</p><em><a class="courseICollection " data-id="894" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/372.html" title="独孤九贱(1)_HTML5视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="独孤九贱(1)_HTML5视频教程" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/372.html" title="独孤九贱(1)_HTML5视频教程" class="aBlack aClass">独孤九贱(1)_HTML5视频教程</a> </dt> <dd class="flexRow studyandcoll"> <p>615934次学习</p><em><a class="courseICollection " data-id="372" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/582.html" title="独孤九贱(6)_jQuery视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="独孤九贱(6)_jQuery视频教程" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg2'>中级</i> <a href="/course/582.html" title="独孤九贱(6)_jQuery视频教程" class="aBlack aClass">独孤九贱(6)_jQuery视频教程</a> </dt> <dd class="flexRow studyandcoll"> <p>341081次学习</p><em><a class="courseICollection " data-id="582" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/585.html" title="独孤九贱(7)_Bootstrap视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6e1577037989.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="独孤九贱(7)_Bootstrap视频教程" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg2'>中级</i> <a href="/course/585.html" title="独孤九贱(7)_Bootstrap视频教程" class="aBlack aClass">独孤九贱(7)_Bootstrap视频教程</a> </dt> <dd class="flexRow studyandcoll"> <p>270827次学习</p><em><a class="courseICollection " data-id="585" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> <div class="codevideo-tab flexColumn"> <div class="vtaba-free"> <p>免费</p> </div> <a class="codevtaba flexRow" href="/course/373.html" title="独孤九贱(2)_CSS视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6de7424b9255.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="独孤九贱(2)_CSS视频教程" class="codevtabimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="codevtdown flexColumn"> <div> <dt><i class='bg1'>初级</i> <a href="/course/373.html" title="独孤九贱(2)_CSS视频教程" class="aBlack aClass">独孤九贱(2)_CSS视频教程</a> </dt> <dd class="flexRow studyandcoll"> <p>229605次学习</p><em><a class="courseICollection " data-id="373" href="javascript:void(0);"><b></b>收藏</a></em> </dd> </div> </div> </div> </div> </div> </div> </div> <div class="conRight"> <div class="technology-news rightDiv"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p>科技资讯</p> </div> <a class="rititle-more flexRow" href="/it" title="科技资讯">更多</a> </div> <ul class="tecnewul"> <li class="tecnelli flexRow"> <a href="/faq/1685330.html" title="M5 Apple Vision Pro 对决 Samsung Galaxy XR：运算效能与AI智慧的世代交锋" class="tecna"> <img src="https://img.php.cn/upload/article/001/242/473/176222754468374.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="M5 Apple Vision Pro 对决 Samsung Galaxy XR：运算效能与AI智慧的世代交锋" class="tecnAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="tecnRight flexColumn"> <a href="/faq/1685330.html" title="M5 Apple Vision Pro 对决 Samsung Galaxy XR：运算效能与AI智慧的世代交锋" class="tecnda overflowclass">M5 Apple Vision Pro 对决 Samsung Galaxy XR：运算效能与AI智慧的世代交锋</a> <a class="tecnp overflowclass" href="/faq/1685330.html" title="M5 Apple Vision Pro 对决 Samsung Galaxy XR：运算效能与AI智慧的世代交锋">随着扩展实境（ExtendedReality,XR）市场的竞争白热化，科技巨头Apple和Samsung正以截然不同的策略展开正面对决。在Apple推出升级版M5AppleVisionPro后，Samsung也迅速以搭载GoogleGemini的GalaxyXR头戴装置应战。两款产品虽外型相似，但其核心理念和技术取向却大相逕庭，两者间高达$1,700美元的价差，究竟代表了哪些关键性的技术与体验鸿沟？核心规格对比：性能与价格的巨大落差首先</a> </div> </li> <li class="tecnelli flexRow"> <a href="/faq/1685193.html" title="消息称高通、联发科加速布局台积电 N2P 工艺，欲弯道超车苹果" class="tecna"> <img src="https://img.php.cn/upload/article/001/246/273/176222593560260.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="消息称高通、联发科加速布局台积电 N2P 工艺，欲弯道超车苹果" class="tecnAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="tecnRight flexColumn"> <a href="/faq/1685193.html" title="消息称高通、联发科加速布局台积电 N2P 工艺，欲弯道超车苹果" class="tecnda overflowclass">消息称高通、联发科加速布局台积电 N2P 工艺，欲弯道超车苹果</a> <a class="tecnp overflowclass" href="/faq/1685193.html" title="消息称高通、联发科加速布局台积电 N2P 工艺，欲弯道超车苹果">11月3日消息，据《工商时报》报道，继苹果率先锁定台积电N2工艺产能后，高通与联发科迅速跟进，采用强化版的N2P制程技术，有望推动台积电A16制程提前进入量产阶段。来自供应链的最新动态显示，台积电A16制程最快将于明年3月启动试产，标志着公司迈入“摩尔定律2.0”新纪元。苹果计划在其A20系列芯片中导入WMCM（晶圆级多芯片模组）先进封装技术，并预计于明年第二季度展开小规模生产；与此同时，高通与联发科则凭借N2P工艺加速布局，意图在高端芯片市场实现对苹果的“弯道超车”</a> </div> </li> <li class="tecnelli flexRow"> <a href="/faq/1685134.html" title="年花600亿却还没看到「AI杀手级应用」 Meta下一步怎么走？" class="tecna"> <img src="https://img.php.cn/upload/article/001/242/473/176222532429170.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="年花600亿却还没看到「AI杀手级应用」 Meta下一步怎么走？" class="tecnAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="tecnRight flexColumn"> <a href="/faq/1685134.html" title="年花600亿却还没看到「AI杀手级应用」 Meta下一步怎么走？" class="tecnda overflowclass">年花600亿却还没看到「AI杀手级应用」 Meta下一步怎么走？</a> <a class="tecnp overflowclass" href="/faq/1685134.html" title="年花600亿却还没看到「AI杀手级应用」 Meta下一步怎么走？">美国科技巨头Meta近年来大力投入人工智慧（AI）领域，2025年的AI投资预算高达600至650亿美元，远超市场预期。这笔资金主要用于在美国新建资料中心、采购AI硬体设备、训练先进的AI模型，并延揽资料公司ScaleAI的创办人领军Meta「超级智慧」团队，全力抢攻AI技术制高点。尽管投入庞大，Meta的AI业务尚未带来显著收益。其AI助手虽已累积接近十亿用户，但主要依赖Facebook、Instagram等核心平台导流，目前仍缺乏独立变现能力，也未推出如ChatGPT般具突破性的创新产品。V</a> </div> </li> </ul> </div> <div class="readCharts"> <div class="readDown flexColumn"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b><b></b></div> <a class="rititle-more flexRow" href="/article.html" target="_blank" title="更多">更多</a> </div> <ul class="rcUl"> <li class="rcLi flexRow"> <div class="rclileft"> <p>1</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1685361.html" class=" aClass readA overflowclass" title="Go语言中“声明但未使用”变量错误解析与应对策略">Go语言中“声明但未使用”变量错误解析与应对策略</a> <a href="/faq/1685361.html" class=" aClass overflowclass" title="Go语言中“声明但未使用”变量错误解析与应对策略">Go语言编译器严格执行“声明即使用”原则，任何已声明但未在代码中使用的变量都将导致编译错误。本文将深入探讨这一机制，解释其背后的设计哲学、常见的触发场景，并提供多种有效的解决方案和最佳实践，帮助开发者编写更简洁、高效且无冗余的Go代码。</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>2</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1685360.html" class=" aClass readA overflowclass" title="如何在CSS中使用:empty选择器_空元素样式应用方法">如何在CSS中使用:empty选择器_空元素样式应用方法</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>3</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1685359.html" class=" aClass readA overflowclass" title="优化大规模细胞突变模拟：使用Numba提升Python性能">优化大规模细胞突变模拟：使用Numba提升Python性能</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>4</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1685357.html" class=" aClass readA overflowclass" title="PHP调用视频流接口加载失败怎么办_PHP视频流接口加载失败问题排查与流媒体协议教程">PHP调用视频流接口加载失败怎么办_PHP视频流接口加载失败问题排查与流媒体协议教程</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>5</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1685356.html" class=" aClass readA overflowclass" title="Go语言中实现函数柯里化与部分应用">Go语言中实现函数柯里化与部分应用</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>6</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1685354.html" class=" aClass readA overflowclass" title="html代码怎么优化_html代码性能优化方法与加载速度提升技巧">html代码怎么优化_html代码性能优化方法与加载速度提升技巧</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>7</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1685353.html" class=" aClass readA overflowclass" title="HTML相对路径：正确引用图片资源">HTML相对路径：正确引用图片资源</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>8</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1685352.html" class=" aClass readA overflowclass" title="c++中const T* 和 T* const的区别是什么_解析C++中不同常量指针写法的区别与用法">c++中const T* 和 T* const的区别是什么_解析C++中不同常量指针写法的区别与用法</a> </div> </li> <li class="rcLi flexRow"> <div class="rclileft"> <p>9</p> </div> <div class="flexColumn rcreadDiv"> <a href="/faq/1685351.html" class=" aClass readA overflowclass" title="HTML表单提交后JavaScript结果的局部显示指南">HTML表单提交后JavaScript结果的局部显示指南</a> </div> </li> </ul> </div> </div> <div class="adversitement"> <script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script> </div> <div class=" rightStudy rightDiv"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p> 精选课程</p> </div> <a class="rititle-more flexRow" href="/course/sort_new.html" title="精选课程">更多</a> </div> <div class="ristyList flexColumn"> <div class="ristyA flexRow "> <a href="/course/797.html" title="PHP实战天龙八部之微信支付视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="PHP实战天龙八部之微信支付视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/797.html" title="PHP实战天龙八部之微信支付视频教程" class="rirightp overflowclass">PHP实战天龙八部之微信支付视频教程</a> <div class="risrdown flexRow"> <p>共5课时</p><b></b> <p>17.2万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站"> <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="PHP实战天龙八部之仿爱奇艺电影网站" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="rirightp overflowclass">PHP实战天龙八部之仿爱奇艺电影网站</a> <div class="risrdown flexRow"> <p>共49课时</p><b></b> <p>77万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/880.html" title="前端入门_HTML5"> <img src="https://img.php.cn/upload/course/000/000/068/6255589398c2c999.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="前端入门_HTML5" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/880.html" title="前端入门_HTML5" class="rirightp overflowclass">前端入门_HTML5</a> <div class="risrdown flexRow"> <p>共29课时</p><b></b> <p>61.7万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/893.html" title="CSS视频教程-玉女心经版"> <img src="https://img.php.cn/upload/course/000/000/068/625558b87e512730.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="CSS视频教程-玉女心经版" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/893.html" title="CSS视频教程-玉女心经版" class="rirightp overflowclass">CSS视频教程-玉女心经版</a> <div class="risrdown flexRow"> <p>共25课时</p><b></b> <p>39.3万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/894.html" title="JavaScript极速入门_玉女心经系列"> <img src="https://img.php.cn/upload/course/000/000/068/625558e4f11c8518.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="JavaScript极速入门_玉女心经系列" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/894.html" title="JavaScript极速入门_玉女心经系列" class="rirightp overflowclass">JavaScript极速入门_玉女心经系列</a> <div class="risrdown flexRow"> <p>共43课时</p><b></b> <p>70.9万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/372.html" title="独孤九贱(1)_HTML5视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(1)_HTML5视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/372.html" title="独孤九贱(1)_HTML5视频教程" class="rirightp overflowclass">独孤九贱(1)_HTML5视频教程</a> <div class="risrdown flexRow"> <p>共25课时</p><b></b> <p>61.6万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/373.html" title="独孤九贱(2)_CSS视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6de7424b9255.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(2)_CSS视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/373.html" title="独孤九贱(2)_CSS视频教程" class="rirightp overflowclass">独孤九贱(2)_CSS视频教程</a> <div class="risrdown flexRow"> <p>共22课时</p><b></b> <p>23万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/386.html" title="独孤九贱(3)_JavaScript视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6df423564706.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(3)_JavaScript视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/386.html" title="独孤九贱(3)_JavaScript视频教程" class="rirightp overflowclass">独孤九贱(3)_JavaScript视频教程</a> <div class="risrdown flexRow"> <p>共28课时</p><b></b> <p>33.9万人学习</p> </div> </div> </div> <div class="ristyA flexRow "> <a href="/course/379.html" title="独孤九贱(4)_PHP视频教程"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(4)_PHP视频教程" class="ristyAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ristyaRight flexColumn"> <a href="/course/379.html" title="独孤九贱(4)_PHP视频教程" class="rirightp overflowclass">独孤九贱(4)_PHP视频教程</a> <div class="risrdown flexRow"> <p>共89课时</p><b></b> <p>125万人学习</p> </div> </div> </div> </div> </div> <div class=" rightDowns rightDiv"> <div class="rightdTitle flexRow"> <div class="title-left flexRow"> <b></b> <p> 热门下载</p> </div> <a class="rititle-more flexRow" href="/xiazai/" title="热门下载">更多</a> </div> <div class="rids"> <div href="/xiazai/gongju/845" title="phpStudy 2018最新版" class="ridsA flexRow " > <a href="/xiazai/gongju/845" title="phpStudy 2018最新版"> <img src="https://img.php.cn/upload/manual/000/000/001/5a5f0fb612676526.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="phpStudy 2018最新版" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/845" title="phpStudy 2018最新版" class="ridsrp overflowclass">phpStudy 2018最新版</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/845" title="phpStudy 2018最新版"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1351" title="vc9-vc14（32+64位）运行库合集（链接在下方）" class="ridsA flexRow " > <a href="/xiazai/gongju/1351" title="vc9-vc14（32+64位）运行库合集（链接在下方）"> <img src="https://img.php.cn/upload/manual/000/000/001/5a6a896b53dea437.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="vc9-vc14（32+64位）运行库合集（链接在下方）" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1351" title="vc9-vc14（32+64位）运行库合集（链接在下方）" class="ridsrp overflowclass">vc9-vc14（32+64位）运行库合集（链接在下方）</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1351" title="vc9-vc14（32+64位）运行库合集（链接在下方）"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1479" title="VC9 32位" class="ridsA flexRow " > <a href="/xiazai/gongju/1479" title="VC9 32位"> <img src="https://img.php.cn/upload/manual/000/000/001/5af2c4207a616756.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="VC9 32位" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1479" title="VC9 32位" class="ridsrp overflowclass">VC9 32位</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1479" title="VC9 32位"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1481" title="VC11 32位" class="ridsA flexRow " > <a href="/xiazai/gongju/1481" title="VC11 32位"> <img src="https://img.php.cn/upload/manual/000/000/001/5af2c4684dbe4408.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="VC11 32位" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1481" title="VC11 32位" class="ridsrp overflowclass">VC11 32位</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1481" title="VC11 32位"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/714" title="php程序员工具箱完整版" class="ridsA flexRow " > <a href="/xiazai/gongju/714" title="php程序员工具箱完整版"> <img src="https://img.php.cn/upload/manual/000/000/001/5a718c0e5be0a511.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="php程序员工具箱完整版" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/714" title="php程序员工具箱完整版" class="ridsrp overflowclass">php程序员工具箱完整版</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/714" title="php程序员工具箱完整版"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1484" title="VC14 32位" class="ridsA flexRow " > <a href="/xiazai/gongju/1484" title="VC14 32位"> <img src="https://img.php.cn/upload/manual/000/000/001/5af2c54fc1f91550.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="VC14 32位" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1484" title="VC14 32位" class="ridsrp overflowclass">VC14 32位</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1484" title="VC14 32位"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/93" title="SublimeText3汉化版" class="ridsA flexRow " > <a href="/xiazai/gongju/93" title="SublimeText3汉化版"> <img src="https://img.php.cn/upload/manual/000/000/001/58a1753774be3478.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="SublimeText3汉化版" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/93" title="SublimeText3汉化版" class="ridsrp overflowclass">SublimeText3汉化版</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/93" title="SublimeText3汉化版"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/92" title="Notepad++7.3.1" class="ridsA flexRow " > <a href="/xiazai/gongju/92" title="Notepad++7.3.1"> <img src="https://img.php.cn/upload/manual/000/000/001/58a1713812af3871.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="Notepad++7.3.1" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/92" title="Notepad++7.3.1" class="ridsrp overflowclass">Notepad++7.3.1</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/92" title="Notepad++7.3.1"> <p>下载</p> </a> </div> </div> <div href="/xiazai/gongju/1500" title="phpStudy V8.1（Win64位）（已支持php8）" class="ridsA flexRow " > <a href="/xiazai/gongju/1500" title="phpStudy V8.1（Win64位）（已支持php8）"> <img src="https://img.php.cn/upload/manual/000/000/001/5eb23582ba149960.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="phpStudy V8.1（Win64位）（已支持php8）" class="ridsAimg" onerror="this.src='/static/lhimages/moren/morentu.png'"> </a> <div class="ridsaRight flexColumn"> <a href="/xiazai/gongju/1500" title="phpStudy V8.1（Win64位）（已支持php8）" class="ridsrp overflowclass">phpStudy V8.1（Win64位）（已支持php8）</a> <a class="ridsrdown flexRow" href="/xiazai/gongju/1500" title="phpStudy V8.1（Win64位）（已支持php8）"> <p>下载</p> </a> </div> </div> </div> </div> </div> </div> </div>  <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a> <a href="/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a> <a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a> <a href="https://www.php.cn/teacher.html" rel="nofollow" target="_blank" title="讲师合作" class="cBlack">讲师合作</a> <a href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a>  <a href="/new/" target="_blank" title="最新文章列表" class="cBlack">最新更新</a> <a href="https://global.php.cn/" target="_blank" title="English" class="cBlack">English</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" target="_blank" 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 class="phpFootMsg"> <span><img src="/static/images/examples/text14.png"/></span> <dl> <dt>PHP中文网APP</dt> <dd>随时随地碎片化学习</dd> </dl> </div> </div> </div> </div> <div class="phpFootCode"> <div class="phpFootCodeIn"><p>Copyright 2014-2025 <a href="https://www.php.cn/" target="_blank">https://www.php.cn/</a> All Rights Reserved | php.cn | <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023035733号</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><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 type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> <script src="/static/js/CodeRunOnline.js?3.1"></script> <script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?aaf8dba0861f46190106021371583c62";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> </body> <script> function copyCurrentUrl() { const url = window.location.href; const input = document.createElement('input'); input.value = url; document.body.appendChild(input); input.select(); document.execCommand('copy'); document.body.removeChild(input); alert('✅ 已复制当前链接：' + url); } </script> </html>