Css相对定位和绝对定位实现CSDN标题栏

最新推荐文章于 2024-08-06 17:45:33 发布

weixin_34314962

最新推荐文章于 2024-08-06 17:45:33 发布

阅读量102

点赞数

文章标签： python 大数据移动开发

原文链接：https://my.oschina.net/u/3822522/blog/1823326

版权

2019独角兽企业重金招聘Python工程师标准>>>

实现效果

鼠标放置到图标上

实现过程

1.用css画三道横线,这里用到了CSS3 background-clip 属性

实现方式：设置background-clip设置上边框、下边框和div的高度保持高度和颜色一致，就可以画出三道横线的图标，横线之间的空白，用padding来实现。

具体代码如下：

div.menu-icon{
            width: 30px;
            height: 5px;
            border-top: 5px solid red;
            border-bottom: 5px solid red;
            background-color: red;
            padding: 5px 0;
            background-clip:content-box;
}

<div class="menu-icon"></div>

2.实现鼠标放置到更多图标中显示出更多的div

实现方式：在图标的div下面创建一个div，设置display属性为none,然后设置图标所在div的hover事件，

将创建的div的display属性改成block，加宽度和高度，定位方式为absolute，设置偏移量。

div.relativeDiv{
    display: none;
}
div.moreDiv:hover{
   background-color: red;
}

div.moreDiv:hover div.menu-icon{
   width: 30px;
   height: 5px;
   border-top: 5px solid white;
   border-bottom: 5px solid white;
   background-color: white;
   padding: 5px 0;
   background-clip:content-box;
   margin:12.5px auto;
}
div.moreDiv:hover div.relativeDiv{
   position: absolute;
   right: 0;
   top: 50px;
   display: block;
   width:200px;
   height: 200px;
   border: 5px solid red;
}

<div class="moreDiv">
           <div class="menu-icon"></div>
           <div class="relativeDiv">
               <span>程序人生</span>
               <span>移动开发</span>
           </div>
</div>

3.具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>csdn标题栏练习</title>
    <style type="text/css">
        div.boxDiv {
            height: 50px;
            text-align: center;
            font-size: 14px;
        }
        div.titleDiv{
            background: red;
            float:left;
            width:95%;
            height:100%;
        }
         div.moreDiv{
            float:left;
            width:5%;
            height:100%;
             position: relative;
        }
        div.titleDiv>div{
            float:left;
            width: 6%;
            height: 100%;
            line-height: 50px;
        }
        div.menu-icon{
            width: 30px;
            height: 5px;
            border-top: 5px solid red;
            border-bottom: 5px solid red;
            background-color: red;
            padding: 5px 0;
            background-clip:content-box;
            margin:12.5px auto;
        }
        div.relativeDiv{
            display: none;
        }

        div.moreDiv:hover{
            background-color: red;
        }

       div.moreDiv:hover div.menu-icon{
           width: 30px;
           height: 5px;
           border-top: 5px solid white;
           border-bottom: 5px solid white;
           background-color: white;
           padding: 5px 0;
           background-clip:content-box;
           margin:12.5px auto;
        }
        div.moreDiv:hover div.relativeDiv{
            position: absolute;
            right: 0;
            top: 50px;
            display: block;
            width:200px;
            height: 200px;
            border: 5px solid red;
        }
    </style>
</head>
<body>
   <div class="boxDiv">
       <div class="titleDiv">
           <div>人工智能</div>
           <div style="width: 8%;">云计算/大数据</div>
           <div>区块链</div>
           <div>大数据</div>
           <div>程序人生</div>
           <div>研发管理</div>
           <div>前端</div>
           <div>移动开发</div>
           <div>物联网</div>
           <div>运维</div>
           <div>计算机基础</div>
           <div>编程语音</div>
           <div>架构</div>
           <div>音视频开发</div>
           <div>安全</div>
           <div>其他</div>
       </div>
       <div class="moreDiv">
           <div class="menu-icon"></div>
           <div class="relativeDiv">
               <span>程序人生</span>
               <span>移动开发</span>
           </div>
       </div>

   </div>
</body>
</html>

转载于:https://my.oschina.net/u/3822522/blog/1823326