一、豎嚮導航
<!DOCTYPE html><html><head><meta charset="utf-8"><style>ul{list-style-type:none;margin:0;padding:0;}a{display:block;background-color:green;color:white;width:80px;text-align:center;padding:4px;text-decoration:none;}a:hover,a:active{background-color:#98bf21;}</style></head><body><ul><li><a herf="">首頁</a></li><li><a herf="">學習中心</a></li><li><a herf="">考試中心</a></li><li><a herf="">考試動態</a></li></ul></body></html>
運行結果：
二、橫嚮導航：
<!DOCTYPE html><html><head><meta charset="utf-8"><style>ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}li{float:left;}a{display:block;background-color:pink;color:white;width:80px;text-align:center;padding:4px 0px;text-decoration:none;}a:hover,a:active{background-color:gray;}</style></head><body><ul><li><a herf="">首頁</a></li><li><a herf="">學習中心</a></li><li><a herf="">考試中心</a></li><li><a herf="">考試動態</a></li></ul></body></html>
運行結果：
注意：
1、a標籤的display=block讓連結是一個可點擊的地區而不是文本。
2、a連結指定為block塊元素之後可以設定寬度，讓每個連結的寬度看起來一樣。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
