【19】淘宝sdk——入门实战之淘宝默认搜索框修改
这次我们弄的是淘宝的默认搜索框,只要修改下样式就好了,系统默认的模块样式是在assets/stylesheets/global.css中
我们先载入模块。同样是950模块,我们在这里和那个轮播放在一起
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- 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就好了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* ------------------------- 店铺搜索 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'的值是一样的】,在编辑器中用搜索很快就能找到。
好了这个弄好了,我们看下效果图吧
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步