效果

代码

<!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>立体菜单</title>

        <style>

#menu {                         /*对menu层设置*/

   font-family:Arial;            /*字体*/

   font-size:14px;                /*字号*/

   }

#menu a, #menu a:visited {

  text-decoration:none;             /*文字无下划线*/

  text-align:center;                 /*文字水平居中对齐*/

  color:#fff;                         /*白色文字*/

  display:block;                    /*设置为块级元素*/

  width:10em;                         /*宽度*/

  padding:.25em;                    /*内边距*/

  margin:.5em auto;                /*菜单项之间间隔0.5em，并水平居中*/

  background-color:#8ab;             /*背景色*/

  border:2px solid #fff;            /*边框粗细2像素*/

  border-color:#def # # #cde;    /*边框颜色显示突起效果，关键就是边框给人的错觉*/

  position:relative;                /*使用相对定位*/

  }

#menu a:hover {

  top:2px;                            /*向下移动2像素*/

  left:2px;                            /*向右移动2像素*/

  border-color:# #cde #def #;    /*边框颜色显示突起效果*/

  }

           </style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head>

<body>

    <div id="menu">

       <a href="#"> Home</a>

       <a href="#"> Contact Us</a>

       <a href="#"> Web Dev</a>

       <a href="#"> Web Design</a>

       <a href="#"> Map</a>

    </div>

</body>

</html>

css案例学习之div a实现立体菜单的更多相关文章

  1. css案例学习之div与span的区别

    代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...

  2. css案例学习之div+a实现菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

  4. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  5. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

  6. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  7. css案例学习之relative与absolute

    代码 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  8. css案例学习之float浮动

    代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  9. css案例学习之父子块的margin

    两边还会有些距离,这是body默认的. 代码: <head> <title>父子块的margin</title> <style type="text ...

随机推荐

  1. php将会话保存在数据库里

    php默认把会话保存在临时文件中,保存在数据库中可以提高安全性,在共享主机服务器上,所有web站点都使用同一个临时目录,这意味着数十个程序都在同一位置进行文件读取的操作,我们很容易就编写一个脚本从这个 ...

  2. rsyslog 收集系统日志

    <pre name="code" class="html">nginx 服务器配置: jrhwpt01:/root# cat /etc/rsyslo ...

  3. Maven自定义Archetype

    Maven提供了archetype帮助我们快速构建项目骨架,很便捷.但是,中央仓库中的archetype版本过于陈旧,构建好项目后,需要修改很多信息,甚是麻烦,那么如何自定义个archetype就显得 ...

  4. nyoj 36 最长公共子序列

    描述 咱们就不拐弯抹角了,如题,需要你做的就是写一个程序,得出最长公共子序列. tip:最长公共子序列也称作最长公共子串(不要求连续),英文缩写为LCS(Longest Common Subseque ...

  5. as3 updateAfterEvent的作用

    flash中一共有三个类具有该属性,这三个类分别是:KeyboardEvent,MouseEvent,TimerEvent.调用updateAfterEvent 属性的事件,可强制立即执行呈现操作,而 ...

  6. tiny210(s5pv210)移植u-boot(基于 2014.4 版本号)——NAND 启动

    我们知道 s5pv210启动方式有非常多种,sd卡和nand flash 启动就是当中的两种,前面我们实现的都是基于sd卡启动,这节我们開始实现从nand flash 启动: 从 NAND 启动 u- ...

  7. TNS-00512: Address already in use-TNS-12542: TNS:address already in use

    监听启动或是停止时提示如下错误:TNS-12542: TNS:address already in use TNS-12560: TNS:protocol adapter error TNS-0051 ...

  8. linux修改系统时间

    当你把linux还原到某个点的时候,vmware帮不了你把系统时间也给重设了.所以这时候就要手工来搞.关于咋设linux时间.网上介绍也很多,但是都是抄来抄去的东西.那怎么才能高效快捷的设置系统时间呢 ...

  9. C#几种截取字符串的方法小结 （摘抄）

    1.根据单个分隔字符用split截取 例如 string st="GT123_1"; string[] sArray=st.split("_"); 即可得到sA ...

  10. Android 4.4前后版本读取图库图片和拍照完美解决方案

    转载:http://blog.csdn.net/zbjdsbj/article/details/42387551 4.3或以下,选了图片之后,根据Uri来做处理,很多帖子都有了,我就不详细说了. 主要 ...