• 斜角导航


    <div id="nav">
      <ul>
       <li><a href=""><strong>首页</strong><em>HOME</em></a></li>
       <li><a href=""><strong>文化中心</strong><em>CULTURAL</em></a></li>
       <li class="cur"><a href=""><strong>作品展示</strong><em>WORKS SHOW</em></a></li>
       <li><a href=""><strong>服务报价</strong><em>SERVICE</em></a></li>
       <li><a href=""><strong>团购活动</strong><em>BUYINH</em></a></li>
       <li><a href=""><strong>场景介绍</strong><em>INTRODUCTION</em></a></li>
       <li><a href=""><strong>客片分享</strong><em>CUSTOMER</em></a></li>
       <li><a href=""><strong>新娘达人</strong><em>MASTER</em></a></li>
       <li><a href=""><strong>联系我们</strong><em>CONTACT</em></a></li>
      </ul>
     </div>

    body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
    div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
    ul,li,ol{list-style:none;}/*去除列表符号*/
    img{border:none;}/*去除图片按钮边框*/
    a{text-decoration:none;}/*去除超链接下划线*/
    img,input,textarea{vertical-align:middle;}
    .clear{ clear:both;}
    table{margin:0 auto}
    td{border:#000 solid 1px;}

    #nav {
     100%;
     height:54px;
     clear:both;
     border-top:solid 1px #cac9c9;
     border-bottom:solid 1px #cac9c9
    }
    #nav ul {
     1008px;
     height:54px;
     margin:0 auto;
       
    }
    #nav li {
     font-size:16px;
     font-weight:bold;
     text-align:center;
     100px;
     height:54px;
     float:left;
     margin:0 6px;
     position:relative;
     _display:inline;
    }
    #nav li a {
     color:#616161;
     text-decoration:none;
     display:block;
     height:36px;
     padding:9px 0
    }
    #nav li strong {
     line-height:18px;
     display:block;
    }
    #nav li em {
     font-size:14px;
     line-height:18px;
     display:block;
    }
    #nav .cur a,#nav a:hover {
     color:#fff;
     background:#c00202
    }
    #nav a:hover:after,#nav a:hover:before,#nav .cur a:after,#nav .cur a:before {
     position:absolute;
     content:"";
     border-style:solid;
     border-0 0 54px 28px;
    }
    #nav a:hover:after,#nav .cur a:after {
     border-color:transparent transparent transparent #ccc;
     top:0;
     right:-28px;
    }
    #nav a:hover:before,#nav .cur a:before {
     border-color:transparent transparent #ffd800 transparent;
     top:0;
     left:-28px;
    }

  • 相关阅读:
    Linux五种IO模型
    怎样理解阻塞非阻塞与同步异步的区别?
    .NET 框架 (转载)
    数组 反转
    排序 归并排序&逆序对
    快速寻找满足条件的2个数
    数组 寻找最大的第k个数
    字符串 删除字符串开始以及末尾的空白符,并把数组中间的多个空格(如果有)符转换为1个
    排序 快速排序
    java8常用api
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3247482.html
Copyright © 2020-2023  润新知