【23】淘宝sdk——入门实战之系统模块宝贝分类、宝贝排行榜、交流区
这里我们是用的都是系统模块，所以就不用在控制台上创建了，我们直接在index.php中写模块吧
<!-- 190&750分栏 -->
<div class="layout grid-s5m0">
<div class="col-main">
<div class="jiaoliu01_modules main-wrap J_TRegion">
<?php $jiaoliu01_modules = array(
array('shortname' => 'shop.forumShow', 'version' => '1.0-common', domId => "index-06"),//750系统模块 交流区
);
echo include_modules('jiaoliu01_modules', $jiaoliu01_modules);
?>
</div>
</div>
<div class="col-sub baobei_fenlei190_modules J_TRegion">
<?php $baobei_fenlei190_modules = array(
array('shortname' => 'shop.itemCategory', 'version' => '1.0-common', domId => "xt3_sub1"),//190系统模块 宝贝分类
array('shortname' => 'shop.topList', 'version' => '1.0-common', domId => "xt12_sub1"),//190系统模块 宝贝排行榜
);
echo include_modules('baobei_fenlei190_modules', $baobei_fenlei190_modules);
?>
</div>
</div>
写好这个，我们就不用在写什么功能了，这个是系统默认的模块，我们不能添加功能，所以我们就把那个系统默认的样式给改了，模式的样式不是很合适我们的现在的模板的风格，系统模块的样式在global.css中，我们直接找到这个2个模块的样式修改就好了
这里我就直接上我自己写好的样式，如下（注意，这里是代码在最下面，上面的不是，这里我们只要注意css用注释的宝贝分类的名字和index.php中模块的shortname的值）
/* 宝贝分类 shop.itemCategory 1.0-common
=====================================================================================*/
.tshop-pbsm-sic10c .shop-category .hd{height:35px;border:#e6e6e6 solid 1px;border-bottom:#ff8808 solid 3px;overflow: hidden;}
.tshop-pbsm-sic10c .shop-category .hd h3{font-size:14px;font-weight:bold;padding-left:10px;color:#ff8808;line-height:35px;}
.tshop-pbsm-sic10c .shop-category .bd{border: 1px solid #e6e6e6;margin-bottom:10px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats{width:168px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats h4{background:#EFEFEF url(../images/gonggao/cats.png) no-repeat -17px 9px;height:22px;line-height:22px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats h4.collapse { background-position: -7px -22px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats .expand h4 { background-position: 3px -52px;border-bottom:#ff8808 solid 2px;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats .expand ul.cat-bd {margin:0;padding:0;text-align:center;}
.tshop-pbsm-sic10c .shop-category .bd ul.cats .expand ul.cat-bd li{ margin-top:3px;height:22px;background-color:#EFEFEF;}
/* ----------------------------- 宝贝排行榜 from rank.css -------------------------- */
/* tshop-pbsm-stl10c: 模块中心31号模块 (shop.topList) 宝贝排行榜 */
.tshop-pbsm-stl10c .shop-rank .hd{height:35px;border:#e6e6e6 solid 1px;border-bottom:#ff8808 solid 3px;overflow: hidden;}
.tshop-pbsm-stl10c .shop-rank .hd h3{font-size:14px;font-weight:bold;padding-left:10px;color:#ff8808;line-height:35px;}
.tshop-pbsm-stl10c .shop-rank .bd{border: 1px solid #e6e6e6;margin-bottom:10px;}
.tshop-pbsm-stl10c .shop-rank .tab-nav{height:27px;_margin-bottom:-1px;position:relative;z-index:1;}
.tshop-pbsm-stl10c .shop-rank .tab-nav li{float:left;height:26px;margin-left:5px;border:1px solid #e6e6e6;-moz-border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px;background-color:#f0f7ff;}
.tshop-pbsm-stl10c .shop-rank .tab-nav span{display:block;line-height:28px;padding:0px 5px;cursor:pointer;}
.tshop-pbsm-stl10c .shop-rank .tab-nav .selected{background-color:#FFFFFF;border-bottom:1px solid #FFF;}
.tshop-pbsm-stl10c .shop-rank .tab-nav .selected span{color:#000;}
.tshop-pbsm-stl10c .shop-rank .rank-panels{border-top:1px solid #e6e6e6;text-align:center;}
.tshop-pbsm-stl10c .shop-rank .rank-panel ul{padding:4px 8px;margin-bottom:15px;}
.tshop-pbsm-stl10c .shop-rank .rank-panel ul li{padding:9px 0px;border-bottom:dashed 1px #eee;height:42px;overflow:hidden;}
.tshop-pbsm-stl10c .shop-rank .no-collect,
.tshop-pbsm-stl10c .shop-rank .no-traded{
padding:5px 15px;
border:1px solid #ffd863;
zoom:1;
display:inline-block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-image: -moz-linear-gradient(top, #fef7ca, #fff3a9); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fef7ca),color-stop(1, #fff3a9)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fef7ca', EndColorStr='#fff3a9'); /* IE6+*/
}
.tshop-pbsm-stl10c .shop-rank .no-collect a,
.tshop-pbsm-stl10c .shop-rank .no-traded a{line-height:26px;text-decoration:none;color:#000000;}
.tshop-pbsm-stl10c .shop-rank .no-collect a:hover, .tshop-pbsm-stl10c .shop-rank .no-traded a:hover{color:#ff7700;}
.tshop-pbsm-stl10c .shop-rank .pic{float:left;margin-right:10px;border:1px solid #CCCCCC;height:40px;text-align:center;width:40px;}
.tshop-pbsm-stl10c .shop-rank .pic a{display:table-cell;height:40px;width:40px;*display:block;*font-size:30px;*line-height:1;text-align:center;
vertical-align:middle;}
.tshop-pbsm-stl10c .shop-rank .pic img{vertical-align:middle;}
.tshop-pbsm-stl10c .shop-rank .desc,
.tshop-pbsm-stl10c .shop-rank .price {float:left;width:120px;height:14px;line-height:1.2;text-align:left;overflow:hidden;}
.tshop-pbsm-stl10c .shop-rank .price{font-size:13px;color:#FF5500;}
.tshop-pbsm-stl10c .shop-rank .price i{background-position:-96px -40px;}
.tshop-pbsm-stl10c .shop-rank .collecter,.tshop-pbsm-stl10c .shop-rank .sale {float:left;width: 120px;overflow: hidden;line-height:1.4;}
.tshop-pbsm-stl10c .shop-rank .collecter i,.tshop-pbsm-stl10c .shop-rank .sale i{float:left;margin-right:3px;}
.tshop-pbsm-stl10c .shop-rank .collecter i{background-position:-80px -56px;}
.tshop-pbsm-stl10c .shop-rank .sale i{background-position:-96px -56px;}
/* == 定制样式（不同场景下的CSS） ==*/
.col-sub .tshop-pbsm-stl10c .shop-rank .bd,
.col-extra .tshop-pbsm-stl10c .shop-rank .bd{
padding: 3px 0px 15px;
}
/* == END OF 定制样式（不同场景下的CSS） ==*/
/* ----------------------------- End of 宝贝排行榜 from rank.css -------------------- */
交流区的css：
/* ---------------------------- 交流区 bbs.css ---------------------------- */
/* tshop-pbsm-sfs10c: 模块中心8号模块（shop.forumShow）交流区 */
.tshop-pbsm-sfs10c .shop-bbs .hd {position: relative;z-index: 1;height:35px;border:#e6e6e6 solid 1px;border-bottom:#ff8808 solid 3px;overflow: hidden;}
.tshop-pbsm-sfs10c .shop-bbs .hd h3{font-size:14px;font-weight:bold;padding-left:10px;color:#ff8808;line-height:35px;}
.tshop-pbsm-sfs10c .shop-bbs .bd{border-right: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;margin-bottom:10px;}
.tshop-pbsm-sfs10c .shop-bbs .handle {position: absolute;z-index: 1;right: 5px;top: 3px;}
.tshop-pbsm-sfs10c .shop-bbs tbody tr .discuss-content{width:590px;}
.tshop-pbsm-sfs10c .shop-bbs table .date{margin-left: 1em;color: #808080;}
.tshop-pbsm-sfs10c .shop-bbs table dl {overflow: hidden;*zoom: 1;margin: 0 10px 5px 0;padding:3px 3px 2px 5.5em;border: 1px solid #ffe5a8;
background-color: #ffffcf;}
.tshop-pbsm-sfs10c .shop-bbs dl dt{float: left;margin-left:-5em;color: #848484;_display: inline;}
.tshop-pbsm-sfs10c .shop-bbs dl dd{float: left;width:585px;}
.tshop-pbsm-sfs10c .shop-bbs .reply td{padding-top:0;}
.tshop-pbsm-sfs10c .shop-bbs .line td{border-bottom:1px solid #ddd;word-break:break-all;}
.tshop-pbsm-sfs10c .shop-bbs table {width:100%;}
.tshop-pbsm-sfs10c .shop-bbs table th, .tshop-pbsm-sfs10c .shop-bbs table td {padding:4px 10px 3px 4px;}
.tshop-pbsm-sfs10c .shop-bbs thead th {border-bottom:1px solid #cbcbcb;text-align:center;color:#808080;}
.tshop-pbsm-sfs10c .shop-bbs tbody .message{padding-right:5px;}
.tshop-pbsm-sfs10c .shop-bbs tbody .user{width:80px;}
.tshop-pbsm-sfs10c .shop-bbs tbody .detail{width:80px;text-align:right}
.tshop-pbsm-sfs10c .shop-bbs tbody td {color:#000;padding:8px 0px 7px;word-break:break-all;word-wrap:break-word;}
.tshop-pbsm-sfs10c .shop-bbs tbody .message a {padding-left:16px;line-height:16px;}
.tshop-pbsm-sfs10c .shop-bbs tbody .user,.tshop-pbsm-sfs10c .shop-bbs .shop-discuss-table .detail {vertical-align:middle;text-align:center;}
.tshop-pbsm-sfs10c .shop-bbs .shop-discuss-table .detail{vertical-align:middle;}
.tshop-pbsm-sfs10c .shop-bbs tbody .even {background:#f5f5f5;}
.tshop-pbsm-sfs10c .shop-bbs table a {color:#3366cc;}
/* ---------------------------- End of 交流区 from bbs.css ---------------------------- */
这样，我们就可以看效果图了，但是这里有一个小问题，就是宝贝分类它又一个背景图，但是这个图片有不存在，就不照成，图片缺失，但是文字还是在的，这里我在网上也找了答案，只要修改下，系统的数据文件就好了,文件是db文件下的sdk_dc_modules.csv，这里我偷懒，是直接下载人家修改好的数据文件，好了，我们看下效果图吧。
注意看这个的宝贝分类是修改了数据文件的，就不存在背景图缺失的问题了。