【css】導航欄,選單欄簡單設定
阿新 • • 發佈:2020-08-18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>公司簡介導航欄</title> <style> /* 對瀏覽器自帶樣式清除 */ *{ margin: 0; padding: 0; border: 0; box-sizing: border-box; } nav { width: 100%; height: 50px; background-color: rgb(59, 119, 197); text-align: center; } /* 對a的樣式設定 */ nav a { display:block; text-decoration: none; width: 120px; font:15px/50px ""; letter-spacing: 1px; color: rgb(240, 240, 240); } nav>ul>li:hover>a{ background-color: rgb(40, 79, 131); } /* 去除列表樣式 */ li{ list-style: none; } nav>ul { width: 1000px; margin: 0 auto; } /* 向左浮動 */ nav>ul>li { float: left; } /* 中間細線的製作 利用漸變 */ .line { display: inline-block; width: 2px; height: 50px; } .line::before { content: ""; display: inline-block; width: 1px; height: 50px; background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0)); } .line::after { content: ""; display: inline-block; width: 1px; height: 50px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); } /* 對下拉選單的設定 */ nav .sub{ background-color: rgba(46, 93, 155, 0.973); display: none; } nav li:hover>.sub{ display: block; } nav .sub>li:hover{ background-color: rgb(39, 78, 129); } </style> </head> <body> <nav> <ul> <li><a href="">首頁</a></li> <li class="line"></li> <li><a href="">公司簡介</a></li> <li class="line"></li> <li><a href="">業界新聞</a></li> <li class="line"></li> <li><a href="">產品中心</a> <ul class="sub"> <li><a href="">熱點產品</a></li> <li><a href="">特價產品</a></li> <li><a href="">最新產品</a></li> <li><a href="">降價產品</a></li> </ul> </li> <li class="line"></li> <li><a href="">會員下載</a></li> <li class="line"></li> <li><a href="">聯絡我們</a> <ul class="sub"> <li><a href="">熱點產品</a></li> <li><a href="">降價產品</a></li> </ul> </li> <li class="line"></li> <li><a href="">聯絡我們</a></li> <li class="line"></li> <li><a href="">聯絡我們</a></li> </ul> </nav> </body> </html>