如何用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.