如何改變WooCommerce的商品列表樣式

WooCommerce產(chǎn)品圖片有三種尺寸：

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),南部企業(yè)網(wǎng)站建設(shè),南部品牌網(wǎng)站建設(shè),網(wǎng)站定制,南部網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,南部網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1、Single Product Image：是最大的縮略圖，用在產(chǎn)品詳情頁面展示產(chǎn)品大圖

2、Catalog Images：用在shop首頁、相關(guān)產(chǎn)品、交叉銷售和增量銷售中

3、Product Thumbnails：最小的縮略圖，用在購物車頁、購物車小工具，產(chǎn)品詳情頁大圖下方那一堆小圖也是這個(gè)尺寸.

4、下述所有代碼都應(yīng)放在主題的functions.php中

add_filter(?'woocommerce_output_related_products_args',?'wc_custom_related_products_args'?);

function?wc_custom_related_products_args(?$args?){

$args?=?array(

'posts_per_page'?= 3,

'columns'?= 3,

'orderby'?=?'rand'

);

return?$args;

}

5、只更改數(shù)量無法達(dá)到想要的效果，還需要修改樣式表，在主題的style.css里添加如下樣式：

woocommerce .related ul li.product,

woocommerce .related ul.products li.product,

woocommerce-page .related ul li.product,

woocommerce-page .related ul.products li.product{

width:30%;

}

css3中的樣式兼容性問題怎么弄？

1.目前來說對(duì)css支持最好的公認(rèn)的是火狐瀏覽器，錯(cuò)位的原因在css代碼書寫不規(guī)范。

2.兼容性：對(duì)于CSS（樣bai式表）并不是所有瀏覽器的所有版本都支持的很好，比如IE5以前的瀏覽器對(duì)于CSS的支持就不是很好。而現(xiàn)在使用IE5以前版本瀏覽器的用戶不在少數(shù)，這樣就使得在頁面制作的過程中需要針對(duì)不同瀏覽器版本進(jìn)行測(cè)試，以保證兼容性，無形中也增加很多工作量（至少我接觸的開發(fā)人員制作div頁面比table頁面的標(biāo)準(zhǔn)時(shí)間要長一些）。

3.對(duì)css縮寫的支持問題：

不論是ie 還是ff對(duì)css的縮寫都有一小點(diǎn)問題比如border: 0xp solid #fff;兩個(gè)瀏覽器支持都沒有問題

但對(duì)于四個(gè)邊的magin不同情況下，就不能用這種縮寫了，無論是ie還是ff又會(huì)出現(xiàn)邊界解釋錯(cuò)誤，而導(dǎo)致頁面變形正確縮寫：border-width:0px 1px 2px 3px;

border-style:solid;

border-color:#fff;

第二點(diǎn)是 ie對(duì)于css的magin padding 等默認(rèn)值為0px，但ff卻不一樣，為了保持外觀的統(tǒng)一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯(cuò)位。

IE與Firefox的CSS兼容大全 1.DOCTYPE 影響 CSS 處理

2.FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行

3.FF: body 設(shè)置 text-align 時(shí), div 需要設(shè)置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width

5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設(shè)置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上

6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行

7.cursor: pointer 可以同時(shí)在 IE FF 中顯示游標(biāo)手指狀， hand 僅 IE 可以

8.FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設(shè)置高度是為了避免底邊顯示錯(cuò)位, 若不設(shè) height, 可以在 menubar 中插入一個(gè)空格。

9.在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：div{margin:30px!important;margin:28px;}

注意這兩個(gè)margin的順序一定不能寫反，據(jù)阿捷的說法!important這個(gè)屬性IE不能識(shí)別，但別的瀏覽器可以識(shí)別。所以在IE下其實(shí)解釋成這樣：div{maring:30px;margin:28px}

商品展示DIV CSS間距怎么寫

塊元素的之間的間距使用margin屬性設(shè)置。

CSS margin 屬性

定義和用法

margin 簡寫屬性在一個(gè)聲明中設(shè)置所有外邊距屬性。該屬性可以有 1 到 4 個(gè)值。

說明

這個(gè)簡寫屬性設(shè)置一個(gè)元素所有外邊距的寬度，或者設(shè)置各邊上外邊距的寬度。

塊級(jí)元素的垂直相鄰?fù)膺吘鄷?huì)合并，而行內(nèi)元素實(shí)際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會(huì)合并。同樣地，浮動(dòng)元素的外邊距也不會(huì)合并。允許指定負(fù)的外邊距值，不過使用時(shí)要小心。

注釋：允許使用負(fù)值。

例子 1

