zoukankan      html  css  js  c++  java
  • 斜角导航

    <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;
    }

  • 相关阅读:
    spring boot整合quartz存储到数据库
    java多线程定时器和java判断一个时间是否在时间区间内和用正则表达式获取String字符串之间的数据
    maven项目通过java加载mqtt存储到mysql数据库,实现发布和接收
    java往MongDB导入大量数据
    SSH面试题收藏
    Spring面试题
    Hibernate面试题收藏
    Spring MVC
    浅谈 Struts2 面试题收藏
    JSP 新闻发布会
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3247482.html
Copyright © 2011-2022 走看看