css 關於 overflow屬性的一些小技巧， overflow屬性介紹-css教學-PHP中文網

本章我們帶給大家overflow屬性的一些小技巧，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一：overflow基本屬性

overflow基本屬性有：visibel ， hidden， scroll，auto， inherit， overflow-x與overflow-y

overflow-x和overflow-y設定一樣的值，等同於overflow。如果不同，其中一個賦予visibel，auto，另一個賦值visibel，auto ，hidden。則會被重置為auto。

作用的前提

1。非display：inline水準！

2.對應方位的尺寸限制，width/height/max-width/max-height/absolute拉伸

## # 1

# # IE7瀏覽器下，文字越多，按鈕兩側padding留白越大。為所有按鈕新增css樣式overflow：visible

二：overflow與捲軸

滾動條出現的條件

## 1.overflow：auto/overflow:scroll 有些元素自帶捲軸

<p><strong></strong>body/html與滾動條</p>
<p></p>#無論什麼瀏覽器，預設滾動條均來自html!而不是body標籤<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">ie8+ html{overflow:auto}</pre><div class="contentsignin">登入後複製</div></div><strong>所以，如果我們想要移除頁面預設滾動條，只需要：</strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">html{overflow:hidden}</pre><div class="contentsignin">登入後複製</div></div></p>body/html與滾動條-js與滾動高度<p></p> 相容寫法<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"> var st = document.body.scrollTop || document.documentElement.scrollTop
 overflow的padding-bottom缺失现象
