css模板(淘宝导航条css模板)

css模板

CSS是CascadingstyleSheets的简称，中文译作“层叠款式表单”，我把它叫作“层叠款式表”，我感到这样顺口一
点，没别的意思。实际上它是一组款式。你或许对CSS这个名词比较陌生，实际上不论你用InternetExplorer仍是
NetscapeNavigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有运用过CSS的网页或许不好找。不论你用什么工
具软件制作网页，都有在有意无意地运用CSS。用好CSS能使你的网页愈加简炼，为什么相同内容的网页，有的人做出来有
几十KB，而高手做出来只有十几KB，CSS在其间的效果是显而易见的。我把我在运用CSS中的一些小经验以及一些网友来信
发问的问题整理出来，供诸位参阅。
1、CSS在网页制作中一般有三种方法的用法，那么具体在运用时该选用哪种用法？
当有多个网页要用到的CSS，选用外连CSS文件的方法，这样网页的代码大大削减，修正起来十分便利；只在单个网页
中运用的CSS，选用文档头部方法；只有在一个网页一、两个地方才用到的CSS，选用行内刺进方法。
2、CSS的三种用法在一个网页中要以混用吗？
三种用法能够混用，且不会形成紊乱。这就是它为什么称之为“层叠款式表”的原因，浏览器在显示网页时是这样处
理的：先查看有没有行内刺进式CSS，有就履行了，针对本句的其它CSS就不去管它了；其次查看头部方法的CSS，有就履行
了；在前两者都没有的情况下再查看外连文件方法的CSS。因而可看出，三种CSS的履行优先级是：行内刺进式、头部方
式、外连文件方法。
3、在Dreamweaver3中怎么使外部文件式CSS？
在Dreamweaver3中运用外连文件式CSS并没有特殊要求，相同是用记事本创立一个*.css文件，在网页的与
之间加上一句这样的代码：名）”type=”text/css”>就行了。
4、怎么用Dreamweaver3快速创立CSS外连式文件？
对于一个初接触CSS的网页设计人员来讲，要用记事之类的编辑器，去创立一个CSS外连式文件是相当困难的。因为
Dreamweaver3对CSS支持的很好，用它来帮助就轻松多了。具体能够这样操作：
1）先在纸上写好在网站的网页中或许要用到的格称号，然后在Dreamweaver3的编辑窗中调出CSS面板，一个一个地定
义，并在一个空白页上适当地写一点相关内容，边界说边试用，效果不满意，当即修正；
2）悉数界说好后，再用记事本创立一个空的CSS外连式文件，把在与之间的那段界说好的CSS复制
到CSS文件中去，就大功告成了。整个进程就是点鼠标，便利吧？
5、在Dreamweaver3中选用行内刺进式CSS要手动写代码吗？
不必！先用CSS面板界说好要用的CSS，然后，在要刺进CSS的标记刺进：style=””，再把你刚才界说的CSS从
后面拖到这个双引号中来，把花括号以外的部分删去就行了。
6、在方档头部方法和外连文件方法的CSS中都有“”，好象没什么用，不要能够吗？
这一对东东的效果是为了不引起低版本浏览器的过错。假如某个履行此页面的浏览器不支持CSS，它将忽略其间的内
容。虽然现在运用不支持CSS浏览器的人已很少了，因为互联网上几乎什么或许都会发生，所以仍是藏着为妙。
7、怎么给一部分文字加背景色？
给文字加上不同色彩，在DW3中只要在特点面板上选取文字的色彩就行了，十分便利，但要给部分文字加不同的背景色
却没有相应的功能，我们能够先做一个界说背景色的CSS（如：bgstyle），在DW3中点几下鼠就完成了。如一个界说淡黄色
淘宝导航条css模板
让他人的导航栏CSS代码为你所用的办法
1.首要找到他人店肆的主页，右键单击导航栏空白处，检查源代码。
2.打开以后看到的代码
假如没有找到这个标识说明这是用sdk高级模版装饰的，所以就没有代码了。
找到这几个标识，这儿便是咱们要找的CSS文件。下面的便是咱们要找的CSS文件。跟着咱们将它用浏览器打开，或许下载个notepad程序，双击打开就可以看到相应的代码。
代码
3.打开文件，点击“替换”
替换
4.然后复制下面这段代码#page#content.tshop-pbsm-shop-nav-ch
张贴进查找内容框里，替换为后边的框不要填写，直接点击”悉数替换”按钮。那么，这样的CSS代码就可以为咱们所用了。
张贴代码
5.最后，咱们把CSS代码做好后，张贴到自己的店肆里，却发现分类是没有底色的。处理办法不难，咱们只需要设置一下页头布景就可以了。
淘宝导航栏

