您好,欢迎来到来什七淘网,为淘宝店主提供淘宝装修最全教程,打造属于自己的个性开店!

网站地图|TAG标签 | 淘宝装修开店交流QQ群:436606810

当前位置:什七淘 > 淘宝装修教程 > > 旺铺装修必修课【DIV多彩滚动条制作】

旺铺装修必修课【DIV多彩滚动条制作】

大家好,烈日当空,酷暑难耐,实在是没法午休,特地花了些时间编写了这个教程给大家分享,挥泪热荐吶!希望能给大家丝丝凉意!从此你们的店铺装修可以DIY了.可以用在左侧功能栏或右侧促销栏及任何地方.


 

这个是演示窗口:
开通旺铺功能,可以自添加模块,书写代码,给店铺装修提供了很大的空间。
现在我给大家推荐一个非常好看的“DIV多彩滚动条”,可以根据自己的喜好,搭配不同的颜色,非常适合用来装饰旺铺左侧功能栏-右侧促销栏,极具个性,大大提高店铺的品味!
只要把下面各滚动条旁边的代码复制,在HTML编辑状态下粘贴到原有代码里就好了, 回到设计编辑状态,双击滚动条框输入文字即可!不过要注意调整宽度跟高度哦!

以下是我为您搭配的一些样式,喜欢的话可以直接套用@

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-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-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-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
这里输入内容
</div>

<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-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>


 

属性设置:

WIDTH: 390;HEIGHT: 139; 根据使用的位置,可调整宽度和高度.

OVERFLOW: scroll;显示纵横滚动条.上部的演示均属设置为scroll的界面.但一般都设置为:auto(需要时才显示) BACKGROUND-COLOR: transparent;滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码 color: #FFFEEE;滚动条各个部位的颜色设置.可以根据自己界面的需求设置颜色.

望大家踊跃回帖哦!

本文地址:http://www.shenqitao.com/tbzxjc/2533.html,转载请说明出处,谢谢!

317淘