效果

代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>双斜角横线菜单</title>
  6.         <style>
  7.  
  8. #menu {                         /*对menu层设置*/
  9.    width:9em;                    /*宽度*/
  10.    margin: auto;                /*水平居中*/
  11.    font-family:Arial;            /*字体*/
  12.    font-size:14px;                /*字号*/
  13.    border:solid 1px #aaa;        /*细灰色边框*/
  14.    }
  15.  
  16. #menu a, #menu a:visited {        /*设置菜单选项*/
  17.   display:block;                 /*设置为块级元素*/
  18.   text-decoration:none;         /*无下划线*/
  19.   color:#;                     /*黑色文字*/
  20.   height:.4em;                 /*高度*/
  21.   border:.5em solid #fff;         /*白色*/
  22.   }
  23. #menu a:hover {
  24.   color:#fff;                    /*白色文字*/
  25.   background-color:#aaa;         /*深灰色背景色*/
  26.   border-color:#ddd #aaa;        /*上下边框浅灰色，左右与背景色相同*/
  27.   }
  28.            </style>
  29. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head>
  30.  
  31. <body>
  32.     <div id="menu">
  33.        <a href="#"> Home</a>
  34.        <a href="#"> Contact Us</a>
  35.        <a href="#"> Web Dev</a>
  36.        <a href="#"> Web Design</a>
  37.        <a href="#"> Map</a>
  38.     </div>
  39. </body>
  40. </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. Spring AOP 本质(4)

    这一主要看看Spring AOP是如何实现通知包围的.   Spring AOP包围通知在功能上和前置通知加后置通知类似,但还是有区别的:包围通知可以修改返回值,还可以阻止.替换目标方法的执行.   ...

  2. 缓存一致性（Cache Coherency）入门(转)

    参考原文:http://fgiesen.wordpress.com/2014/07/07/cache-coherency/ 本文是RAD Game Tools程序员Fabian “ryg” Giese ...

  3. 转：PHP的(Thread Safe与Non Thread Safe)

    在安装xdebug到时候你会有有TS和NTS版本的选择,在以前还有VC6和VC9的版本.如果你没有根据你目前的服务器的状况选择对应的版本的话,那么xdebug是安装不成功的. 一.如何选择 php5. ...

  4. highchart 实现mrtg

    最近需要对流量图进行重构, <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  5. 【转】Android用NDK和整套源码下编译JNI的不同

    原文网址:http://www.devdiv.com/android_ndk_jni_-blog-99-2101.html 前些天要写个jni程序,因为才几行代码,想着用ndk开发可能容易些,就先研究 ...

  6. 【HDU2120】Ice_cream's world I（并查集基础题）

    查环操作,裸题.一次AC. #include <iostream> #include <cstring> #include <cstdlib> #include & ...

  7. [置顶] java ant 配置及构建项目

      Ant是一种基于Java的构建工具.Ant文件是配置构建目标过程的XML文件,也称为Ant脚本.                     (因为对这个不是很了解,所以用词方面可能于个人的理解有偏差 ...

  8. Java应用开发的一条经验

    一旦为应用建立良好的基础设施, 后续的开发就会变得容易而快速.  这些基础设施包括: 1.   线程池的建立.配置: 在 JDK 并发库的基础上建立更适合于应用的并发使用接口: 2.   跨多数据源的 ...

  9. HHKB Professional 2

    今天买了一副号称程序员专用的静电容键盘 HHBK Pro2无刻版,简单上手了一下,确实名不虚传,打起字来酣畅淋漓,毫不拖泥带水,感觉自己的技术提高了不少呢!!!! 由于是无刻版,需要一些时间来适应,尤 ...

  10. 【转】关于android应用程序的入口

    android应用程序,由一到多个Activity组成.每个Activity没有很紧密的联系,因为我们可以在自己的程序中调用其它Activity,特别是调用自己的代码之外生成的Activity,比如a ...