半透明导航栏css代码,纯CSS实现的紫罗兰风格导航条效果代码

本文实例讲述了纯CSS实现的紫罗兰风格导航条效果。分享给大家供大家参考。具体如下：

这是一款紫罗兰风格CSS导航条，相信你会喜欢，不信就点运行看一下吧，很经典的CSS菜单。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

CSS导航条

body {margin:0;padding:0;font: bold 11px/1.5em Arial;}

img {border: none;}

#roScripts_m1 {float:left;width:100%;background:#F6ECFD;

font-size:96%;line-height:1.5;border-bottom:3px solid #CD86F5;}

#roScripts_m1 ul {margin:0;padding:100px 10px 0 25%;list-style:none;}

#roScripts_m1 li {display:inline;margin:0;padding:0;}

#roScripts_m1 a {float:left;background:url(images/left3.gif) no-repeat left top;

margin:0;padding:0 0 0 4px;text-decoration:none;}

#roScripts_m1 a span {float:left;display:block;background:url(images/right3.gif)

no-repeat right top;padding:5px 25px 4px 25px;color:#fff;}

#roScripts_m1 a span {float:none;}

#roScripts_m1 a:hover span {color:#591333;}

#roScripts_m1 a:hover {background-position:0% -42px;}

#roScripts_m1 a:hover span {background-position:100% -42px;}

#roScripts_m1 #current a {background-position:0% -42px;}

#roScripts_m1 #current a span {background-position:100% -42px;color:#591333}

.clear {clear:left}

网站首页
网页特效
最新更新
留言板
广告联系

希望本文所述对大家的CSS网页设计有所帮助。

半透明导航栏css代码,纯CSS实现的紫罗兰风格导航条效果代码相关推荐

html导航栏点击不能跳转,无法单击导航栏中的链接CSS HTML
不确定是否允许您链接您的网站,但是如果允许. 因此,我可以将所有链接悬停在导航栏中,但我无法点击它们,并且S的图片是可移动的,但无法点击,我做错了什么?无法单击导航栏中的链接CSS HTML Nick ...
二级导航栏（html、css)
二级导航栏(html.css) 效果图: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><m ...
[css] 使用纯CSS代码实现动画的暂停与播放
[css] 使用纯CSS代码实现动画的暂停与播放一个属性:animation-play-state 取值:paused(暂停)|running(播放) hover取代点击 .stop:hover~. ...
手机页面漂浮广告 html,网站底部漂浮广告电脑手机自适应代码纯CSS
网站底部漂浮广告电脑手机自适应代码纯CSS;废话少说直接上干货: HTML部分: 说明文字点击按钮 CSS样式部分: .margingT { margin-bottom: 80px; } .bott ...
导航栏(navbar) - bootStrap4常用CSS笔记
导航栏:navbar 导航栏容器可以包含以下几个常用组成: 1.品牌LOGO(.navbar-brand ) 2.导航菜单(.navbar-nav) 3.导航文本(.navbar-text) 4.折叠 ...
html自适应导航栏怎么写,网站简单兼容简洁的自适应导航栏代码
大家在网上经常看到很多网站都是用自适应的网站的导航栏,包括我们高网也是. 小高百度了一下,折磨出这么一个方法然后将代码分享给大家. 原理很简单,利用css的media,进行限制,在手机版访问的时候将导 ...
[css] 使用纯css来创建一个滑块
[css] 使用纯css来创建一个滑块 .checke{position: relative;-webkit-appearance: none;width:90px;height: 44px;line ...
[css] 使用纯css能否监控到用户的一些信息？怎么实现？
[css] 使用纯css能否监控到用户的一些信息?怎么实现? 利用:active 伪类实现监控用户的点击 .button-1:active::after {content: url(./pixel.g ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...

半透明导航栏css代码,纯CSS实现的紫罗兰风格导航条效果代码

半透明导航栏css代码,纯CSS实现的紫罗兰风格导航条效果代码相关推荐

最新文章

热门文章