我想问下css怎么让导航条变透明呢？能给个代码范例吗
CSS设置透明度主要用到了opacity属性。下面简单给你一个范例代码。HTML部分代码&div&id=&butouming&&这是不透明&/div&
&div&id=&touming&&这是透明&/div&CSS部分代码#butouming{&width:500&height:40&margin:0px&&background:#0099FF;&text-align:&line-height:30}
#touming{&width:500&height:40&margin:0px&&background:#0099FF;&opacity:&0.5;&margin-top:20&text-align:line-height:30}最终效果图片青岛星网提醒：opacity实现背景透明，文字也变透明了就。实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)IE专属滤镜&filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)
回答者： -
| 小伙伴2条补充回答css3的rgba兼容性：IE6、7、8不支持，IE9及以上版本和标准浏览器都支持CSS 透明全兼容的解决方案设置透明背景，文字不透明，可采用的属性有rgba和IE的专属滤镜filter:Alpha，其兼容性如下图所示：觉得：IE6、7可以彻底抛弃了，现在使用的已经非常少了，可以忽略不计了。
回答者： -div css导航样式非常漂亮
下载资源()次
阅读次数()次
发布时间：
用法简介：
div css导航样式非常漂亮WEB2.0导航样式
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 简单的代码布局实现导航条
一个蓝色主题的导航条布局案例，本小实例，采用DIV CSS实现。同时不用图片做背景，直接使用背景色实现，鼠标经过悬停对应栏目名称是对应背景蓝色变深。
导航条部分效果截图
一般导航条采用ul li列表布局，这里也不例外DIVCSS5实例也采用列表标签+ 。
一、布局思维思考
在实际布局项目中，一般不会只使用一次，避免干扰其他地方使用ul li布局，避免对ul li设置样式影响其他地方，所以特地这里对ul设置一个#nav命名（一般导航条以nav或menu为，这里选择nav），假如导航条宽度100%全屏或固定均可，这里就由ul#nav控制，这里就设置100%全屏宽度蓝色背景。
这里一个技术点，对ul里的li设置排成一排所以需要设置一个让li排成一排，从而让li并排布局。
然后需要对ul li里的a标签设置:block的，但a父级li不设置具体宽度，所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。
具体布局高度、颜色值、栏目间距距离均需要通过软件获得（相信参加同学都能使用软件获得准确严谨的样式值）
二、具体案例div css代码
在引人DIVCSS5初始化模板基础上进行案例代码布局。
新增各代码如下：
1、CSS代码：
ul#nav{&width:100%;&height:60&background:#00A2CA;margin:0&auto}&ul#nav&li{display:&height:60px}&ul#nav&li&a{display:inline-&padding:0&20&height:60&line-height:60&color:#FFF;&font-family:&\5FAE\8F6F\96C5\9ED1&;&font-size:16px}&ul#nav&li&a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/&
这里ul和#nav紧贴没有空格，代表#nav只针对ul标签设置，标签只有ul标签使用id=&nav&设置样式才能生效。
以上代码没有在ul外再设置DIV，这样可以节约一个DIV实现同样布局。
&id=&nav&&&href=&/&首页&&href=&/html/&HTML教程&&href=&/rumen/&CSS基础&&href=&/css-tool/&CSS开发工具&&href=&/css-texiao/&CSS特效&&href=&/wenji/&CSS问题&&
3、效果截图
CSS+DIV布局简单大方实用通用导航条在浏览器中效果截图
&!DOCTYPE&html&&&&charset=&utf-8&&&小小简单大方通用导航条&DIVCSS5实例&&href=&images/style.css&&rel=&stylesheet&&type=&text/css&&&&&&&id=&nav&&&href=&/&首页&&href=&/html/&HTML教程&&href=&/rumen/&CSS基础&&href=&/css-tool/&CSS开发工具&&href=&/css-texiao/&CSS特效&&href=&/wenji/&CSS问题&&&&
5、完整CSS源代码：
@charset&&utf-8&;&/*&DIVCSS5-CSS初始化模板-&*/&body,&div,&ul,&li{margin:0;&padding:0;font-style:&font:12px/22px&&\5B8B\4F53&,Arial,&Helvetica,&sans-serif}&/*&\5B8B\4F53&代表&宋体，更多中文字体转&Unicode&/jiqiao/j325.shtml&*/&ol,&ul&,li{list-style:none}&img&{border:&0;&vertical-align:middle}&body{color:#000000;background:#FFF;&text-align:center}&.clear{clear:height:1width:100%;&overflow:&margin-top:-1px}&a{color:#000000;text-decoration:none}&&a:hover{color:#BA2636}&&.red&,.red&a{&color:#F00}&.lan&,.lan&a{&color:#1E51A2}&.pd5{&padding-top:5px}&.dis{display:block}&.undis{display:none}&&ul#nav{&width:100%;&height:60&background:#00A2CA;margin:0&auto}&ul#nav&li{display:&height:60px}&ul#nav&li&a{display:inline-&padding:0&20&height:60&line-height:60&color:#FFF;&font-family:&\5FAE\8F6F\96C5\9ED1&;&font-size:16px}&ul#nav&li&a:hover{background:#0095BB}&
三、在线演示与下载
1、查看案例
2、打包下载
下载HTML+CSS文件
下载PSD美工图
如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 09:43
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台html中如何让导航栏不动，在点击一个时只改变下面的页面？ - 知乎9被浏览6366分享邀请回答22 条评论分享收藏感谢收起1添加评论分享收藏感谢收起}