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

更新时间：2024-02-09 21:33:01 阅读量：经典范文大全文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

css横向导航条代码推荐度：
相关推荐

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

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

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

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

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

</ul>

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

.naver{

width:100%; height:70px; background:url('../images/slice.jpg') repeat-x;

}

.naver li{

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

background:url('../images/sprite.jpg') no-repeat;

text-indent:-900px;

overflow:hidden;

}

.naver li:hover{

background:url('../images/sprite.jpg') no-repeat 0 -70px;

}

.naver li:active{

background:url('../images/sprite.jpg') 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(新建文件夹/bjnav.gif) repeat-x bottom bottom;

}

ul{

list-style:none;}

li{

float:left;

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

}

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_hov.gif) no-repeat;

color:#FFFFFF;

text-decoration:underline;}

.a1{

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

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

background:url(新建文件夹/nav_hov.gif)}

</style> </head>

<body>

<div>

</div></body>

</html>

篇三：淘宝旺铺】导航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{background:#000000;}

5.字里加色：

.skin-box-bd .menu-list .menu-selected .link .title{background:#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:#000000;}

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:#000000;}

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(图片连接);}

本文来源：https://www.bwwdw.com/article/vkkb.html

相关文章：

正在阅读：

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

2010黑龙江省驾校考试科目一自动档考试答题技巧05-14

揭开“智能测试”的神秘面纱12-27

我与图书馆作文500字07-09

为祖国喝彩演讲稿word版本（7页）04-16

MATLAB仿真-BPSK调制的03-16

房屋建筑学试题及答案精剖析12-04

那条家门前的小溪作文800字07-17

江苏省农产品质量安全工作考核奖励办法(试行)05-04

2016-2022年中国城市垃圾处理及沼气发电行业运行态势及十三五前景预测报告01-14

上一篇：热干面的来历下一篇：高清美丽香港风景图片