DIV+CSS文字阴影的一个效果

css

CSS内容:

 程序代码
<style>
ul,li{ margin:0px; padding:0px;list-style-type: none;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li{ float:left; margin-left:30px;}
#nav span{display:none;}
#nav a{font-size:12px;font-weight: bold;color: #FF6600;text-decoration: none; display:block;}
#nav a:hover{ color:#999;top:1px; left:1px; position:relative;}
#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FF3300;cursor:pointer;}
</style>

DIV内容:

 程序代码
<div id="nav">
 <ul>
  <li><a href="#">网站首页<span>网站首页</span></a></li>
  <li><a href="#">网站首页<span>网站首页</span></a></li>
  <li><a href="#">网站首页<span>网站首页</span></a></li>
  <li><a href="#">网站首页<span>网站首页</span></a></li>
  <li><a href="#">网站首页<span>网站首页</span></a></li>
 </ul>
</div>

实例效果:

 HTML代码<style>ul,li{ margin:0px; padding:0px;list-style-type: none;}#nav{font-family: Verdana, "宋体", Arial;}#nav li{ float:left; margin-left:30px;}#nav span{display:none;}#nav a{font-size:12px;font-weight: bold;color: #FF6600;text-decoration: none; display:block;}#nav a:hover{ color:#999;top:1px; left:1px; position:relative;}#nav a:hover span{ display:block; top:-2px; left:-2px; position:absolute; color:#FF3300;cursor:pointer;}</style><div id="nav"> <ul> <li><a href="#">网站首页<span>网站首页</span></a></li> <li><a href="#">网站首页<span>网站首页</span></a></li> <li><a href="#">网站首页<span>网站首页</span></a></li> <li><a href="#">网站首页<span>网站首页</span></a></li> <li><a href="#">网站首页<span>网站首页</span></a></li> </ul></div>

时间: 2024-10-27 22:32:23

DIV+CSS文字阴影的一个效果的相关文章

请高手指点asp.net中如何加入div+css代码,实现菜单效果

问题描述 问题如下:下面的DIV+CSS代码是一个菜单,想用在asp.net中.大类和小类分别从数据库中循环读取出来,显示在指定位置的aspx页面中,相当于动态添加.便于后期维护.有什么好的方法实现吗?<divclass="wrapper"><divclass="nav-bg"><divclass="nav-list"><ulid="nav"class="nav"&

用DIV+CSS如何实现这种表格效果_CSS/HTML

表格效果table                     [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 表格效果div+css xmlns="http://www.w3.org/1999/xhtml"> 1 2 3 4 5 6 7 8 9 10 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容_javascript技巧

框1111 框2222 框3333 框4444 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒.111.. 这里是内容撒222.. 这里是内容撒.222.. 这里是内容撒.222.. 这里是内容撒.333.. 这里是内容撒.333.. 这里是内容撒.333.. 这里是内容撒.444.. 这里是内容撒.444.. 这里是内容撒.444..

精通CSS+DIV网页样式与布局--CSS文字效果

       上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定的往下走,今天这篇博文,小编主要简单总结一下CSS的文字效果,首先,我们来看一张图:                   接下来,小编会随着上面图示的脉络,一一进行讲解,都是一下简单的知识,有兴趣的小伙伴,可以动手和小编一起来实现以下代码实例.         文字的字体      

Div+CSS网站设计的优点

css|设计 Div+CSS网站设计的优点      业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?      Div 全称 division 意为"区分"使用 DIV 的方法跟使用其他 tag 的方法一样.      <DIV>Very excellent webmaster club www

css 文字环绕

以前看到新浪那css 文字环绕图片的效果,但自己怎么也想不明白,后来在就去问了一位前台的同事, 现在才明白原来这么简单,下面我来举两个例子来说明一下.: 一:以html的形式作 <div align="left"><img src="aa.jpg" width="91" height="84" style="float:left;" /> ·www.111cn.net<br&g

DIV CSS网页制作之不规则文字排版的CSS样式

css|网页 我们在网页设计中,会遇到许多意想不到的情况,不规则文字的排版就是其中之一了,我们该如何面对这样的排版要求呢?CSS代码又该如何编写呢? 遇到这样的情况,通常情况下我们有两种选择: 1.用图片来制作,并应用热区制作链接,这样的方式可以很方便的解决问题,但对搜索引擎很不友好,它不知道你这里到底有什么. 2.用Flash来完成,还可以加上动感的特效,除了同样对搜索引擎不友好之外,还存在着用户是不是安装有flash播放插件的风险,以及浏览器对flash文件的屏蔽的问题. 这两种方法都不是可

DIV CSS解决不规则文字排版

  网页设计时遇到不规则文字排版问题,通常通常情况下我们有两种选择,但是这两种方法都不是可靠的,遇到特殊的上网设备,更不能显示出来发挥它的作用.这里向大家介绍一下使用DIV CSS解决此问题. DIV CSS解决不规则文字排版问题 我们在网页设计中,会遇到许多意想不到的情况,不规则文字排版就是其中之一了,我们该如何面对这样的排版要求呢?DIV CSS代码又该如何编写呢? 遇到这样的情况,通常情况下我们有两种选择: 1.用图片来制作,并应用热区制作链接,这样的方式可以很方便的解决问题,但对搜索引擎

精通CSS+DIV网页样式与布局--图片效果

        提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过照片处理软件轻松实现自己想要的照片效果.这篇博客,小编将继续来总结CSS+DIV的其她效果来进行分析,有兴趣的小伙伴可以点击以下链接,了解小编之前讲解过的关于CSS的一些基础知识:         精通CSS+DIV网页样式与布局--初探CSS        精通CSS+DIV网页样