CSS樣式表是制作網頁中不可缺少的元素之一。其中,制作導航欄也是網頁設計的常見要素。下面就通過一個簡單的例子來展示如何使用CSS樣式表制作導航欄。
<nav> <ul> <li><a href="#">首頁</a></li> <li><a href="#">產品中心</a></li> <li><a href="#">關于我們</a></li> <li><a href="#">聯系我們</a></li> </ul> </nav>
這是一個最基本的導航欄的HTML結構,其中的a標簽可以通過CSS樣式來修改顏色、字體、背景等。
nav ul { list-style: none; /*去掉ul前面的圓點*/ margin: 0; padding: 0; background-color: #f2f2f2; display: table; /*將ul設為表格*/ width: 100%; } nav li { display: table-cell; /*將li設為表格的單元格*/ text-align: center; /*使文本垂直居中*/ vertical-align: middle; } nav a { display: block; /*將a設為塊級元素*/ padding: 10px 15px; color: #404040; text-decoration: none; } nav a:hover { color: #fff; background-color: #ff7f00; }
這是CSS樣式表部分的代碼,通過設置ul、li、a的display屬性來實現導航欄的布局。如需修改字體大小、顏色等屬性,可在對應的屬性后添加相應的值。
這就是使用CSS樣式表制作導航欄的簡單例子。通過不同的樣式設置,還可實現更加吸引人的導航欄效果。