网站半透明导航栏(导航栏透明度)
本文目录一览:
网站首页的导航条怎么显示上面是中文,下面是英文,同时,点击出现半透明的层??
把不带透明层的背景切一小条,然后把透明的那切一小条都让其循环显示。
style
ul,li{padding:0px;margin:0px;}
li{list-style:none;}
.head{width:1000px;height:51px;background:url(images/bd_01.jpg) repeat-x top left;float:left;}
.bg1{width:111px; height:51px; float:left;
background:url(images/bd_08.jpg) repeat-x top left;}
.bg2{width:111px; height:51px; float:left;}
.head p{margin:0;width:111px; float:left;font-size:16px;font-weight:bolder; text-align:center; padding-top:10px;}
.head span{width:111px; float:left; text-align:center;}
.head a p{color:#FFF;}
.head a span{color:#45bbb0;}
/style
ul class="f8ea-f52d-78d9-2f28 head"
li class="f52d-78d9-2f28-8465 bg2" onclick="this.className='bg1';"a href="#"p网站首页/pspanHome/span/a/li
li class="78d9-2f28-8465-54ac bg2" onclick="this.className='bg1';"a href="#"p关于我们/pspanAbout/span/a/li
li class="2f28-8465-54ac-b835 bg2" onclick="this.className='bg1';" a href="#"p产品展示/pspanSHOW/span/a/li
li class="8465-54ac-b835-6da1 bg2" onclick="this.className='bg1';"a href="#"p成功案例/pspanCase/span/a/li
li class="54ac-b835-6da1-202e bg2" onclick="this.className='bg1';" a href="#"p网站首页/pspanzz/span/a/li
li class="b835-6da1-202e-ccbb bg2" onclick="this.className='bg1';" a href="#"pz网站首页/pspanzz/span/a/li
li class="6da1-202e-ccbb-71bd bg2" onclick="this.className='bg1';"a href="#"p新闻中心/pspanNews/span/a/li
li class="202e-ccbb-71bd-22e8 bg2" onclick="this.className='bg1';"a href="#"p网上预约/pspanReservation/span/a/li
li class="ccbb-71bd-22e8-a96c bg2" onclick="this.className='bg1';"a href="#"p联系我们/pspanContact Us/span/a/li
/ul
这是在本页测试的
如果你用的是同一个头,那么可以不写onclick事件,直接再对应的页给对应的li设置背景图即可。
导航栏怎么设置成透明的 像这样
看不到你的图。
不过如果是半透明的话,在高版本的浏览器下,可以用
background:rgba(255,255,255,0.5)
这样的形式设置透明的背景。
网页导航栏透明效果怎么做出来
background:rgba(255,255,0,0.3)
加CSS代码就行。最后一个0.3表示透明度
淘宝新版旺铺导航半透明CSS代码是什么
1:登陆淘宝卖家中心,进入淘宝店铺装修后台页面,鼠标放在导航栏位置,出现编辑窗口,
2:点击编辑,找到“显示设置”,点击后看到白框就是CSS自定义框。
3:将我们上面提供的透明代码复制进去,导航栏就会透明显示了
简单的淘宝新旺铺自定义CSS导航透明背景代码:
.skin-box-bd{background:none;}
.menu-list{background:none;}.link{background:none;}
.menu{background:none;}
.all-cats{background:none;}
.all-cats{display:none;}
.menu-list .menu .title{color:#CF6AA6;}
完全的淘宝新旺铺自定义CSS导航透明背景代码:
.skin-box-bd{background:none;border:none;}
.menu-list{background:none;}
.link{background:none;border:none;}
.menu{background:none;}
.all-cats{background:none;}
.skin-box-bd .all-cats .link{border:none;}
.skin-box-bd .menu-list .menu{border:none;}
.menu-list .menu .title{color:#000000;font-size:15px;font-weight:bold;}
.all-cats .link .title{color:#000000;font-size:15px;font-weight:bold;}
.skin-box-bd .menu-list .menu-selected .link{background:none;}
.skin-box-bd .menu-list .menu-selected .link .title{background:none;}