效果

代码

<!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. bwlabel函数的c++实现

    实验中需要用到区域联通的算法,就是类似于matlab中bwlabel的函数.网上找了找c++源码未果,bwlabel-python版用python描述了matlab中的实现方法,但是最后对标签的处理部 ...

  2. OpenStackCLI调试及术语识记

    1,Project are organizational units in the cloud,and are also known as tenants or accounts.Each user ...

  3. Android学习总结——去除标题栏

    1.继承app.Activity的Activity去除标题栏 @Override protected void onCreate(Bundle savedInstanceState) { super. ...

  4. CSDN 正整数异或值问题

    题目详情: http://student.csdn.net/mcs/programming_challenges?page=4 给你n个正整数,请你计算出有多少对数的异或值小于等于k. 输入描写叙述: ...

  5. 浅谈Android系统进程间通信（IPC）机制Binder中的Server和Client获得Service Manager接口之路

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6627260 在前面一篇文章浅谈Service ...

  6. linux ssh-keygen

    用ssh client 客户端 远程登录服务器,避免每次都得输入密码: 解决方法: ssh-keygen  复制 id_rsa.pub 中的内容 到 远程连接的服务器的~/.ssh/authorize ...

  7. Hacker（13）----搜集目标计算机的重要信息

    扫描与嗅探攻防 黑客若要发起入侵攻击,他需要做好充分的准备的工作,首先通过嗅探和扫描等操作来搜索信息,从而确定目标计算机,以便准确发出攻击.嗅探和扫描操作可以利用专业的软件工具实现,如X-Scan.S ...

  8. ASP.NET内核几大对象、ASP.NET核心知识（7）--转载

    本文的学习流程是这样安排的. 一个简单的GDI小案例 1.说明 如果你想思考如何生成验证码,那么您第一个要解决的问题,一定是.NET动态生成图片问题. //GDI:.Net程序中进行绘图的一些类. 2 ...

  9. CSS彻底研究(2)

    Github pages 博文 一 . CSS盒模型 1.盒子的结构 margin-border-padding结构 + 内容content 组成盒模型 注意 width,height 取的是cont ...

  10. String和StringBuilder 的使用区别

    String 类有不可变性,每次执行操作时都会创建一个新的String对像,需要对该对象分配新的空间. StringBuilder 解决了对字符串重复修改过程中创建大量对象的问题.初始化一个Strin ...