一、垂直導覽列
ul{ list-style-type: none; margin: 0px; padding: 0px;} a:link,a:visited{ text-decoration: none; display: block; background-color: aqua; color: black; width: 50px; text-align: center;} a:active,a:hover{ background-color: crimson;}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>導覽列</title> <link href="style.css" type="text/css" rel="stylesheet"></head><body> <ul> <li><a href="#">導航1</a></li> <li><a href="#">導航2</a></li> <li><a href="#">導航3</a></li> <li><a href="#">導航4</a></li> </ul> </body></html>
二、水平導覽列
ul{ list-style-type: none; margin: 0px; padding: 0px; background-color: aqua; width: 250px; text-align: center;} a:link,a:visited{ font-weight: bold; text-decoration: none; background-color: aqua; color: black; width: 50px; text-align: center;} a:active,a:hover{ background-color: crimson;} li{ display: inline; padding-left: 5px; padding-right: 5px;}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
