Css相對定位和絕對定位實現CSDN標題欄

時間 2019-12-05

標籤 css 相對定位絕對實現 csdn 標題欄欄目 CSS 简体版

原文原文鏈接

實現效果

鼠標放置到圖標上css

實現過程

1.用css畫三道橫線,這裏用到了CSS3 background-clip 屬性html

實現方式：設置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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。