zoukankan      html  css  js  c++  java
  • 横向导航栏 平行四边形

    最近在网上看了看些美工做的静态网页,然后觉得挺不错的也想实现一下,所以就有了以下的横向导航栏。当时想的太多觉得平行四边形应该用矩形用三角形拼接border-top、border-bottom:none,,或者直接截图翻转,结果想到最后发现都挺麻烦的,以下代码仅供参考。我是直接使用的//实现的。

    效果图如下:

    代码:

    <style>

       h1{
        font-size: 30px;
        color:white;
        font-weight: 300;
        display: inline-block;
        margin-right:3%;
        margin-left: 3%;
        margin-top: 0px;
       
       }
       h1 a{
        text-decoration: none;
        color:red;
        font-size:13px ;
        position: relative;
       }
       .chiefs{
        float:left;
       }
       h1 a:hover .chiefs{
        0;
        height:0;
        border- 25px;
        float: left;
        border-style:solid;
        border-color:transparent brown transparent transparent;
        transform:rotate(45deg);
        float: left;
        margin-top: -30px;
        margin-left: 20px;
        opacity: .4;
        position: absolute;
        top:-10px;
        left:-50px;
       }
       .box{
        80%;
        height:40px;
        background: tan;
        margin:0 auto;
       }
    </style>
    </head>
      <body style="background: #262626;">
      <div class="box">
       <h1>/<a href=""><div class="chiefs"></div>apple1</a>/</h1>
       <h1>/<a href=""><div class="chiefs"></div>apple2</a>/</h1>
       <h1>/<a href=""><div class="chiefs"></div>apple3</a>/</h1>
       <h1>/<a href=""><div class="chiefs"></div>apple4</a>/</h1>
       <h1>/<a href=""><div class="chiefs"></div>apple5</a>/</h1>
       <h1>/<a href=""><div class="chiefs"></div>apple6</a>/</h1>
       <h1>/<a href=""><div class="chiefs"></div>apple7</a>/</h1>
      </div>
      </body>
  • 相关阅读:
    Eclipse快捷键大全
    Quartz任务调度快速入门
    Spring整合logback日志
    Java实现二维码的生成与解析
    跨域问题及解决方案
    SpringBoot项目直接在linux下运行
    SpringBoot拦截器中使用RedisTemplate
    Codeforces Round #345 (Div. 1) C. Table Compression dp+并查集
    HDU 4489 The King’s Ups and Downs dp
    HDU 4747 Mex 递推/线段树
  • 原文地址:https://www.cnblogs.com/htuthf/p/4643367.html
Copyright © 2011-2022 走看看