效果

代码

<!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. elasticsearh 中每个节点中需要有相同的插件

    elasticsearh 中每个节点中需要有相同的插件 [2016-09-13 19:25:24,049][INFO ][discovery.zen ] [node02] failed to send ...

  2. UVALive 6190 Beautiful Spacing (2012 Tokyo regional)

    Beautiful Spacing 题意是给一个文本排版,求在满足题目所给要求的条件下,最长连续空格最小是多少. trick: 贪心地模拟是错的,至少无法证明正确性. 正解应该是二分答案+验证. 比较 ...

  3. linux group

    groups 查看当前登录用户的组内成员 groups gliethttp 查看gliethttp用户所在的组,以及组内成员 whoami 查看当前登录用户名   /etc/group文件包含所有组 ...

  4. python小记列表排序

    a=[('b',4),('a',7),('c',2)] 正向排序a.sort() 反向排序:a.sort(reverse=True) 对第二关键字排序 a.sort(lambda x,y:cmp(x[ ...

  5. 编码规范(CSS)

    code { font-family: "PT Mono", Menlo, "Courier New", monospace; padding: 2px 4px ...

  6. Android开发之去掉标题栏的三种方法,推荐第三种

    Android:去掉标题栏的三种方法和全屏的三种方法 第一种:一般入门的时候常常使用的一种方法 onCreate函数中增加下面代码: requestWindowFeature(Window.FEATU ...

  7. [HeadFirst-HTMLCSS入门][第九章盒模式]

    新属性 line-height 行间距 line-height: 1.6em; border 边框 属性值 solid 实线 double 双实线 groove 一个槽 outset 外凸 inset ...

  8. html_day4+css

    表单控件共有的属性: enabled:表示表单控件可用 disabled:表示表单控件被禁用 readonly:表示表单控件只能读name属性值的作用: 需要将表单的数据提交到服务器处理就要写name ...

  9. SOLR使用手册之操作collection

    一.Collections API  参考:https://cwiki.apache.org/confluence/display/solr/Collections+API 因为API比较多,我就不一 ...

  10. Java学习——接口Interface

    接口: 初期理解可以认为是一个特殊的抽象类 当抽象类中的方法都是抽象的,那么该类可以通过接口的形式来表示.class用于定义类interface 用于定义接口 接口定义时,格式特点:1,接口中常量见定 ...