css案例学习之双斜角横线菜单

最新推荐文章于 2024-11-04 16:08:47 发布

weixin_34121304

最新推荐文章于 2024-11-04 16:08:47 发布

阅读量184

点赞数

文章标签： xhtml

效果

代码

<!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:0 auto;                /*水平居中*/
   font-family:Arial;            /*字体*/
   font-size:14px;                /*字号*/
   border:solid 1px #aaa;        /*细灰色边框*/
   }

#menu a, #menu a:visited {        /*设置菜单选项*/
  display:block;                 /*设置为块级元素*/
  text-decoration:none;         /*无下划线*/
  color:#000;                     /*黑色文字*/
  height:1.4em;                 /*高度*/
  border:0.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>