这次我们弄的是淘宝的默认搜索框,只要修改下样式就好了,系统默认的模块样式是在assets/stylesheets/global.css中
我们先载入模块。同样是950模块,我们在这里和那个轮播放在一起
<!-- 950通栏0 --> <div class="layout grid-m"> <div class="luenbo_01_modules J_TRegion"> <?php $luenbo_01_modules = array( array('id' => 'luenbo01', domId => "luenbo_01"), // 官方默认轮播 array('shortname' => 'shop.searchInShopHead', 'version' => '1.0-common', domId => "sousuo_01"),//750系统模块 搜索店内宝贝头部版 array('id' => 'luenbo02', domId => "luenbo_02"), // 950图片轮播2模块 ); echo include_modules('luenbo_01_modules', $luenbo_01_modules);//引号里是坑名,后面是变量名 ?> </div> </div>
模块弄好了,我们改下css就好了。
/* ------------------------- 店铺搜索 from search.css ---------------------------- */ /* ---------------------------- 搜索店内宝贝头部版 from search-x.css ---------------- */ /* tshop-pbsm-ssish10c: 模块中心45号模块(shop.searchInShopHead)搜索店内宝贝头部版 */ .shop-search-x{ width:100%; height:38px;clear:both;font-size:13px;} .shop-search-x .bd{ height:22px; padding:7px 15px;border:#e6e6e6 solid 1px;line-height:22px;} .shop-search-x .bd .search-x .form{ float:left;} .shop-search-x .bd .search-x .form label{ float:left; color:#000; padding-right:8px;} .shop-search-x .bd .search-x .form .text{float:left;width:160px; height:20px;color:#333;border:1px solid #e6e6e6; background: none; padding:0 6px;} .shop-search-x .bd .search-x .form .button{ float:left; width:50px; height:21px; text-align:center; color:#FFFFFF; border:0; background:#ff8808 url(../images/body/ss_bg.gif) repeat-x left center; margin:0 18px 0 8px;cursor:pointer; } .shop-search-x .bd .search-x .keys{ float:left; font-weight:bold;} .shop-search-x .bd .search-x .keys a{ color:#000; font-weight:normal;} .shop-search-x .bd .search-x .keys a{ color:#333;} /* ---------------------------- End of 搜索店内宝贝头部版 from search-x.css ---------------- */
要找到这个css样式,只要看那个注释中的(shop.searchInShopHead)【同时我们也发现这个名字和载入的模块中的'shortname'的值是一样的】,在编辑器中用搜索很快就能找到。
好了这个弄好了,我们看下效果图吧