.box{width:400px;height:100px;padding:100px 0; overfow:auto;}</pre><div class="contentsignin">登入後複製</div></div></p>在chrome瀏覽器下bottom是可以捲動出來的。 <p></p><p>滾動條的寬度</p><p></p>盒子寬度（有捲軸）-盒子內寬度= 捲軸寬度<p><strong> IE firefox chrome皆是17像素。 </strong></p><p>水平居中跳動問題</p><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">修复方法 
1.html{overflow-y:scroll;}
2. .container{padding-left:calc(100vw-100%);}</pre><div class="contentsignin">登入後複製</div></div></p> 100vw - 瀏覽器寬度；100%-可用內容寬度<p><strong></strong> 自訂捲軸-webkit </p><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"> 整体部分 ::-webkit-scrollbar 
	两端按钮 ::-webkit-scrollbar-button 
	外层轨道 ::-webkit-scrollbar-track 
	内层轨道 ::-webkit-scrollbar-track-piece 
	滚动滑块 ::-webkit-scrollbar-thumb 
	边角 ::-webkit-scrollbar-corner 
	实际常用 
	::-webkit-scrollbar{//宽度 width:8px; height:8px; } 
	::-webkit-scrollbar-thumb{//拖动条 background-color:rgba(0,0,0,.3); border-radius : 6px; } 
	::-webkit-scrollbar-track{//背景槽 background-color:#ddd; border-radius:6px; }</pre><div class="contentsignin">登入後複製</div></div></p> 自訂捲軸-IE<p><strong>可以使用自訂捲動外掛程式</strong></p>IOS原生捲動回呼效果<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">-webkit-overflow-scrolling:touch;</pre><div class="contentsignin">登入後複製</div></div></p><p>三：overflow與BFC</p><p></p>清除浮動，自適應佈局等。 <p><strong> BFC block formatting context 區塊層級格式化上下文</strong></p>頁面之結界，內部元素在怎麼折騰都影響不到外面。 <p></p><p>overflow與BFC</p><p></p>1.清除浮動影響<p><strong>2.避免margin穿透問題</strong></p>3.兩欄自適應佈局<p></p>內部浮動無影響<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">.clearfix{*zoom:1;}
.clearfix:after{centent:&#39;&#39;;display:table;clear:both;}</pre><div class="contentsignin">登入後複製</div></div></p>避免margin穿透問題<p></p>#設定overflow:scroll，，overflow:auto， overflow:hidden<p></p><p>為什麼有這樣特性？ </p><p></p> 流體特性下自適應佈局<p><strong> 1.左浮動，右普通</strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.left{float:left;width:128px;}
.right{min-height:190px;background-color:#beceeb}</pre><div class="contentsignin">登入後複製</div></div></p> 2.左浮動，右margin<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.left{float:left;width:128px;}
.right{min-height:190px;margin-left:150px;background-color:#beceeb}</pre><div class="contentsignin">登入後複製</div></div></p>3 .左浮動，右padding<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.left{float:left;width:128px;}
.right{min-height:190px;padding-left:150px;background-color:#beceeb}</pre><div class="contentsignin">登入後複製</div></div></p>4.左浮動<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.left{float:left;width:128px;}
.right{min-height:190px;overflow:hidden;background-color:#beceeb}</pre><div class="contentsignin">登入後複製</div></div></p> 給div設定了overflow屬性就是將元素BFC化，使用padding做流體自適應佈局時候，萬萬不可讓自適應層BFC化。 <p></p>是不是所有BFC屬性都有如此表現<p></p> yes.由於自身特性，具體表現不一<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"> overflow:hidden;      自适应，单溢出不可见 限制应用场景
 float + float 包裹性+破坏性 无法自适应，块状浮动布局
position:absolute 脱离文档流，自娱自乐
display:inline-block 包裹性，无法自适应
display:table-cell 包裹性，但天生无溢出特性，绝对宽度也能自适应。
只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化</pre><div class="contentsignin">登入後複製</div></div></p>兩欄自適應佈局<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"> .cell{
  display:table-cell; width:2000px; //2000保证比父元素大
  *display:inline-block;*width:auto; //IE7-伪BFC特性
 }</pre><div class="contentsignin">登入後複製</div></div></p><p>#四：overflow與絕對定位</p><p></p>隱藏失敗與滾動固定<p><strong></strong> overflow:hidden失敗</p><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.overflow-hidden{
    width:300px;
    height:200px;
    border:5px solid #333;
    overflow:auto
}
img{postion:absolute;}</pre><div class="contentsignin">登入後複製</div></div></p> 失效原因<p>

絕對定位元素不總是被父級overflow屬性剪裁，尤其當overflow在絕對定位元素及其包含塊之間的時候<strong>

包含區塊指 「含position:relative/absolute/fixed」宣告的父級元素，沒有則body元素</strong></p>如何避免失效<p>

1.overflow元素本身成為包含區塊<br/>

2.overflow元素的子元素成為包含區塊<br/>   3.任何合法transform宣告當作包含區塊</p><p>overflow失效妙用<br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">h0{height:0;}
.ovh{overflow:hidden;}
.tr{text-align:right;}
.abs{position:absolute;}
<div class="h0 ovh tr">
    <img src="" class="abs ml10 mt30"></img>
</div></pre><div class="contentsignin">登入後複製</div></div><br/><br/>五：依賴overflow的樣式表現</p><p></p><p>  resize拉伸<strong></strong></p> css3有個屬性名為resize，可以拉伸元素尺寸。 <p><strong> .resize:both     水平垂直兩邊拉；</strong></p> .resize:horizontal 只有水平方向拉<p></p> resize:vertical   只有垂直方向伸展<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p><strong></strong></p><p><strong></strong></p><p><br/><br/></p>################################################################################################################################但是，此聲明想要其作用，元素的overflow屬性值不能是visible！ ###<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><button style="resize:both;overflow:hidden">按钮</button></pre><div class="contentsignin">登入後複製</div></div>### 這樣一個按鈕就可以達到伸展效果了。 ######文字域自備resize屬性，因為文字域預設overflow：auto######  文字域resize拖曳漁區大小是17*17像素。也就是捲軸的尺寸###### ellipsis文字溢位點點省略###<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">text-overflow:ellipsis
<button style="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden">
  这是一个按钮，宽度仅200像素
</button></pre><div class="contentsignin">登入後複製</div></div>######六：overflow與錨點技術########### 錨點定位的本質：該變容器的滾動高度#########錨點對位的觸發###

1.url位址中的錨鏈與錨點元素；###

2.可focus的錨點元素處於focus態；###</p>
<p>錨點定位的作用<br>

1.快速定位<br>

2.錨點定位與overflow標籤技術</p>
<p> 應用場景：單頁應用     </p>
<p><br></p><p>以上是css 關於 overflow屬性的一些小技巧， overflow屬性介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p>                </div>
            </div>
            <div style="height: 25px;">
                                <div class="wzconBq" style="display: inline-flex;">
                    <span>相關標籤：</span>
                    <div class="wzcbqd">
                        <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/zh-tw/search?word=overflow属性，滚动条，绝对定位" target="_blank">overflow属性，滚动条，绝对定位</a>                    </div>
                </div>
                                <div style="display: inline-flex;float: right; color:#333333;">來源：php.cn</div>
                            </div>
            <div class="wzconOtherwz">
                                    <a href="http://www.php.cn/zh-tw/faq/409643.html" title="css的overflow屬性如何定義捲軸">
                        <span>上一篇：css的overflow屬性如何定義捲軸</span>
                    </a>
                                    <a href="http://www.php.cn/zh-tw/faq/409647.html"  title="用純CSS實作滑鼠經過後出現下拉式選單，實例講解（附程式碼）">
                        <span>下一篇：用純CSS實作滑鼠經過後出現下拉式選單，實例講解（附程式碼）</span>
                    </a>
                            </div>
            <div class="wzconShengming">
       
                <div class="bzsmdiv">本網站聲明</div>
                <div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn</div>
            </div>
           <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">作者最新文章</div>
                <ul>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/529366.html">深入搞懂Redis中的哨兵</a>
                            </div>
                            <div>2023-04-26 17:59:18</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/529362.html">【整理分享】7個熱門的React狀態管理工具</a>
                            </div>
                            <div>2023-04-26 17:47:48</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/529360.html">一文討論Vue2中key和Vue3中key的差別</a>
                            </div>
                            <div>2023-04-26 17:41:42</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/529358.html">一文聊聊Node中的記憶體控制</a>
                            </div>
                            <div>2023-04-26 17:37:05</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/529356.html">實用Excel技巧分享：4種刪除重複值的小妙招！</a>
                            </div>
                            <div>2023-04-26 17:31:25</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/529350.html">實用Word技巧分享：簡繁轉換功能竟然可以這樣用！</a>
                            </div>
                            <div>2023-04-26 17:27:32</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/528167.html">如何解決跨域？常見解決方案淺析</a>
                            </div>
                            <div>2023-04-25 19:57:58</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/528165.html">一文理解JavaScript中的單例模式</a>
                            </div>
                            <div>2023-04-25 19:53:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/528163.html">深入了解Node中的Buffer</a>
                            </div>
                            <div>2023-04-25 19:49:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="http://www.php.cn/zh-tw/faq/528161.html">探討如何在Vue3中撰寫單元測試</a>
                            </div>
                            <div>2023-04-25 19:41:54</div>
                        </li>
                                    </ul>
            </div>
            <div class="wzconZzwz">
                <div class="wzconZzwztitle">最新問題</div>
                <div class="wdsyContent">
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/zh-tw/wenda/176411.html"  target="_blank" title="function_exists()無法判定自訂函數" class="wdcdcTitle">function_exists()無法判定自訂函數</a>
                            <a href="http://www.php.cn/zh-tw/wenda/176411.html" class="wdcdcCons">function test()    {        return true;    }    if (function_exists('TEST')) {        ech...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 2024-04-29 11:01:01</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>2</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1777</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/zh-tw/wenda/176410.html"  target="_blank" title="google 瀏覽器 手機版顯示的怎麼實現" class="wdcdcTitle">google 瀏覽器 手機版顯示的怎麼實現</a>
                            <a href="http://www.php.cn/zh-tw/wenda/176410.html" class="wdcdcCons">老師您好，google 瀏覽器怎麼變成手機版樣式的？</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 2024-04-23 00:22:19</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>10</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1919</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/zh-tw/wenda/176407.html"  target="_blank" title="子窗口操作父窗口，輸出沒反應" class="wdcdcTitle">子窗口操作父窗口，輸出沒反應</a>
                            <a href="http://www.php.cn/zh-tw/wenda/176407.html" class="wdcdcCons">前兩句可執行，最後一句沒辦法應</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 2024-04-19 15:37:47</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1633</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/zh-tw/wenda/176406.html"  target="_blank" title="父視窗沒有輸出" class="wdcdcTitle">父視窗沒有輸出</a>
                            <a href="http://www.php.cn/zh-tw/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 2024-04-18 23:52:34</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>1</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1541</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="http://www.php.cn/zh-tw/wenda/176405.html"  target="_blank" title="關於CSS心智圖的課件在哪？" class="wdcdcTitle">關於CSS心智圖的課件在哪？</a>
                            <a href="http://www.php.cn/zh-tw/wenda/176405.html" class="wdcdcCons">課件</a>
                            <div class="wdcdcInfo flexRow">
                                <div class="wdcdcileft">
                                    <span class="wdcdciSpan"> 來自於 2024-04-16 10:10:18</span>
                                </div>
                                <div class="wdcdciright flexRow">
                                    <div class="wdcdcirdz flexRow ira">  <b class="wdcdcirdzi"></b>0 </div>
                                    <div class="wdcdcirpl flexRow ira"><b  class="wdcdcirpli"></b>0</div>
                                    <div class="wdcdcirwatch flexRow ira"><b  class="wdcdcirwatchi"></b>1578</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                    </div>
            </div>
            <div class="wzconZt" >
                <div class="wzczt-title">
                    <div>相關專題</div>
                    <a href="http://www.php.cn/zh-tw/faq/zt" target="_blank">更多>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/divgdt"><img src="https://img.php.cn/upload/subject/202407/22/2024072214385242717.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="div 捲軸" /> </a>
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/divgdt" class="title-a-spanl" title="div 捲軸"><span>div 捲軸</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/htmlgdtys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214004078545.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html捲軸樣式如何設定" /> </a>
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/htmlgdtys" class="title-a-spanl" title="html捲軸樣式如何設定"><span>html捲軸樣式如何設定</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/fprintfhprint"><img src="https://img.php.cn/upload/subject/202407/22/2024072213424251749.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="fprintf和printf的差別" /> </a>
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/fprintfhprint" class="title-a-spanl" title="fprintf和printf的差別"><span>fprintf和printf的差別</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/msconfigdbkzm"><img src="https://img.php.cn/upload/subject/202407/22/2024072213565829860.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="msconfig打不開怎麼辦" /> </a>
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/msconfigdbkzm" class="title-a-spanl" title="msconfig打不開怎麼辦"><span>msconfig打不開怎麼辦</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/xlvipbd"><img src="https://img.php.cn/upload/subject/202407/22/2024072214324387732.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="迅雷vip補丁" /> </a>
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/xlvipbd" class="title-a-spanl" title="迅雷vip補丁"><span>迅雷vip補丁</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/htmlrhhqsj"><img src="https://img.php.cn/upload/subject/202407/22/2024072212111036784.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="html如何取得數據" /> </a>
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/htmlrhhqsj" class="title-a-spanl" title="html如何取得數據"><span>html如何取得數據</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/sprintfhsyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072213424967087.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="sprintf函數用法詳解" /> </a>
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/sprintfhsyf" class="title-a-spanl" title="sprintf函數用法詳解"><span>sprintf函數用法詳解</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/cyyunion"><img src="https://img.php.cn/upload/subject/202407/22/2024072214035894885.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="c語言union的用法" /> </a>
                            <a target="_blank" href="http://www.php.cn/zh-tw/faq/cyyunion" class="title-a-spanl" title="c語言union的用法"><span>c語言union的用法</span> </a>
                        </li>
                                            </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="phpwzright">
        <div class="wzrOne">
            <div class="wzroTitle">熱門推薦</div>
            <div class="wzroList">
                <ul>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="css怎麼設定超出顯示省略號" href="http://www.php.cn/zh-tw/faq/482865.html">css怎麼設定超出顯示省略號</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="css怎麼設定字體大小" href="http://www.php.cn/zh-tw/faq/469426.html">css怎麼設定字體大小</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="css中的hover怎麼用" href="http://www.php.cn/zh-tw/faq/417948.html">css中的hover怎麼用</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="css中字間距怎麼設定" href="http://www.php.cn/zh-tw/faq/482889.html">css中字間距怎麼設定</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="css3新特性有哪些" href="http://www.php.cn/zh-tw/faq/415878.html">css3新特性有哪些</a>
                                </div>
                            </li>
                                    </ul>
            </div>
        </div>
        <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
        <div class="wzrThree">
            <div class="wzrthree-title">
                <div>熱門教學</div>
                <a target="_blank" href="http://www.php.cn/zh-tw/course.html">更多>
                </a>
            </div>
            <div class="wzrthreelist swiper2">
                <div class="wzrthreeTab  swiper-wrapper">
                    <div class="check tabdiv swiper-slide" data-id="one">相關教學 <div></div></div>
                    <div class="tabdiv swiper-slide" data-id="two">熱門推薦<div></div></div>
                    <div class="tabdiv swiper-slide" data-id="three">最新課程<div></div></div>
                </div>
                <ul class="one">
                                                <li>
                                <a target="_blank" href="http://www.php.cn/zh-tw/course/12.html" title="HTML+CSS基礎入門教學課程" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253de8ca1761701.png" alt="HTML+CSS基礎入門教學課程"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="HTML+CSS基礎入門教學課程" href="http://www.php.cn/zh-tw/course/12.html">HTML+CSS基礎入門教學課程</a>
                                    <div class="wzrthreerb">
                                        <div>523677 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="12">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/zh-tw/course/19.html" title="CSS3從入門到精通教學" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253e3302802a631.png" alt="CSS3從入門到精通教學"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="CSS3從入門到精通教學" href="http://www.php.cn/zh-tw/course/19.html">CSS3從入門到精通教學</a>
                                    <div class="wzrthreerb">
                                        <div>241745 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="19">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/zh-tw/course/21.html" title="快速玩CSS3教程" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253ef5017d08941.png" alt="快速玩CSS3教程"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="快速玩CSS3教程" href="http://www.php.cn/zh-tw/course/21.html">快速玩CSS3教程</a>
                                    <div class="wzrthreerb">
                                        <div>52706 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="21">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/zh-tw/course/24.html" title="CSS 0基礎入門教學" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62566a879336a216.png" alt="CSS 0基礎入門教學"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="CSS 0基礎入門教學" href="http://www.php.cn/zh-tw/course/24.html">CSS 0基礎入門教學</a>
                                    <div class="wzrthreerb">
                                        <div>108725 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="24">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="http://www.php.cn/zh-tw/course/107.html" title="CSS3 入門教學" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/625fa30404935366.jpg" alt="CSS3 入門教學"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="CSS3 入門教學" href="http://www.php.cn/zh-tw/course/107.html">CSS3 入門教學</a>
                                    <div class="wzrthreerb">
                                        <div>41209 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="107">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                    </ul>
                <ul class="two" style="display: none;">
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/812.html" title="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)" href="http://www.php.cn/zh-tw/course/812.html">最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)</a>
                                <div class="wzrthreerb">
                                    <div >1416702次學習</div>
                                                                                <div class="courseICollection" data-id="812">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/286.html" title="JAVA 初級入門影片教學" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="JAVA 初級入門影片教學"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="JAVA 初級入門影片教學" href="http://www.php.cn/zh-tw/course/286.html">JAVA 初級入門影片教學</a>
                                <div class="wzrthreerb">
                                    <div >2474956次學習</div>
                                                                                <div class="courseICollection" data-id="286">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/504.html" title="小甲魚零基礎入門學習Python影片教學" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="小甲魚零基礎入門學習Python影片教學"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="小甲魚零基礎入門學習Python影片教學" href="http://www.php.cn/zh-tw/course/504.html">小甲魚零基礎入門學習Python影片教學</a>
                                <div class="wzrthreerb">
                                    <div >503293次學習</div>
                                                                                <div class="courseICollection" data-id="504">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/901.html" title="Web前端開發極速入門" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Web前端開發極速入門"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Web前端開發極速入門" href="http://www.php.cn/zh-tw/course/901.html">Web前端開發極速入門</a>
                                <div class="wzrthreerb">
                                    <div >215256次學習</div>
                                                                                <div class="courseICollection" data-id="901">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/234.html" title="零基礎精通 PS 影片教學" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="零基礎精通 PS 影片教學"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="零基礎精通 PS 影片教學" href="http://www.php.cn/zh-tw/course/234.html">零基礎精通 PS 影片教學</a>
                                <div class="wzrthreerb">
                                    <div >876629次學習</div>
                                                                                <div class="courseICollection" data-id="234">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
                <ul class="three" style="display: none;">
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/1648.html" title="【web前端】Node.js快速入門" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="【web前端】Node.js快速入門"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="【web前端】Node.js快速入門" href="http://www.php.cn/zh-tw/course/1648.html">【web前端】Node.js快速入門</a>
                                <div class="wzrthreerb">
                                    <div >6335次學習</div>
                                                                                <div class="courseICollection" data-id="1648">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/1647.html" title="國外Web開發全端課程全集" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="國外Web開發全端課程全集"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="國外Web開發全端課程全集" href="http://www.php.cn/zh-tw/course/1647.html">國外Web開發全端課程全集</a>
                                <div class="wzrthreerb">
                                    <div >4964次學習</div>
                                                                                <div class="courseICollection" data-id="1647">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/1646.html" title="Go語言實戰之 GraphQL" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Go語言實戰之 GraphQL"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="Go語言實戰之 GraphQL" href="http://www.php.cn/zh-tw/course/1646.html">Go語言實戰之 GraphQL</a>
                                <div class="wzrthreerb">
                                    <div >4167次學習</div>
                                                                                <div class="courseICollection" data-id="1646">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/1645.html" title="550W粉絲大佬手把手從零學JavaScript" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="550W粉絲大佬手把手從零學JavaScript"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="550W粉絲大佬手把手從零學JavaScript" href="http://www.php.cn/zh-tw/course/1645.html">550W粉絲大佬手把手從零學JavaScript</a>
                                <div class="wzrthreerb">
                                    <div >633次學習</div>
                                                                                <div class="courseICollection" data-id="1645">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                            <li>
                            <a target="_blank" href="http://www.php.cn/zh-tw/course/1644.html" title="python大神Mosh，零基礎小白6小時完全入門" class="wzrthreelaimg">
                                <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="python大神Mosh，零基礎小白6小時完全入門"/>
                            </a>
                            <div class="wzrthree-right">
                                <a target="_blank" title="python大神Mosh，零基礎小白6小時完全入門" href="http://www.php.cn/zh-tw/course/1644.html">python大神Mosh，零基礎小白6小時完全入門</a>
                                <div class="wzrthreerb">
                                    <div >21225次學習</div>
                                                                                <div class="courseICollection" data-id="1644">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                        </div>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper2', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrthreeTab>div').click(function(e){
                    $('.wzrthreeTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrthreelist>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>

<div class="wzrFour">
            <div class="wzrfour-title">
                <div>最新下載</div>
                <a href="http://www.php.cn/zh-tw/xiazai">更多>
                </a>
            </div>
                        <script>
                $(document).ready(function(){
                    var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
                        speed:1000,
                        autoplay:{
                            delay:3500,
                            disableOnInteraction: false,
                        },
                        pagination:{
                            el:'.sjyx_banSwiperwz .swiper-pagination',
                            clickable :false,
                        },
                        loop:true
                    })
                })
            </script>
            <div class="wzrfourList swiper3">
                <div class="wzrfourlTab swiper-wrapper">
                    <div class="check swiper-slide" data-id="onef">網站特效 <div></div></div>
                    <div class="swiper-slide" data-id="twof">網站源碼<div></div></div>
                    <div class="swiper-slide" data-id="threef">網站素材<div></div></div>
                    <div class="swiper-slide" data-id="fourf">前端模板<div></div></div>
                </div>
                <ul class="onef">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery企業留言表單聯絡程式碼" href="http://www.php.cn/zh-tw/xiazai/js/8071">[表單按鈕] jQuery企業留言表單聯絡程式碼</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5 MP3音樂盒播放特效" href="http://www.php.cn/zh-tw/xiazai/js/8070">[播放器特效] HTML5 MP3音樂盒播放特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="HTML5酷炫粒子動畫導覽選單特效" href="http://www.php.cn/zh-tw/xiazai/js/8069">[選單導航] HTML5酷炫粒子動畫導覽選單特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery可視化表單拖曳編輯程式碼" href="http://www.php.cn/zh-tw/xiazai/js/8068">[表單按鈕] jQuery可視化表單拖曳編輯程式碼</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="VUE.JS仿酷狗音樂播放器代碼" href="http://www.php.cn/zh-tw/xiazai/js/8067">[播放器特效] VUE.JS仿酷狗音樂播放器代碼</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="經典html5推箱子小遊戲" href="http://www.php.cn/zh-tw/xiazai/js/8066">[html5特效] 經典html5推箱子小遊戲</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="jQuery滾動添加或減少圖片特效" href="http://www.php.cn/zh-tw/xiazai/js/8065">[圖片特效] jQuery滾動添加或減少圖片特效</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a target="_blank"  title="CSS3個人相簿封面懸停放大特效" href="http://www.php.cn/zh-tw/xiazai/js/8064">[相簿特效] CSS3個人相簿封面懸停放大特效</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="twof" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8328" title="家居裝潢清潔維修服務公司網站模板" target="_blank">[前端模板] 家居裝潢清潔維修服務公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8327" title="清新配色個人求職履歷引導頁模板" target="_blank">[前端模板] 清新配色個人求職履歷引導頁模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8326" title="設計師創意求職履歷網頁模板" target="_blank">[前端模板] 設計師創意求職履歷網頁模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8325" title="現代工程建築公司網站模板" target="_blank">[前端模板] 現代工程建築公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8324" title="教育服務機構響應式HTML5模板" target="_blank">[前端模板] 教育服務機構響應式HTML5模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8323" title="網上電子書店商城網站模板" target="_blank">[前端模板] 網上電子書店商城網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8322" title="IT技術解決互聯網公司網站模板" target="_blank">[前端模板] IT技術解決互聯網公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8321" title="紫色風格外匯交易服務網站模板" target="_blank">[前端模板] 紫色風格外匯交易服務網站模板</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="threef" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/sucai/3078"  target="_blank"  title="可愛的夏天元素向量素材(EPS+PNG)">[PNG素材] 可愛的夏天元素向量素材(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/sucai/3077"  target="_blank"  title="四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)">[PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/sucai/3076"  target="_blank"  title="唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)">[banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/sucai/3075"  target="_blank"  title="金色的畢業帽向量素材(EPS+PNG)">[PNG素材] 金色的畢業帽向量素材(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/sucai/3074"  target="_blank"  title="黑白風格的山脈圖示向量素材(EPS+PNG)">[PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/sucai/3073"  target="_blank"  title="不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)">[PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/sucai/3072"  target="_blank"  title="扁平風格的植樹節banner向量素材(AI+EPS)">[banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/sucai/3071"  target="_blank"  title="九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)">[PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)</a>
                            </div>
                        </li>
                                    </ul>
                <ul class="fourf" style="display:none">
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8328"  target="_blank" title="家居裝潢清潔維修服務公司網站模板">[前端模板] 家居裝潢清潔維修服務公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8327"  target="_blank" title="清新配色個人求職履歷引導頁模板">[前端模板] 清新配色個人求職履歷引導頁模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8326"  target="_blank" title="設計師創意求職履歷網頁模板">[前端模板] 設計師創意求職履歷網頁模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8325"  target="_blank" title="現代工程建築公司網站模板">[前端模板] 現代工程建築公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8324"  target="_blank" title="教育服務機構響應式HTML5模板">[前端模板] 教育服務機構響應式HTML5模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8323"  target="_blank" title="網上電子書店商城網站模板">[前端模板] 網上電子書店商城網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8322"  target="_blank" title="IT技術解決互聯網公司網站模板">[前端模板] IT技術解決互聯網公司網站模板</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="http://www.php.cn/zh-tw/xiazai/code/8321"  target="_blank" title="紫色風格外匯交易服務網站模板">[前端模板] 紫色風格外匯交易服務網站模板</a>
                            </div>
                        </li>
                                    </ul>
            </div>
            <script>
                var mySwiper = new Swiper('.swiper3', {
                            autoplay: false,//可选选项，自动滑动
                            slidesPerView : 'auto',
                        })
                $('.wzrfourlTab>div').click(function(e){
                    $('.wzrfourlTab>div').removeClass('check')
                    $(this).addClass('check')
                    $('.wzrfourList>ul').css('display','none')
                    $('.'+e.currentTarget.dataset.id).show()
                })
            </script>
        </div>
    </div>
</div>
<div class="phpFoot">
    <div class="phpFootIn">
        <div class="phpFootCont">
            <div class="phpFootLeft">
                <dl>
                    <dt>
                        <a href="http://www.php.cn/zh-tw/about/xieyi.html" rel="nofollow" target="_blank" title="關於我們" class="cBlack">關於我們</a>
                        <a href="http://www.php.cn/zh-tw/about/yinsi.html" rel="nofollow" target="_blank" title="免責聲明" class="cBlack">免責聲明</a>
                        <a href="http://www.php.cn/zh-tw/update/article_0_1.html"   target="_blank" title="Sitemap" class="cBlack">Sitemap</a>
                        <div class="clear"></div>
                    </dt>
                    <dd class="cont1">PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！</dd>
                </dl>
              
            </div>
        </div>
    </div>
    </div>

<input type="hidden" id="verifycode" value="/captcha.html">
<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>

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

css 關於 overflow屬性的一些小技巧， overflow屬性介紹