效果

代码

<!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. 总结spring下配置dbcp,c3p0,proxool数据源链接池

    转载自 http://hiok.blog.sohu.com/66253191.html applicationContext-datasource-jdbc.xml <?xml version= ...

  2. 利用btrace工具监控在线运行java程序

     一.作用 可以用于对运行中java程序进行诊断监控分析,也可以用于开发阶段查看一些异常信息或者调用过程(如有些第三方代码没有源代码,不便于debug调试). 注:如果用于对在线运行系统的诊断,需 ...

  3. UESTC_排名表 2015 UESTC Training for Graph Theory<Problem I>

    I - 排名表 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit S ...

  4. 第03讲- 第一个Android项目

    第03讲第一个Android项目 Android项目目录结构: 重要文件: src res AndroidManifest.xml 包含内容: MainActivity.java (程序主视图) 存放 ...

  5. xcode6和ios 8 百度无法定位解决

    . @interface里: CLLocationManager *locationManager; . 初始化: locationManager = [[CLLocationManager allo ...

  6. [置顶] LOAD语句：利用MSSQL中的xp_cmdshell功能，将指定文件夹下的指定文件，生成mysql的LOAD语句

    LOAD语句:利用MSSQL中的xp_cmdshell功能,将指定文件夹下的指定文件,生成mysql的LOAD语句 declare @sql varchar(4000), @dirpath varch ...

  7. MSN在Win7下80072f0d错误解决

    近期电脑(笔记本联想 K41A)显卡出了点问题(该显卡一周前刚换的新的,竟然不到一周又出问题了,联想的质量真的...),在xp下电脑根本进不了操作系统,不断重新启动(可能驱动.系统垃圾太多有关),于是 ...

  8. ASP.NET MVC 阻止当前请求的视图页面缓存OutputCache

    设置缓存 [OutputCache(Duration =333,VaryByCustom ="Index")] 缓存: //在action中,临时阻止该次请求的视图页面缓存 Res ...

  9. C# 实现预览dwg文件完整源代码(无需autocad环境)

    using System; using System.Drawing; using System.Collections; using System.ComponentModel; using Sys ...

  10. 设置改变oracle字符集

      修改过密码之后就能以dba的身份进行修改了,不是dba的话在执行修改命令的时候会提示你权限不足. 开始-->运行-->cmd,之后输入:"sqlplus sys/oracle ...