效果

代码

<!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. 深入浅出Node.js (6) - 理解Buffer

    6.1 Buffer结构 6.1.1 模块结构 6.1.2 Buffer对象 6.1.3 Buffer内存分配 6.2 Buffer的转换 6.2.1 字符串转Buffer 6.2.2 Buffer转 ...

  2. the5fire博客对接微信公众平台接口 | the5fire的技术博客

    the5fire博客对接微信公众平台接口 | the5fire的技术博客 the5fire博客对接微信公众平台接口

  3. Linux下获取线程TID的方法——gettid()

    (转载)http://blog.csdn.net/delphiwcdj/article/details/8476547 如何获取进程的PID(process ID)? 可以使用: #include & ...

  4. 自己写jstl标签解析long时间

    数据库里存储的是long型的时间,现在想输出到jsp页面,由于使用的是jstl标签,而要显示的是可读的时间类型,找来找去有个fmt:formatDate可以转化,但是只能转date型,long型则不可 ...

  5. MooseFS源代码分析（三）

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  6. [HeadFirst-HTMLCSS学习笔记][第十三章表格]

    表格 -table 块 tr 行 table row th 表头 table head td 表数据 table data; caption 表格标题 <table> <captio ...

  7. asp.net页面按Enter键IE不提交表单

    //当按下回车键时,让指定的按钮获取指定的文本框的事件                this.txtFNick.Attributes.Add("onkeydown", " ...

  8. ms sql 根据表名查询 表中所有字段的属性值 sql语句

    SELECT表名=case when a.colorder=1 then d.name else '' end,--表说明=case when a.colorder=1 then isnull(f.v ...

  9. iOS开发 ～应用程序设计理念：视图控制器（UIViewController）、视图（UIView）

    应用程序设计理念:视图控制器(UIViewController).视图(UIView) 利用视图控制器(底层)管理视图(外观),一对一 1.视图的作用:负责显示的外观 2.视图控制器的作用:创建界面. ...

  10. .C .h 和 .CCP的区别

    1.*.H:C语言规定使用一个变量或调用一个函数前必须声明,为了使用方便,经常把常用函数,例如Windows API的函数,MFC类写入头文件.h,这样每次需要引用时只要使用#include加入就可以 ...