css實現無圖片三角形垂直導航條
效果如下：
前臺程式碼：
<div id="Men">
<a href ="addnewbooks.aspx" target="_blank"><span class="left"></span>增加新書<span class="right"></span></a>
<a href ="fengxingbookManager.aspx" target="_blank"><span class="left"></span>更新書庫<span class="right"></span></a>
<a href ="fengxingbookManager.aspx" target="_blank"><span class="left"></span>網頁動態<span class="right"></span></a>
<a href ="dynamicManager.aspx" target="_blank"><span class="left"></span>促銷管理<span class="right"></span></a>
<a href ="fengxingbookManager.aspx" target="_blank"><span class="left"></span>特價管理<span class="right"></span></a>
<a href ="Managerbooks.aspx" target="_blank"><span class="left"></span>書籍瀏覽<span class="right"></span></a>
</div>
css：
#Men
{
margin: auto;
font-family: 華文行楷;
font-size: 20px;
width: 135px;
padding: 3px;
background-color: #ccc;
border: 1px solid #ccc;
height: 170px;
}
#Men a,#Men a:visited
{
border-left: 8px solid #9ab;
border-right: 8px solid #9ab;
border-bottom: 4px solid #9ab;
display: block;
background-color: #fff;
color: #c00;
text-decoration : none;
position: relative; /*設定為相對定位*/;
width: 120px;
height : 30px; /*設定的列高必須大於span邊框的列高*/;
text-align: center;
top: 0px;
left: 0px;
}
#Men a span
{
display: block; /**/
position: absolute; /*相對於a標記絕對定位 */
width:0px;
height: 0px; /* 設定內容為0 只留下邊框*/
border: 8px solid #fff; /*定義邊框為8個畫素 顏色和背景顏色相同*/
top:0px;
overflow: hidden;
}
#Men a span.left
{
border-left-color: #c00; /*顯示左邊框*/
left: 8px;
}
#Men a span.right
{
border-right-color: #c00;
right :8px; /*顯示有邊框*/
}
#Men a:hover
{
border-right-style: solid;
border-left-style: solid;
border-right-width: 8px;
border-left-width: 8px;
border-right-color: #808080;
border-left-color: #808080; /* 滑鼠經過連線時的樣式*/
}