Css相对定位和绝对定位实现CSDN标题栏
生活随笔
收集整理的這篇文章主要介紹了
Css相对定位和绝对定位实现CSDN标题栏
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
實現(xiàn)效果
鼠標(biāo)放置到圖標(biāo)上
實現(xiàn)過程
? ?1.用css畫三道橫線,這里用到了CSS3 background-clip 屬性
? ?
? ?實現(xiàn)方式：設(shè)置background-clip設(shè)置上邊框、下邊框和div的高度保持高度和顏色一致，就可以畫出三道橫線的圖標(biāo)，橫線之間的空白，用padding來實現(xiàn)。
? ?具體代碼如下：
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.實現(xiàn)鼠標(biāo)放置到更多圖標(biāo)中顯示出更多的div
? ?實現(xiàn)方式：在圖標(biāo)的div下面創(chuàng)建一個div，設(shè)置display屬性為none,然后設(shè)置圖標(biāo)所在div的hover事件，
將創(chuàng)建的div的display屬性改成block，加寬度和高度，定位方式為absolute，設(shè)置偏移量。
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>移動開發(fā)</span></div> </div>?3.具體實現(xiàn)代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>csdn標(biāo)題欄練習(xí)</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%;">云計算/大數(shù)據(jù)</div><div>區(qū)塊鏈</div><div>大數(shù)據(jù)</div><div>程序人生</div><div>研發(fā)管理</div><div>前端</div><div>移動開發(fā)</div><div>物聯(lián)網(wǎng)</div><div>運維</div><div>計算機基礎(chǔ)</div><div>編程語音</div><div>架構(gòu)</div><div>音視頻開發(fā)</div><div>安全</div><div>其他</div></div><div class="moreDiv"><div class="menu-icon"></div><div class="relativeDiv"><span>程序人生</span><span>移動開發(fā)</span></div></div></div> </body> </html>?
轉(zhuǎn)載于:https://my.oschina.net/u/3822522/blog/1823326
總結(jié)
以上是生活随笔為你收集整理的Css相对定位和绝对定位实现CSDN标题栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jinja2模板引擎简介
- 下一篇： 从硬件开始实践物联网-物联网弹幕器的灵感