很多店主會在店鋪首頁促銷區內 放入很多促銷文字、活動公告。
為達到顯目的效果,經常是字體很大,很占面積,且版面難看。
下面我要教大家使用滾動條代碼,這樣就可以把你的促銷文字、公告信息統統扔到里面。
首先先申明一下,看完帖子還不會的同學請跟帖提問哦,大家都有自己的時間安排,
請諒解我不能一一解答!
接下來我們先來看看滾動條的效果吧!
*屬性設置: WIDTH: 148;HEIGHT: 146; 根據使用的位置,可調整寬度和高度.
*OVERFLOW: scroll; 顯示縱橫滾動條.上部的演示均屬設置為scroll的界面. 但一般都設置為:auto(需要時才顯示)
*BACKGROUND-COLOR: transparent;
滾動框內部背景顏色.transparent為透明色.其他可使用顏色代碼.
*上面就是滾動參數設置細節!還可以這個滾動條里加入圖片哦~
接下來我就把幾款比較好看的滾動條代碼分享給大家咯~
代碼在滾動條里面哦,復制就可以!
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
這里輸入內容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
這里輸入內容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
這里輸入內容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
這里輸入內容
</div>
<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
這里輸入內容
</div>
★ 選擇好滾動條樣式后,我們就要來設置參數啦!最簡單的就是修改一下寬、高就可以了。
*屬性設置: WIDTH: 148;HEIGHT: 146; 根據使用的位置,可調整寬度和高度.
*OVERFLOW: scroll; 顯示縱橫滾動條.上部的演示均屬設置為scroll的界面.
但一般都設置為:auto(自動的意思,只有您的文字超過了滾動條設置的高度,
才會出現滾動條哦)這點很關鍵哦~
一般我們都是把OVERFLOW: scroll;設置成OVERFLOW: auto;!
*BACKGROUND-COLOR: transparent;
滾動框內部背景顏色.transparent為透明色.其他可使用顏色代碼.(顏色代碼可以在百度里面搜索)
只要把樣本里面的代碼復制到你自定義內容區的代碼編輯內,然后就可以回到編輯區中雙擊輸入你要寫的內容了~
解答區:
問1:設置高跟寬怎么設置啦?參數是?
答:寬、高,就是代碼中的width、height,大家只要修改下面紅色部分部分的數值就可以了!
<div style="WIDTH:148;HEIGHT:146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll;
scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333;
scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919;
scrollbar-arrow-color: #CCCCCC">這里輸入內容</div>
Ps:看到很多同學都是直接把代碼復制到回復編輯框里,這樣是不能顯示滾動條的哦,
一定要放在代碼編輯區里面哦~點這個進入代碼編輯,然后再點一下回來編輯區,
再雙擊就可以輸入內容了!
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源: 淘寶店鋪促銷區滾動條代碼及使用教程