HTML5提供了許多新的特性,其中之一是設(shè)置水平導(dǎo)航。水平導(dǎo)航菜單是網(wǎng)站中常用的一種導(dǎo)航方式,讓用戶可以輕松地找到需要的信息。
使用ul和li標(biāo)簽可以創(chuàng)建一個(gè)基本的水平導(dǎo)航菜單,其中a標(biāo)簽用于鏈接到其他頁面。
下面是一個(gè)基本的CSS代碼,可以調(diào)整導(dǎo)航菜單的樣式:
nav { display: block; background-color: #333; overflow: hidden; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { float: left; } nav ul li a { display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; } nav ul li a:hover { background-color: #111; }
使用CSS中的float屬性可以將li元素排成一行,使其呈現(xiàn)水平排列的效果。通過設(shè)置padding屬性可以調(diào)整菜單項(xiàng)的大小,如上例中設(shè)置為14像素的上下填充和16像素的左右填充。
通過設(shè)置hover偽類可以調(diào)整鏈接的顏色和背景,在用戶懸停在菜單項(xiàng)上時(shí)實(shí)現(xiàn)視覺上的變化。
值得注意的是,這只是一個(gè)基本的水平導(dǎo)航菜單。可以通過進(jìn)一步調(diào)整CSS和使用JavaScript等其他技術(shù)來實(shí)現(xiàn)更復(fù)雜的導(dǎo)航菜單。
上一篇登陸表的css