效果

代码

<!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. 使用Windows USB-DVD制作U盘启动安装系统盘

    第一步:到如下所示的地址下载所需要的*.iso系统镜像文件. http://msdn.itellyou.cn/ 第二步:下载Windows USB-DVD工具 https://www.microsof ...

  2. Reverse Nodes in k-Group 解答

    Question Given a linked list, reverse the nodes of a linked list k at a time and return its modified ...

  3. 【POJ3006】Dirichlet's Theorem on Arithmetic Progressions（素数筛法）

    简单的暴力筛法就可. #include <iostream> #include <cstring> #include <cmath> #include <cc ...

  4. Android面试题07

    62. 说说mvc模式的原理,它在android中的运用. MVC英文即Model-View-Controller,即把一个应用的输入.处理.输出流程按照Model.View.Controller的方 ...

  5. web文档类型DOCTYPE html很重要

    之前写html或者jsp页面,从来不注意DOCTYPE 的声明,也不太明白DOCTYPE 的作用.直到最近碰到了一个非常奇葩的bug:某一个页面在IE7和8,Chrome,ff等下正常,但是在IE9下 ...

  6. Firebase远程更新应用

    能打造出色的应用不意味着一定能在商业上取得成功,两者之间还有许多工作要做,绝不能简单发布应用后就宣告“收工”.您需要能迅速根据用户反馈作出调整.测试新功能,以及向用户提供他们最关注的内容. Fireb ...

  7. vs中动态DLL与静态LIB工程中加入版本信息的方法

    说明:本文仅针对刚接触VS不久的新手们(包括ME),提供的一点小Tips,同时也是小生的首篇Blog文章,请大伙多多担待O(∩_∩)O哈! 步骤1 - 在工程中右键添加新建项 步骤2 - 选择创建RC ...

  8. Unity-视图操作

    按下 F 键使画面的视角移动到被选中对象的正面 视图场景摄像机(14年的时候,这个操作弄的头晕--) 旋转:Alt(Command)+左键拖拽 平移:Alt+Ctrl(Command)+左键拖拽 旋转 ...

  9. codeforces 340C Tourist Problem(公式题)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Tourist Problem Iahub is a big fan of tou ...

  10. （原+转）ubuntu16中莫名死机及重新安装显卡驱动

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5992693.html 参考网址: http://blog.csdn.net/u012581999/ar ...