《产品管理产品规划DIV+CSS京东商城产品分类适合所有版本》由会员分享，可在线阅读，更多相关《产品管理产品规划DIV+CSS京东商城产品分类适合所有版本（8页珍藏版）》请在金锄头文库上搜索。
1、DIV+CSS京东商城产品分类适合所有版本 第一步：在你所用的模板的css文件中加上以下代码 Copy to clipboardView Code CSS101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 .my_left_
2、categorywidth211px;font-size12px; .my_left_category h1background-imageurl(imagesspring_06.jpg);height20px;background-repeatno-repeat;font-size14px;font-weightbold;padding-left15px;padding-top8px;margin0px;color#FFF;.my_left_category .my_left_cat_listwidth209px;border-color#ce2020;border-stylesolid;b
3、order-width0px 1px 1px 1px;line-height13.5pt;.my_left_category .my_left_cat_list h2 margin0px;padding3px 5px 0px 9px;.my_left_category .my_left_cat_list h2 acolor#d6290b;font-weightbold;font-size14px;line-height22px;.my_left_category .h2_catwidth209px;height26px;background-imageurl(imagesmy_menubg.g
4、if);background-repeatno-repeat;line-height26px;font-weightnormal;color#333333;positionrelative;.my_left_category afont12px;text-decorationnone;color#333333;.my_left_category ahovertext-decorationunderline;color#ff3333;.my_left_category h3margin0px;padding0px;height26px;font-size12px;font-weightnorma
5、l;displayblock;padding-left8px;.my_left_category h3 spancolor#999999; width145px; floatright;.my_left_category h3 a line-height26px;.my_left_category .h3_catdisplaynone;width204px;positionabsolute;left184px;margin-top-26px;cursorauto;.my_left_category .shadowpositioninherit;backgroundurl(imagesshado
6、w_04.gif) left top;width204px;.my_left_category .shadow_borderpositioninherit;width200px;border1px solid #959595; margin-top1px;border-left-width0px;backgroundurl(imagesshadow_border.gif) no-repeat 0px 21px;background-color#ffffff;margin-bottom3px.my_left_category .shadow_border ulmargin0; padding0;
7、 margin-left15px.my_left_category .shadow_border ul li list-stylenone;padding-left10px;background-imageurl(imagesmy_cat_sub_menu_dot.gif);background-repeatno-repeat;background-position0px 8px;floatleft;width75px;height26px;overflowhidden;.my_left_category .active_cat z-index99;background-position0 -
8、25px;cursorpointer;.my_left_category .active_cat h3 font-weightbold.my_left_category .active_cat h3 span displaynone;.my_left_category .active_cat divdisplayblock; 第二步：模板文件夹的 librarycategory_tree.lbi内容改为： Copy to clipboardView Code HTML1011121314151617181920212223242526272829303132333435363738394041
9、4243444546 meta http-equiv=Content-Type content=texthtml; charset=gbkdiv class=my_left_categoryh1商品分类h1div class=my_left_cat_listassign var=pre_item_level value=-1!-foreach from=cat_list(0,0,false,3,false) item=cat-if $cat.level lt 2 & $pre_item_level gt 0divdiv ifif $cat.level eq 0h2a href=$cat.url
10、$cat.nameescapehtmlah2 elseif $cat.level eq 1div class=h2_cat onmouseover=this.className=h2_cat active_cat onmouseout=this.className=h2_cath3span - $cat.cat_descescapehtmlspana href=$cat.url$cat.nameescapehtmlah3div class=h3_catdiv class=shadowdiv class=shadow_borderulelseif $cat.level eq 2lia href=
11、$cat.url$cat.nameescapehtmlali ifassign var=pre_item_level value=$cat.level!-foreach-if $pre_item_level gt 0uldivdivdivdiv if meta 第三步：把用到的图片拷贝到模板文件夹的images目录完成！注：京东的二级分类名称旁边列了2个三级分类名称（灰色）,作为三级分类的提示。参考其他网友的做法，这里使用二级类的描述字段cat_desc来实现,【用程序去调取二级类下的前两个三级分类完全是化简为烦的事情。】但这个效果要修改 includeslib_common.php 才生效的，当然，不修改也不会出错，只是没有显示罢了。修改方法：在includeslib_common.php 的cat_list函数中找到$sql = “SELECT c.cat_id, c.cat_name,修改为$sql = “SELECT c.cat_id, c.cat_name, c.cat_desc,补充一下：在firefox等浏览器中，如果展开的部分被遮挡（由于父级容器overflowhidden引起），在.my_left_category的样式中加上 positionabsolute即可
