效果

代码

<!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;

          width:120px;  /*固定宽度才可以和margin结合使用*/

          padding:8px;

          background:#ccc;

          /*margin:0 auto;*/

          border:1px solid #ccc;

          }

        /*设置菜单选项*/

        #menu a, #menu a:visited {

          display:block;  /*必须是block，否则宽度高度都无效*/

          background-color:#fff;

          padding:4px 8px;

          color:#;

          text-decoration:none; /*不显示下划线*/

          margin:8px   ;

          border-left:8px solid #9ab;

          border-right:8px solid #9ab;  /*左右边线*/

          height:1em;

        }

        #menu a:hover {

          color:#f00;

          border-left:8px solid #;

          border-right:8px solid #;

          }

          #menu a#first {

          margin:;

          color:#AE81FF;

        }  

    </style>

</head>

<body>

    <div id="menu">

       <a href="#" id="first"> 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 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. Android 有缓存功能的请求封装接口

    /* * @Company 浙 江 鸿 程 计 算 机 系 统 有 限 公 司 * @URL http://www.zjhcsoft.com * @Address 杭州滨江区伟业路1号 * @Emai ...

  2. What’s the difference between an interface and an abstract class in Java?

    原文 What’s the difference between an interface and an abstract class in Java? It’s best to start answ ...

  3. java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss[.fffffffff]

    此方法为Timestamp的 转换方法. 这几天做到excel导入功能,其中里面有几个时间时段,所以用了这个类来将导入的字符串格式转换Timestamp格式. 不慎出现了 java.lang.Ille ...

  4. Android 之 ExpandableListView 的使用

    喜欢显示好友QQ那样的列表,可以展开,可以收起,在android中,以往用的比较多的是listview,虽然可以实现列表的展示,但在某些情况下,我们还是希望用到可以分组并实现收缩的列表,那就要用到an ...

  5. vps安全设置

    适合新手及才接触VPS的朋友们看一下.主要是关于VPS安全方面相关内容的 禁止ROOT登陆 保证安全性. 使用DDoS deflate简单防攻击. iftop Linux流量监控工具: 每日自己主动备 ...

  6. 华为測试 字符串运用-password截取

    Catcher是MCA国的情报员,他工作时发现敌国会用一些对称的password进行通信,比方像这些ABBA.ABA,A,123321,可是他们有时会在開始或结束时增加一些无关的字符以防止别国破解.比 ...

  7. eclipse在ubuntu13.04下崩溃crash

    错误信息: # # A fatal error has been detected by the Java Runtime Environment: # # SIGSEGV (0xb) at pc=0 ...

  8. Linux curses库使用

     相信您在网路上一定用过如 tin,elm 等工具, 这些软体有项共同的特色, 即他们能利用上下左右等方向键来控制游标的位置. 除此之外, 这些程式的画面也较为美观. 对Programming 有兴趣 ...

  9. char值码对应大全

    Char("0") 为0的字符Char("1") Char("2") Char("3") Char("4&qu ...

  10. 导出word文档

    string id = Request["id"];            if (string.IsNullOrEmpty(id))            {           ...