Css相对定位和绝对定位实现CSDN标题栏
生活随笔
收集整理的這篇文章主要介紹了
Css相对定位和绝对定位实现CSDN标题栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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
總結
以上是生活随笔為你收集整理的Css相对定位和绝对定位实现CSDN标题栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jinja2模板引擎简介
- 下一篇： 从硬件开始实践物联网-物联网弹幕器的灵感