margin:10px?5px?15px?20px;

/*

上外邊距是?10px

右外邊距是?5px

下外邊距是?15px

左外邊距是?20px

*/例子 2margin:10px?5px?15px;

/*上外邊距是?10px

右外邊距和左外邊距是?5px

下外邊距是?15px*/

例子 3

margin:10px?5px;

/*

上外邊距和下外邊距是?10px

右外邊距和左外邊距是?5px

*/

例子 4

margin:10px;

/*所有?4?個(gè)外邊距都是?10px*/

可能的值

CSS3布局方式有哪些？

1.靜態(tài)布局

——最傳統(tǒng)的布局方式，網(wǎng)頁中所有尺寸都是由px作為單位，設(shè)置了min-width,如果寬度小于就會(huì)出現(xiàn)滾動(dòng)條，如果大于這個(gè)寬度則內(nèi)容居中外加背景

實(shí)現(xiàn)方式：PC：居中布局，所有樣式使用絕對(duì)寬度/高度(px)，設(shè)計(jì)一個(gè)Layout，在屏幕寬高有調(diào)整時(shí)，使用橫向和豎向的滾動(dòng)條來查閱被遮掩部分；

移動(dòng)設(shè)備：另外建立移動(dòng)網(wǎng)站，單獨(dú)設(shè)計(jì)一個(gè)布局，使用不同的域名如wap.或m.。

優(yōu)點(diǎn)：采用之前的css2的布局·方式，布局簡單，沒有兼容性問題。

缺點(diǎn): 在手機(jī)端不能合理的顯示，移動(dòng)端不能使用pc端頁面，需要再寫一個(gè)布局來呈現(xiàn)。

實(shí)踐案例：Float 布局、絕對(duì)布局

2.自適應(yīng)布局

——可以看成是不同屏幕下由多個(gè)靜態(tài)布局組成的。自適應(yīng)布局是為不同的屏幕分辨率分別定義不同的布局。改變屏幕分辨率可以切換不同的靜態(tài)布局（頁面元素位置可能發(fā)生改變），但在每個(gè)靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。自適應(yīng)布局頁面里面元素的位置會(huì)變化，很好的解決了流式布局中的大屏空間利用率不高弊端。

注：屏幕分辨率變化時(shí)，頁面里面元素的位置會(huì)變化而大小不會(huì)變化。

3.流失布局（百分比布局 %）

網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分?jǐn)?shù)（搭配min-*、max-*屬性使用),分別為不同的屏幕設(shè)置布局格式，當(dāng)屏幕大小改變時(shí)，會(huì)出現(xiàn)不同的布局，意思就是在這個(gè)屏幕下這個(gè)元素塊在這個(gè)地方，但是在那個(gè)屏幕下，這個(gè)元素塊又會(huì)出現(xiàn)在那個(gè)地方。只是布局改變，元素不變。可以看成是不同屏幕下由多個(gè)靜態(tài)布局組成的。

而流式布局的特點(diǎn)是隨著屏幕的改變，頁面的布局沒有發(fā)生大的變化，可以進(jìn)行適配調(diào)整，這個(gè)正好與自適應(yīng)布局相補(bǔ)。使用%百分比定義寬度，高度大都是用px來固定住，可以根據(jù)可視區(qū)域 (viewport) 和父元素的實(shí)時(shí)尺寸進(jìn)行調(diào)整，盡可能的適應(yīng)各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動(dòng)范圍以免過大或者過小影響閱讀。這種布局方式在Web前端開發(fā)的早期歷史上，用來應(yīng)對(duì)不同尺寸的PC屏幕（那時(shí)屏幕尺寸的差異不會(huì)太大），在當(dāng)今的移動(dòng)端開發(fā)也是常用布局方式，但缺點(diǎn)明顯：主要的問題是如果屏幕尺度跨度太大，那么在相對(duì)其原始設(shè)計(jì)而言過小或過大的屏幕上不能正常顯示。因?yàn)閷挾仁褂?百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”

注：屏幕分辨率變化時(shí)，頁面里元素的大小會(huì)變化而但布局不變。

主要實(shí)踐案例：左側(cè)固定+右側(cè)自適應(yīng)、左右固定寬度+中間自適應(yīng)、圣杯布局、雙飛翼布局

4.響應(yīng)式布局（媒體查詢）

——通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。屏幕尺寸不一樣展示給用戶的網(wǎng)頁內(nèi)容也不一樣.利用媒體查詢可以檢測(cè)到屏幕的尺寸(主要檢測(cè)寬度)，并設(shè)置不同的CSS樣式，就可以實(shí)現(xiàn)響應(yīng)式的布局。主要依靠是css的媒體查詢。

