效果

代码

<!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. java.lang.OutOfMemoryError: GC overhead limit exceeded 问题分析和解决(转)

    在项目历史数据导入过程中,出现了应用无法访问的情况.立刻对Weblogic进行分析,发现Weblogic的内存.线程等性能良好,Server也是Running的状态.随后查看了Weblogic日志,在 ...

  2. Eclipse标准版安装J2EE

    虽然有Eclipse IDE for Java EE Developers,已经包含了j2ee的插件,但有时我们需要在标准版上安装插件来达到开发j2ee的功能. 安装 Java EE 插件:  * 依 ...

  3. 查看登录用户who

    几个命令:wwho每隔5秒钟,就来查看hadoop是否已经登录,如登录,显示其已经登录,并退出:sleep whoami last,显示/var/log/wtmp文件,显示用户登录历史及系统重启历史  ...

  4. TypeScript 素描 - 模块解析、声明合并

    模块解析 模块解析有两种方式 相对方式  也就是以/或 ./或-/开头的,比如import jq  from "/jq" 非相对方式  比如 import model  from ...

  5. python高级编程之选择好名称:pepe8和命名最佳实践

    # # -*- coding: utf-8 -*- # # python:2.x # __author__ = 'Administrator' # my_list=['a','b','c','d'] ...

  6. 要理解javascript中间apply和call

    apply和call它是javascript一个非常重要的方法,.虽然与程序平时很少接触,但JS到处都在使用这个框架2方法. 2个方法是在Function.prototype中.也就是说每一个JS函数 ...

  7. 是什么让我想到开发NFinal

    我是从01前开始就接触.net,那时.net还是1.0时代,很多东西都没有.后来.net出了2.0版本.从vs2005开始就使用Webform做网站.当时感觉.net能够拖来拖去,很厉害.参加工作后, ...

  8. Button简单实例1

    1.XML按钮定义 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" an ...

  9. java连接sqL2008 数据库实例

    package com.lzw; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSe ...

  10. 跨平台渲染框架尝试 - constant buffer的管理

    1. Preface Constant buffer是我们在编写shader的时候,打交道最多的一种buffer resource了.constant表明了constant buffer中的数据,在一 ...