淘宝CSS导航参考代码

以下文字内容可以一同复制运用，不会影响到运用效果
/*导航条布景色*/.skin-box-bd.menu-list{background:nonerepeatscroll00#00ad08;}
/*主页/店肆动态布景色*/.skin-box-bd.menu-list.link{background:nonerepeatscroll00#00ad08;}
/*主页/店肆动态右边线*/.skin-box-bd.menu-list.menu{border-right:1px#006205solid;}
/*主页/店肆动态文字色彩*/.skin-box-bd.menu-list.menu.title{color:#ff0000}
/*一切分类布景色*/.all-cats.link{background:nonerepeatscroll00#00ad08;}
/*一切分类右边线*/.all-cats.link{border-right:1px#006205solid;}
/*一切分类文字色彩*/.skin-box-bd.all-cats.title{color:#ff0000}
一切分类布景，可以用图片：.skin-box-bd.link{background:url(图片链接);}
修正整个导航的布景色布景：.skin-box-bd.menu-list{background:#000000;}
修正最右边留下的一小块：.skin-box-bd{background:#000000;}
修正成图片的代码如下：.skin-box-bd{background:url(图片链接);}
字外：.skin-box-bd.menu-list.menu-selected.link{background:#000000;}
字里：.skin-box-bd.menu-list.menu-selected.link.title{background:#000000;}
字外+字里=悉数！
1.导航布景色代码（除掉“一切分类”）如下：.menu-list.link{background:#000000;}
导航栏文字（除掉“一切分类”）如下：.menu-list.menu.title{color:#色彩代码;font-size:字号px;}
“一切分类”的布景色代码如下：.all-cats.link{background:#000000;}
“一切分类”的文字代码如下：.all-cats.link.title{color:#色彩代码;font-size:字号px;}
最新代码，处理字体改大后导航右侧消失的状况！代码如下：.all-cats.link.title{font-size:字号px;}.all-cats.link{background:#3BAFFF;margin:0;padding:0px3px;}
二级分类文字代码如下：.popup-content.cats-tree.fst-cat.cat-name{font-size:字号px;color:#色彩代码;font-weight:bold/bolder/normal;}
二级分类布景代码如下：.popup-content{background:#000000;}
三级分类文字代码（除掉“一切宝物”分类）如下.popup-content.cats-tree.snd-pop-inner{font-size:字号px;color:#色彩代码;font-weight:bold/bolder/normal;}
三级分类文字代码（包括“一切宝物”分类字体大小）这样就无法改动字体色彩，咱们会继续完善该代码！如下.popup-content.cats-tree.snd-pop-inner{font-size:字号px;color:#色彩;}
三级分类布景代码：.popup-content.cats-tree.snd-pop-inner{background:#000000;}
一级导航分类（除掉“一切宝物”分类）分隔线色彩代码如下：.menu-list.menu{border-color:#000000;}
一级导航“一切宝物”分类分隔线色彩代码如下：.all-cats.link{border-color:#000000;}
一级导航分类的宽度修正代码如下：.menu-list.menu{background:#色彩;margin:0;padding:0px添加的宽度px;}
鼠标滑过一级分类导航文字改换布景色代码如下：.menu-list.menu-hover.link{background:#000000;}
鼠标滑过一级分类导航文字改换色彩代码如下：.menu-list.menu-hover.link.title{color:#FFFFFF;}
鼠标滑过二级分类导航文字改换布景色代码如下：.popup-content.cats-tree.cat-hd-hover{background:#000000;}
鼠标滑过二级分类导航文字改换色彩代码如下：.skin-box-bd.popup-content.cats-tree.cat-hd-hover.cat-name{color:#ff0000;}
鼠标滑过三级分类导航文字改换布景色代码如下：.popup-content.cats-tree.snd-cat-hd-hover{background:#000000;}
二级分类上加空间代码如下：.popup-content.cats-tree{margin:0050px0;}
修正“一切宝物”右边小图标代码如下：.all-cats.link.popup-icon{background:url(图片衔接);}
修正二级分类右侧图标代码如下（有三级分类才会显示）：.popup-content.cats-tree.fst-cat-icon{background:url(图片衔接);}
在三级分类前加上小块白色代码如下：.popup-content.cats-tree.snd-cat-icon{display:block;height:3px;width:3px;}