CSS—navigation（導航欄）
阿新 • • 發佈：2019-01-27
HTML程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>導航欄</title> <link rel="stylesheet" type="text/css" href="navigation.css"> </head> <body> <ul> <li><a href="https://www.baidu.com">百度</a></li> <li><a href="https://www.google.com">谷歌</a></li> <li><a href="https://www.360.cn">360</a></li> <li><a href="https://www.bilibili.com">B站</a></li> </ul> </body> </html>
CSS程式碼
ul{ list-style-type: none; /*去掉無序標籤前面的效果*/ margin: 0px; padding: 0px; /*去掉所有的預設效果邊框，只使用自己的定義*/ background-color: cornflowerblue; width: 200px; text-align: center; } a:link,a:visited{ text-decoration: none; color: brown; width: 75px; text-align: center; } /*對標籤已有的屬性，通過：進行選擇，去掉已經進入的網站和沒有進入網站的下劃線*/ a:hover,a:active{ background-color:forestgreen; } /*hover表示滑鼠懸浮在導航欄狀態*/ li{ display: inline; padding: 3px; padding-left: 7px; padding-right: 7px; }
效果：
