这里我们是用的都是系统模块,所以就不用在控制台上创建了,我们直接在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,这里我偷懒,是直接下载人家修改好的数据文件,好了,我们看下效果图吧。
注意看这个的宝贝分类是修改了数据文件的,就不存在背景图缺失的问题了。