效果

代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.     <title>基本菜单</title>
  7.     <style>
  8.         /*对menu层设置*/
  9.         #menu {
  10.           font-family:Arial;
  11.           font-size:14px;
  12.           width:120px;  /*固定宽度才可以和margin结合使用*/
  13.           padding:8px;
  14.           background:#ccc;
  15.           /*margin:0 auto;*/
  16.           border:1px solid #ccc;
  17.           }
  18.  
  19.         /*设置菜单选项*/
  20.         #menu a, #menu a:visited {
  21.           display:block;  /*必须是block，否则宽度高度都无效*/
  22.           background-color:#fff;
  23.           padding:4px 8px;
  24.           color:#;
  25.           text-decoration:none; /*不显示下划线*/
  26.           margin:8px   ;
  27.           border-left:8px solid #9ab;
  28.           border-right:8px solid #9ab;  /*左右边线*/
  29.           height:1em;
  30.         }
  31.         #menu a:hover {
  32.           color:#f00;
  33.           border-left:8px solid #;
  34.           border-right:8px solid #;
  35.           }
  36.  
  37.           #menu a#first {
  38.           margin:;
  39.           color:#AE81FF;
  40.         }  
  41.  
  42.     </style>
  43. </head>
  44.  
  45. <body>
  46.     <div id="menu">
  47.        <a href="#" id="first"> Home </a>
  48.        <a href="#"> Contact Us</a>
  49.        <a href="#"> Web Dev</a>
  50.        <a href="#"> Web Design</a>
  51.        <a href="#"> Map </a>
  52.     </div>
  53. </body>
  54. </html>

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

  1. css案例学习之div a实现立体菜单

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

  2. css案例学习之双斜角横线菜单

    效果 代码 <!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案例学习之div与span的区别

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

  5. css案例学习之ul li dl dt dd实现二级菜单

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

  6. css案例学习之通过relative与absolute实现带说明信息的菜单

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

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

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

  8. CSS 案例学习

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

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

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

随机推荐

  1. BLOB二进制对象(blob.c/h)

    BLOB二进制对象(blob.c/h) 数据结构 struct blob_attr { uint32_t id_len; /** 高1位为extend标志,高7位存储id, * 低24位存储data的 ...

  2. 【转】android cts failed items

    原文网址:http://blog.csdn.net/linsa0517/article/details/19031479 Fail的一些修改   1.直接设置问题 estUnknownSourcesO ...

  3. 【转】Linux下Android ADB驱动安装详解

    原文网址:http://blog.csdn.net/zhenwenxian/article/details/5901350 Linux下Android ADB驱动安装详解 概述 最近由于内置的合作商比 ...

  4. 【HDU2122】Ice_cream’s world III（MST基础题）

    2坑,3次WA. 1.判断重边取小.2.自边舍去. (个人因为vis数组忘记初始化,WA了3次,晕死!!) #include <iostream> #include <cstring ...

  5. 一个sigaction的C++ wrap

    在上一篇文章(http://www.cnblogs.com/coding-my-life/p/4220128.html)中,提到了libev提供了处理信号的C++ wrap.但我显然接受不了需要进入l ...

  6. linux下部署svn服务器

    系统Linux debian 2.6.32-5-686 先安装svn工具:apt-get install subversion,耐心等待安装完成.安装完成后svn客户端.服务器都有了. 接者建立svn ...

  7. SQUEEZENET: ALEXNET-LEVEL ACCURACY WITH 50X FEWER PARAMETERS AND <0.5MB MODEL SIZE

    论文阅读笔记 转载请注明出处: http://www.cnblogs.com/sysuzyq/p/6186518.html By 少侠阿朱

  8. spark二次排序

    数据: 2012,01,01,52012,01,02,452012,01,03,352012,01,04,102012,02,04,102012,02,03,182012,02,01,222012,0 ...

  9. Zookeeper学习记录（一）：设计与实现

    概述 Zookeeper是一个分布式的.开源的分布式应用协调服务.它暴露了一组简单的基础原件,分布式应用可以在这些原件之上实现更高级别的服务,如同步.配置维护.群组.和命名.它被设计成容易编程实现的, ...

  10. android jni ——Field & Method --> Accessing Field

    现在我们知道了怎样使用native code访问简单的数据类型和引用参考类型(string,array),下面我们来介绍怎样让jni代码去访问java中的成员变量和成员函数,然后可以再jni中回调ja ...