效果

代码

<!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. awk详解

    一.简介 强大的文本分析工具,基于指定规则浏览和抽取信息.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理.awk有3个不同版本: awk.nawk和ga ...

  2. 选择排序（Selection Sort）

    选择排序就是在选择数组元素上做文章,关键是如何选择?选择的标准是什么?选择之后放在哪?所有这些都是选择排序的问题. 选择排序算法中,通常会有以下操作: 从数组第一个元素开始. 遍历整个数组,找到最小的 ...

  3. hdu 1506 Largest Rectangle in a Histogram(单调栈)

                                                                                                       L ...

  4. UVa12096.The SetStack Computer

    题目链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  5. Repeater里面加上if判断

    //创建时绑定 protected void ItemCreated(object sender, RepeaterItemEventArgs e) { if (e.Item.DataItem != ...

  6. Ext tpl 造成 store不能正确加载

    最近维护别人写的代码的时候,遇到了这么个情况 找原因找到了这行代码的身上 tpl: '<tpl for="."><div ext:qtip="{name ...

  7. IOS 实现QQ好友分组展开关闭功能

    贴出核心代码  主要讲一下思路. - (void)nameBtnClick:(myButton *)sender { //获取当前点击的分组对应的section self.clickIndex = s ...

  8. UGUI学习之InputField

    密码框在Context type 设置为Passwold 设置背景和调整字体颜色与透明度. 还有一个就是Toggle,(开关)要指定他的Graphic.

  9. codeforces 336C Vasily the Bear and Sequence(贪心)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Vasily the Bear and Sequence Vasily the b ...

  10. boost vc编译

    0.下载:http://www.boost.org/ 1.编译b2.exe,bjam.exe. 双击根目录下面的bootstrap.bat文件,生成b2.exe,bjam.exe(或者使用vs的命令行 ...