注：每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，即元素位置和大小都會(huì)變。

5.彈性布局

——rem/em、flex布局

css樣式布局及rem用法梳理

視口（viewport）是用來約束網(wǎng)頁中最頂級(jí)塊元素的，即它決定了網(wǎng)頁的大小，網(wǎng)頁是先在視口上渲染，然后再通過視口放回到瀏覽器窗口上的，網(wǎng)頁的渲染過程如下：

pc端視口的大小和瀏覽器的大小一樣，所以網(wǎng)頁是1：1的放到瀏覽器窗口上，而移動(dòng)端視口就有點(diǎn)特殊，移動(dòng)端視口的寬度是比移動(dòng)端屏幕要寬，寬度尺寸一般是980px或者1024px，網(wǎng)頁是視口上渲染完之后，為了能在移動(dòng)端屏幕上顯示整個(gè)網(wǎng)頁，整個(gè)視口會(huì)整體縮放到屏幕的寬度，這樣，網(wǎng)頁看上去就整體縮放

具體如何設(shè)置視口以及禁止視口頁面縮放可以自行百度

（主要針對(duì)移動(dòng)端以及pc端網(wǎng)頁需要實(shí)現(xiàn)等比放大縮小頁面效果）

大概有以下幾種

1、流體布局

流體布局其實(shí)就是寬度用百分比，高度用固定值的布局方式，寬度通過百分比來適配不同寬度的屏幕。

為了適配手機(jī)端不同尺寸的屏幕，我們?cè)诙x元素寬度的時(shí)候可以寫百分比，百分比是相對(duì)于屏幕的寬度，所有寬度就可以做到自適應(yīng)，而在高度方向，由于網(wǎng)頁的高度是不定的，所以我們可以把高度寫成固定的值(px),這種布局方式叫做流體布局。

注意兩個(gè)概念

2、彈性盒模型布局flex

這種布局方式是通過css3新增的一些輔助布局的樣式屬性來制作布局的方式。

3、rem布局

rem是一種相對(duì)長度單位，通過這個(gè)長度單位可以實(shí)現(xiàn)元素寬高等比例縮放，從而完成不同寬度屏幕的適配。

4、響應(yīng)式布局 （媒體查詢）

通過樣式動(dòng)態(tài)查詢屏幕的寬度，動(dòng)態(tài)切換樣式來適配不同寬度屏幕的布局方式。

Bootstrap是最典型的一種

待補(bǔ)充

實(shí)際開發(fā)中，pc端頁面需要實(shí)現(xiàn)響應(yīng)式等比縮放（即自適應(yīng)），使用rem+彈性布局是比較現(xiàn)實(shí)及理想的解決方式

移動(dòng)端可以使用rem布局，也可以使用px實(shí)現(xiàn)（主要用flex），具體看產(chǎn)品是怎么設(shè)計(jì)要求的

css3規(guī)定：1rem的大小就是根元素html的font-size的值。

rem其實(shí)是一個(gè)單位 ，是個(gè)相對(duì)單位 root em。rem就是root（根元素的大小）相對(duì)于html元素的字體大小的單位。

rem布局的原理

就是根據(jù)一個(gè)html根元素來控制，網(wǎng)頁的布局，實(shí)現(xiàn)類似于自適應(yīng)等比例的縮放的布局。

rem優(yōu)勢(shì)

通過修改html文字的大小，來改變頁面中元素的大小，實(shí)現(xiàn)了頁面的整體控制

rem的作用

通過設(shè)置 根元素html的font-size的大小，來控制整個(gè)html文檔內(nèi)的字體大小、元素寬高、內(nèi)外邊距等，根據(jù)移動(dòng)設(shè)備的寬度大小來實(shí)現(xiàn)自適應(yīng)，不同的設(shè)備都展示一致的頁面效果。

簡單用法

vscode中安裝cssrem插件，通過這個(gè)插件可以自動(dòng)計(jì)算rem數(shù)值。

具體設(shè)置如下

注意:設(shè)置后 vscode軟件需要重啟 否則計(jì)算的rem值會(huì)出錯(cuò)

待補(bǔ)充

可以通過js的方式來改變，也可以通過css媒體查詢的方式來改變，

待補(bǔ)充

新聞標(biāo)題：css3商品展示樣式,css3種樣式
分享URL：http://chinadenli.net/article39/dsiojsh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、用戶體驗(yàn)、網(wǎng)站制作、搜索引擎優(yōu)化、全網(wǎng)營銷推廣、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)