很多店主會(huì)在店鋪首頁(yè)促銷區(qū)內(nèi) 放入很多促銷文字、活動(dòng)公告。
為達(dá)到顯目的效果,經(jīng)常是字體很大,很占面積,且版面難看。
下面我要教大家使用滾動(dòng)條代碼,這樣就可以把你的促銷文字、公告信息統(tǒng)統(tǒng)扔到里面。
首先先申明一下,看完帖子還不會(huì)的同學(xué)請(qǐng)跟帖提問(wèn)哦,大家都有自己的時(shí)間安排,
請(qǐng)諒解我不能一一解答!
接下來(lái)我們先來(lái)看看滾動(dòng)條的效果吧!
*屬性設(shè)置: WIDTH: 148;HEIGHT: 146; 根據(jù)使用的位置,可調(diào)整寬度和高度.
*OVERFLOW: scroll; 顯示縱橫滾動(dòng)條.上部的演示均屬設(shè)置為scroll的界面. 但一般都設(shè)置為:auto(需要時(shí)才顯示)
*BACKGROUND-COLOR: transparent;
滾動(dòng)框內(nèi)部背景顏色.transparent為透明色.其他可使用顏色代碼.
*上面就是滾動(dòng)參數(shù)設(shè)置細(xì)節(jié)!還可以這個(gè)滾動(dòng)條里加入圖片哦~
接下來(lái)我就把幾款比較好看的滾動(dòng)條代碼分享給大家咯~
代碼在滾動(dòng)條里面哦,復(fù)制就可以!
<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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</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">
這里輸入內(nèi)容
</div>
★ 選擇好滾動(dòng)條樣式后,我們就要來(lái)設(shè)置參數(shù)啦!最簡(jiǎn)單的就是修改一下寬、高就可以了。
*屬性設(shè)置: WIDTH: 148;HEIGHT: 146; 根據(jù)使用的位置,可調(diào)整寬度和高度.
*OVERFLOW: scroll; 顯示縱橫滾動(dòng)條.上部的演示均屬設(shè)置為scroll的界面.
但一般都設(shè)置為:auto(自動(dòng)的意思,只有您的文字超過(guò)了滾動(dòng)條設(shè)置的高度,
才會(huì)出現(xiàn)滾動(dòng)條哦)這點(diǎn)很關(guān)鍵哦~
一般我們都是把OVERFLOW: scroll;設(shè)置成OVERFLOW: auto;!
*BACKGROUND-COLOR: transparent;
滾動(dòng)框內(nèi)部背景顏色.transparent為透明色.其他可使用顏色代碼.(顏色代碼可以在百度里面搜索)
只要把樣本里面的代碼復(fù)制到你自定義內(nèi)容區(qū)的代碼編輯內(nèi),然后就可以回到編輯區(qū)中雙擊輸入你要寫的內(nèi)容了~
解答區(qū):
問(wèn)1:設(shè)置高跟寬怎么設(shè)置啦?參數(shù)是?
答:寬、高,就是代碼中的width、height,大家只要修改下面紅色部分部分的數(shù)值就可以了!
<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">這里輸入內(nèi)容</div>
Ps:看到很多同學(xué)都是直接把代碼復(fù)制到回復(fù)編輯框里,這樣是不能顯示滾動(dòng)條的哦,
一定要放在代碼編輯區(qū)里面哦~點(diǎn)這個(gè)進(jìn)入代碼編輯,然后再點(diǎn)一下回來(lái)編輯區(qū),
再雙擊就可以輸入內(nèi)容了!
樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站:百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來(lái)源: 淘寶店鋪促銷區(qū)滾動(dòng)條代碼及使用教程