DIV+CSS京东商城产品分类适合所有版本3999.docx

《DIV+CSS京东商城产品分类适合所有版本3999.docx》由会员分享，可在线阅读，更多相关《DIV+CSS京东商城产品分类适合所有版本3999.docx（11页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、DIV+CSS京东商城产品分类适合所有版本 第一步：在在你所用的的模板的ccss文件件中加上以以下代码 Copyy to clippboarrdViiew CCode CSS110111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911

2、0 .my_leftt_cattegorrywidthh211ppx;font-sizee12pxx; .my_lleft_cateegoryy h1backggrounnd-immageuurl(iimageessprring_06.jjpg);heighht20ppx;backggrounnd-reepeattno-rrepeaat;font-sizee14pxx;font-weigghtboold;paddiing-lleft115px;paddiing-ttop8ppx;margiin0pxx;colorr#FFFF;.my_lleft_cateegoryy .myy_lefft_ca

3、at_liistwidthh209ppx;bordeer-coolor#ce20020;bordeer-sttylessolidd;bordeer-wiidth00px 11px 11px 11px;line-heigght133.5ptt;.my_lleft_cateegoryy .myy_lefft_caat_liist hh2 margiin0pxx;paddiing3ppx 5ppx 0ppx 9ppx;.my_lleft_cateegoryy .myy_lefft_caat_liist hh2 acolorr#d62290b;font-weigghtboold;font-sizee1

4、4pxx;line-heigght222px;.my_lleft_cateegoryy .h22_cattwidthh209ppx;heighht26ppx;backggrounnd-immageuurl(iimageesmy_menuubg.ggif);backggrounnd-reepeattno-rrepeaat;line-heigght266px;font-weigghtnoormall;colorr#3333333;posittionrrelattive;.my_lleft_cateegoryy afont112px;text-decooratiionnoone;colorr#333

5、3333;.my_lleft_cateegoryy ahoovertext-decooratiionunnderlline;colorr#ff33333;.my_lleft_cateegoryy h3margiin0pxx;paddiing0ppx;heighht26ppx;font-sizee12pxx;font-weigghtnoormall;displlaybllock;paddiing-lleft88px;.my_lleft_cateegoryy h3 spanncollor#99999999; wwidthh145ppx; ffloattrighht;.my_lleft_cateeg

6、oryy h3 a lline-heigght266px;.my_lleft_cateegoryy .h33_cattdispllaynoone;widthh204ppx;posittionaabsollute;left1184pxx;margiin-toop-266px;cursoorautto;.my_lleft_cateegoryy .shhadowwposittioniinherrit;backggrounndurll(imaagessshadoow_044.giff) leeft ttop;widthh204ppx;.my_lleft_cateegoryy .shhadoww_bor

7、rderposittioniinherrit;widthh200ppx;bordeer1pxx sollid #9595595; marggin-ttop1ppx;bordeer-leeft-wwidthh0px;backggrounndurll(imaagessshadoow_boorderr.giff) noo-reppeat 0px 21pxx;backggrounnd-coolor#fffffff;margiin-boottomm3px.my_lleft_cateegoryy .shhadoww_borrder ulmmargiin0; paddding00; maarginn-lef

8、ft15ppx.my_lleft_cateegoryy .shhadoww_borrder ul lli list-styllenonne;paddiing-lleft110px;backggrounnd-immageuurl(iimageesmy_cat_sub_menuu_dott.giff);backggrounnd-reepeattno-rrepeaat;backggrounnd-poositiion0ppx 8ppx;floattleftt;widthh75pxx;heighht26ppx;overfflowhhiddeen;.my_lleft_cateegoryy .acctive

9、e_catt z-indeex99;backkgrouund-pposittion00 -255px;ccursoorpoiinterr;.my_lleft_cateegoryy .acctivee_catt h3 foont-wweighhtbolld.my_lleft_cateegoryy .acctivee_catt h3 spann diisplaaynonne;.my_lleft_cateegoryy .acctivee_catt divvdissplayyblocck; 第二步：模模板文件夹夹的 liibrarrycattegorry_trree.llbi内容容改为： Copyy

10、to clippboarrdViiew CCode HTMLL10111213141516171819202122232425262728293031323334353637383940414243444546 metaa htttp-eqquiv=Conttent-Typee conntentt=texxthtmml; ccharsset=ggbkdiv cclasss=my_leftt_cattegorryh1商品分分类h1div cclasss=my_leftt_catt_lisstassiign vvar=ppre_iitem_leveel vaalue=-1!-fforeaach f

11、from=cat_listt(0,00,fallse,33,fallse) itemm=catt-if $cat.leveel ltt 2 & $ppre_iitem_leveel gtt 0divdiv ifif $cat.leveel eqq 0h2a hhref=$caat.urrl$cat.nameeescaapehttmlaah2 elseeif $cat.leveel eqq 1div cclasss=h2_cat onmoouseoover=thiss.claassNaame=h2_ccat aactivve_caat oonmouuseouut=thhis.cclasssNam

12、ee=h22_catth3spaan - $caat.caat_deescesscapeehtmllspaana hhref=$caat.urrl$cat.nameeescaapehttmlaah3div cclasss=h3_catdiv cclasss=shaadowdiv cclasss=shaadow_bordderulelseeif $cat.leveel eqq 2lia hhref=$caat.urrl$cat.nameeescaapehttmlaali ifassiign vvar=ppre_iitem_leveel vaalue=$catt.levvel!-fforeaach

13、-if $pre_itemm_levvel ggt 0uldivdivdivdiv if meta 第三步：把把用到的图图片拷贝到到模板文件件夹的immagess目录完成！注：京东的二级级分类名称称旁边列了了2个三级级分类名称称（灰色）,作为三级级分类的提提示。参考考其他网友友的做法，这这里使用二二级类的描描述字段ccat_ddesc来来实现,【用用程序去调调取二级类类下的前两两个三级分分类完全是是化简为烦烦的事情。】但但这个效果果要修改 inclludesslib_commmon.pphp 才才生效的，当当然，不修修改也不会会出错，只只是没有显显示罢了。修改方法：在inclludesslib_commmon.pphp 的的cat_listt函数中找找到$sql = “SSELECCT c.cat_id, c.caat_naame,修改为$sql = “SSELECCT c.cat_id, c.caat_naame, c.caat_deesc,补充一下：在fireefox等等浏览器中中，如果展展开的部分分被遮挡（由由于父级容容器oveerfloowhiddden引引起），在在.my_leftt_cattegorry的样式式中加上 posiitionnabsoolutee即可