效果

代码

<!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. hdu 4585 Shaolin_set用法

    题目链接 题意:有n个人想成为少林,但是成为少林必须跟少林的大师大一场,当然要选择战斗力很近的,有两大师战斗力跟那人相近程度一样就选战斗力小的那个,按输入顺序,先输入的人先成为少林大师,后面输入的人, ...

  2. REVERSE关键字之REVERSE索引

    昨天说到REVERSE关键字可以指REVERSE函数和REVERSE索引,简单介绍了下REVERSE函数的含义,今天简单整理下REVERSE索引. REVERSE索引也是一种B树索引,但它物理上将按照 ...

  3. 虚拟机环境中安装ubuntu下的mysql-cluster7.3.2（单点服务器）

      部署环境: 系统:ubuntu-12.04.2 LTS -server-i386.iso Cluster:mysql-cluster-gpl-7.3.2-linux-glibc23-i686.ta ...

  4. ASP.NET MVC 之表格分页

    简单效果图:(框架:MVC+NHibernate) 要点: (1)首先建立表格分页Model(GridModel.cs) (2)然后建立数据展示页(PageCloth.cshtml) (3)再建分页版 ...

  5. LeetCode——Symmetric Tree

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  6. Timer.5 - Synchronising handlers in multithreaded programs

    This tutorial demonstrates the use of the boost::asio::strand class to synchronise callback handlers ...

  7. WEB服务器3--IIS7.0安装和配置

    安装Web服务器(IIS) 点击开始菜单->所有程序->管理工具->服务器管理器,启动服务器管理器,界面如下: 在服务器管理器中,选择角色,你将可以看到角色总视图. 点击添加角色,会 ...

  8. for-in用法

    var nyc = {     fullName: "New York City",     mayor: "Bill de Blasio",     popu ...

  9. Android开发记录(转)

    一.Android模拟器相关 1. Android模拟器安装 Market 模拟器默认没有安装 Market,看到网上有较为复杂的安装方法,也有1个简单的,试了简单的,在 Android2.2 模拟器 ...

  10. C#使用DirectoryEntry操作IIS创建网站和虚拟路径

    原文:http://www.cnblogs.com/Aiooioo/archive/2011/05/30/cs-iis.html 在.Net中我们可以使用内置的类DirectoryEntry来承载II ...