效果

代码

<!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. (DP)House Robber

    题目: You are a professional robber planning to rob houses along a street. Each house has a certain am ...

  2. Palindrome Linked List 解答

    Question Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O ...

  3. bootstrap 兼容IE8设置

    <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" ...

  4. （3）选择元素——（6）属性选择器（Attribute selectors）

    Attribute selectors are a particularly helpful subset of CSS selectors. They allow us to specify an ...

  5. spring + jdbc + extjs configuration

    所有源代码能够訪问我的GitHub 有空没空的稻谷了几天,最终前后台跑通了,提供一套可用的配置文件. (因为与extjs整合,spring security的登录须要重写原handler.会在后面补上 ...

  6. hibernate 用hql做中文排序

    用Hibernate+MySQL的童鞋是不是非常苦恼为什么MySQL不支持中文排序呢?没办法.仅仅有等utf8_unicode_cn 出来了.假设用hibernate即想实现跨库,又想不改代码怎样实现 ...

  7. linux修改系统时间

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

  8. .NET基础拾遗（1）类型语法基础和内存管理基础1

    一.基础类型和语法 1.1 .NET中所有类型的基类是什么? 在.NET中所有的内建类型都继承自System.Object类型. 1.2 值类型和引用类型的区别? 在.NET中的类型分为值类型和引用类 ...

  9. 客户端调用web中js方法（C调B）跨域问题

    这几天遇到了个棘手问题(c调b),经过排错查出了问题. 一,问题描述如下: 1.客户端需要调用father.html中一个js方法,特殊之处在于 这个father.html中有个iframe嵌套了一个 ...

  10. POJ 1269 - Intersecting Lines 直线与直线相交

    题意:    判断直线间位置关系: 相交,平行,重合 include <iostream> #include <cstdio> using namespace std; str ...