效果

代码

<!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. Java中的随机数生成器：Random，ThreadLocalRandom，SecureRandom（转）

    文中的 Random即:java.util.Random,ThreadLocalRandom 即:java.util.concurrent.ThreadLocalRandomSecureRandom即 ...

  2. 107个常用Javascript语句

    1.document.write( " "); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document- >html- >(head,body ...

  3. statfs函数说明

    函数:     statfs 功能描述:     查询文件系统相关的信息. 用法:     #include <sys/vfs.h> /* 或者 <sys/statfs.h> ...

  4. repter导出到Excel

     ;                 ,  * );                 sheet1.SetColumnWidth(,  * );                 sheet1.SetC ...

  5. Spark机器学习笔记一

    Spark机器学习库现支持两种接口的API:RDD-based和DataFrame-based,Spark官方网站上说,RDD-based APIs在2.0后进入维护模式,主要的机器学习API是spa ...

  6. Linux 块设备驱动 （二）

    linux下Ramdisk驱动 1 什么是Ramdisk Ramdisk是一种模拟磁盘,其数据实际上是存储在RAM中,它使用一部分内存空间来模拟出一个磁盘设备,并以块设备的方式来组织和访问这片内存.对 ...

  7. ping不通的几种可能原因

    平时使用中常常会碰到ping不通的情况,ping不通的原因有非常多,比方路由设置问题,比方网络问题,下面列出几点原因:      1.太心急.即网线刚插到交换机上就想Ping通网关,忽略了生成树的收敛 ...

  8. （转） unity 在移动平台中,文件操作路径详解

    http://www.unitymanual.com/thread-23491-1-1.html 今天,这篇文章其实是个老生常谈的问题咯,在网上类似的文章也比比皆是,在此我只是做个详细总结方便大家能够 ...

  9. js校验

    判空 function check(s) { return (s == null || typeof (s) == "undefined" || s == "" ...

  10. jquery列表动画

    //新闻导航 (function (){ //获取分类名称 var _text = $('.news .news-wrapper .news-left .news-left-title .positi ...