輪播圖做好之後，發現切換寬窄屏時會出現錯位問題，原本美美噠輪播圖因此變得不美觀了。

調整圖片在寬屏下的尺寸，切換成窄屏後圖片會錯位~

原本窄屏下的樣子：

而切換成寬屏後變成了這樣：

調整圖片在窄屏下的尺寸，切換成寬屏後圖片也會錯位~

輪播圖會覆蓋右邊的文字，如圖：

想了一會兒，突然想到可以通過固定整個頁面的寬度來解決這個問題，具體的修改如下：（由於屏太寬或太窄都會影響整個頁面的視覺效果，所以可將寬度設為1120px，此處以此寬度做示例，大家也可修改為自己想要的寬度）

解決辦法：修改行間樣式

（一）修改頭部和主體的寬度

1、根據以下檔案路徑找到header.html檔案：template/default/common/header.html，修改以下三個地方的樣式，即加入行間樣式style="width:1120px;margin:0 auto;"或style="width:1120px;"

（1）<div id="toptb" class="cl">加入樣式style="width:1120px;margin:0 auto;" ，即改為<div id="toptb" class="cl" style="width:1120px;margin:0 auto;">，如圖：

（2）<div class="wp">加入樣式style="width:1120px;margin:0 auto;" ，即改為<div class="wp" style="width:1120px;margin:0 auto;">，如圖：

以上兩步可修改頭部的寬度。

（3）本檔案最後一行程式碼<div id="wp" class="wp" >即可修改主體寬度，加入樣式style="width:1120px;"，即改為<div id="wp" class="wp" style="width:1120px;">，如圖：

（二）修改底部寬度

此時上傳程式碼重新整理後，發現底部的寬度和上半部分不和諧，所以還需更改底部的寬度。根據以下檔案路徑找到footer.html檔案：template/default/common/footer.html，找到<div id="ft" class="wp cl">，加入行間樣式style="width:1120px;margin:0 auto;"，即改為<div id="ft" class="wp cl" style="width:1120px;margin:0 auto;">，如圖：

用ftp上傳之後，進入網站重新整理頁面，即可看到最終效果，此時，在寬屏窄屏下都沒有煩惱了，無論怎麼切換，都不會再錯位，（因為寬度有所變化，可能會影響之前做好的輪播圖效果，此時只需重新diy一下圖片的尺寸和帖子的數量，直到達到自己想要的效果即可），如圖：

第一次發文，有什麼不對的地方歡迎大家指正喲~