效果

代码

<!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层设置*/

   width:9em;                    /*宽度*/

   margin: auto;                /*水平居中*/

   font-family:Arial;            /*字体*/

   font-size:14px;                /*字号*/

   border:solid 1px #aaa;        /*细灰色边框*/

   }

#menu a, #menu a:visited {        /*设置菜单选项*/

  display:block;                 /*设置为块级元素*/

  text-decoration:none;         /*无下划线*/

  color:#;                     /*黑色文字*/

  height:.4em;                 /*高度*/

  border:.5em solid #fff;         /*白色*/

  }

#menu a:hover {

  color:#fff;                    /*白色文字*/

  background-color:#aaa;         /*深灰色背景色*/

  border-color:#ddd #aaa;        /*上下边框浅灰色，左右与背景色相同*/

  }

           </style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head>

<body>

    <div id="menu">

       <a href="#"> 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案例学习之双斜角横线菜单的更多相关文章

  1. css案例学习之div+a实现菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  2. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. css案例学习之通过relative与absolute实现带说明信息的菜单

    效果如下 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  4. css案例学习之div a实现立体菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  5. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  6. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  7. css案例学习之继承关系

    代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...

  8. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

  9. css案例学习之用thead、tbody、tfoot实现漂亮的table布局

    首先说说thead.tbody.tfoot <thead> <tbody> <tfoot> 无论前后顺序如何改变, <thead> 内的元素总是在表的最 ...

随机推荐

  1. Android导航菜单横向左右滑动并和下方的控件实现联动

    这个是美团网个人订单的效果,找了很多地方都没找到,自己研究了两天终于弄出来了^_^,有什么问题希望大家指出来,谢谢. 实现原理是上方使用HorizontalScrollView这个可以水平横向拖动的控 ...

  2. Linux/UNIX环境下Oracle数据库多实例开机启动脚本（转）

    操作系统平台:RHEL 5Shell环境:BashOracle:10g2 功能描述:开机时自动切换到oracle用户下,启动oracle的多个实例.并记录数据库的启动情况到自定义的日志文件中. #!/ ...

  3. 匹配“is outside location”

    <pre name="code" class="html">is outside location 怎么匹配? . 匹配除换行外的所有单个字符,通常 ...

  4. 团队介绍 | 魅动 Magic Motion

    团队介绍 | 魅动 Magic Motion 魅动 Magic Motion 是专注于研发.设计和生产智能化私密生活用品的创新品牌.魅动 Magic Motion 将无线移动通信技术与私密生活产品相结 ...

  5. 构建高性能WEB站点笔记三

    构建高性能WEB站点笔记三 第10章 分布式缓存 10.1数据库的前端缓存区 文件系统内核缓冲区,位于物理内存的内核地址空间,除了使用O_DIRECT标记打开的文件以外,所有对磁盘文件的读写操作都要经 ...

  6. C#操作IE

    操作IE主要使用两个Com Dll: 1.Microsoft Internet Controls 2.Microsoft HTML Object Library 使用Microsoft Interne ...

  7. Swift——(一)为Swift内置类型加入属性

    在看苹果官方的Swift Language的时候,遇到实验:Write an extension for the Double type that add an absoluteValue prope ...

  8. BOOST::Signals2

    /* Andy is going to hold a concert while the time is not decided. Eric is a fans of Andy who doesn't ...

  9. Tomcat 配置篇

    Tomcat 配置一.Tomcat 基本介绍 1.关键目录 a) bin 该目录包含了启动.停止和启动其他的脚本,如startup.sh.shutdown.sh等; b) conf 配置文件和一些文档 ...

  10. HTTP协议4之缓存--转

    HTTP协议提供了非常强大的缓存机制, 了解这些缓存机制,对提高网站的性能非常有帮助. 缓存的概念 缓存这个东西真的是无处不在, 有浏览器端的缓存, 有服务器端的缓存,有代理服务器的缓存, 有ASP. ...