CSS創建導航條

2024-04-27 15:11:05

字體：大中小

來源：轉載

供稿：網友

1. 垂直導航條

web效果

這里寫圖片描述

代碼

<html><head><title>創建導航條</title><style>ul { list-style-type:none;}li { margin-bottom:11px; border:1px solid #B8B8B8; width:120px;}a:link, a:visited{ display: block; font-weight:bold; background-color:#D9D9D9; color:black; padding:5px; text-align:center; text-decoration:none;}a:hover, a:active{ background-color:#F17022;}</style></head><body><ul> <li><a href="#">主頁</a></li> <li><a href="#">博客</a></li> <li><a href="#">音樂</a></li> <li><a href="#">電影</a></li> <li><a href="#">關于</a></li></ul></body></html>

2. 水平導航條

web效果

這里寫圖片描述

代碼

<html><head><title>創建導航條</title><style>ul { list-style-type:none;}/*設置li元素的float屬性為 left ，使得所有項目浮動*/li { float:left; margin-bottom:11px; border:1px solid #B8B8B8; width:120px;}a:link, a:visited{ display: block; font-weight:bold; background-color:#D9D9D9; color:black; padding:5px; text-align:center; text-decoration:none;}a:hover, a:active{ background-color:#F17022;}</style></head><body><ul> <li><a href="#">主頁</a></li> <li><a href="#">博客</a></li> <li><a href="#">音樂</a></li> <li><a href="#">電影</a></li> <li><a href="#">關于</a></li></ul></body></html>

上一篇：css trasition-duration transition-property屬性

下一篇：正則表達是解析HTML元素的代碼記錄