如何用css代码让导航条透明化

如何用css代码让导航条透明化

篇一：切入口CSS教程--第一讲.基于div+css制作精美的导航条效果

切入口()讯：这一节选择教大家如何制作一款精美导航条效果，这也是我们第一期课程发布，为什么第一期选择这期课程，而不是一些基础html，css知识呢，因为导航条是一个网站的灵魂，漂亮的导航条往往能为网页增色不少，而且它的制作简单，并且涉及比较多的知识点，我们旨在学习之前，先让你了解职业web前端开发的流程，以及通过制作简单而又精美导航效果来调动你学习网页制作的热情。在学习基于div/css制作一款精美网页导航条效果之前，我们需要先了解两个问题：

什么是网页导航条？网页浏览时导航条起什么作用?

网站导航（navigation）是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容一般在网站的logo、banner下面或是网页的顶部。快速的使你了解网站的内容分类。

作为切图网()职业web前端开发技术员，我们认为制作一款精美导航条html布局非常重要，在css网页布局中，html结构是首要重要的，其次是css样式，当一个网页的html结构标准和合理对于后面的工作就会相对简单很多。而要写好网页html结构靠的是扎实基本功以及长期web前端开发经验使然。在这里准确的结构应该

这么写:

切入口

切入口

切入口

切入口

切入口

切入口

切入口

其中用到了ul,li标签，ul加上了class=”naver”属性，这就是一个比较标准的导航html结构，这里的ul，li是专用于列表结构的标签，导航也算是是属于列表类结构的。然后我们还要给它加上css样式代码：

.naver{

width:100%; height:70px; background:url(‘../images/’) repeat-x;

}

.naver li{

float:left; display:inline; /*主要用于解决ie6下的兼容问题*/ line-height:70px; width:102px;

background:url(‘../images/’) no-repeat;

text-indent:-900px;

overflow:hidden;

}

.naver li:hover{

background:url(‘../images/’) no-repeat 0 -70px;

}

.naver li:active{

background:url(‘../images/’) no-repeat -102px -70px; } 这便是一个完整的导航条的代码片段了，其中用到了float浮动，图片精灵(背景图片定位技术)，伪类等知识点，感兴趣童鞋可以将代码拷贝到 html文档中查看效果，如果你觉得这一切太麻烦，你可以选择成为我们的订阅用户，你可以自由观看我们所有视频教程，跟我们职业web前端学习如何制作网页，并且可以下载视频课程中的课件，帮助你快速学习：）

篇二：经典导航条div+css代码附图片

经典导航条div+css代码附图片

供初学者参考学习

*{

margin:0px;

padding:0px;}

body{

font-size:14px;

font-family:Arial, Helvetica, sans-serif;}

div{

width:98%;

height:38px;

margin:30px auto 0px auto;

background:url(新建文件夹/) repeat-x bottom bottom; }

ul{

list-style:none;}

li{

float:left;

background:url(新建文件夹/);

}

li a{

text-decoration:none;

color:#000000;

display:block;

width:80px;

height:31px;

line-height:31px;

text-align:center;}

li a:hover{

background:url(新建文件夹/nav_) no-repeat;

color:#FFFFFF;

text-decoration:underline;}

.a1{

background:url(新建文件夹/bgli_) no-repeat} .a2{

background:url(新建文件夹/bgli_) no-repeat} .a3 {

background:url(新建文件夹/nav_)}

首页财经体育军事漫画新闻娱乐爱好链接

篇三：淘宝旺铺导航CSS代码使用修改技巧

