京东商城产品分类适合所有版本.docx
- 文档编号:1468754
- 上传时间:2022-10-22
- 格式:DOCX
- 页数:10
- 大小:15.77KB
京东商城产品分类适合所有版本.docx
《京东商城产品分类适合所有版本.docx》由会员分享,可在线阅读,更多相关《京东商城产品分类适合所有版本.docx(10页珍藏版)》请在冰豆网上搜索。
京东商城产品分类适合所有版本
DIV+CSS京东商城产品分类适合所有版本
第一步:
在你所用的模板的css文件中加上以下代码
[Copytoclipboard]ViewCodeCSS10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
.my_left_category{
width211px;
font-size12px;
}
.my_left_categoryh1{
background-imageurl;
height20px;
background-repeatno-repeat;
font-size14px;
font-weightbold;
padding-left15px;
padding-top8px;
margin0px;
color#FFF;
}
.my_left_category.my_left_cat_list{
width209px;
border-color#ce2020;
border-stylesolid;
border-width0px1px1px1px;
line-height13.5pt;
}
.my_left_category.my_left_cat_listh2{
margin0px;
padding3px5px0px9px;
}
.my_left_category.my_left_cat_listh2a{
color#d6290b;
font-weightbold;
font-size14px;
line-height22px;
}
.my_left_category.h2_cat{
width209px;
height26px;
background-imageurl;
background-repeatno-repeat;
line-height26px;
font-weightnormal;
color#333333;
positionrelative;
}
.my_left_categorya{
font12px;
text-decorationnone;
color#333333;
}
.my_left_categoryahover{
text-decorationunderline;
color#ff3333;
}
.my_left_categoryh3{
margin0px;
padding0px;
height26px;
font-size12px;
font-weightnormal;
displayblock;
padding-left8px;
}
.my_left_categoryh3span{color#999999;width145px;floatright;}
.my_left_categoryh3a{line-height26px;}
.my_left_category.h3_cat{
displaynone;
width204px;
positionabsolute;
left184px;
margin-top-26px;
cursorauto;
}
.my_left_category.shadow{
positioninherit;
backgroundurllefttop;
width204px;
}
.my_left_category.shadow_border{
positioninherit;
width200px;
border1pxsolid#959595;margin-top1px;
border-left-width0px;
backgroundurlno-repeat0px21px;
background-color#ffffff;
margin-bottom3px
}
.my_left_category.shadow_borderul{margin0;padding0;margin-left15px}
.my_left_category.shadow_borderulli{
list-stylenone;
padding-left10px;
background-imageurl;
background-repeatno-repeat;
background-position0px8px;
floatleft;
width75px;
height26px;
overflowhidden;
}
.my_left_category.active_cat{z-index99;background-position0-25px;cursorpointer;}
.my_left_category.active_cath3{font-weightbold}
.my_left_category.active_cath3span{displaynone;}
.my_left_category.active_catdiv{displayblock;}
第二步:
模板文件夹的内容改为:
[Copytoclipboard]ViewCodeHTML10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
metahttp-equiv=Content-Typecontent=texthtml;charset=gbk
divclass=my_left_category
h1商品分类h1
divclass=my_left_cat_list
{assignvar=pre_item_levelvalue=-1}
!
--{foreachfrom=cat_list(0,0,false,3,false)item=cat}--
{if$lt2&&$pre_item_levelgt0}
div
div
{if}
{if$eq0}
h2ahref={$}{$}ah2
{elseif$eq1}
divclass=h2_catonmouseover=='h2_catactive_cat'onmouseout=='h2_cat'
h3span-{$}spanahref={$}{$}ah3
divclass=h3_cat
divclass=shadow
divclass=shadow_border
ul
{elseif$eq2}
liahref={$}{$}ali
{if}
{assignvar=pre_item_levelvalue=$}
!
--{foreach}--
{if$pre_item_levelgt0}
ul
div
div
div
div
{if}
meta
第三步:
把用到的图片拷贝到模板文件夹的images目录
完成!
注:
京东的二级分类名称旁边列了2个三级分类名称(灰色),作为三级分类的提示。
参考其他网友的做法,这里使用二级类的描述字段cat_desc来实现,【用程序去调取二级类下的前两个三级分类完全是化简为烦的事情。
】但这个效果要修改才生效的,当然,不修改也不会出错,只是没有显示罢了。
修改方法:
在的cat_list函数中找到
$sql=“SELECT,,
修改为
$sql=“SELECT,,,
补充一下:
在firefox等浏览器中,如果展开的部分被遮挡(由于父级容器overflowhidden引起),在.my_left_category的样式中加上positionabsolute即可
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 商城 产品 分类 适合 所有 版本