效果

代码

<!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得到控件在屏幕中的坐标

    getLocationOnScreen ,计算该视图在全局坐标系中的x,y值,(注意这个值是要从屏幕顶端算起,也就是索包括了通知栏的高度)//获取在当前屏幕内的绝对坐标 getLocationInWi ...

  2. python练习linux下创建路径

    #coding=utf-8 import os class MakeDirectory(): def mkdir(self,path): # 去除首位空格 path=path.strip() # 去除 ...

  3. AsyncTask实现下载图片

    实现效果: /*采用异步任务  AsyncTask<String,Integer, byte[]>  * 参数一代表 执行异步任务时传递的参数的类型  * 参数二 如果不采用进度,则填Vo ...

  4. Jquery_Ajax文件上传

    如何实现jQuery的Ajax文件上传,PHP如实文件上传.AJAX上传文件,PHP上传文件. [PHP文件上传] 在开始之前,我觉得是有必要把通WEB上传文件的原理简单说一下的.实际上,在这里不管是 ...

  5. Block内的强引用

    众所周知,当某个对象持有着一个Block的时候,如果在Block内部使用强引用反过来持有这个对象,就会导致引用循环.为了避免引用循环,可以使用__weak修饰符,苹果的官方文档在用代码演示__weak ...

  6. java匿名内部类，多态，接口练习

    1多态以及接口调用方法: public class Interface { public static void main(String[] args) { Al x = new Al(); jian ...

  7. 关于c语言的一个小bug（c专家编程）

    不多说,说了都是累赘!直接看代码吧! #include <stdio.h> int array[] = {23, 34, 12, 17, 204, 99, 16}; #define TOT ...

  8. 男同胞爱小秘籍--作为爱他的女朋友了几天C规划

    各位男同胞,不知道你的女朋友没有在过去的一问天,你这个问题~~ 场景重现: 女友:"今天天气不错." 你们:"对" 女友:"今天是我们知道它的最初几天 ...

  9. 推荐一本好书给即将走入工作的程序员and程序媴

    近期买了几本IT届推崇的经典书籍.当中有一本<程序猿修炼之道:专业程序猿必知的33个技巧>.由于这本比較薄,所以先翻着看. 这本书有别于其它的技术书籍,事实上算不上一本技术书籍.它不是教你 ...

  10. Git 推送分支

    1.推送本地分支到远程: git push origin master  推送本地分支 master 到 远程的 origin 上面   git push origin test 将本地分支test推 ...