淘宝旺铺导航CSS代码使用修改技巧 1.修改导航分类下面的背景色，代码如下： .skin-box-bd .link{background:#000000;} 修改导航分类下面的图片，代码如下：

.skin-box-bd .link{background:url(图片链接);}

2.修改整个导航的背景色

.skin-box-bd .menu-list{background:#000000;} 修改整个导航背景为图片

.skin-box-bd .menu-list{background:url(图片链接);} 3.

修改最右边留下的一小块，2里提到的，代码如下： .skin-box-bd{background:#000000;}

修改成图片的代码如下：

.skin-box-bd{background:url(图片链接);}

4.字外加色：

.skin-box-bd .menu-list .menu-selected .link{backgroun d:#000000;}

5.字里加色：

.skin-box-bd .menu-list .menu-selected .link .title{ba ckground:#000000;}

字外+字里=全部！

----------------------------------------------------------------------------------------

1.导航背景色代码（除去“所有分类”）如下： .menu-list .link{background:#000000;}

2.导航栏文字（除去“所有分类”）如下：

.menu-list .menu .title{color:#颜色代码;font-size:字号px;}

3.“所有分类”的背景色代码如下：

.all-cats .link{background:#000000;}

4.“所有分类”的文字代码如下：

.all-cats .link .title{color:#颜色代码;font-size:字号px;}

最新代码，解决字体改大后导航右侧消失的情况！

代码如下：

.all-cats .link .title{font-size:字号

px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;}

字号最大为21，继续变大右侧导航将消失！该代码还不是很完善，我们会继续研究！

5.二级分类文字代码如下：

.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代

码;font-weight:bold/bolder/normal;}

6.二级分类背景代码如下：

.popup-content{background:#000000;}

7.三级分类文字代码（除去“所有宝贝”分类）如下 .popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}

8.三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体颜色，我们会继续完善该代码！如下

.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;}

9.三级分类背景代码：

.popup-content .cats-tree .snd-pop-inner{background:#0 00000;}

10.一级导航分类（除去“所有宝贝”分类）分隔线颜色代码如下：

.menu-list .menu{border-color:#000000;}

11.一级导航“所有宝贝”分类分隔线颜色代码如下： .all-cats .link{border-color:#000000;}

12.一级导航分类的宽度修改代码如下：

.menu-list .menu{background:#颜

色;margin:0;padding:0px 增加的宽度px;}

13.鼠标滑过一级分类导航文字变换背景色代码如下： .menu-list .menu-hover .link{background:#000000;}

14.鼠标滑过一级分类导航文字变换颜色代码如下：

.menu-list .menu-hover .link .title{color:#FFFFFF;} 15.鼠标滑过二级分类导航文字变换背景色代码如下： .popup-content .cats-tree .cat-hd-hover{background:#00 0000;}

16.鼠标滑过二级分类导航文字变换颜色代码如下： .skin-box-bd .popup-content .cats-tree .cat-hd-hover . cat-name{color:#ff0000;}

17.鼠标滑过三级分类导航文字变换背景色代码如

下： .popup-content .cats-tree .snd-cat-hd-hover{background :#000000;}

18.二级分类上加空间代码如下：

.popup-content .cats-tree{margin:0 0 50px 0;}

19.修改“所有宝贝”右边小图标代码如下： .all-cats .link .popup-icon{background:url(图片连接);}

淘宝导航装修css全解 超赞超详细

一、首先我们进入到店铺的装修页面，将鼠标放在导航上面会出现“编辑”字样，单击，如图 选择“显示设置”选项卡 1.修改导航分类下面的背景色，代码如下： .skin-box-bd .link{background:#000000;}

效果如下 -------------------------------- 默认是黑色的，如果你要别的颜色，只要修改#000000就可以了，颜色对照表地址 https://www.doczj.com/doc/587375535.html,/other/rgb.htm

-------------------------------------------------------------------------- 如果你想要更加个性，而不想只要简单的纯色块的话，可以自己做图片，然后连接上去，代码如下： .skin-box-bd .link{background:url(图片链接);} 效果如下

-------------------------------- 将“图片连接”换成你的图片的连接就可以了，一般都是自己做好然后上传到淘宝图片空间，然后链接就可以了！ 在图片空间点击对应图片下方的“链接”按钮可以直接复制图片链接，替换到代码里就可以了！ 2.修改整个导航的背景色【其实只修改了有分类之外的部分（前面我们已经修改好了分类背景），还有最右边那部分没改到，后面会有修改那里的代码，一步步跟着来就没错了！】代码如下： .skin-box-bd .menu-list{background:#000000;} 效果如下 -------------------------------- 修改颜色的方法同上 -------------------------------------------------------------------------- 修改成图片的代码如下：

竖型导航栏的制作

竖型导航栏的制作 1、新建html文件index.html，使用文本编辑器进行编辑。如下图： 2、在内开始编写导航栏的html代码。使用ul标签建立一个无序列表

• Home
• Hidden Cameras
• CCTV Cameras
• Employee
• Helpful Hints
• F.A.Q
• About Us
• Contact US

• Home
• Hidden Cameras
• CCTV Cameras
• Employee
• Helpful Hints
• F.A.Q
• About Us
• Contact US

效果如下图： 3、为了使得导航栏更加美观我用CSS进行样式设计，此时应在标签里进 行引用。 4、新建CSS文件使用文本编辑器进行编辑 A.应为html页面默认有内、外边距。为方便我们进行样式设计，把所有标 签默认的内、外边距设为0px。 *{ margin:0px; padding:0px; } B.为了使导航栏在页面中间我们通过设置列表所在的