生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS一级导航栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
大一學的都忘記了，有機會重新學習一遍，簡單記錄下（小傻貓），日常
記錄學習
HTML
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link href="../CSS/Top導航欄.css" type="text/css" rel="stylesheet"><title>Document</title>
</head>
<body><div class="index"><div class="header">頁眉</div><div class="nav"><a href="text1.html">主頁</a><a href="#">音樂</a><a href="#">運動</a><a href="#">美食</a><a href="#">休閑</a></div></div>
</body>
</html>
CSS*{margin: 0;padding: 0;
}
body{background-color:white;
}
.header{margin: 0 auto;width: 100%;height: 30px;background-color: seashell;text-align: center;
}.nav{margin: 0 auto;width: 100%;height: 40px;background-color: lightblue; font-size: 18px;text-indent: 2em;line-height: 2em; /*距離上邊線的距離*/text-align: justify;
}a{margin-right: 90px;/*超鏈接 相對于左右邊的距離的設置 */margin-left:100px;font-size: 18px; /* 文字大小的設置 */color:pink; /* 連接字體的顏色 */text-decoration: none; /*消除掉超鏈接下面的橫線*/
}/* 未訪問時的狀態 ,訪問過的狀態 */
a:link,a:visited{color: #333333;
} /* 鼠標經過連接上的狀態 */
a:hover{color: lightgoldenrodyellow;
}
/* 鼠標點擊連接的狀態 */
a:active{color: lightseagreen;
}
效果：
總結
以上是生活随笔為你收集整理的HTML+CSS一级导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
