首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
CSS Cookbook 创建文字导航菜单和翻转特效
所属分类:
网页制作
/
CSS
阅读数: 748
收藏 0
赞 0
分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Cookbook例子 创建文字导航菜单和翻转特效 </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"><!-- #navsite p { display: none } #navsite { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.7em; font-weight:bold; width:12em; border-right:1px solid #666; padding:0; margin-bottom:1em; background-color:#9cc; color:#333; } #navsite ul { list-style:none; margin:0; padding:0; } #navsite ul li { margin:0; border-top:1px solid #003; } #navsite ul li a { display:block; padding:2px 2px 2px 0.5em; border-left:10px solid #369; border-right:1px solid #69c; border-bottom:1px solid #369; background-color:#036; color:#fff; text-decoration:none; width:100%; } html>body #navsite ul li a { width:auto; } #navsite ul li a:hover { border-left:10px solid #036; border-right:1px solid #69c; border-bottom:1px solid #369; background-color:#69f; color:#fff; } --></style> </head> <body> <div id="navsite"> <p>Site navigation:</p> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/writing/">Writing</a></li> <li><a href="/speaking/">Speaking</a></li> <li><a href="/Contact/">Contact</a></li> </ul> </div> </body> </html>
提示:您可以先修改部分代码再运行
更多精彩内容
其他人还在看
CSS伪类对象before和after的用法实例详解
这两个伪类对象只有在清楚浮动clearfix的时候会用到哈,最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
评论 0
收藏 0
赞 0
分享
CSS3 实用技巧:实现黑白图像效果示例代码
本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码,感兴趣的朋友可以看下截图,希望对大家有所帮助
评论 0
收藏 0
赞 0
分享
IE.JS解决IE兼容性问题方法汇总
正如标题所言它修复了许多的HTML和CSS问题,并使得透明PNG在IE5、IE6下正确显示,下面为大家介绍下具体针对不同浏览器的调用方法,感兴趣的朋友可以参考下哈
评论 0
收藏 0
赞 0
分享
实现CSS3中的border-radius(边框圆角)示例代码
本文为大家详细介绍下如何实现CSS3中的border-radius(圆角),具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
评论 0
收藏 0
赞 0
分享
CSS line-height行高上下居中垂直居中样式属性
我们在css编写中需要对大篇幅的内容显示的更好看,有些间隔,不要在挤在一起难看,就可以使用Line-Height属性进行控制
评论 0
收藏 0
赞 0
分享
CSS Float布局过程与老生常谈的三栏布局
这篇文章就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上。那就来老生常谈一次吧,CSS之Float布局
评论 0
收藏 0
赞 0
分享
邮箱css加载失败怎么办 网站css加载异常原因分析
造成css加载失败的原因有很多,脚本之家也遇到过,这可能跟你代码出错,浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的方案
评论 0
收藏 0
赞 0
分享
CSS控制样式的三种方式(优先级对比验证)
大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,这里简单介绍下CSS控制样式的三种方式
评论 0
收藏 0
赞 0
分享
meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染
X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content=
评论 0
收藏 0
赞 0
分享
Discuz7.2 IE9兼容性写法 杜工完全修补方案
因为Discuz7.2在IE9浏览器中有一系列的问题,所有要在以后的开发中考虑到ie9浏览器的一些问题了,这里简单介绍下,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
抢孩子谣言发布者究竟是谁?运营80余公众号造谣吸粉月赚20万
淘宝客运营经验:如何提高店铺知名度活跃度
主观臆断,百度联盟审核的条件
如何适当提高垃圾站Google
什么样的网站赚钱 怎么赚钱?
冲刺双十一 如何做好淘宝双11期间的推广及运营
站长故事
更多
站长故事:一个80后妈妈的微商之旅
有钱就是任性 2014年科技界大佬十大惊人语录
曾与前苹果CEO搭档 Zeta公司营收过亿美元背后的经验与教训
作为站长的你是否已有危机感:你被盯上了
一个新手站长的几年seo外链过程
暴走漫画运营经理 这就是高级运营与初级运营的区别