效果

代码

<!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. 【转】Ubuntu环境下SSH的安装及使用

    原文网址:http://blog.csdn.net/netwalk/article/details/12952051 SSH是指Secure Shell,是一种安全的传输协议,Ubuntu客户端可以通 ...

  2. hdu4267 A Simple Problem with Integers

    A Simple Problem with Integers Time Limit: 5000/1500 MS (Java/Others) Memory Limit: 32768/32768 K (J ...

  3. hadoop多文件输出

    现实环境中,经常遇到一个问题就是想使用多个Reduce,可是迫于setup和cleanup在每个Reduce中会调用一次,仅仅能设置一个Reduce,无法是实现负载均衡. 问题,假设要在reduce中 ...

  4. 从 mysql 客户端导出数据库 mysqldump

    window+r 打开cmd 输入 mysqldump -u mysql用户名 -p 数据库名 >  要导出的位置  (注意,最后没有分号) 然后输入密码即可 ^_^

  5. 2016-XCTF Final-Richman

    抽时间将XCTF Final中Richman这个题总结了下.题目及ida idb所在的链接在:http://files.cnblogs.com/files/wangaohui/richman-blog ...

  6. html_day2

    总结下今天学的HTML知识.单词 跑马灯标记 <marquee></marquee>属性: direction:滚动的方向 取值:left .right. up. down b ...

  7. sql service重置自动增长字段数字的方法

    1.--SQL表重置自增长字段(不删除表的数据) DBCC CHECKIDENT('表名', RESEED, 起始数) 2.--删除表数据的同时,重置自动增长字段 truncate table 表名

  8. FOR UPDATE SKIP LOCKED

    SYS_UNIT 中有UNIT_ID 0000000001 0000000002 0000001100 原意为若启用多线程,则每个线程在获取时仅可以获取一条数据(互斥) 脚本如下 1.SELECT * ...

  9. Linux下VMWare虚拟机的使用技巧

    使用技巧: 1.虚拟机安装文件:vm-workstation-full-8.0.3-703057.x86_64.bundle,./vm-workstation-full-8.0.3-703057.x8 ...

  10. SQL SERVER中如何格式化日期

    1. SELECT convert(varchar, getdate(), 100) -- mon dd yyyy hh:mmAM (or PM)    -- Oct 2 2008 11:01AM  ...