標籤：style blog http color io ar 使用 for sp
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css導航</title>
</head>
<style>
#vertical
{
width:140px; 設定div容器的寬度
margin-left:auto; 組合使用能夠將div置中顯示在頁面中
margin-right:auto;
}
#horizontal
{
width:900px;
margin-left:auto;
margin-right:auto;
}
#horizontal li
{
float:left;
}
ul
{
list-style:none; 去除圓點
margin:0;
padding:0;
}
a:link,a:visited
{
display:block; 把連結顯示為塊元素可使整個連結地區可點擊（不僅僅是文本），同時也允許我們規定寬度。
font-weight:bold;
color:#FFF;
background-color:#CCC;
width:130px;
padding:5px;
text-align:center;
text-decoration:none; 超連結顯示文字沒有底線
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#CE1804;
}
</style>
<body>
<h1>垂直導航條</h1>
<div id="vertical">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONTEAT</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
<hr />
<h1>水平導航條</h1>
<div id="horizontal">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">CONTEAT</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</div>
</body>
</html>
***
div 寬預設是瀏覽器的100% 就是瀏覽器有多寬他就有多寬！
div 高預設是你設定字元的大小加上行高！
不輸入內容只顯示div背景色的情況下div最小的高是10px 就是你不能讓它的高為0px
***
css導航條
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
