css商品列表样式,css样式表的种类

简述 css列表样式属性及取值情况

ulli/li/ul有序

公司专注于为企业提供做网站、网站设计、微信公众号开发、商城网站建设，微信小程序，软件按需设计网站等一站式互联网企业服务。凭借多年丰富的经验，我们会仔细了解各客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，成都创新互联更提供一系列网站制作和网站推广的服务。

ullo/lo/ul无序

属性：list-style

list-style-type：设置列表项标志的类型（none就是前面没有小圆点）

list-style-image：将图象设置为列表项标志。

list-style-position：设置列表中列表项标志的位置  

网店 商品列表(div+css)

其实都可以 就看喜欢 div布局

div class="wrap"

div商品/div

div商品/div

div商品/div

div商品/div

div商品/div

/div

UL 布局

ul class=“wrap”

li商品/li

li商品/li

li商品/li

/ul

居中对齐可以写样式控制，列如：

.wrap{width:600px; margin:auto auto;}

如果列表项需要两端对齐的话，可以对列表项精确控制即可

如何改变WooCommerce的商品列表样式

WooCommerce产品图片有三种尺寸：

1、Single Product Image：是最大的缩略图，用在产品详情页面展示产品大图

2、Catalog Images：用在shop首页、相关产品、交叉销售和增量销售中

3、Product Thumbnails：最小的缩略图，用在购物车页、购物车小工具，产品详情页大图下方那一堆小图也是这个尺寸.

4、下述所有代码都应放在主题的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、只更改数量无法达到想要的效果，还需要修改样式表，在主题的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%;

}